From 6e6e655a1977e831abc2a7c089b2f61db46a3e3c Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Sat, 17 Jun 2023 15:12:30 +0100
Subject: [PATCH] Public-LDB Nearly complete

---
 src/lib/ldb/public-ldb.svelte | 195 ++++++++++++++++++++++++----------
 1 file changed, 139 insertions(+), 56 deletions(-)

diff --git a/src/lib/ldb/public-ldb.svelte b/src/lib/ldb/public-ldb.svelte
index ca81a9e..d01a71b 100644
--- a/src/lib/ldb/public-ldb.svelte
+++ b/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}`);
-    const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
-    jsonData = await data.json();
+    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,58 +85,82 @@
   });
 </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>
-    <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}
+  <table>
     <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>
+      <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>
-    <!-- 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.-->
-    <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>
--->
+    {#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">{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']}
+            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}
+      </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 {
-    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>