public-ldb is nearing completion

src/lib/ldb/public-ldb.svelte

@@ -7,16 +7,21 @@
 
   let jsonData = null;
   let services = [];
+  let dataAge = "";
 
   $: {
     if (jsonData === null && requestedStation) {
       fetchData();
     }
 
-      if (jsonData?.GetStationBoardResult?.trainServices?.service ?? []) {
+    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 = ["No train services available"];
+      services = [];
     }
   }
 
@@ -33,39 +38,78 @@
   });
 </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>From</th>
-        <th>To</th>
-        <th>Plat.</th>
-        <th>Sch Arr.</th>
-        <th>Exp Arr.</th>
-        <th>Sch Dep.</th>
-        <th>Exp Dep.</th>
+    <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>{service.origin?.location?.locationName || ''}</td>
-        <td>{service.destination?.location?.locationName || ''}</td>
-        <td>{service.platform || '-'}</td>
+      <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>