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 = [];
  let dataAge = "";

  $: {
    if (jsonData === null && requestedStation) {
      fetchData();
    }

    if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
      dataAge = [...jsonData.GetStationBoardResult.generatedAt];
    }

    if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
      services = [...jsonData.GetStationBoardResult.trainServices.service];
    } else {
      services = [];
    }
  }

  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>

{#if dataAge}
  <!-- dataAge needs parsing to be human-readable -->
  <p id="timestamp">Data From: {dataAge}</p>
{/if}

<table>
  <tr>
    <th class="from">From</th>
    <th class="to">To</th>
    <th class="plat">Plat.</th>
    <th class="time">Sch Arr.</th>
    <th class="time">Exp Arr.</th>
    <th class="time">Sch Dep.</th>
    <th class="time">Exp Dep.</th>
  </tr>
  {#each services as service}
    <tr>
      <td class="origdest from">{service.origin?.location?.locationName || ''}</td>
      <td class="origdest to">{service.destination?.location?.locationName || ''}</td>
      <td class="plat">{service.platform || '-'}</td>
      <td class="time">{service.sta || '-'}</td>
      <td class="time">{service.eta || '-'}</td>
      <td class="time">{service.std || '-'}</td>
      <td class="time">{service.etd || '-'}</td>
    </tr>
    <!-- service-detail elements are currently contained within the 'From' column
         It should be underneath the row.  I will need to look at the vanilla interface
         to establish what I did differently there. -->
    <p class="service-detail">
      A {service.operator || 'Unknown'} service
      {#if service['length']}
        with {service['length'] || 'some'} coaches
      {/if}
    </p>
    {#if service.delayReason}
      <p class="service-detail">{service.delayReason}</p>
    {/if}
    {#if service.cancelReason}
      <p class="service-detail">{service.cancelReason}</p>
    {/if}
  {/each}
</table>
<!--
<p>{JSON.stringify(jsonData)}</p>
-->
<style>
  table {
    width: 100%;
    margin: auto;
    color: white;
  }
  .origdest {
    color: yellow;
    text-align: left;
  }
  .from {
    width: 25%;
  }
  .to {
    width: 25%;
  }
  .plat {
    width: 10%
  }
  .time {
    width: 10%;
  }
  .service-detail {
    color: cyan;
    text-align: left;
    font-size: 12px;
    padding: 0;
    margin: 0;
  }
</style>