Update time formatting

src/lib/ldb/staff/fetch.ts

@@ -1,10 +1,38 @@
 // Fetches StaffLDB Data, correctly formats DATE fields and returns the data
 
-import { getApiUrl } from "$lib/scripts/upstream";
-import type { ApiResponse, StaffLdb } from "@owlboard/ts-types";
+import { getApiUrl } from '$lib/scripts/upstream';
+import { uuid } from '$lib/stores/uuid';
+import type { ApiResponse, StaffLdb } from '@owlboard/ts-types';
 
 // Fetch StaffLDB Data, and returns the data after hydration (convert date types etc.)
-export async function fetchStaffLdb(station: string, auth: string): Promise<ApiResponse<StaffLdb>> {
-    const url = `${getApiUrl()}//api/v2/live/station/${station}/staff`;
+export async function fetchStaffLdb(station: string): Promise<ApiResponse<StaffLdb>> {
+  const url = `${getApiUrl()}/api/v2/live/station/${station}/staff`;
 
-}
+  let uuid_value: string = '';
+  const unsubscribe = uuid.subscribe((value) => {
+    uuid_value = value;
+  });
+
+  const fetchOpts = {
+    method: 'GET',
+    headers: {
+      uuid: uuid_value
+    }
+  };
+  const res = await fetch(url, fetchOpts);
+  unsubscribe();
+  const resJs = await res.json();
+  return parseFormat(JSON.stringify(resJs));
+}
+
+function parseFormat(jsonString: any): ApiResponse<StaffLdb> {
+  return JSON.parse(jsonString, (key, value) => {
+    if (typeof value === 'string') {
+      const dateRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
+      if (dateRegex.test(value)) {
+        return new Date(value);
+      }
+    }
+    return value;
+  });
+}

src/lib/ldb/staff/staff-ldb.svelte

@@ -1,11 +1,10 @@
 <script lang="ts">
-  import { uuid } from '$lib/stores/uuid';
-  import { getApiUrl } from '$lib/scripts/upstream';
   import TableGenerator from './table/table-generator.svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import type { ApiResponse, StaffLdb } from '@owlboard/ts-types';
   import { detailInit, defineDetail } from './train-detail';
   import TrainDetail from './train-detail.svelte';
+  import { fetchStaffLdb } from './fetch';
 
   export let station: string;
   export let title: string | undefined = 'Loading...';
@@ -24,29 +23,13 @@
 
   console.log(`Station: ${station}`);
 
