Preparatory work for update StaffLdb API Response

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

@@ -0,0 +1,133 @@
+<script lang="ts">
+  export let station = '';
+  export let title = 'Loading...';
+  import { onMount } from 'svelte';
+  import AlertBar from '$lib/ldb/nrcc/alert-bar.svelte';
+  import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
+  import Loading from '$lib/navigation/loading.svelte';
+  import { uuid } from '$lib/stores/uuid';
+  import Island from '$lib/islands/island.svelte';
+  import TableGeneratorDev from './table/table-generator_dev.svelte';
+
+  import type { StaffLdb, NrccMessage, TrainServices, ApiResponse } from '@owlboard/ts-types';
+
+  let jsonData: ApiResponse<StaffLdb>;
+  let isLoading = true;
+  let isErr = false;
+  let errMsg: string;
+  let alerts: NrccMessage[];
+  let detail = { show: false, rid: '', uid: '', headcode: '' };
+
+  $: {
+    if (isLoading) {
+      title = "Loading..."
+    } else {
+      title = station
+    }
+  }
+
+  async function fetchData() {
+    isLoading = true; // Set loading state
+    try {
+      console.log(`Requested Station: ${requestedStation}`);
+      const url = `https://owlboard.info/api/v2/live/station/${requestedStation}/staff`;
+      const opt = {
+        method: 'GET',
+        headers: {
+          uuid: $uuid
+        }
+      };
+      const data = await fetch(url, opt);
+      const json = await data.json();
+      if (json.ERROR === 'NOT_FOUND') {
+        isErr = true;
+        errMsg = 'Unable to find this station';
+      } else {
+        jsonData = json;
+      }
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      isLoading = false;
+      isErr = true;
+      errMsg = 'Connection error, try again later';
+    } finally {
+      isLoading = false; // Clear loading state
+    }
+  }
+
+  function showDetail(rid = '', uid = '', tid = '') {
+    detail = {
+      rid: rid,
+      uid: uid,
+      headcode: tid,
+      show: true
+    };
+  }
+
+  function hideDetails() {
+    detail = {
+      rid: '',
+      uid: '',
+      headcode: '',
+      show: false
+    };
+  }
+</script>
+
+{#key detail}
+  {#if detail.show}
+    <StaffTrainDetail {detail} close={hideDetails} />
+  {/if}
+{/key}
+
+{#if isLoading}
+  <Loading />
+{:else if isErr}
+  <Island>
+    <p><strong>{errMsg}</strong></p>
+  </Island>
+{:else}
+  {#if alerts.length}
+    <AlertBar {alerts} />
+  {/if}
+  <p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
+  {#if trainServices && trainServices.length}
+    <TableGenerator services={trainServices} click={showDetail} />
+  {:else}
+    <p id="noservices">There are no scheduled train services in the next two hours</p>
+  {/if}
+  {#if busServices && busServices.length}
+    <img class="transport-mode-image" src="/images/transport-modes/bus.svg" alt="" />
+    <br />
+    <span class="transport-mode-text">Bus Services</span>
+    <TableGenerator services={busServices} click={showDetail} />
+  {/if}
+  {#if ferryServices && ferryServices.length}
+    <img class="transport-mode-image" src="/images/transport-modes/ferry.svg" alt="" />
+    <br />
+    <span class="transport-mode-text">Ferry Services</span>
+    <TableGenerator services={ferryServices} click={showDetail} />
+  {/if}
+{/if}
+
+<style>
+  p.dataTime {
+    margin-top: 5px;
+    margin-bottom: 0px;
+    font-size: 12px;
+  }
+  #noservices {
+    margin: 20px;
+    padding-top: 20px;
+    color: white;
+  }
+
+  .transport-mode-image {
+    width: 30px;
+    margin: auto;
+    padding-top: 25px;
+  }
+  .transport-mode-text {
+    color: white;
+  }
+</style>

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

@@ -2,8 +2,7 @@
   import Reason from '$lib/raw-fetchers/reason.svelte';
   import { tocs as tocMap } from '$lib/stores/tocMap';
 
-  import type { StaffLdb, NrccMessage, TrainServices,
+  import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
-  ServiceLocation } from '@owlboard/ts-types';
 
   export let services;
   export let click;