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() {
+    isLoading = true; // Set loading state
+    try {
       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,10 +85,10 @@
   });
 </script>
 
-{#if dataAge}
-  <!-- dataAge needs parsing to be human-readable -->
-  <p id="timestamp">Data From: {dataAge}</p>
-{/if}
+{#if isLoading}
+  <p id="timestamp">Loading...</p>
+{:else}
+  <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
 
   <table>
     <tr>
@@ -58,15 +105,16 @@
         <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>
+        <td class="time">{parseTime(service.sta).data}</td>
+        <td class="time {parseTime(service.eta).changed}">{parseTime(service.eta).data}</td>
+        <td class="time">{parseTime(service.std).data}</td>
+        <td class="time {parseTime(service.etd).changed}">{parseTime(service.etd).data}</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. Or, I can insert a new row
            with colspan="7" to add a row spanning all columns.-->
+      <tr><td colspan="7">
         <p class="service-detail">
           A {service.operator || 'Unknown'} service
           {#if service['length']}
@@ -79,16 +127,39 @@
         {#if service.cancelReason}
           <p class="service-detail">{service.cancelReason}</p>
         {/if}
+      </td></tr>
     {/each}
   </table>
-<!--
-<p>{JSON.stringify(jsonData)}</p>
--->
+{/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;
@@ -106,11 +177,23 @@
   .time {
     width: 10%;
   }
-  .service-detail {
-    color: cyan;
-    text-align: left;
-    font-size: 12px;
-    padding: 0;
-    margin: 0;
+  .changed{
+    animation: pulse-change 1.5s linear infinite;
+}
+
+.cancelled {
+    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>