From 5a6fe0f3f5ff8209c0d90be8fe31ad3fd8f553df Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Fri, 7 Jul 2023 21:59:06 +0100
Subject: [PATCH] Modulisation and additions to StaffLDB

---
 src/lib/islands/overlay-island.svelte    |   2 +-
 src/lib/ldb/staff-train-detail.svelte    | 142 -------------
 src/lib/ldb/staff/service-row.svelte     | 158 ++++++++++++++
 src/lib/ldb/{ => staff}/staff-ldb.svelte |  80 ++++----
 src/lib/ldb/staff/train-detail.svelte    | 251 +++++++++++++++++++++++
 src/lib/raw-fetchers/reason.svelte       |  50 +++++
 src/routes/ldb/+page.svelte              |   2 +-
 7 files changed, 505 insertions(+), 180 deletions(-)
 delete mode 100644 src/lib/ldb/staff-train-detail.svelte
 create mode 100644 src/lib/ldb/staff/service-row.svelte
 rename src/lib/ldb/{ => staff}/staff-ldb.svelte (79%)
 create mode 100644 src/lib/ldb/staff/train-detail.svelte
 create mode 100644 src/lib/raw-fetchers/reason.svelte

diff --git a/src/lib/islands/overlay-island.svelte b/src/lib/islands/overlay-island.svelte
index 971731c..c03b5d3 100644
--- a/src/lib/islands/overlay-island.svelte
+++ b/src/lib/islands/overlay-island.svelte
@@ -23,7 +23,7 @@
     transform: translateY(-50%) translateX(-50%);
     width: 85%;
     height: auto;
-    max-height: 75vh;
+    max-height: 85vh;
     overflow-y: auto;
     max-width: 400px;
     margin: auto;
