From c5201326a128264f9754fcdbcb80135b6e14ef44 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Wed, 30 Aug 2023 19:09:02 +0100
Subject: [PATCH] Remove original table-generator and staff-ldb components

---
 src/lib/ldb/staff/staff-ldb-dev.svelte        | 135 ------
 src/lib/ldb/staff/staff-ldb.svelte            | 217 +---------
 .../ldb/staff/table/table-generator.svelte    | 404 +++++-------------
 .../staff/table/table-generator_dev.svelte    | 313 --------------
 4 files changed, 117 insertions(+), 952 deletions(-)
 delete mode 100644 src/lib/ldb/staff/staff-ldb-dev.svelte
 delete mode 100644 src/lib/ldb/staff/table/table-generator_dev.svelte

diff --git a/src/lib/ldb/staff/staff-ldb-dev.svelte b/src/lib/ldb/staff/staff-ldb-dev.svelte
deleted file mode 100644
index 2ac0ee8..0000000
--- a/src/lib/ldb/staff/staff-ldb-dev.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<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';
-
-  const TableGenerator = TableGeneratorDev;
-
-  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>
diff --git a/src/lib/ldb/staff/staff-ldb.svelte b/src/lib/ldb/staff/staff-ldb.svelte
index 2ddda0f..a584d68 100644
--- a/src/lib/ldb/staff/staff-ldb.svelte
+++ b/src/lib/ldb/staff/staff-ldb.svelte
@@ -1,220 +1,5 @@
-<script>
-  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 TableGenerator from './table/table-generator.svelte';
+<script lang="ts">
 
-  let requestedStation = '';
-  $: requestedStation = station;
-
-  let jsonData = {};
-  /**
-   * @type {string | any[]}
-   */
-  let trainServices = [];
-  /**
-   * @type {string | any[]}
-   */
-  let busServices = [];
-  /**
-   * @type {string | any[]}
-   */
-  let ferryServices = [];
-  let dataAge = new Date(0);
-  let isLoading = true;
-  let isErr = false;
-  let errMsg = '';
-  let alerts = [''];
-  let detail = { show: false, rid: '', uid: '', headcode: '' };
-
-  $: {
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.generatedAt) {
-      // @ts-ignore
-      dataAge = new Date(jsonData.GetBoardResult.generatedAt);
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.trainServices?.service) {
-      // @ts-ignore
-      trainServices = ensureArray((trainServices = jsonData.GetBoardResult.trainServices.service));
-    } else {
-      trainServices = [];
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.busServices?.service) {
-      // @ts-ignore
-      busServices = ensureArray((busServices = jsonData.GetBoardResult.busServices.service));
-    } else {
-      busServices = [];
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.ferryServices?.service) {
-      // @ts-ignore
-      ensureArray((ferryServices = jsonData.GetBoardResult.ferryServices.service));
-    } else {
-      ferryServices = [];
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.locationName) {
-      // @ts-ignore
-      title = jsonData.GetBoardResult.locationName;
-    } else {
-      title = 'Loading Board';
-    }
-
-    // @ts-ignore
-    if (jsonData?.GetBoardResult?.nrccMessages) {
-      // @ts-ignore
-      alerts = processNrcc(jsonData.GetBoardResult?.nrccMessages?.message);
-    } else {
-      alerts = [];
-    }
-  }
-
-  /**
-   * @param {any} item
-   */
-  function ensureArray(item) {
-    if (Array.isArray(item)) {
-      return item;
-    }
-    return [item];
-  }
-
-  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
-    }
-  }
-
-  /**
-   * @param {any} messages
-   */
-  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;
-  }
-
-  function showDetail(rid = '', uid = '', tid = '') {
-    detail = {
-      rid: rid,
-      uid: uid,
-      headcode: tid,
-      show: true
-    };
-  }
-
-  function hideDetails() {
-    detail = {
-      rid: '',
-      uid: '',
-      headcode: '',
-      show: false
-    };
-  }
-
-  onMount(() => {
-    fetchData();
-  });
 </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>
