From 45b64002f4435f2d5c85c218753cf48f69c457b5 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Sun, 9 Jul 2023 08:12:25 +0100
Subject: [PATCH] Fixes to StaffLDB - needs componentisong

---
 src/app.css                              |   4 +-
 src/lib/ldb/staff/service-row.svelte     | 158 -------------------
 src/lib/ldb/staff/staff-ldb.svelte       | 185 +++++++++++++----------
 src/lib/ldb/staff/table-generator.svelte |  12 ++
 src/lib/overlays/welcome.svelte          |   4 +-
 src/routes/train/+page.svelte            |  22 +--
 6 files changed, 134 insertions(+), 251 deletions(-)
 delete mode 100644 src/lib/ldb/staff/service-row.svelte
 create mode 100644 src/lib/ldb/staff/table-generator.svelte

diff --git a/src/app.css b/src/app.css
index 5faa7c0..0b0676f 100644
--- a/src/app.css
+++ b/src/app.css
@@ -56,7 +56,9 @@ body {
   color: var(--second-text-color);
   font-family: urwgothic, sans-serif;
   text-align: center;
-  padding-bottom: 60px; /*Footer height*/
+  margin: auto;
+  width: 100%;
+  padding-bottom: 65px;
 }
 a {
   color: var(--link-color);
diff --git a/src/lib/ldb/staff/service-row.svelte b/src/lib/ldb/staff/service-row.svelte
deleted file mode 100644
index 29e0121..0000000
--- a/src/lib/ldb/staff/service-row.svelte
+++ /dev/null
@@ -1,158 +0,0 @@
-<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}
diff --git a/src/lib/ldb/staff/staff-ldb.svelte b/src/lib/ldb/staff/staff-ldb.svelte
index b920b0f..099845b 100644
--- a/src/lib/ldb/staff/staff-ldb.svelte
+++ b/src/lib/ldb/staff/staff-ldb.svelte
@@ -286,12 +286,12 @@
   {#if alerts.length}
     <AlertBar {alerts} />
   {/if}
-  <table>
+  <table class="dataTable">
     <tr><td colspan="8" id="timestamp">Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development</td></tr>
     <tr>
       <th colspan="4" />
-      <th colspan="2">Arrival</th>
-      <th colspan="2">Departure</th>
+      <th class="timePair" colspan="2">Arrival</th>
+      <th class="timePair" colspan="2">Departure</th>
     </tr>
     <tr>
       <th class="id">ID</th>
@@ -363,11 +363,11 @@
   {#if busServices.length}
     <br />
     <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services" /><br />
-    <table>
+    <table class="dataTable">
       <tr>
         <th colspan="4" />
-        <th colspan="2">Arrival</th>
-        <th colspan="2">Departure</th>
+        <th class="timePair" colspan="2">Arrival</th>
+        <th class="timePair" colspan="2">Departure</th>
       </tr>
       <tr>
         <th class="id">ID</th>
@@ -433,76 +433,76 @@
     </table>
   {/if}
   {#if ferryServices.length}
-    <br />
-    <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Ferry services" /><br />
-    <table>
-      <tr>
-        <th colspan="4" />
-        <th colspan="2">Arrival</th>
-        <th 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>
+  <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}
 
@@ -515,16 +515,42 @@
 
   .transport-mode {
     width: 30px;
+    margin: auto;
   }
 
-  table {
+  .dataTable {
     color: white;
     font-weight: normal;
-    margin: auto;
-    margin-top: 0px;
+    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;
   }
@@ -544,6 +570,7 @@
   .text-row {
     margin-top: 0px;
     padding-bottom: 5px;
+    width: 100%;
   }
 
   .text-data {
diff --git a/src/lib/ldb/staff/table-generator.svelte b/src/lib/ldb/staff/table-generator.svelte
new file mode 100644
index 0000000..00a4ff3
--- /dev/null
+++ b/src/lib/ldb/staff/table-generator.svelte
@@ -0,0 +1,12 @@
+<script>
+
+</script>
+
+<table>
+</table>
+
+<style>
+    table {
+        width: 100%;
+    }
+</style>
\ No newline at end of file
diff --git a/src/lib/overlays/welcome.svelte b/src/lib/overlays/welcome.svelte
index 95bb762..1d83d40 100644
--- a/src/lib/overlays/welcome.svelte
+++ b/src/lib/overlays/welcome.svelte
@@ -25,7 +25,7 @@
   const pageText = [
     '<h3>A brand new look</h3>' +
       "<p>OwlBoard has a brand new look, making it even faster for you to access the data - you won't have to register again.</p>" +
-      "<p><strong>Live station data</strong> is still available right from the homepage.  If you are signed up, you'll get improved data from the <strong>Staff board</strong></p>" +
+      "<p><strong>Live station data</strong> is still available right from the homepage.  If you are signed up, you'll get improved data from the <strong>Staff board</strong>.  Bus and Ferry services are still included</p>" +
       '<p><strong>Train Data & PIS</strong> is now available right from the homepage if you are searching by headcode, for other PIS searches, the PIS finder is in the bottom menu</p>',
     '<h3>Staff Station Boards</h3>' +
       '<p>If you are registered, staff station boards will be available.</p>' +
@@ -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 won't see this welcome screen again</p>"
+      "<p>You will only see this welcome page again when there are new updates</p>"
   ];
 </script>
 
diff --git a/src/routes/train/+page.svelte b/src/routes/train/+page.svelte
index 4802788..40f0f35 100644
--- a/src/routes/train/+page.svelte
+++ b/src/routes/train/+page.svelte
@@ -53,22 +53,22 @@
     const url = `https://owlboard.info/api/v2/timetable/train/${date}/${searchType}/${id}`;
     try {
       const res = await fetch(url, options);
+      if (res.status == 200) {
+        return await res.json();
+      } else if (res.status === 401) {
+        error = true;
+        errMsg = 'You must be logged into the staff version for this feature';
+        return false;
+      } else {
+        error = true;
+        errMsg = 'Unable to connect, check your connection and try again';
+        return false;
+      }
     } catch (err) {
       error = true;
       errMsg = 'Connection error, try again later';
     }
     isLoading = false;
-    if (res.status == 200) {
-      return await res.json();
-    } else if (res.status === 401) {
-      error = true;
-      errMsg = 'You must be logged into the staff version for this feature';
-      return false;
-    } else {
-      error = true;
-      errMsg = 'Unable to connect, check your connection and try again';
-      return false;
-    }
   }
 </script>