Componentised staffLdb - currently fighting with table styling

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

@@ -3,63 +3,93 @@
   export let title = 'Loading...';
   import { onMount } from 'svelte';
   import AlertBar from '$lib/ldb/nrcc/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';
-  import Error from '../../../routes/+error.svelte';
   import Island from '$lib/islands/island.svelte';
+  import TableGenerator from './table/table-generator.svelte';
 
-  let requestedStation;
+  let requestedStation = '';
   $: requestedStation = station;
 
   let jsonData = {};
-  let services = [],
+  /**
-    busServices = [],
+   * @type {string | any[]}
-    ferryServices = [];
+   */
-  let dataAge = null;
+  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 errMsg = '';
-  let alerts = [];
+  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) {
-      services = jsonData.GetBoardResult.trainServices.service;
+      // @ts-ignore
+      trainServices = ensureArray((trainServices = jsonData.GetBoardResult.trainServices.service));
     } else {
-      services = [];
+      trainServices = [];
     }
 
+    // @ts-ignore
     if (jsonData?.GetBoardResult?.busServices?.service) {
-      busServices = jsonData.GetBoardResult.busServices.service;
+      // @ts-ignore
+      busServices = ensureArray((busServices = jsonData.GetBoardResult.busServices.service));
     } else {
       busServices = [];
     }
 
+    // @ts-ignore
     if (jsonData?.GetBoardResult?.ferryServices?.service) {
-      ferryServices = 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 {
@@ -89,148 +119,9 @@
     }
   }
 
