src/lib/ldb/staff/fetch.ts

@@ -0,0 +1,10 @@
+// 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";
+
+// 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`;
+
+}

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

@@ -1,16 +1,30 @@
 <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';
 
   export let station: string;
   export let title: string | undefined = 'Loading...';
   export let error = {
     state: false,
-    name: 'none',
+    name: 'none'
+  };
+
+  let detail = detailInit();
+  function hideDetail() {
+    detail = detailInit();
+  }
+  function showDetail(rid: string, uid: string, tid: string) {
+    detail = defineDetail(rid, uid, tid);
   }
 
-  async function fetchStaffLdb(station: string) {
+  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',
@@ -22,25 +36,47 @@
     let jsonData: ApiResponse<StaffLdb>;
     if (res.status === 200) {
       jsonData = await res.json();
-      title = jsonData.data?.locationName;
+      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',
+        name: 'unauthorized'
-      }
+      };
     }
   }
 </script>
 
+{#key detail}
+  {#if detail.show}
+    <TrainDetail {detail} close={hideDetail} />
+  {/if}
+{/key}
+
 {#await fetchStaffLdb(station)}
-  Loading
+  <!--<Loading />  Loading already appears, but I don't know where it is being imported from!!!-->
 {:then data}
-  Loaded {JSON.stringify(data)}
+  {#if data}
+    <p class="generatedTime">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
+    {#if data.trainServices?.length}
+      <TableGenerator services={data.trainServices} click={showDetail} />
+    {/if}
+    {#if data.busServices?.length}
+      <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br />
+      <span class="table-head-text">Bus Services</span>
+      <TableGenerator services={data.busServices} click={showDetail} />
+    {/if}
+    {#if data.ferryServices?.length}
+      <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Ferry services" /><br />
+      <span class="table-head-text">Ferry Services</span>
+      <TableGenerator services={data.ferryServices} click={showDetail} />
+    {/if}
+  {/if}
 {:catch}
-  Error Loading
+  Error Loading Data
 {/await}
 
 {#if error.state}

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

@@ -5,7 +5,7 @@
   import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
 
   export let services: TrainServices[];
-  export let click: any; // Not sure of the type here!
+  export let click: Function;
 
   function detail(event: any, rid: string, uid: string, tid: string) {
     const target = event.target;
@@ -17,10 +17,14 @@
     for (const location of locations) {
       tiplocs.push(location.tiploc);
     }
-    return tiplocs.join(' & ');
+    let location = tiplocs.join(' & ');
+    if (locations[0]['via']) {
+      location = `${location} ${locations[0]['via']}` // Maybe this should be converted to TIPLOC server-side?
+    }
+    return location
   }
 
-  async function classGenerator(service: TrainServices) {
+  async function classGenerator(service: TrainServices) { // This function needs updating next
     let otherArr: string[] = [];
     let arrArr: string[] = [];
     let depArr: string[] = [];
@@ -88,6 +92,7 @@
 </script>
 
 <p class="smallScreen">Your display is too small to view this data</p>
+<p class="smallScreen">Try rotating your device</p>
 <table>
   <tr>
     <th class="id">ID</th>
@@ -112,10 +117,10 @@
     >
       {#await classGenerator(service) then classes}
         <td class="id {classes.other}">{service.trainid}</td>
-        <td class="from {classes.other}">{#await formatLocations(service.origin) then txt}{txt}{/await}</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 txt}{txt}{/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>
+        <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 -->

src/lib/ldb/staff/train-detail.ts

@@ -0,0 +1,26 @@
+export interface Detail {
+  show: boolean;
+  headcode: string;
+  rid: string;
+  uid: string;
+}
+
+export function detailInit(): Detail {
+  const detail: Detail = {
+    show: false,
+    headcode: '',
+    rid: '',
+    uid: ''
+  };
+  return detail;
+}
+
+export function defineDetail(rid: string, uid: string, tid: string) {
+  const detail: Detail = {
+    rid: rid,
+    uid: uid,
+    headcode: tid,
+    show: true
+  };
+  return detail;
+}