improve board time handling

Author: derklaro

src/routes/departureboard/-components/BoardEntry.tsx

@@ -4,22 +4,23 @@ import { BoardPlatformInfo } from "@/routes/departureboard/-components/BoardPlat
 import { BoardTimeInfo } from "@/routes/departureboard/-components/BoardTimeInfo.tsx";
 import { BoardTrainInfo } from "@/routes/departureboard/-components/BoardTrainInfo.tsx";
 import { BoardViaInfo } from "@/routes/departureboard/-components/BoardViaInfo.tsx";
+import type { DateTime } from "luxon";
 import type { FC } from "react";
 
 type BoardEntryProps = {
   isFreight: boolean;
   entry: BoardEntryDto;
   currentPoint: PointInfoDto;
-  timeFormatter: (isoTime: string) => string;
+  timeParser: (isoTime: string) => DateTime;
 };
 
-export const BoardEntry: FC<BoardEntryProps> = ({ isFreight, entry, currentPoint, timeFormatter }) => {
+export const BoardEntry: FC<BoardEntryProps> = ({ isFreight, entry, currentPoint, timeParser }) => {
   return (
     <li className="even:bg-gray-100 overflow-hidden">
       <div className="p-4">
         <div className={"flex flex-col w-full"}>
           <div className="flex flex-row">
-            <BoardTimeInfo time={entry.scheduledTime} timeFormatter={timeFormatter} />
+            <BoardTimeInfo time={entry.scheduledTime} timeParser={timeParser} />
             <BoardTrainInfo isFreight={isFreight} via={entry.via} transport={entry.transport} />
             <BoardDestinationInfo currentPointName={currentPoint.name} via={entry.via} />
             <BoardPlatformInfo
@@ -28,11 +29,7 @@ export const BoardEntry: FC<BoardEntryProps> = ({ isFreight, entry, currentPoint
             />
           </div>
           <div className="flex flex-row items-center mt-1">
-            <BoardTimeInfo
-              time={entry.realtimeTime}
-              scheduledTime={entry.scheduledTime}
-              timeFormatter={timeFormatter}
-            />
+            <BoardTimeInfo time={entry.realtimeTime} scheduledTime={entry.scheduledTime} timeParser={timeParser} />
             <BoardViaInfo via={entry.via} />
           </div>
         </div>

src/routes/departureboard/-components/BoardEntryTable.tsx

@@ -48,12 +48,11 @@ export const BoardEntryTable: FC<BoardEntryTableProps> = ({
   }
 
   // formats the given iso date/time in the server timezone using the optionally provided format
-  const timeFormatter = (isoTime: string, format?: string) => {
+  const timeParser = (isoTime: string) => {
     const serverTz = server.timezoneId === "Z" ? "utc" : server.timezoneId;
     const givenDt = DateTime.fromISO(isoTime);
     const dtZoned = givenDt.setZone(serverTz);
-    const dt = dtZoned.isValid ? dtZoned : givenDt;
-    return dt.toFormat(format ?? "HH:mm");
+    return dtZoned.isValid ? dtZoned : givenDt;
   };
 
   return (
@@ -68,7 +67,7 @@ export const BoardEntryTable: FC<BoardEntryTableProps> = ({
           })
           .filter(train => !onlyPassengerTrains || !train.isFreight)
           .map(train => (
-            <BoardEntry key={train.entry.journeyId} {...train} currentPoint={point} timeFormatter={timeFormatter} />
+            <BoardEntry key={train.entry.journeyId} {...train} currentPoint={point} timeParser={timeParser} />
           ))}
       </ul>
     </div>

src/routes/departureboard/-components/BoardTimeInfo.tsx

@@ -1,28 +1,31 @@
 import { cn } from "@/lib/utils.ts";
 import type { ClassValue } from "clsx";
+import type { DateTime } from "luxon";
 import type { FC } from "react";
 
 type BoardTimeInfoProps = {
   time: string;
   scheduledTime?: string;
-  timeFormatter: (isoTime: string) => string;
+  timeParser: (isoTime: string) => DateTime;
 };
 
-export const BoardTimeInfo: FC<BoardTimeInfoProps> = ({ time, scheduledTime, timeFormatter }) => {
-  const timeFormatted = timeFormatter(time);
-  const scheduledTimeFormatted = scheduledTime && timeFormatter(scheduledTime);
-  const timeColorClass = getTimeColorClass(timeFormatted, scheduledTimeFormatted);
+export const BoardTimeInfo: FC<BoardTimeInfoProps> = ({ time, scheduledTime, timeParser }) => {
+  const dtTime = timeParser(time);
+  const dtScheduled = scheduledTime ? timeParser(scheduledTime) : undefined;
+  const timeColorClass = getTimeColorClass(dtTime, dtScheduled);
   return (
-    <span className={cn("text-5xl font-bold", scheduledTime && "font-semibold", timeColorClass)}>{timeFormatted}</span>
+    <span className={cn("text-5xl font-bold", scheduledTime && "font-semibold", timeColorClass)}>
+      {dtTime.toFormat("HH:mm")}
+    </span>
   );
 };
 
 /**
- *
- * @param time
- * @param scheduledTime
+ * Resolves the color to use for the given time information.
+ * @param time the time to get the color for.
+ * @param scheduledTime an optional scheduled time to compare against for color picking.
  */
-const getTimeColorClass = (time: string, scheduledTime?: string): ClassValue => {
+const getTimeColorClass = (time: DateTime, scheduledTime?: DateTime): ClassValue => {
   if (!scheduledTime) {
     // if no realtime information is available, print the time black
     return "text-black";