diff --git a/src/lib/ldb/staff/table/table-generator.svelte b/src/lib/ldb/staff/table/table-generator.svelte
index f60df89..a6c3cc7 100644
--- a/src/lib/ldb/staff/table/table-generator.svelte
+++ b/src/lib/ldb/staff/table/table-generator.svelte
@@ -1,155 +1,90 @@
-<script>
+<script lang="ts">
   import Reason from '$lib/raw-fetchers/reason.svelte';
   import { tocs as tocMap } from '$lib/stores/tocMap';
 
-  export let services;
-  export let click;
+  import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
 
-  async function generateServiceData(service) {
-    const timeDetails = parseTimes(service);
-    let serviceData = {
-      from: await parseLocation(service.origin),
-      to: await parseLocation(service.destination),
-      length: await getTrainLength(service),
-      platform: await parsePlatform(service?.platform || 'undefined'),
-      platformHidden: service?.platformIsHidden === 'true',
-      schArr: timeDetails.schArr,
-      expArr: timeDetails.expArr,
-      schDep: timeDetails.schDep,
-      expDep: timeDetails.expDep,
-      isEarlyArr: timeDetails.earArr,
-      isLateArr: timeDetails.delArr,
-      isEarlyDep: timeDetails.earDep,
-      isLateDep: timeDetails.delDep,
-      isCancelled: Boolean(service?.isCancelled),
-      canArr: timeDetails.canArr,
-      canDep: timeDetails.canDep,
-      isDelayed: service?.arrivalType === 'Delayed',
-      isArrDelayed: service?.arrivalType === 'Delayed',
-      isDepDelayed: service?.departureType === 'Delayed',
-      isNonPublic: service?.isPassengerService === 'false' ? true : false
-    };
-    return serviceData;
-  }
+  export let services: TrainServices[];
+  export let click: any; // Not sure of the type here!
 
