@import url("/assets/md.css")draft: initial work

@import url("/assets/md.css")

1 files changed, 81 insertions, 1 deletions

diff --git a/src/routes/(app)/fahrplan/route/[id]/+page.svelte b/src/routes/(app)/fahrplan/route/[id]/+page.svelte
index 5bf03f4..01a35b3 100644
--- a/src/routes/(app)/fahrplan/route/[id]/+page.svelte
+++ b/src/routes/(app)/fahrplan/route/[id]/+page.svelte
@@ -1 +1,81 @@
-<script lang="ts"></script>
+<script lang="ts">
+  import Itinerary from '$lib/Itinerary.svelte';
+  import type { Itinerary as ItineraryType } from '$lib/motis-types';
+  import Page from '$lib/Page.svelte';
+  import { page } from '$app/state';
+  import { normalisePlaceName } from '$lib/aliases';
+  import Titlebar from '$lib/Titlebar.svelte';
+  import { S } from '$lib';
+
+  import _itinerary from './sampleData.json';
+  import Loader from '$lib/Loader.svelte';
+  import LineGlyph from '$lib/assets/LineGlyph.svelte';
+  let itinerary = $state(_itinerary as unknown as ItineraryType | null);
+
+  let fromName = $derived(
+    itinerary ? normalisePlaceName(itinerary.legs[0].from.name) : ''
+  );
+  let toName = $derived(
+    itinerary
+      ? normalisePlaceName(itinerary.legs[itinerary.legs.length - 1].to.name)
+      : ''
+  );
+  let routeShortName = $derived(itinerary?.legs?.[0]?.routeShortName);
+
+  let title = $derived(
+    itinerary
+      ? `${routeShortName ? `${routeShortName} from ` : ''}${fromName} to ${toName}`
+      : 'Route ' + page.params.id
+  );
+</script>
+
+<svelte:head>
+  <meta name="route:id" content={page.params.id} />
+</svelte:head>
+
+<Page title={`${title} - Fahrplan`} class="p-8">
+  <div class={S.window_content_fullscreen}>
+    <Titlebar>
+      <div class="w-full">
+        <!-- FIXME: I'm not sure I'm satisfied with the design of this part -->
+        <div
+          class="{S.title} rounded-xl w-full text-center flex items-center justify-between gap-2"
+        >
+          <LineGlyph
+            currentColor="#fff"
+            kind={routeShortName}
+            negative={false}
+            dark
+          />
+          <p class="inline cursor-default">
+            <span class="font-medium">
+              {fromName}
+            </span>
+            <span class="font-[450]"> to </span>
+            <span class="font-medium">
+              {toName}
+            </span>
+          </p>
+          <div class="opacity-0 pointer-events-none" aria-hidden="true">
+            <!-- make it properly centered -->
+            <LineGlyph
+              currentColor="#fff"
+              kind={routeShortName}
+              negative={false}
+              dark
+            />
+          </div>
+        </div>
+        <!-- <div
+          class="h-1 mt-2 -mb-3 bg-gradient-to-b from-[#111] to-[#1110]"
+        ></div> -->
+      </div>
+    </Titlebar>
+    <div class="w-full h-[2px] rounded-[2px] relative">
+      <Loader kind="hidden" />
+    </div>
+    <div class="p-3">
+      <Itinerary {itinerary} />
+    </div>
+  </div>
+</Page>