Fixes to StaffLDB - needs componentisong

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);

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

@@ -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}

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 class="timePair" colspan="2">Arrival</th>
-      <th colspan="2">Departure</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 class="timePair" colspan="2">Arrival</th>
-        <th colspan="2">Departure</th>
+        <th class="timePair" colspan="2">Departure</th>
       </tr>
       <tr>
         <th class="id">ID</th>
@@ -434,12 +434,12 @@
   {/if}
   {#if ferryServices.length}
   <br />
-    <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Ferry services" /><br />
+  <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services" /><br />
-    <table>
+  <table class="dataTable">
     <tr>
       <th colspan="4" />
-        <th colspan="2">Arrival</th>
+      <th class="timePair" colspan="2">Arrival</th>
-        <th colspan="2">Departure</th>
+      <th class="timePair" colspan="2">Departure</th>
     </tr>
     <tr>
       <th class="id">ID</th>
@@ -515,16 +515,42 @@
 
   .transport-mode {
     width: 30px;
+    margin: auto;
   }
 
-  table {
+  .dataTable {
     color: white;
     font-weight: normal;
-    margin: auto;
+    width: 100%;
-    margin-top: 0px;
+    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 {

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

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

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>
 

src/routes/train/+page.svelte

@@ -53,11 +53,6 @@
     const url = `https://owlboard.info/api/v2/timetable/train/${date}/${searchType}/${id}`;
     try {
       const res = await fetch(url, options);
-    } 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) {
@@ -69,6 +64,11 @@
         errMsg = 'Unable to connect, check your connection and try again';
         return false;
       }
+    } catch (err) {
+      error = true;
+      errMsg = 'Connection error, try again later';
+    }
+    isLoading = false;
   }
 </script>