owlboard-svelte/src/routes/train/+page.svelte

<script>
    import Header from '$lib/navigation/header.svelte'
    import Nav from '$lib/navigation/nav.svelte'
    
    import { onMount } from 'svelte'

    let title = "Timetable Results"
    let id = ""
    let data = [];

    async function getHeadcode() {
        return new URLSearchParams(window.location.search).get('headcode');
    }

    onMount(async () => {
        id = await getHeadcode() || "";
        data = await fetchData(id);
    })

    async function fetchData(id = "") {
        const date = 'now';
        const searchType = 'headcode'
        const url = `https://owlboard.info/api/v2/timetable/train/${date}/${searchType}/${id}`
        const res = await fetch(url);
        return await res.json();
    } 

</script>
 
<svelte:head>
   <title>OwlBoard {title}</title>
</svelte:head>

<Header {title} />
 
<p>{id.toUpperCase()}</p> <!-- NOT REACTIVE YET -->

{#each data as service}
  <h2>{service.stops[0]['publicDeparture']} {service.stops[0]['tiploc']} to {service.stops[service['stops'].length -1]['tiploc']}</h2>
  <p>PIS: {service.pis}</p>
  {#each service.stops as stop}
    <p>{stop.tiploc}</p>
  {/each}
{/each}

<p id="data_raw"></p>
 
<Nav />