-  async function fetchStaffLdb(station: string) { // Move this function to ./fetch.ts and correctly handle the required date formatting
-    const url = `${getApiUrl()}/api/v2/live/station/${station}/staff`;
-    const options = {
-      method: 'GET',
-      headers: {
-        uuid: $uuid
-      }
-    };
-    const res = await fetch(url, options);
-    let jsonData: ApiResponse<StaffLdb>;
-    if (res.status === 200) {
-      jsonData = await res.json();
-      title = jsonData.data?.locationName || 'Not Found';
-      error.state = false;
-      return jsonData?.data;
-    } else if (res.status === 401) {
-      console.log(`Request Status: ${res.status}`);
-      title = 'Unauthorised';
-      error = {
-        state: true,
-        name: 'unauthorized'
-      };
+  async function callFetch(station: string): Promise<StaffLdb> {
+    const data = await fetchStaffLdb(station);
+    if (data.data) {
+      title = data.data.locationName;
+      return data.data;
     }
+    throw new Error('Unable to Fetch Data');
   }
 </script>
 
@@ -56,7 +39,7 @@
   {/if}
 {/key}
 
-{#await fetchStaffLdb(station)}
+{#await callFetch(station)}
   <!--<Loading />  Loading already appears, but I don't know where it is being imported from!!!-->
 {:then data}
   {#if data}

src/lib/ldb/staff/table/table-generator.svelte

@@ -17,14 +17,11 @@
     for (const location of locations) {
       tiplocs.push(location.tiploc);
     }
-    let location = tiplocs.join(' & ');
-    if (locations[0]['via']) {
-      location = `${location} ${locations[0]['via']}` // Maybe this should be converted to TIPLOC server-side?
-    }
-    return location
+    return tiplocs.join(' & ');
   }
 
-  async function classGenerator(service: TrainServices) { // This function needs updating next
+  async function classGenerator(service: TrainServices) {
+    // This function needs updating next
     let otherArr: string[] = [];
     let arrArr: string[] = [];
     let depArr: string[] = [];
@@ -89,6 +86,17 @@
       plat: platArr.join(' ')
     };
   }
+
+  function fmtTime(date: Date | string | undefined): string | false {
+    if (date === 'RT' || date === "CANC" || date === "LATE") return date;
+    if (date instanceof Date) {
+      const hours = date.getHours().toString().padStart(2, '0');
+      const minutes = date.getMinutes().toString().padStart(2, '0');
+      return `${hours}:${minutes}`;
+    } else {
+      return false;
+    }
+  }
 </script>
 
 <p class="smallScreen">Your display is too small to view this data</p>
@@ -99,10 +107,10 @@
     <th class="from">From</th>
     <th class="to">To</th>
     <th class="plat">Plat</th>
-    <th class="time">Sch</th>
-    <th class="time">Exp</th>
-    <th class="time">Sch</th>
-    <th class="time">Exp</th>
+    <th class="time arrsch">Sch</th>
+    <th class="time arrexp">Exp</th>
+    <th class="time depsch">Sch</th>
+    <th class="time depexp">Exp</th>
   </tr>
   <tr>
     <th class="other" colspan="4" />
@@ -116,37 +124,44 @@
       on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
     >
       {#await classGenerator(service) then classes}
-        <td class="id {classes.other}">{service.trainid}</td>
-        <td class="from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td>
-        <td class="to {classes.other}">{#await formatLocations(service.destination) then dest}{dest}{/await}</td>
-        <td class="plat">{service.platform || '-'}</td>
-        <td class="time schTime {classes.other}">{service?.sta || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
-        <td class="time {classes.other} {classes.arr}">{service.eta || service.ata || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
-        <td class="time schTime {classes.other}">{service.std || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
-        <td class="time {classes.other} {classes.dep}">{service.etd || service.atd || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
+        <!-- HEADCODE -->
+        <td class="id">{service.trainid}</td>
+        <!-- ORIGIN -->
+        <td class="loc from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td>
+        <!-- DESTINATION -->
+        <td class="loc to {classes.other}">{#await formatLocations(service.destination) then dest}<span class="locName">{dest}</span>{/await}</td>
+        <!-- PLATFORM -->
+        <td class="plat {classes.other} {classes.plat}">{service.platform || '-'}</td>
+        <!-- SCHEDULED ARR -->
+        <td class="time schTime {classes.other}">{fmtTime(service?.sta) || '-'}</td>
+        <!-- EXPECTED/ACTUAL ARR -->
+        <td class="time {classes.other} {classes.arr}">{fmtTime(service.eta) || fmtTime(service.ata) || '-'}</td>
+        <!-- SCHEDULED DEP -->
+        <td class="time schTime {classes.other}">{fmtTime(service.std) || '-'}</td>
+        <!-- EXPECTED/ACTUAL DEP -->
+        <td class="time {classes.other} {classes.dep}">{fmtTime(service.etd) || fmtTime(service.atd) || '-'}</td>
       {/await}
     </tr>
     <tr>
-      <td class="tableTxt" colspan="8">
+      <td colspan="1" />
+      <td class="tableTxt" colspan="7">
+        {#if service.destination?.[0] && service.destination[0].via}<span class="via">{service.destination[0].via}</span><br />{/if}
         {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
         {#if service.length} | {service.length} carriages{/if}
         {#if service.delayReason}
           <br />
-          <Reason type={'delay'} code={service.delayReason} />
+          <span class="delayTxt">
+            <Reason type={'delay'} code={service.delayReason} />
+          </span>
         {/if}
         {#if service.cancelReason}
           <br />
-          <Reason type={'cancel'} code={service.cancelReason} />
+          <span class="cancTxt">
+            <Reason type={'cancel'} code={service.cancelReason} />
+          </span>
         {/if}
       </td>
     </tr>
-    <tr>
-      <td colspan="8">Unable to display service</td>
-    </tr>
   {/each}
 </table>
 
@@ -167,9 +182,12 @@
 
   .dataRow {
     font-family: ubuntu, monospace;
-    vertical-align: bottom;
+    vertical-align: top;
     cursor: pointer;
     font-size: 16px;
+    line-height: 1;
+    padding: 0;
+    margin: 0;
   }
 
   /* Table Columns */
@@ -199,8 +217,7 @@
     color: yellow;
   }
 
-  td.to,
-  th.to {
+  td.to {
     text-align: right;
   }
   td.from,
@@ -209,7 +226,7 @@
   }
   td.time {
     font-size: 15px;
-    vertical-align: middle;
+    vertical-align: top;
   }
   .tableTxt {
     text-align: left;
@@ -217,8 +234,18 @@
     color: var(--second-text-color);
     vertical-align: top;
     font-size: 12px;
+    padding-bottom: 10px;
+  }
+  .delayTxt {
+    color: var(--main-warning-color);
+  }
+  .cancTxt {
+    color: var(--main-alert-color);
+  }
+  .via {
+    color: yellow;
+    padding-left: 0px;
   }
-
   /* Handle small screens */
   .smallScreen {
     display: none;
@@ -275,21 +302,22 @@
   }
 
   /* Conditional Classes */
-  .cancTxt {
-    color: grey !important;
+  .loc.canc,
+  .canc {
+    color: grey;
     text-decoration: line-through;
     opacity: 0.8;
   }
 
   .nonPass {
-    opacity: 0.6;
+    opacity: 0.4;
   }
 
   .late {
     animation: pulse-late 1.5s linear infinite;
   }
 
-  .canc {
+  .canc.time {
     animation: pulse-cancel 1.5s linear infinite;
   }