owlboard-svelte/src/lib/ldb/public-ldb.svelte

<script>
    export let station = "";
    import { onMount } from 'svelte'
  
    let requestedStation;
    $: requestedStation = station;
  
    let jsonData = null;
    let services = [];
  
    $: {
      if (jsonData === null && requestedStation) {
        fetchData();
      }
  
      if (jsonData?.GetStationBoardResult?.trainServices?.service ?? []) {
        services = [...jsonData.GetStationBoardResult.trainServices.service];
      } else {
        services = ["No train services available"];
      }
    }
  
    async function fetchData() {
      console.log(`Requested Station: ${requestedStation}`);
      const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
      jsonData = await data.json();
    }
  
    onMount(() => {
      if (requestedStation && jsonData === null) {
        fetchData();
      }
    });
  </script>
  
  

<p>{requestedStation.toUpperCase()}</p>

<p>
    {#each services as service}
        <span>{service.origin?.location?.locationName || 'Unknown'}</span>
    {/each}
</p>

<table>
    <tr>
        <th>From</th>
        <th>To</th>
        <th>Plat.</th>
        <th>Sch Arr.</th>
        <th>Exp Arr.</th>
        <th>Sch Dep.</th>
        <th>Exp Dep.</th>
    </tr>
    {#each services as service}
    <tr>
        <td>{service.origin?.location?.locationName || ''}</td>
        <td>{service.destination?.location?.locationName || ''}</td>
        <td>{service.platform || '-'}</td>
    </tr>
    {/each}
</table>

<style>
    table {
        width: 100%;
        margin: auto;
        color: white;
    }
</style>