diff options
| -rw-r--r-- | src/lib/Itinerary.svelte | 36 | ||||
| -rw-r--r-- | src/lib/index.ts | 1 | ||||
| -rw-r--r-- | src/routes/(app)/fahrplan/route/[id]/+page.svelte | 82 |
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> |