kennethnym/eva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dashboard): format tube line labels

Browse Source
This commit is contained in:
Kenneth
2025-10-25 01:09:32 +00:00
parent 3be59981ed
commit 189a6c4401
1 changed files with 4 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/dashboard/src/App.tsx
View File

@@ -1,7 +1,7 @@
import { useQuery } from "@tanstack/react-query" import { useQuery } from "@tanstack/react-query"
import { Fragment, useEffect, useState } from "react" import { Fragment, useEffect, useState } from "react"
import cn from "./components/lib/cn" import cn from "./components/lib/cn"
import { StatusSeverity, getLineColor, getStatusBorderColor, tflDisruptionsQuery } from "./tfl" import { StatusSeverity, formatLineName, getLineColor, getStatusBorderColor, tflDisruptionsQuery } from "./tfl"
import { import {
DEFAULT_LATITUDE, DEFAULT_LATITUDE,
DEFAULT_LONGITUDE, DEFAULT_LONGITUDE,
@@ -254,18 +254,12 @@ function TFLTile() {
className="gap-x-1 col-start-3 h-full row-start-1 col-span-2 row-span-1 grid grid-cols-[min-content_1fr] auto-rows-min overflow-y-auto" className="gap-x-1 col-start-3 h-full row-start-1 col-span-2 row-span-1 grid grid-cols-[min-content_1fr] auto-rows-min overflow-y-auto"
> >
{tflData.goodService.includes("Northern") && ( {tflData.goodService.includes("Northern") && (
<TFLDistruptionItem <TFLDistruptionItem lineId="northern" reason="Good service" severity={StatusSeverity.GoodService} />
lineId="northern"
lineName="Northern"
reason="Good service"
severity={StatusSeverity.GoodService}
/>
)} )}
{tflData.disruptions.map((disruption) => ( {tflData.disruptions.map((disruption) => (
<Fragment key={disruption.lineId}> <Fragment key={disruption.lineId}>
<TFLDistruptionItem <TFLDistruptionItem
lineId={disruption.lineId} lineId={disruption.lineId}
lineName={disruption.lineName}
reason={disruption.reason ?? "Unknown reason"} reason={disruption.reason ?? "Unknown reason"}
severity={disruption.statusSeverity} severity={disruption.statusSeverity}
/> />
@@ -276,12 +270,8 @@ function TFLTile() {
) )
} }
function TFLDistruptionItem({ function TFLDistruptionItem({ lineId, reason, severity }: { lineId: string; reason: string; severity: number }) {
lineId, const lineName = formatLineName(lineId)
lineName,
reason,
severity,
}: { lineId: string; lineName: string; reason: string; severity: number }) {
return ( return (
<> <>
<div className="h-full flex items-center justify-center px-2 py-0.5"> <div className="h-full flex items-center justify-center px-2 py-0.5">