-  async function generateServiceData(service) {
+  /**
-    const timeDetails = await parseTimes(service);
+   * @param {any} messages
-    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 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 '-';
-  }
-
   function processNrcc(messages) {
     // Remove newlines and then <p> tags from input and append to array
     let arrMessages;
@@ -247,7 +138,7 @@
     return processedMessages;
   }
 
-  async function showDetails(rid, uid, tid) {
+  function showDetail(rid='', uid='', tid='') {
     detail = {
       rid: rid,
       uid: uid,
@@ -286,339 +177,45 @@
   {#if alerts.length}
     <AlertBar {alerts} />
   {/if}
-  <table class="dataTable">
+  <p class="dataTime">Data from: {dataAge.toLocaleString([])}</p>
-    <tr><td colspan="8" id="timestamp">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></tr>
+  {#if trainServices && trainServices.length}
-    <tr>
+    <TableGenerator services={trainServices} click={showDetail} />
-      <th colspan="4" />
-      <th class="timePair" colspan="2">Arrival</th>
-      <th class="timePair" colspan="2">Departure</th>
-    </tr>
-    <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>
-    {#if !services.length}
-      <tr><td colspan="8">No Scheduled Train Services</td></tr>
   {:else}
-      {#each services as service}
+    <p id="noservices">There are no scheduled train services in the next two hours</p>
-        {#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} />
-                <br />
   {/if}
-              {#if service?.delayReason && !service.isCancelled}
+  {#if busServices && busServices.length}
-                <Reason type="delay" code={service.delayReason} />
+    
+    <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}
-            </td>
+  {#if ferryServices && ferryServices.length}
-          </tr>
+  <img  class="transport-mode-image"src="/images/transport-modes/ferry.svg" alt="">
-        {:catch}
+    <br>
-          <tr>
+    <span class="transport-mode-text">Ferry Services</span>
-            <td colspan="8">Unable to load service</td>
+    <TableGenerator services={ferryServices} click={showDetail} />
-          </tr>
-        {/await}
-      {/each}
-    {/if}
-  </table>
-  {#if busServices.length}
-    <br />
-    <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br />
-    <table class="dataTable">
-      <tr>
-        <th colspan="4" />
-        <th class="timePair" colspan="2">Arrival</th>
-        <th class="timePair" colspan="2">Departure</th>
-      </tr>
-      <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>
-      {#each busServices as service}
-        {#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}
-      {/each}
-    </table>
-  {/if}
-  {#if ferryServices.length}
-  <br />
-  <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services" /><br />
-  <table class="dataTable">
-    <tr>
-      <th colspan="4" />
-      <th class="timePair" colspan="2">Arrival</th>
-      <th class="timePair" colspan="2">Departure</th>
-    </tr>
-    <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>
-    {#each ferryServices as service}
-      {#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}
-    {/each}
-  </table>
   {/if}
 {/if}
 
-<Nav />
-
 <style>
-  #timestamp {
+  p.dataTime {
-    color: var(--second-text-color);
+    margin-top: 5px;
+    margin-bottom: 0px;
+    font-size: 14px;
+  }
+  #noservices {
+    margin: 20px;
+    padding-top: 20px;
+    color: white;
   }
 
-  .transport-mode {
+  .transport-mode-image {
     width: 30px;
     margin: auto;
+    padding-top: 25px;
   }
-
+  .transport-mode-text {
-  .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;
-  }
-
-  @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>

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

@@ -1,12 +0,0 @@
-<script>
-
-</script>
-
-<table>
-</table>
-
-<style>
-    table {
-        width: 100%;
-    }
-</style>

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

@@ -0,0 +1,407 @@
+<script>
+  import Reason from '$lib/raw-fetchers/reason.svelte';
+
+  export let services;
+  export let click;
+
+  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;
+  }
+
+  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) {
+    const target = event.target;
+    click(rid,uid,tid)
+  }
+</script>
+
+<div>
+  <table>
+    <tr>
+      <th class="other" colspan="4" />
+      <th class="timepair" colspan="2">Arrival</th>
+      <th class="timepair" colspan="2">Departure</th>
+    </tr>
+    <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>
+    {#each services as service}
+      {#await generateServiceData(service)}
+        <tr><td colspan="8">Loading Service Data...</td></tr>
+      {:then serviceData}
+        <tr 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.platform.number || '-'}</td>
+          <td class="time {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.isArrDelayed ? 'LATE' : serviceData.expArr}</td
+          >
+          <td class="time {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.isDepDelayed ? 'LATE' : serviceData.expDep}</td
+          >
+        </tr>
+        <tr>
+          <td class="tableTxt" colspan="8">
+            {service.operator}
+            {#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}
+    {/each}
+  </table>
+</div>
+
+<style>
+  div {
+    width: auto;
+    margin: auto;
+  }
+  table {
+    table-layout: auto;
+    text-align: center;
+    min-width: 100%;
+    font-size: 14px;
+    margin: 0px;
+    padding: 0px;
+    color: white;
+  }
+
+  /* Table Columns */
+  .other {
+    width: 30%;
+  }
+  .id {
+    width: 5%;
+  }
+  .from {
+    width: 10%;
+  }
+  .to {
+    width: 10%;
+  }
+  .plat {
+    width: 5%;
+  }
+  .timepair {
+    width: 70%;
+  }
+  .time {
+    width: 5%;
+  }
+
+  td.id {
+    color: lightblue;
+    text-align: left;
+    padding-left: 2px;
+  }
+  td.from,
+  td.to {
+    color: yellow;
+    text-align: left;
+  }
+  .tableTxt {
+    text-align: left;
+    padding-left: 2px;
+    color: var(--second-text-color);
+  }
+
+  /* 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);
+    }
+  }
+
+  /* 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>

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

@@ -195,16 +195,16 @@
     background-color: var(--main-bg-color);
     color: white;
     font-weight: 700;
-    font-size: 16px;
+    font-size: 14px;
   }
   #detailTable {
-    width: 100%;
+    
     margin-top: 10px;
+    margin:auto;
     color: white;
-    font-size: 16px;
   }
   .tableLocation {
-    width: 25%;
+    width: 20%;
   }
   .tablePlatform {
     width: 8%;
@@ -213,14 +213,13 @@
     width: 15%;
   }
   .tableDelay {
-    width: 7%;
+    width: 5%;
   }
   .estimate {
     color: rgb(255, 255, 50);
   }
   .pass {
     opacity: 0.45;
-    font-size: 16px;
   }
   .canc {
     animation: pulse-cancel 1.5s linear infinite;

src/lib/overlays/welcome.svelte

@@ -34,7 +34,7 @@
     '<h3>Everything Else</h3>' +
       "<p>Everything else has moved to the 'More' menu, where you'll find the Reference Code lookup and software details." +
       '<br>' +
-      "<p>You will only see this welcome page again when there are new updates</p>"
+      '<p>You will only see this welcome page again when there are new updates</p>'
   ];
 </script>