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

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

3 files changed, 118 insertions, 1 deletions

diff --git a/src/lib/Itinerary.svelte b/src/lib/Itinerary.svelte
new file mode 100644
index 0000000..fb30d1b
--- /dev/null
+++ b/src/lib/Itinerary.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Itinerary } from '$lib/motis-types';
+  import { normalisePlaceName } from './aliases';
+  let { itinerary }: { itinerary: Itinerary | null } = $props();
+
+  let legs = $derived(itinerary?.legs);
+  let firstLeg = $derived(legs?.[0]);
+  let lastLeg = $derived(legs?.[legs.length - 1]);
+</script>
+
+<svelte:head>
+  {#if itinerary && legs && firstLeg && lastLeg}
+    <meta name="itinerary:start" content={`${itinerary.startTime}`} />
+    <meta name="itinerary:end" content={`${itinerary.endTime}`} />
+    <meta name="itinerary:duration" content={`${itinerary.duration}`} />
+    <meta name="itinerary:transfers" content={`${itinerary.transfers}`} />
+    <meta name="itinerary:from:id" content={`${firstLeg.from.stopId}`} />
+    <meta
+      name="itinerary:from:name"
+      content={`${normalisePlaceName(firstLeg.from.name)}`}
+    />
+    <meta name="itinerary:to:id" content={`${lastLeg.to.stopId}`} />
+    <meta
+      name="itinerary:to:name"
+      content={`${normalisePlaceName(lastLeg.to.name)}`}
+    />
+  {/if}
+</svelte:head>
+
+<div class="flex flex-col gap-2 max-w-[100%]">
+  {#each legs ?? [] as leg}
+    <div class="p-4 pr-3 sm:pr-4 md:p-6 md:pr-6 rounded-xl bg-[#28282C]">
+      {JSON.stringify(leg)}
+    </div>
+  {/each}
+</div>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index a961354..cc6c448 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -43,6 +43,7 @@ export const S = {
   },
   input:
     'transition-all bg-[#2E2E32] not-disabled:not-focus:not-active:hover:bg-[#dedede11] p-2 outline-2 outline-[#0000] not-disabled:focus:outline-[#4C82C999]' as const,
+  title: 'p-2 outline-2 outline-[#0000]' as const,
   heading: [
     //
     'text-2xl font-bold',
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>