-  async function getTrainLength(service) {
-    if (service?.length) {
-      return parseInt(service?.length);
-    } else if (service?.formation?.coaches) {
-      return service.formation.coaches.coach.length;
-    }
-    return null;
-  }
-
-  async function parseLocation(location) {
-    if (!Array.isArray(location.location)) {
-      return location.location?.tiploc;
-    }
-    let locations = [];
-    for (const singleLocation of location?.location) {
-      locations.push(singleLocation?.tiploc);
-    }
-    return locations.join(' & ');
-  }
-
-  function parseTimes(service) {
-    let schArr = new Date(service?.sta);
-    let expArr = new Date(service?.eta || service?.ata);
-    let schDep = new Date(service?.std);
-    let expDep = new Date(service?.etd || service?.atd);
-    let isEarlyArr = false,
-      isDelayedArr = false,
-      isArr = false,
-      canArr = false;
-    let isEarlyDep = false,
-      isDelayedDep = false,
-      isDep = false,
-      canDep = false;
-    const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
-    if (expArr - schArr < -timeDifferenceThreshold) {
-      isEarlyArr = true;
-      isArr = true;
-    } else if (expArr - schArr > timeDifferenceThreshold) {
-      isDelayedArr = true;
-      isArr = true;
-    }
-
-    if (expDep - schDep < -timeDifferenceThreshold) {
-      isEarlyDep = true;
-      isDep = true;
-    } else if (expDep - schDep > timeDifferenceThreshold) {
-      isDelayedDep = true;
-      isDep = true;
-    }
-    let parsedExpArr;
-    if (expArr instanceof Date && !isNaN(expArr)) {
-      if (!isEarlyArr && !isDelayedArr) {
-        parsedExpArr = 'RT';
-      } else {
-        parsedExpArr = parseIndividualTime(expArr);
-      }
-    } else if (service.isCancelled === 'true') {
-      parsedExpArr = 'CANC';
-      canArr = true;
-    } else {
-      parsedExpArr = '-';
-    }
-
-    let parsedExpDep;
-    if (expDep instanceof Date && !isNaN(expDep)) {
-      if (!isEarlyDep && !isDelayedDep) {
-        parsedExpDep = 'RT';
-      } else {
-        parsedExpDep = parseIndividualTime(expDep);
-      }
-    } else if (service.isCancelled === 'true') {
-      parsedExpDep = 'CANC';
-      canDep = true;
-    } else {
-      parsedExpDep = '-';
-    }
-    return {
-      schArr: parseIndividualTime(schArr),
-      expArr: parsedExpArr,
-      schDep: parseIndividualTime(schDep),
-      expDep: parsedExpDep,
-      earArr: isEarlyArr,
-      delArr: isDelayedArr,
-      earDep: isEarlyDep,
-      delDep: isDelayedDep,
-      canArr: canArr,
-      canDep: canDep
-    };
-  }
-
-  function parseIndividualTime(input) {
-    const dt = new Date(input);
-    const output = dt.toLocaleTimeString([], {
-      hour: '2-digit',
-      minute: '2-digit'
-    });
-    if (output !== 'Invalid Date') {
-      return output;
-    }
-    return '-';
-  }
-
-  async function parsePlatform(platform) {
-    if (!platform) {
-      return '-';
-    }
-    if (platform === 'TBC' || platform == 'undefined') {
-      return '-';
-    }
-    return {
-      number: platform
-    };
-  }
-
-  function detail(event, rid, uid, tid) {
+  function detail(event: any, rid: string, uid: string, tid: string) {
     const target = event.target;
     click(rid, uid, tid);
   }
+
+  async function formatLocations(locations: ServiceLocation[]): Promise<string> {
+    let tiplocs: string[] = [];
+    for (const location of locations) {
+      tiplocs.push(location.tiploc);
+    }
+    return tiplocs.join(' & ');
+  }
+
+  async function classGenerator(service: TrainServices) {
+    let otherArr: string[] = [];
+    let arrArr: string[] = [];
+    let depArr: string[] = [];
+    let platArr: string[] = [];
+
+    if (service.isCancelled) {
+      otherArr.push('canc');
+    }
+    if (service.serviceIsSupressed) {
+      otherArr.push('nonPass');
+    }
+    if (service.platformIsHidden) {
+      platArr.push('nonPass');
+    }
+
+    if (service.sta !== undefined) {
+      if (service.eta !== undefined) {
+        if (service.sta < service.eta) {
+          arrArr.push('late');
+        }
+      } else if (service.ata !== undefined) {
+        if (service.sta < service.ata) {
+          arrArr.push('late');
+        }
+      }
+      if (service.eta !== undefined) {
+        if (service.sta > service.eta) {
+          arrArr.push('early');
+        }
+      } else if (service.ata !== undefined) {
+        if (service.sta > service.ata) {
+          arrArr.push('early');
+        }
+      }
+    }
+
+    if (service.std !== undefined) {
+      if (service.etd !== undefined) {
+        if (service.std < service.etd) {
+          depArr.push('late');
+        }
+      } else if (service.atd !== undefined) {
+        if (service.std < service.atd) {
+          depArr.push('late');
+        }
+      }
+      if (service.etd !== undefined) {
+        if (service.std > service.etd) {
+          depArr.push('early');
+        }
+      } else if (service.atd !== undefined) {
+        if (service.std > service.atd) {
+          depArr.push('early');
+        }
+      }
+    }
+
+    return {
+      other: otherArr.join(' '),
+      arr: arrArr.join(' '),
+      dep: depArr.join(' '),
+      plat: platArr.join(' ')
+    };
+  }
 </script>
 
 <p class="smallScreen">Your display is too small to view this data</p>
@@ -170,51 +105,43 @@
     <th class="timepair" colspan="2">Departure</th>
   </tr>
   {#each services as service}
-    {#await generateServiceData(service)}
-      <tr><td colspan="8">Loading Service Data...</td></tr>
-    {:then serviceData}
-      <tr
-        class="dataRow"
-        on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
-        on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
-      >
-        <td class="id">{service.trainid}</td>
-        <td class="from {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.from}</td>
-        <td class="to {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.to}</td>
-        <td class="plat {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'} {serviceData.platformHidden && 'nonPass'}"
-          >{serviceData.platform.number || '-'}</td
-        >
-        <td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schArr}</td>
-        <td
-          class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateArr && 'late'} {serviceData.isArrDelayed && 'late'} {serviceData.isCancelled &&
-            'canc'} {serviceData.isEarlyArr && 'early'}">{serviceData.isArrDelayed ? 'LATE' : serviceData.expArr}</td
-        >
-        <td class="time schTime {serviceData.isNonPublic && 'nonPass'} {serviceData.isCancelled && 'cancTxt'}">{serviceData.schDep}</td>
-        <td
-          class="time {serviceData.isNonPublic && 'nonPass'} {serviceData.isLateDep && 'late'} {serviceData.isDepDelayed && 'late'}
-                 {serviceData.isCancelled && 'canc'} {serviceData.isEarlyDep && 'early'}">{serviceData.isDepDelayed ? 'LATE' : serviceData.expDep}</td
-        >
-      </tr>
-      <tr>
-        <td class="tableTxt" colspan="8">
-          {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
-          {#if service.isCharter}charter{/if}
-          {#if serviceData.length} | {serviceData.length} carriages{/if}
-          {#if service.delayReason}
-            <br />
-            <Reason type={'delay'} code={service.delayReason} />
-          {/if}
-          {#if service.cancelReason}
-            <br />
-            <Reason type={'cancel'} code={service.cancelReason} />
-          {/if}
-        </td>
-      </tr>
-    {:catch}
-      <tr>
-        <td colspan="8">Unable to display service</td>
-      </tr>
-    {/await}
+    <tr
+      class="dataRow"
+      on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
+      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 txt}{txt}{/await}</td>
+        <td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/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 -->
+      {/await}
+    </tr>
+    <tr>
+      <td class="tableTxt" colspan="8">
+        {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
+        {#if service.length} | {service.length} carriages{/if}
+        {#if service.delayReason}
+          <br />
+          <Reason type={'delay'} code={service.delayReason} />
+        {/if}
+        {#if service.cancelReason}
+          <br />
+          <Reason type={'cancel'} code={service.cancelReason} />
+        {/if}
+      </td>
+    </tr>
+    <tr>
+      <td colspan="8">Unable to display service</td>
+    </tr>
   {/each}
 </table>
 
@@ -383,103 +310,4 @@
       color: rgb(136, 164, 255);
     }
   }
-
-  /* CARRIED OVER FROM OLD COMPONENT:
-  
-    #timestamp {
-    color: var(--second-text-color);
-  }
-
-  .transport-mode {
-    width: 30px;
-    margin: auto;
-  }
-
-  .dataTable {
-    color: white;
-    font-weight: normal;
-    width: 100%;
-    margin: 0px, 0px;
-    padding-left: 8px;
-    padding-right: 8px;
-  }
-
-  .id {
-    width: 12%;
-  }
-
-  .from {
-    width: 20%;
-  }
-
-  .to {
-    width: 20%;
-  }
-
-  .plat {
-    width: 8%;
-  }
-
-  .timePair {
-    width: 20%;
-  }
-
-  .time {
-    width: 10%;
-  }
-
-  .data {
-    font-weight: normal;
-  }
-
-  .id-data {
-    color: lightgray;
-    text-align: left;
-  }
-
-  .from-data,
-  .to-data {
-    color: yellow;
-    text-decoration: none;
-    text-align: left;
-  }
-
-  .text-row {
-    margin-top: 0px;
-    padding-bottom: 5px;
-    width: 100%;
-  }
-
-  .text-data {
-    text-align: left;
-    color: cyan;
-    font-size: smaller;
-  }
-
-  .can-dat {
-    color: grey;
-    text-decoration: line-through;
-  }
-
-  .hidden {
-    opacity: 0.5;
-  }
-
-  .ecs {
-    opacity: 0.75;
-  }
-
-  .can-time {
-    animation: pulse-cancel 1.5s linear infinite;
-  }
-
-  .early {
-    animation: pulse-early 1.5s linear infinite;
-  }
-
-  .late {
-    animation: pulse-late 1.5s linear infinite;
-  }
-
-  */
 </style>
diff --git a/src/lib/ldb/staff/table/table-generator_dev.svelte b/src/lib/ldb/staff/table/table-generator_dev.svelte
deleted file mode 100644
index a6c3cc7..0000000
--- a/src/lib/ldb/staff/table/table-generator_dev.svelte
+++ /dev/null
@@ -1,313 +0,0 @@
-<script lang="ts">
-  import Reason from '$lib/raw-fetchers/reason.svelte';
-  import { tocs as tocMap } from '$lib/stores/tocMap';
-
-  import type { TrainServices, ServiceLocation } from '@owlboard/ts-types';
-
-  export let services: TrainServices[];
-  export let click: any; // Not sure of the type here!
-
-  function detail(event: any, rid: string, uid: string, tid: string) {
-    const target = event.target;
-    click(rid, uid, tid);
-  }
-
-  async function formatLocations(locations: ServiceLocation[]): Promise<string> {
-    let tiplocs: string[] = [];
-    for (const location of locations) {
-      tiplocs.push(location.tiploc);
-    }
-    return tiplocs.join(' & ');
-  }
-
-  async function classGenerator(service: TrainServices) {
-    let otherArr: string[] = [];
-    let arrArr: string[] = [];
-    let depArr: string[] = [];
-    let platArr: string[] = [];
-
-    if (service.isCancelled) {
-      otherArr.push('canc');
-    }
-    if (service.serviceIsSupressed) {
-      otherArr.push('nonPass');
-    }
-    if (service.platformIsHidden) {
-      platArr.push('nonPass');
-    }
-
-    if (service.sta !== undefined) {
-      if (service.eta !== undefined) {
-        if (service.sta < service.eta) {
-          arrArr.push('late');
-        }
-      } else if (service.ata !== undefined) {
-        if (service.sta < service.ata) {
-          arrArr.push('late');
-        }
-      }
-      if (service.eta !== undefined) {
-        if (service.sta > service.eta) {
-          arrArr.push('early');
-        }
-      } else if (service.ata !== undefined) {
-        if (service.sta > service.ata) {
-          arrArr.push('early');
-        }
-      }
-    }
-
-    if (service.std !== undefined) {
-      if (service.etd !== undefined) {
-        if (service.std < service.etd) {
-          depArr.push('late');
-        }
-      } else if (service.atd !== undefined) {
-        if (service.std < service.atd) {
-          depArr.push('late');
-        }
-      }
-      if (service.etd !== undefined) {
-        if (service.std > service.etd) {
-          depArr.push('early');
-        }
-      } else if (service.atd !== undefined) {
-        if (service.std > service.atd) {
-          depArr.push('early');
-        }
-      }
-    }
-
-    return {
-      other: otherArr.join(' '),
-      arr: arrArr.join(' '),
-      dep: depArr.join(' '),
-      plat: platArr.join(' ')
-    };
-  }
-</script>
-
-<p class="smallScreen">Your display is too small to view this data</p>
-<table>
-  <tr>
-    <th class="id">ID</th>
-    <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>
-  </tr>
-  <tr>
-    <th class="other" colspan="4" />
-    <th class="timepair" colspan="2">Arrival</th>
-    <th class="timepair" colspan="2">Departure</th>
-  </tr>
-  {#each services as service}
-    <tr
-      class="dataRow"
-      on:click={(event) => detail(event, service.rid, service.uid, service.trainid)}
-      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 txt}{txt}{/await}</td>
-        <td class="to {classes.other}">{#await formatLocations(service.destination) then txt}{txt}{/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 -->
-      {/await}
-    </tr>
-    <tr>
-      <td class="tableTxt" colspan="8">
-        {tocMap.get(service.operatorCode.toLowerCase()) || service.operatorCode}
-        {#if service.length} | {service.length} carriages{/if}
-        {#if service.delayReason}
-          <br />
-          <Reason type={'delay'} code={service.delayReason} />
-        {/if}
-        {#if service.cancelReason}
-          <br />
-          <Reason type={'cancel'} code={service.cancelReason} />
-        {/if}
-      </td>
-    </tr>
-    <tr>
-      <td colspan="8">Unable to display service</td>
-    </tr>
-  {/each}
-</table>
-
-<style>
-  table {
-    table-layout: fixed;
-    width: 100%;
-    max-width: 875px;
-    margin: auto;
-    padding: 0px;
-    color: white;
-  }
-
-  th {
-    font-size: 12px;
-    margin: 0px;
-  }
-
-  .dataRow {
-    font-family: ubuntu, monospace;
-    vertical-align: bottom;
-    cursor: pointer;
-    font-size: 16px;
-  }
-
-  /* Table Columns */
-  .id {
-    width: 8%;
-  }
-  .from {
-    width: 14%;
-  }
-  .to {
-    width: 14%;
-  }
-  .plat {
-    width: 6%;
-  }
-  .time {
-    width: 9%;
-  }
-
-  td.id {
-    color: lightblue;
-    text-align: left;
-    padding-left: 2px;
-  }
-  td.from,
-  td.to {
-    color: yellow;
-  }
-
-  td.to,
-  th.to {
-    text-align: right;
-  }
-  td.from,
-  th.from {
-    text-align: left;
-  }
-  td.time {
-    font-size: 15px;
-    vertical-align: middle;
-  }
-  .tableTxt {
-    text-align: left;
-    padding-left: 2px;
-    color: var(--second-text-color);
-    vertical-align: top;
-    font-size: 12px;
-  }
-
-  /* Handle small screens */
-  .smallScreen {
-    display: none;
-    margin: 20px;
-  }
-  @media screen and (max-width: 335px) {
-    th {
-      font-size: 10px;
-    }
-    .dataRow {
-      font-size: 12px;
-    }
-    td.time {
-      font-size: 12px;
-    }
-    .tableTxt {
-      font-size: 10px;
-    }
-  }
-  @media screen and (max-width: 279px) {
-    table {
-      display: none;
-    }
-    .smallScreen {
-      display: block;
-    }
-  }
-
-  /* Handle Large Screens */
-  @media screen and (min-width: 375px) {
-    .dataRow {
-      font-size: 18px;
-    }
-    td.time {
-      font-size: 16px;
-    }
-  }
-  @media screen and (min-width: 450px) {
-    .dataRow {
-      font-size: 20px;
-    }
-    td.time {
-      font-size: 19px;
-    }
-    .tableTxt {
-      font-size: 14px;
-    }
-    td.to,
-    td.from,
-    th.to,
-    th.from {
-      text-align: center;
-    }
-  }
-
-  /* Conditional Classes */
-  .cancTxt {
-    color: grey !important;
-    text-decoration: line-through;
-    opacity: 0.8;
-  }
-
-  .nonPass {
-    opacity: 0.6;
-  }
-
-  .late {
-    animation: pulse-late 1.5s linear infinite;
-  }
-
-  .canc {
-    animation: pulse-cancel 1.5s linear infinite;
-  }
-
-  .early {
-    animation: pulse-early 1.5s linear infinite;
-  }
-
-  /* Animation Definitions */
-  @keyframes pulse-late {
-    50% {
-      color: var(--main-warning-color);
-    }
-  }
-
-  @keyframes pulse-cancel {
-    50% {
-      color: var(--main-alert-color);
-    }
-  }
-
-  @keyframes pulse-early {
-    50% {
-      color: rgb(136, 164, 255);
-    }
-  }
-</style>