Public-LDB Nearly complete

src/lib/ldb/public-ldb.svelte

@@ -7,7 +7,8 @@
 
   let jsonData = null;
   let services = [];
-  let dataAge = "";
+  let dataAge = null;
+  let isLoading = true;
 
   $: {
     if (jsonData === null && requestedStation) {
@@ -15,20 +16,66 @@
     }
 
     if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
-      dataAge = [...jsonData.GetStationBoardResult.generatedAt];
+      dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
     }
 
     if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
-      services = [...jsonData.GetStationBoardResult.trainServices.service];
+      services = jsonData.GetStationBoardResult.trainServices.service;
     } else {
       services = [];
     }
   }
 
   async function fetchData() {
-    console.log(`Requested Station: ${requestedStation}`);
+    isLoading = true; // Set loading state
-    const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
+    try {
-    jsonData = await data.json();
+      console.log(`Requested Station: ${requestedStation}`);
+      const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
+      jsonData = await data.json();
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    } finally {
+      isLoading = false; // Clear loading state
+    }
+  }
+
+  function parseTime(string){
+    let output
+    let change
+    switch (string) {
+    case 'Delayed':
+      output = 'LATE'
+      change = "changed"
+      break
+    case 'Cancelled':
+      output = 'CANC'
+      change = "cancelled"
+      break
+    case 'On time':
+      output = 'RT'
+      change = ""
+      break
+    case '':
+      output = '-'
+      change = ""
+      break
+    case undefined:
+      output = '-'
+      change = ""
+      break
+    case 'No report':
+      output = '-'
+      change = ""
+      break
+    case 'undefined':
+      output = false
+      change = ""
+      break
+    default:
+      output = string
+      change = "changed"
+    }
+    return {data: output, changed: change}
   }
 
   onMount(() => {
@@ -38,58 +85,82 @@
   });
 </script>
 
-{#if dataAge}
+{#if isLoading}
-  <!-- dataAge needs parsing to be human-readable -->
+  <p id="timestamp">Loading...</p>
-  <p id="timestamp">Data From: {dataAge}</p>
+{:else}
-{/if}
+  <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
 
-<table>
+  <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>
+      <th class="from">From</th>
-      <td class="origdest to">{service.destination?.location?.locationName || ''}</td>
+      <th class="to">To</th>
-      <td class="plat">{service.platform || '-'}</td>
+      <th class="plat">Plat.</th>
-      <td class="time">{service.sta || '-'}</td>
+      <th class="time">Sch Arr.</th>
-      <td class="time">{service.eta || '-'}</td>
+      <th class="time">Exp Arr.</th>
-      <td class="time">{service.std || '-'}</td>
+      <th class="time">Sch Dep.</th>
-      <td class="time">{service.etd || '-'}</td>
+      <th class="time">Exp Dep.</th>
     </tr>
-    <!-- service-detail elements are currently contained within the 'From' column
+    {#each services as service}
-         It should be underneath the row.  I will need to look at the vanilla interface
+      <tr>
-         to establish what I did differently there. Or, I can insert a new row
+        <td class="origdest from">{service.origin?.location?.locationName || ''}</td>
-         with colspan="7" to add a row spanning all columns.-->
+        <td class="origdest to">{service.destination?.location?.locationName || ''}</td>
-    <p class="service-detail">
+        <td class="plat">{service.platform || '-'}</td>
-      A {service.operator || 'Unknown'} service
+        <td class="time">{parseTime(service.sta).data}</td>
-      {#if service['length']}
+        <td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
-        with {service['length'] || 'some'} coaches
+        <td class="time">{parseTime(service.std).data}</td>
-      {/if}
+        <td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</td>
-    </p>
+      </tr>
-    {#if service.delayReason}
+      <!-- service-detail elements are currently contained within the 'From' column
-      <p class="service-detail">{service.delayReason}</p>
+           It should be underneath the row.  I will need to look at the vanilla interface
-    {/if}
+           to establish what I did differently there. Or, I can insert a new row
-    {#if service.cancelReason}
+           with colspan="7" to add a row spanning all columns.-->
-      <p class="service-detail">{service.cancelReason}</p>
+      <tr><td colspan="7">
-    {/if}
+        <p class="service-detail">
-  {/each}
+          A {service.operator || 'Unknown'} service
-</table>
+          {#if service['length']}
-<!--
+            with {service['length'] || 'some'} coaches
-<p>{JSON.stringify(jsonData)}</p>
+          {/if}
--->
+        </p>
+        {#if service.delayReason}
+          <p class="service-detail">{service.delayReason}</p>
+        {/if}
+        {#if service.cancelReason}
+          <p class="service-detail">{service.cancelReason}</p>
+        {/if}
+      </td></tr>
+    {/each}
+  </table>
+{/if}
 <style>
+  #timestamp {
+    margin: auto;
+    text-align: left;
+  }
   table {
     width: 100%;
     margin: auto;
     color: white;
+    font-size: 13px;
   }
+  .service-detail {
+    color: cyan;
+    text-align: left;
+    font-size: 12px;
+    padding: 0;
+    margin: 0;
+  }
+@media (min-width: 800px) {
+    table {font-size: 15px;}
+    .service-detail {font-size: 14px;}
+}
+@media (min-width: 1000px) {
+    table {font-size: 17px;}
+    .service-detail{font-size: 16px;}
+}
+@media (min-width: 1600px) {
+    table {font-size: 19px;}
+    .service-detail {font-size: 18px;}
+}
   .origdest {
     color: yellow;
     text-align: left;
@@ -106,11 +177,23 @@
   .time {
     width: 10%;
   }
-  .service-detail {
+  .changed{
-    color: cyan;
+    animation: pulse-change 1.5s linear infinite;
-    text-align: left;
+}
-    font-size: 12px;
+
-    padding: 0;
+.cancelled {
-    margin: 0;
+    animation: pulse-cancel 1.5s linear infinite;
-  }
+}
+
+@keyframes pulse-change {
+    50% {
+        color: var(--main-warning-color);
+    }
+}
+
+@keyframes pulse-cancel {
+    50% {
+        color: var(--main-alert-color);
+    }
+}
 </style>