Further work on staff LDB

src/lib/ldb/staff-ldb.svelte

@@ -2,6 +2,7 @@
     export let station = "";
     export let title = "Loading...";
     import { onMount } from 'svelte'
+    import AlertBar from './alert-bar.svelte';
     import StaffTrainDetail from '$lib/ldb/staff-train-detail.svelte';
     import Loading from '$lib/navigation/loading.svelte';
 	  import Nav from '$lib/navigation/nav.svelte';
@@ -14,6 +15,7 @@
     let services = [];
     let dataAge = null;
     let isLoading = true;
+    let alerts = [];
   
     $: {
       if (jsonData?.GetBoardResult?.generatedAt) {
@@ -31,6 +33,10 @@
       } else {
         title = "Loading Board"
       }
+
+      if (jsonData?.GetBoardResult?.nrccMessages) {
+        alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message)
+      }
     }
   
     async function fetchData() {
@@ -65,16 +71,44 @@
       }
       return '-'
     }
+
+    async function getReasonCodeData(code) {
+      const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`
+      const res = await fetch(url);
+      const json = await res.json();
+      return json
+    }
+
+    async function generateServiceStats(service) {
+      return;
+    }
+
+    function processNrcc(messages) { // Remove newlines and then <p> tags from input and append to array
+      let arrMessages;
+      if (!Array.isArray(messages)) {
+        arrMessages = [messages];
+      } else {
+        arrMessages = messages;
+      }
+      let processedMessages = [];
+      for (const message of arrMessages) {
+        const msgText = message.xhtmlMessage
+        processedMessages.push(msgText.replace(/[\n\r]/g, '').replace(/<\/?p[^>]*>/g, ''));
+      }
+      return processedMessages;
+    }
   
     onMount(() => {
       fetchData();
     });
   </script>
-  <p>Staff Boards not yet implemented</p>
+  <p>Staff Boards not yet fully implemented</p>
   {#if isLoading}
     <Loading />
   {:else}
-    
+    {#if alerts.length}
+      <AlertBar {alerts} />
+    {/if}    
     <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
     <table>
       <tr>
@@ -88,25 +122,42 @@
         <th class="time">Exp Dep</th>
       </tr>
       {#each services as service}
-        <tr>
-          <th class="id id-data data">{service.trainid}</th>
-          <th class="from from-data data">{service.origin.location.tiploc}</th>
-          <th class="to to-data data">{service.destination.location.tiploc}</th>
-          <th class="plat plat-data data">{service.platform || '-'}</th>
-          <th class="time time-data data">{parseDateTime(service.sta)}</th>
-          <th class="time time-data data">{parseDateTime(service.ata || service.eta)}</th>
-          <th class="time time-data data">{parseDateTime(service.std)}</th>
-          {#if service.isCancelled}
-            <th class="time time-data data can-time">CAN</th>
-          {:else}
+        {#await generateServiceStats(service)}
+          <tr>
+            <td colspan="8">
+              Loading...
+            </td>
+          </tr>
+        {:then serviceStats} 
+          
+          <!-- Await a 'Generate Stats' function here which can evaluate the data and provide 
+             relevant BOOLs like isCancelled, isEarly, isLate, isNonPassenger and calculate train length
+             where 'length' is not provided but 'formation' is. -->
+          <tr>
+            <th class="id id-data data">{service.trainid}</th>
+            <th class="from from-data data">{service.origin.location.tiploc}</th>  <!-- From and To fields are arrays if more than one origin/destination is served -->
+            <th class="to to-data data">{service.destination.location.tiploc}</th>
+            <th class="plat plat-data data">{service.platform || '-'}</th>
+            <th class="time time-data data">{parseDateTime(service.sta)}</th>
+            <th class="time time-data data">{parseDateTime(service.ata || service.eta)}</th>
+            <th class="time time-data data">{parseDateTime(service.std)}</th>
             <th class="time time-data data">{parseDateTime(service.atd || service.etd)}</th>
-          {/if}
-        </tr>
-        <tr class="text-row">
-          <td colspan="8" class="text-data">
-            {service.operator}
-          </td>
-        </tr>
+          </tr>
+          <tr class="text-row">
+            <td colspan="8" class="text-data">
+              {service.operator} {#if service.length} - {service.length} carriages{/if}
+              <br>
+              {#if service.isCancelled}
+                {#await getReasonCodeData(service.cancelReason)}
+                  This train has been cancelled
+                {:then reasonCode}
+                  {reasonCode[0].cancReason}
+                  <br>
+                {/await}
+              {/if}
+            </td>
+          </tr>
+        {/await}
       {/each}
     </table>
   {/if}  
@@ -143,6 +194,7 @@
   .text-data {
     text-align: left;
     color: cyan;
+    font-size: smaller;
   }
 
 .can-time {