<script>
   import Menu from '../../components/header.svelte'
   import Footer from '../../components/footer.svelte'
   
   import {onMount} from 'svelte'

   const title = "Public Board"
   const page = "ldb"

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

    /**
	 * @type {any[]}
	 */
    let jsonData = [] // Extract train data from the object to pass to #each

    onMount(async () => {
        const station = await getHeadcode();
        document.getElementById('station').textContent = station;
        const data = await fetch(`https://owlboard.info/api/v1/ldb/${station}`);
        const jsonData = await data.json();
        //document.getElementById('data_raw').textContent = JSON.stringify(await data.json());
    })

</script>

<Menu {title} />

<p>Station: <span id="station"></span></p>
{#each jsonData as item}
<p>{item.GetStationBoardResult.trainServices.service.operator}</p>
{/each}


<Footer {page} />