From f41e377bc93f2b9583c8a916f676db360580f5a9 Mon Sep 17 00:00:00 2001
From: Claas <claas@claas.dev>
Date: Wed, 5 Jun 2024 14:34:14 +0200
Subject: [PATCH] Add station and line information

---
 src/routes/journey.tsx | 116 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 98 insertions(+), 18 deletions(-)

diff --git a/src/routes/journey.tsx b/src/routes/journey.tsx
index 9c42ea4..7598eac 100644
--- a/src/routes/journey.tsx
+++ b/src/routes/journey.tsx
@@ -5,10 +5,18 @@ import { For, type JSX } from "solid-js";
  * @param {Connection} connection
  * @returns {JSX.Element}
  */
-function Connection({ label, connections }: Connection): JSX.Element {
+function Connection({
+  label,
+  destination,
+  line,
+  connections,
+}: Connection): JSX.Element {
   return (
-    <div class="flex w-full  shrink-0 snap-x snap-mandatory snap-center flex-col-reverse overscroll-contain bg-light-primary/10 text-center">
-      <p>{label}</p>
+    <div class="flex w-full shrink-0 snap-x snap-mandatory snap-center flex-col-reverse overscroll-contain bg-light-primary/10 text-center">
+      <div class="flex h-36 flex-col-reverse justify-between">
+        <p>{label}</p>
+        <p>{destination}</p>
+      </div>
       <div class="flex snap-x snap-mandatory snap-always gap-4 overflow-x-auto overscroll-contain">
         <For each={connections}>{Connection}</For>
       </div>
@@ -18,37 +26,74 @@ function Connection({ label, connections }: Connection): JSX.Element {
 
 export default function Journey() {
   return (
-    <main class="row-span-2 flex snap-x snap-mandatory snap-always gap-4 overflow-x-auto overscroll-contain bg-light-primary/10 p-4">
+    <div class="row-span-2 flex w-full snap-x snap-mandatory snap-always gap-4 overflow-x-auto overscroll-contain bg-light-primary/10 p-4">
+      <p>Test</p>
       <For each={connections}>{Connection}</For>
-    </main>
+    </div>
   );
 }
 
+type Line = {
+  label: string;
+  headsign: string;
+};
 type Connection = {
   label: string;
+  destination: string;
+  line: Line;
   connections: Connection[];
 };
 
 const connections: Connection[] = [
   {
-    label: "Connection 1",
+    label: "Line/Train/Bus 1",
+    destination: "Destination 1",
+    line: {
+      label: "Line 1",
+      headsign: "Headsign 1",
+    },
     connections: [
       {
-        label: "Connection 1.1",
+        label: "Line/Train/Bus 1.1",
+        destination: "Destination 1",
+        line: {
+          label: "Line 1",
+          headsign: "Headsign 1",
+        },
         connections: [
           {
-            label: "Connection 1.1.1",
+            label: "Line/Train/Bus 1.1.1",
+            destination: "Destination 1.1",
+            line: {
+              label: "Line 1.1",
+              headsign: "Headsign 1.1",
+            },
             connections: [],
           },
           {
-            label: "Connection 1.1.2",
+            label: "Line/Train/Bus 1.1.2",
+            destination: "Destination 1.1.2",
+            line: {
+              label: "Line 1.1.2",
+              headsign: "Headsign 1.1.2",
+            },
             connections: [
               {
-                label: "Connection 1.1.2.1",
+                label: "Line/Train/Bus 1.1.2.1",
+                destination: "Destination 1.1.2",
+                line: {
+                  label: "Line 1.1.2",
+                  headsign: "Headsign 1.1.2",
+                },
                 connections: [],
               },
               {
-                label: "Connection 1.1.2.2",
+                label: "Line/Train/Bus 1.1.2.2",
+                destination: "Destination 1.1.2.2",
+                line: {
+                  label: "Line 1.1.2.2",
+                  headsign: "Headsign 1.1.2.2",
+                },
                 connections: [],
               },
             ],
@@ -56,33 +101,68 @@ const connections: Connection[] = [
         ],
       },
       {
-        label: "Connection 1.2",
+        label: "Line/Train/Bus 1.2",
+        destination: "Destination 1.2",
+        line: {
+          label: "Line 1.2",
+          headsign: "Headsign 1.2",
+        },
         connections: [],
       },
     ],
   },
   {
-    label: "Connection 2",
+    label: "Line/Train/Bus 2",
+    destination: "Destination 2",
+    line: {
+      label: "Line 2",
+      headsign: "Headsign 2",
+    },
     connections: [
       {
-        label: "Connection 2.1",
+        label: "Line/Train/Bus 2.1",
+        destination: "Destination 2.1",
+        line: {
+          label: "Line 2.1",
+          headsign: "Headsign 2.1",
+        },
         connections: [],
       },
       {
-        label: "Connection 2.2",
+        label: "Line/Train/Bus 2.2",
+        destination: "Destination 2.2",
+        line: {
+          label: "Line 2.2",
+          headsign: "Headsign 2.2",
+        },
         connections: [],
       },
     ],
   },
   {
-    label: "Connection 3",
+    label: "Line/Train/Bus 3",
+    destination: "Destination 3",
+    line: {
+      label: "Line 3",
+      headsign: "Headsign 3",
+    },
     connections: [
       {
-        label: "Connection 3.1",
+        label: "Line/Train/Bus 3.1",
+        destination: "Destination 3.1",
+        line: {
+          label: "Line 3.1",
+          headsign: "Headsign 3.1",
+        },
         connections: [],
       },
       {
-        label: "Connection 3.2",
+        label: "Line/Train/Bus 3.2",
+        destination: "Destination 3.2",
+        line: {
+          label: "Line 3.2",
+          headsign: "Headsign 3.2",
+        },
         connections: [],
       },
     ],
-- 
knotmirror 0.0.1