src/lib/Itinerary.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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>