From 88b8f7cdee05f1b9b2dee81a11f6868ec4e64b0e Mon Sep 17 00:00:00 2001 From: kenneth Date: Sun, 26 Oct 2025 15:46:07 +0000 Subject: [PATCH] fix(dashboard): improve tfl tile styling --- apps/dashboard/src/App.tsx | 110 +++++++++++++++++++++++++++++++++++-- apps/dashboard/src/tfl.ts | 62 --------------------- 2 files changed, 104 insertions(+), 68 deletions(-) diff --git a/apps/dashboard/src/App.tsx b/apps/dashboard/src/App.tsx index 107f477..5e4948b 100644 --- a/apps/dashboard/src/App.tsx +++ b/apps/dashboard/src/App.tsx @@ -219,6 +219,7 @@ function TFLTile() { select: (data) => { data.disruptions.sort((a, b) => { if (a.lineName.match(/northern/i)) return -1 + if (b.lineName.match(/northern/i)) return 1 return a.statusSeverity - b.statusSeverity }) return data @@ -258,16 +259,19 @@ 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" > {tflData.goodService.includes("Northern") && ( - + <> + +
+ )} - {tflData.disruptions.map((disruption) => ( + {tflData.disruptions.map((disruption, i) => ( -
+ {i < tflData.disruptions.length - 1 &&
} ))} @@ -276,14 +280,108 @@ function TFLTile() { function TFLDistruptionItem({ lineId, reason, severity }: { lineId: string; reason: string; severity: number }) { const lineName = formatLineName(lineId) + + console.log(lineId) + let lineStyleClass: string + switch (lineId) { + case "bakerloo": + lineStyleClass = "bg-amber-700" + break + case "central": + lineStyleClass = "bg-red-600" + break + case "circle": + lineStyleClass = "bg-yellow-400 text-neutral-900" + break + case "district": + lineStyleClass = "bg-green-600" + break + case "hammersmith-city": + lineStyleClass = "bg-pink-400" + break + case "jubilee": + lineStyleClass = "bg-slate-500" + break + case "metropolitan": + lineStyleClass = "bg-purple-800" + break + case "northern": + lineStyleClass = "bg-black" + break + case "piccadilly": + lineStyleClass = "bg-blue-900" + break + case "victoria": + lineStyleClass = "bg-sky-500" + break + case "waterloo-city": + lineStyleClass = "bg-teal-500" + break + case "london-overground": + lineStyleClass = "bg-orange-500" + break + case "dlr": + lineStyleClass = "bg-teal-600" + break + case "elizabeth": + lineStyleClass = "bg-purple-600" + break + case "tram": + lineStyleClass = "bg-green-500" + break + default: + lineStyleClass = "bg-gray-500" + break + } + + let statusBorderClass: string + switch (severity) { + case StatusSeverity.GoodService: + statusBorderClass = "border-green-500" + break + case StatusSeverity.MinorDelays: + statusBorderClass = "border-yellow-500" + break + case StatusSeverity.Suspended: + statusBorderClass = "border-red-600" + break + case StatusSeverity.PartSuspended: + statusBorderClass = "border-red-500" + break + case StatusSeverity.PlannedClosure: + statusBorderClass = "border-orange-600" + break + case StatusSeverity.PartClosure: + statusBorderClass = "border-yellow-500" + break + case StatusSeverity.SevereDelays: + statusBorderClass = "border-red-500" + break + case StatusSeverity.ReducedService: + statusBorderClass = "border-orange-500" + break + case StatusSeverity.BusService: + statusBorderClass = "border-blue-500" + break + case StatusSeverity.Information: + statusBorderClass = "border-blue-400" + break + case StatusSeverity.ServiceClosed: + statusBorderClass = "border-red-700" + break + default: + statusBorderClass = "border-gray-400" + break + } + return ( <>

{lineName} diff --git a/apps/dashboard/src/tfl.ts b/apps/dashboard/src/tfl.ts index 024829e..8b7bbef 100644 --- a/apps/dashboard/src/tfl.ts +++ b/apps/dashboard/src/tfl.ts @@ -111,68 +111,6 @@ export function formatLineName(lineId: string): string { return lineNames[lineId] || lineId } -// Map of tube lines to their official TfL colors (as Tailwind classes) -export function getLineColor(lineId: string): string { - const lineColors: Record = { - bakerloo: "bg-amber-700", - central: "bg-red-600", - circle: "bg-yellow-400", - district: "bg-green-600", - "hammersmith-city": "bg-pink-400", - jubilee: "bg-slate-500", - metropolitan: "bg-purple-800", - northern: "bg-black", - piccadilly: "bg-blue-900", - victoria: "bg-sky-500", - "waterloo-city": "bg-teal-500", - "london-overground": "bg-orange-500", - dlr: "bg-teal-600", - "elizabeth-line": "bg-purple-600", - tram: "bg-green-500", - } - return lineColors[lineId] || "bg-gray-500" -} - -// Map of status severity to border colors -export function getStatusBorderColor(severity: number): string { - const borderColors: Record = { - [StatusSeverity.SpecialService]: "border-gray-500", - [StatusSeverity.Closed]: "border-red-700", - [StatusSeverity.Suspended]: "border-red-600", - [StatusSeverity.PartSuspended]: "border-red-500", - [StatusSeverity.PlannedClosure]: "border-orange-600", - [StatusSeverity.PartClosure]: "border-yellow-500", - [StatusSeverity.SevereDelays]: "border-red-500", - [StatusSeverity.ReducedService]: "border-orange-500", - [StatusSeverity.BusService]: "border-blue-500", - [StatusSeverity.MinorDelays]: "border-yellow-500", - [StatusSeverity.GoodService]: "border-green-500", - [StatusSeverity.PartClosed]: "border-orange-600", - [StatusSeverity.ExitOnly]: "border-gray-600", - [StatusSeverity.NoStepFreeAccess]: "border-gray-500", - [StatusSeverity.ChangeOfFrequency]: "border-blue-400", - [StatusSeverity.Diverted]: "border-purple-500", - [StatusSeverity.NotRunning]: "border-red-600", - [StatusSeverity.IssuesReported]: "border-yellow-400", - [StatusSeverity.NoIssues]: "border-green-500", - [StatusSeverity.Information]: "border-blue-400", - [StatusSeverity.ServiceClosed]: "border-red-700", - } - return borderColors[severity] || "border-gray-400" -} - -// Helper function to check if there are any disruptions -export function hasDisruptions(data: DisruptionsResponse): boolean { - return data.disruptedLines > 0 -} - -// Helper function to get critical disruptions (severe or worse) -export function getCriticalDisruptions(data: DisruptionsResponse): DisruptionSummary[] { - return data.disruptions.filter((d) => d.statusSeverity <= 6) -} - -// TanStack Query Options - /** * Query options for fetching current TfL disruptions * Returns disruptions across Tube, Overground, DLR, Elizabeth Line, and Tram