[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_107":108,"_109":110},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","maltsev","name","estonia-departures","path","frontend/App.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":-5,"_58":59,"_60":61,"_62":34,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":-5,"_70":-5,"_71":-5,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/maltsev/estonia-departures/code/frontend/App.tsx","extension","id","dad2316e-0926-4beb-89a8-9bb7a9ba8bf6","App.tsx","fileId","e21f906e-9cb0-11f1-b640-1607ee4eb77e","parentId","b82b1064-e718-4e15-9cca-3b550b278df2","branchId","422aee85-73dc-4033-8e0e-b6b8762d792c","branchVersion",36,"latest",true,"createdAt",["D",1787242295906],"version",11,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type ReactNode, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Departure, Mode, Platform } from \"../shared/types.ts\";\nimport { DepartureRow } from \"./DepartureRow.tsx\";\nimport { clockTime, MODE_ICON, MODE_NAME, platformName, towardsLabel } from \"./format.ts\";\nimport { useBoard } from \"./useBoard.ts\";\n\n/** Keep a departure listed for a moment after its time passes. */\nconst GRACE_SEC = 60;\n\nconst MODE_ORDER: Mode[] = [\"bus\", \"trol\", \"tram\", \"train\", \"other\"];\n\ntype Grouping = \"time\" | \"platform\";\n\nexport function App() {\n const { board, error, refreshing, refresh, nowSec, ageSec } = useBoard();\n const [mode, setMode] = useState(\"all\");\n const [platform, setPlatform] = useState(\"all\");\n const [grouping, setGrouping] = useState(\"time\");\n\n // Fixed order, so the chips don't reshuffle when a poll happens to arrive\n // with a different mode first.\n const modes = useMemo(() => {\n const seen = new Set();\n for (const d of board?.departures ?? []) seen.add(d.mode);\n return MODE_ORDER.filter((m) => seen.has(m));\n }, [board]);\n\n const visible = useMemo(() => {\n return (board?.departures ?? []).filter((d) =>\n d.expectedSec - nowSec > -GRACE_SEC\n && (mode === \"all\" || d.mode === mode)\n && (platform === \"all\" || d.platformCode === platform)\n );\n }, [board, nowSec, mode, platform]);\n\n const platforms = board?.platforms ?? [];\n const byCode = useMemo(() => new Map(platforms.map((p) => [p.code, p])), [platforms]);\n\n /** Platforms that currently have service — the feed lists a few dormant ones. */\n const activePlatforms = useMemo(\n () => platforms.filter((p) => p.towards.length > 0),\n [platforms],\n );\n\n const groups = useMemo(\n () => groupDepartures(visible, grouping, activePlatforms),\n [visible, grouping, activePlatforms],\n );\n\n return (\n

Estonia

\n Tallinn · live departures\n

\n {board ? clockTime(nowSec) : \"--:--\"}\n

\n \n \n {error ? \"reconnecting\" : `updated ${Math.floor(ageSec)}s ago`}\n \n

\n\n

\n setMode(\"all\")}>All\n {modes.map((m) => (\n setMode(m)}>\n {MODE_ICON[m]} {MODE_NAME[m]}\n \n ))}\n \n setGrouping(grouping === \"platform\" ? \"time\" : \"platform\")}\n >\n By platform\n \n

\n\n {activePlatforms.length > 1 && (\n

\n setPlatform(\"all\")}>\n All platforms\n \n {activePlatforms.map((p) => (\n setPlatform(p.code)}\n title={`${p.code} ${towardsLabel(p, 6)}`}\n >\n {platformName(p, p.code)}\n \n ))}\n

\n )}\n\n {error && (\n

\n Couldn't reach the departures feed ({error}). Retrying automatically.\n

\n )}\n\n

\n {!board && !error &&

Loading departures…

}\n\n {board && visible.length === 0 && (\n

\n No departures scheduled right now.\n

\n )}\n\n {groups.map((group) => (\n

\n {group.title && (\n

\n {group.title}\n

\n )}\n

\n ))}\n

\n\n \n

\n );\n}\n\nfunction Chip(\n { active, onClick, title, children }: {\n active: boolean;\n onClick: () => void;\n title?: string;\n children: ReactNode;\n },\n) {\n return (\n \n {children}\n \n );\n}\n\nfunction groupDepartures(departures: Departure[], grouping: Grouping, platforms: Platform[]) {\n if (grouping === \"time\") {\n return departures.length ? [{ key: \"all\", title: null as string | null, departures }] : [];\n }\n return platforms\n .map((p) => ({\n key: p.code,\n title: [p.code, p.street, towardsLabel(p)].filter(Boolean).join(\" · \") as string | null,\n departures: departures.filter((d) => d.platformCode === p.code),\n }))\n .filter((g) => g.departures.length > 0);\n}\n","deleted",false,"label",[47,24],"frontend","a0957927-a898-4e38-89eb-05a24a9fdeee",["D",1787241762566],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Live departures from Estonia stop, Tallinn","imageUrl","userId","29ea2fe8-d740-430c-b39a-3a9433234677","pinnedFileId","fc107aba-9cb0-11f1-9bd0-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","80eb574a-7b58-4daa-8f08-50b653042052","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_106":102},"org",{"_9":10,"_99":100,"_101":102,"_58":59,"_103":104,"_105":44},"branch",{"_37":89,"_11":90,"_22":30,"_91":48,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":12,"_98":10},"isOwned",37,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Kirill","avatar","https://images.clerk.dev/oauth_github/img_2PCDuzOrv5ielaEcqlJHncS3HrV.jpeg","tier","free","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_140":141,"_142":143,"_144":145,"_146":44,"_147":44,"_148":44,"_149":34,"_150":-5,"_151":-7,"_152":-7,"_153":66,"_154":44,"_155":44,"_156":-5,"_157":44,"_158":44,"_159":44,"_160":-5},"ENV",{"_111":112,"_113":114,"_115":90,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]