chore: cleanup for hsl stuff mostly

Tietokilta · Jan 11, 2025 · 59ef947 · 59ef947
1 parent 944c6d8
commit 59ef947
Show file tree

Hide file tree

Showing 6 changed files with 195 additions and 278 deletions.
diff --git a/apps/web/src/components/infoscreen/hsl-schedule/index.tsx b/apps/web/src/components/infoscreen/hsl-schedule/index.tsx
@@ -1,72 +1,55 @@
-import type {
-  ArrivalAttribute,
-  RenderableStop,
-  StopType,
-} from "../types/hsl-helper-types.ts";
+import type { Stop, StopType } from "../types/hsl-helper-types.ts";
 
-export function HSLSchedule(props: {
-  result: RenderableStop;
-  className: string;
-}) {
-  const result = props.result;
-
-  const colorMetro = "#ca4000";
-  const colorTram = "#007e79";
-  const colorBus = "#007ac9";
-  const colorNull = "gray-900";
-
-  const getColor = (): string => {
-    if (result.type === "metro") {
-      return colorMetro;
-    } else if (result.type === "tram") {
-      return colorTram;
-    } else if (result.type === "bus") {
-      return colorBus;
-    }
-    return colorNull;
-  };
-
-  const className = `shadow-solid shadow-[var(--infonayttoHSLcolor)] text-l flex flex-col justify-between rounded-md border-2 border-[var(--infonayttoHSLcolor)] p-3 font-mono text-gray-900 md:flex-row md:items-center`;
+const getColor = (type: StopType): string => {
+  switch (type) {
+    case "metro":
+      return "#ca4000";
+    case "tram":
+      return "#007e79";
+    case "bus":
+      return "#007ac9";
+  }
+};
 
-  const stopName = (type: StopType) => {
-    if (type === "metro") {
+const stopName = (type: StopType) => {
+  switch (type) {
+    case "metro":
       return "Metro";
-    } else if (type === "tram") {
+    case "tram":
       return "Raide-Jokeri";
-    } else if (type === "bus") {
+    case "bus":
       return "Bussit";
-    }
-    return "Unknown";
-  };
+  }
+};
+interface HSLScheduleProps {
+  stop: Stop;
+  className: string;
+}
+
+export function HSLSchedule({ stop }: HSLScheduleProps) {
   return (
     <div
       className="size-full items-center gap-4"
-      style={{ "--infonayttoHSLcolor": getColor() } as React.CSSProperties}
+      style={
+        { "--infonayttoHSLcolor": getColor(stop.type) } as React.CSSProperties
+      }
     >
       <h1 className="flex h-12 w-full justify-center p-2 font-mono text-2xl font-bold text-[var(--infonayttoHSLcolor)]">
-        {stopName(result.type)}
+        {stopName(stop.type)}
       </h1>
       <ul className="space-y-4 font-bold">
-        {result.arrivals
-          /*These are here to prevent the async useEffect from including extraneous data here*/
-          .filter((arr) => arr.fullTime !== "NaN")
-          .sort(
-            (arr1: ArrivalAttribute, arr2: ArrivalAttribute) =>
-              arr1.realtimeArrival - arr2.realtimeArrival,
-          )
-          .slice(0, 10)
-          .map((arr) => (
-            <li
-              key={arr.route + arr.headSign + arr.fullTime}
-              className={`${className} grid grid-cols-[1fr_2fr_1fr] items-center`}
-            >
-              <div className="text-left text-2xl text-[var(--infonayttoHSLcolor)]">
-                {arr.route}
-              </div>
-              <div className="text-center text-xl">{arr.headSign}</div>
-              <div className="text-right text-2xl">{arr.fullTime}</div>
-            </li>
-          ))}
+        {stop.arrivals.map((arr) => (
+          <li
+            key={arr.route + arr.headSign + arr.fullTime}
+            className="shadow-solid flex flex-col items-center justify-between rounded-md border-2 border-[var(--infonayttoHSLcolor)] p-3 font-mono text-gray-900 shadow-[var(--infonayttoHSLcolor)] md:flex-row md:items-center"
+          >
+            <div className="text-left text-2xl text-[var(--infonayttoHSLcolor)]">
+              {arr.route}
+            </div>
+            <div className="text-center text-xl">{arr.headSign}</div>
+            <div className="text-right text-2xl">{arr.fullTime}</div>
+          </li>
+        ))}
       </ul>
     </div>
   );