public-ldb is nearing completion

src/lib/ldb/public-ldb.svelte

@@ -1,71 +1,115 @@
 <script>
-    export let station = "";
-    import { onMount } from 'svelte'
+  export let station = "";
+  import { onMount } from 'svelte'
 
-    let requestedStation;
-    $: requestedStation = station;
+  let requestedStation;
+  $: requestedStation = station;
 
-    let jsonData = null;
-    let services = [];
+  let jsonData = null;
+  let services = [];
+  let dataAge = "";
 
-    $: {
-      if (jsonData === null && requestedStation) {
-        fetchData();
-      }
-  
-      if (jsonData?.GetStationBoardResult?.trainServices?.service ?? []) {
-        services = [...jsonData.GetStationBoardResult.trainServices.service];
-      } else {
-        services = ["No train services available"];
-      }
+  $: {
+    if (jsonData === null && requestedStation) {
+      fetchData();
     }
 
-    async function fetchData() {
-      console.log(`Requested Station: ${requestedStation}`);
-      const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
-      jsonData = await data.json();
+    if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
+      dataAge = [...jsonData.GetStationBoardResult.generatedAt];
     }
 
-    onMount(() => {
-      if (requestedStation && jsonData === null) {
-        fetchData();
-      }
-    });
-  </script>
+    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>
 
-<p>{requestedStation.toUpperCase()}</p>
-
-<p>
-    {#each services as service}
-        <span>{service.origin?.location?.locationName || 'Unknown'}</span>
-    {/each}
-</p>
+{#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>
-        <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>
+      <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>
-    {#each services as service}
-    <tr>
-        <td>{service.origin?.location?.locationName || ''}</td>
-        <td>{service.destination?.location?.locationName || ''}</td>
-        <td>{service.platform || '-'}</td>
-    </tr>
-    {/each}
+    <!-- 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;
-    }
+  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>