diff --git a/src/lib/ldb/staff-train-detail.svelte b/src/lib/ldb/staff-train-detail.svelte
deleted file mode 100644
index 4267eee..0000000
--- a/src/lib/ldb/staff-train-detail.svelte
+++ /dev/null
@@ -1,142 +0,0 @@
-<script>
-    import OverlayIsland from "$lib/islands/overlay-island.svelte";
-    import Loading from "$lib/navigation/loading.svelte";
-    import { uuid } from "$lib/stores/uuid";
-    export let detail = {
-        uid: '',
-        rid: '',
-        headcode: '',
-        show: true,
-    };
-    export let close;
-
-    function handleClick() {
-        close();
-    }
-
-    async function getTrain(rid) {
-    try {
-      console.log(`Requested Station: ${rid}`);
-      const url = `https://owlboard.info/api/v2/live/train/rid/${rid}`;
-      const opt = {
-        method: 'GET',
-        headers: {
-          uuid: $uuid
-        }
-      };
-      const data = await fetch(url, opt);
-      return await data.json();
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
-  }
-
-  async function parseDelay(location) {
-    let string, state;
-    if (location?.lateness) {
-        try {
-          const result = Math.floor(location.lateness / 60)
-          if (result === 0) {string = "RT", state = ''}
-          else if (result < 0) {string = -result + 'E', state = "early"}
-          else if (result > 0) {string = result + 'L', state = "late"};
-        } catch {
-            string = '-', state = '';
-        }
-    } else if (location.arrivalType === "Delayed") {
-        string = "LATE", state = "late";
-    }
-    return {
-        string: string,
-        state: state
-    };
-  }
-</script>
-
-<OverlayIsland>
-    <div id="detailBox">
-      {#await getTrain(detail.rid)}
-        <h6>{detail.headcode}</h6>
-        <Loading />
-      {:then train}
-        <h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
-        <p>Locations in grey are not scheduled stops
-            <br>
-           Some stops may be operational stops, not passenger stops.
-        </p>
-      <button type="button" id="closeService" on:click={handleClick}>X</button>
-        <table id="detailTable">
-            <tr>
-                <th>Location</th>
-                <th>Plat.</th>
-                <th>Sch Arr</th>
-                <th>Sch Dep</th>
-                <th>Delay</th>
-            </tr>
-            {#each train.GetServiceDetailsResult.locations.location as location}
-              <tr>
-                <td class="{location?.isPass === 'true' ? 'pass' : ''}">{location.tiploc}</td>
-                <td class="{location?.isPass === 'true' ? 'pass' : ''}">{location.platform || ''}</td>
-                <td class="{location?.isPass === 'true' ? 'pass' : ''}">AR</td>
-                <td class="{location?.isPass === 'true' ? 'pass' : ''}">DP</td>
-                {#await parseDelay(location)}
-                    <td>-</td>
-                {:then delay} 
-                    <td class="{delay.state}">{delay.string}</td>
-                {/await}
-              </tr>
-            {/each}
-        </table>
-        {:catch}
-        <h6>Error loading data</h6>
-        {/await}
-      </div>
-</OverlayIsland>
-
-<style>
-    #detailBox {
-    width: 100%;
-    min-height: 100px;
-    overflow-x: hidden;
-    overflow-y: auto;
-  }
-  h6 {
-    position: absolute;
-    top: -25px;
-    left: 20px;
-    font-size: 18px;
-  }
-  p {
-    margin-top: 45px;
-  }
-  #closeService {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    border: none;
-    border-radius: 60px;
-    width: 35px;
-    height: 35px;
-    background-color: var(--main-bg-color);
-    color: white;
-    font-weight: 700;
-    font-size: 16px;
-  }
-  #detailTable {
-    width: 100%;
-    margin-top: 40px;
-    color: white;
-    font-size: 15px;
-  }
-  .thisStop {
-    color: yellow;
-  }
-  .pass {
-    opacity: 0.45
-  }
-  .early {
-    color: blue;
-  }
-  .late {
-    color: red;
-  }
-</style>
\ No newline at end of file
diff --git a/src/lib/ldb/staff/service-row.svelte b/src/lib/ldb/staff/service-row.svelte
new file mode 100644
index 0000000..aa1c4c8
--- /dev/null
+++ b/src/lib/ldb/staff/service-row.svelte
@@ -0,0 +1,158 @@
+<script>
+    export let service;
+
+    import Reason from "$lib/raw-fetchers/reason.svelte";
+
+    function parseTimes(service) {
+    const sta = new Date(service.sta),
+      eta = new Date(service.eta),
+      ata = new Date(service.ata);
+    const std = new Date(service.std),
+      etd = new Date(service.etd),
+      atd = new Date(service.atd);
+    let parsedSta = parseTime(sta),
+      parsedEta = parseTime(eta),
+      parsedAta = parseTime(ata);
+    let parsedStd = parseTime(std),
+      parsedEtd = parseTime(etd),
+      parsedAtd = parseTime(atd);
+    if (service.isCancelled) {
+      (parsedEta = 'CANC'), (parsedEtd = 'CANC');
+    }
+    let times = {
+      sta: parsedSta || '-',
+      eata: parsedEta || parsedAta || '-',
+      aEst: parsedEta ? 'estimate' : '',
+      std: parsedStd || '-',
+      eatd: parsedEtd || parsedAtd || '-',
+      dEst: parsedEtd ? 'estimate' : ''
+    };
+    if (service.isCancelled) {
+      (parsedEta = 'CANC'), (parsedEtd = 'CANC');
+      (times.aEst = 'canc'), (times.dEst = 'canc');
+    }
+    return times;
+  }
+
+  async function generateServiceData(service) {
+    const timeDetails = await 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,
+      isCancelledDep: false,
+      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;
+  }
+
+  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(' & ');
+  }
+
+  async function parsePlatform(platform) {
+    if (!platform) {
+      return '-';
+    }
+    if (platform === 'TBC' || platform == 'undefined') {
+      return '-';
+    }
+    return {
+      number: platform
+    };
+  }
+
+  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 '-';
+  }
+</script>
+
+{#await generateServiceData(service)}
+        <tr>
+          <td colspan="8"> Loading... </td>
+        </tr>
+      {:then serviceStats}
+        <tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
+          <td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}
+            >{service.trainid}</td
+          >
+          <td
+            class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
+            on:click={showDetails(service.rid, service.uid, service.trainid)}
+            on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td
+          >
+          <td
+            class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
+            on:click={showDetails(service.rid, service.uid, service.trainid)}
+            on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td
+          >
+          <td class="plat plat-data data {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
+          <td class="time time-data data">{serviceStats.schArr}</td>
+          <td
+            class="time time-data data {serviceStats.canArr && 'can-time'} {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr &&
+              'late'}">{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
+          >
+          <td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
+          <td
+            class="time time-data data {serviceStats.canDep && 'can-time'} {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep &&
+              'late'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
+          >
+        </tr>
+        <tr class="text-row">
+          <td colspan="8" class="text-data">
+            {service.operator}
+            {#if serviceStats.length} | {serviceStats.length} carriages{/if}
+            <br />
+            {#if service.cancelReason}
+              <Reason type="cancel" code={service.cancelReason} />
+            {/if}
+            {#if service?.delayReason && !service.isCancelled}
+              <Reason type="delay" code={service.delayReason} />
+            {/if}
+          </td>
+        </tr>
+{:catch}
+        <tr>
+          <td colspan="8">Unable to load service</td>
+        </tr>
+{/await}
\ No newline at end of file
diff --git a/src/lib/ldb/staff-ldb.svelte b/src/lib/ldb/staff/staff-ldb.svelte
similarity index 79%
rename from src/lib/ldb/staff-ldb.svelte
rename to src/lib/ldb/staff/staff-ldb.svelte
index 4578cd6..c35651b 100644
--- a/src/lib/ldb/staff-ldb.svelte
+++ b/src/lib/ldb/staff/staff-ldb.svelte
@@ -2,8 +2,10 @@
   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 AlertBar from '../alert-bar.svelte';
+  import ServiceRow from './service-row.svelte';
+  import StaffTrainDetail from '$lib/ldb/staff/train-detail.svelte';
+  import Reason from '$lib/raw-fetchers/reason.svelte';
   import Loading from '$lib/navigation/loading.svelte';
   import Nav from '$lib/navigation/nav.svelte';
   import { uuid } from '$lib/stores/uuid';
@@ -16,7 +18,7 @@
   let dataAge = null;
   let isLoading = true;
   let alerts = [];
-  let detail = {show: false, rid:'',uid:'', headcode:''}
+  let detail = { show: false, rid: '', uid: '', headcode: '' };
 
   $: {
     if (jsonData?.GetBoardResult?.generatedAt) {
@@ -60,13 +62,6 @@
     }
   }
 
-  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 generateServiceData(service) {
     const timeDetails = await parseTimes(service);
     let serviceData = {
@@ -85,10 +80,12 @@
       isLateDep: timeDetails.delDep,
       isCancelledDep: false,
       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
+      isNonPublic: service?.isPassengerService === 'false' ? true : false
     };
     return serviceData;
   }
@@ -104,7 +101,6 @@
 
   async function parseLocation(location) {
     if (!Array.isArray(location.location)) {
-      //console.log(location.location?.tiploc)
       return location.location?.tiploc;
     }
     let locations = [];
@@ -133,10 +129,12 @@
     let expDep = new Date(service?.etd || service?.atd);
     let isEarlyArr = false,
       isDelayedArr = false,
-      isArr = false;
+      isArr = false,
+      canArr = false;
     let isEarlyDep = false,
       isDelayedDep = false,
-      isDep = false;
+      isDep = false,
+      canDep = false;
     const timeDifferenceThreshold = 60 * 1000; // 60 seconds in milliseconds
     if (expArr - schArr < -timeDifferenceThreshold) {
       isEarlyArr = true;
@@ -160,6 +158,9 @@
       } else {
         parsedExpArr = parseIndividualTime(expArr);
       }
+    } else if (service.isCancelled === 'true') {
+      parsedExpArr = 'CANC';
+      canArr = true;
     } else {
       parsedExpArr = '-';
     }
@@ -171,6 +172,9 @@
       } else {
         parsedExpDep = parseIndividualTime(expDep);
       }
+    } else if (service.isCancelled === 'true') {
+      parsedExpDep = 'CANC';
+      canDep = true;
     } else {
       parsedExpDep = '-';
     }
@@ -182,7 +186,9 @@
       earArr: isEarlyArr,
       delArr: isDelayedArr,
       earDep: isEarlyDep,
-      delDep: isDelayedDep
+      delDep: isDelayedDep,
+      canArr: canArr,
+      canDep: canDep
     };
   }
 
@@ -268,17 +274,29 @@
         </tr>
       {:then serviceStats}
         <tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
-          <td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{service.trainid}</td>
-          <td class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td>
-          <td class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td>
+          <td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}
+            >{service.trainid}</td
+          >
+          <td
+            class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
+            on:click={showDetails(service.rid, service.uid, service.trainid)}
+            on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td
+          >
+          <td
+            class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}"
+            on:click={showDetails(service.rid, service.uid, service.trainid)}
+            on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td
+          >
           <td class="plat plat-data data {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
           <td class="time time-data data">{serviceStats.schArr}</td>
-          <td class="time time-data data {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}"
-            >{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
+          <td
+            class="time time-data data {serviceStats.canArr && 'can-time'} {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr &&
+              'late'}">{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}</td
           >
           <td class="time time-data data {serviceStats.isCancelled && 'can-dat'}">{serviceStats.schDep}</td>
-          <td class="time time-data data {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep && 'late'}"
-            >{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
+          <td
+            class="time time-data data {serviceStats.canDep && 'can-time'} {serviceStats.isDepDelayed && 'late'} {serviceStats.isEarlyDep && 'early'} {serviceStats.isLateDep &&
+              'late'}">{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}</td
           >
         </tr>
         <tr class="text-row">
@@ -286,21 +304,11 @@
             {service.operator}
             {#if serviceStats.length} | {serviceStats.length} carriages{/if}
             <br />
-            {#if service.isCancelled}
-              {#await getReasonCodeData(service.cancelReason)}
-                This train has been cancelled
-              {:then reasonCode}
-                {reasonCode[0].cancReason}
-                <br />
-              {/await}
+            {#if service.cancelReason}
+              <Reason type="cancel" code={service.cancelReason} />
             {/if}
-            {#if service?.delayReason}
-              {#await getReasonCodeData(service.delayReason)}
-                This train has been delayed
-              {:then reasonCode}
-                {reasonCode[0].lateReason}
-                <br />
-              {/await}
+            {#if service?.delayReason && !service.isCancelled}
+              <Reason type="delay" code={service.delayReason} />
             {/if}
           </td>
         </tr>
diff --git a/src/lib/ldb/staff/train-detail.svelte b/src/lib/ldb/staff/train-detail.svelte
new file mode 100644
index 0000000..2e7040c
--- /dev/null
+++ b/src/lib/ldb/staff/train-detail.svelte
@@ -0,0 +1,251 @@
+<script>
+  import OverlayIsland from '$lib/islands/overlay-island.svelte';
+  import Loading from '$lib/navigation/loading.svelte';
+  import Reason from '$lib/raw-fetchers/reason.svelte';
+  import { uuid } from '$lib/stores/uuid';
+  export let detail = {
+    uid: '',
+    rid: '',
+    headcode: '',
+    show: true
+  };
+  export let close;
+
+  function handleClick() {
+    close();
+  }
+
+  async function getTrain(rid) {
+    try {
+      console.log(`Requested Station: ${rid}`);
+      const url = `https://owlboard.info/api/v2/live/train/rid/${rid}`;
+      const opt = {
+        method: 'GET',
+        headers: {
+          uuid: $uuid
+        }
+      };
+      const data = await fetch(url, opt);
+      return await data.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  }
+
+  async function parseDelay(location) {
+    let string, state;
+    if (location?.lateness) {
+      try {
+        const result = Math.floor(location.lateness / 60);
+        if (result === 0) {
+          (string = 'RT'), (state = '');
+        } else if (result < 0) {
+          (string = -result + 'E'), (state = 'early');
+        } else if (result > 0) {
+          (string = result + 'L'), (state = 'late');
+        }
+      } catch {
+        (string = ''), (state = '');
+      }
+    } else if (location.arrivalType === 'Delayed') {
+      (string = ''), (state = 'late');
+    } else {
+      (string = ''), (state = 'noreport');
+    }
+    return {
+      string: string,
+      state: state
+    };
+  }
+
+  function parseTime(date) {
+    const parsedTime = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    return parsedTime !== 'Invalid Date' ? parsedTime : null;
+  }
+
+  function parseTimes(service) {
+    const sta = new Date(service.sta),
+      eta = new Date(service.eta),
+      ata = new Date(service.ata);
+    const std = new Date(service.std),
+      etd = new Date(service.etd),
+      atd = new Date(service.atd);
+    let parsedSta = parseTime(sta),
+      parsedEta = parseTime(eta),
+      parsedAta = parseTime(ata);
+    let parsedStd = parseTime(std),
+      parsedEtd = parseTime(etd),
+      parsedAtd = parseTime(atd);
+    if (service.isCancelled) {
+      (parsedEta = 'CANC'), (parsedEtd = 'CANC');
+    }
+    let times = {
+      sta: parsedSta || '-',
+      eata: parsedEta || parsedAta || '-',
+      aEst: parsedEta ? 'estimate' : '',
+      std: parsedStd || '-',
+      eatd: parsedEtd || parsedAtd || '-',
+      dEst: parsedEtd ? 'estimate' : ''
+    };
+    if (service.isCancelled) {
+      (parsedEta = 'CANC'), (parsedEtd = 'CANC');
+      (times.aEst = 'canc'), (times.dEst = 'canc');
+    }
+    return times;
+  }
+
+</script>
+
+<OverlayIsland>
+  <div id="detailBox">
+    {#await getTrain(detail.rid)}
+      <h6>{detail.headcode}</h6>
+      <Loading />
+    {:then train}
+      <h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
+      <button type="button" id="closeService" on:click={handleClick}>X</button>
+      <p>
+        Locations in grey are not scheduled stops
+        <br />
+        Times in <span class="estimate">yellow</span> are estimated times
+      </p>
+      <table id="detailTable">
+        {#if train.GetServiceDetailsResult.delayReason}
+          <tr><td colspan="7">
+            <Reason type="delay" code={train.GetServiceDetailsResult.delayReason} />
+          </td></tr>
+        {/if}
+        {#if train.GetServiceDetailsResult.cancelReason}
+          <tr><td colspan="7">
+            <Reason type="cancel" code={train.GetServiceDetailsResult.cancelReason} />
+          </td></tr>
+        {/if}
+        <tr>
+          <th colspan="2" />
+          <th colspan="2">Arrival</th>
+          <th colspan="2">Departure</th>
+          <th />
+        </tr>
+        <tr>
+          <th class="tableLocation">Location</th>
+          <th class="tablePlatform">Pl.</th>
+          <th class="tableTime">Sch</th>
+          <th class="tableTime">Est/Act</th>
+          <th class="tableTime">Sch</th>
+          <th class="tableTime">Est/Act</th>
+          <th class="tableDelay" />
+        </tr>
+        {#each train.GetServiceDetailsResult.locations.location as location}
+          <tr>
+            <td class={location?.isPass === 'true' ? 'pass' : ''}>{location.tiploc}</td>
+            <td class={location?.isPass === 'true' ? 'pass' : ''}>{location.platform || ''}</td>
+            {#await parseTimes(location)}
+              <td />
+              <td />
+              <td />
+              <td />
+            {:then times}
+              <td class={location?.isPass === 'true' ? 'pass' : ''}>{times.sta}</td>
+              <td class="{location?.isPass === 'true' ? 'pass' : ''} {times.aEst}">{times.eata}</td>
+              <td class={location?.isPass === 'true' ? 'pass' : ''}>{times.std}</td>
+              <td class="{location?.isPass === 'true' ? 'pass' : ''} {times.dEst}">{times.eatd}</td>
+            {/await}
+            {#await parseDelay(location)}
+              <td>-</td>
+            {:then delay}
+              <td class={delay.state}>{delay.string}</td>
+            {/await}
+          </tr>
+        {/each}
+      </table>
+    {:catch}
+      <h6>Error loading data</h6>
+    {/await}
+  </div>
+</OverlayIsland>
+
+<style>
+  #detailBox {
+    width: 100%;
+    min-height: 100px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  h6 {
+    position: absolute;
+    top: -25px;
+    left: 20px;
+    font-size: 18px;
+  }
+  p {
+    margin-top: 45px;
+    margin-bottom: 0px;
+  }
+  #closeService {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    border: none;
+    border-radius: 60px;
+    width: 35px;
+    height: 35px;
+    background-color: var(--main-bg-color);
+    color: white;
+    font-weight: 700;
+    font-size: 16px;
+  }
+  #detailTable {
+    width: 100%;
+    margin-top: 10px;
+    color: white;
+    font-size: 16px;
+  }
+  .tableLocation {
+    width: 25%;
+  }
+  .tablePlatform {
+    width: 8%;
+  }
+  .tableTime {
+    width: 15%;
+  }
+  .tableDelay {
+    width: 7%;
+  }
+  .estimate {
+    color: rgb(255, 255, 50);
+  }
+  .pass {
+    opacity: 0.45;
+    font-size: 16px;
+  }
+  .canc {
+    animation: pulse-cancel 1.5s linear infinite;
+  }
+
+  .early {
+    animation: pulse-early 1.5s linear infinite;
+  }
+
+  .late {
+    animation: pulse-late 1.5s linear infinite;
+  }
+
+  @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>
diff --git a/src/lib/raw-fetchers/reason.svelte b/src/lib/raw-fetchers/reason.svelte
new file mode 100644
index 0000000..83b7f0f
--- /dev/null
+++ b/src/lib/raw-fetchers/reason.svelte
@@ -0,0 +1,50 @@
+<script>
+
+  import { uuid } from "$lib/stores/uuid";
+
+  export let code = '';
+  export let type = '';
+
+  async function getDelay(code = '') {
+    console.log(`Fetching delay reason ${code}`)
+    const data = await getReason(code);
+    return data[0].lateReason || 'This train has been delayed';
+  }
+
+  async function getCancel(code = '') {
+    console.log(`Fetching cancel reason ${code}`)
+    const data = await getReason(code);
+    return data[0].cancReason || 'This train has been cancelled';
+  }
+
+  async function getReason(code = '') {
+    const url = `https://owlboard.info/api/v2/ref/reasonCode/${code}`;
+    const options = {
+      method: 'GET',
+      headers: {
+        uuid: $uuid
+      }
+    };
+    const res = await fetch(url, options);
+    return await res.json();
+  }
+
+</script>
+
+{#if type === "cancel"}
+  {#await getCancel(code)}
+    This train has been cancelled
+  {:then reason} 
+    {reason}
+  {:catch}
+    This train has been cancelled
+  {/await}
+{:else if type === "delay"}
+  {#await getDelay(code)}
+    This train has been delayed    
+  {:then reason}
+    {reason}
+  {:catch}
+    This train has been delayed
+  {/await}
+{/if}
\ No newline at end of file
diff --git a/src/routes/ldb/+page.svelte b/src/routes/ldb/+page.svelte
index 4c6f602..0218f90 100644
--- a/src/routes/ldb/+page.svelte
+++ b/src/routes/ldb/+page.svelte
@@ -2,7 +2,7 @@
   import Header from '$lib/navigation/header.svelte';
   import Nav from '$lib/navigation/nav-ldb.svelte';
   import PublicLdb from '$lib/ldb/public-ldb.svelte';
-  import StaffLdb from '$lib/ldb/staff-ldb.svelte';
+  import StaffLdb from '$lib/ldb/staff/staff-ldb.svelte';
   import { uuid } from '$lib/stores/uuid.js';
   import { onMount } from 'svelte';