Begin create staff ldb table

src/lib/ldb/staff-ldb.svelte

@@ -92,6 +92,15 @@
       return {data: output, changed: change}
     }
 
+    function parseDateTime(input) {
+      const dt = new Date(input);
+      const output = dt.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})
+      if (output !== "Invalid Date") {
+        return output
+      }
+      return '-'
+    }
+  
     onMount(() => {
       fetchData();
     });
@@ -102,18 +111,57 @@
   {:else}
     
     <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
-    <p>Staff LDB for {station}</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 Arr</th>
+        <th class="time">Exp Arr</th>
+        <th class="time">Sch Dep</th>
+        <th class="time">Exp Dep</th>
+      </tr>
       {#each services as service}
-      <div class="service">
-        <p class="service-operator">{service.operatorCode}</p>
-        <p class="service-headcode">{service.trainid}</p>
-        <p class="service-origin">{service.origin.location.tiploc}</p>
-        <p class="service-dest">{service.destination.location.tiploc}</p>
-        <p class="service-plat">{service.platform}</p>
-        <p class="service-expArr">{new Date(service.sta).toLocaleTimeString() || '-'}</p>
-      </div>
+        <tr>
+          <th class="id id-data">{service.trainid}</th>
+          <th class="from from-data">{service.origin.location.tiploc}</th>
+          <th class="to to-data">{service.destination.location.tiploc}</th>
+          <th class="plat plat-data">{service.platform || '-'}</th>
+          <th class="time time-data">{parseDateTime(service.sta)}</th>
+          <th class="time time-data">{'-'}</th>
+          <th class="time time-data">{parseDateTime(service.std)}</th>
+          <th class="time time-data">{'-'}</th>
+        </tr>
+        <tr>
+          <td colspan="8" class="text-data">
+            {service.operator}
+          </td>
+        </tr>
       {/each}
+    </table>
   {/if}  
 
  <Nav />
+
+ <style>
+  table {
+    color: white;
+    font-weight: normal;
+    margin: auto;
+  }
+
+  .id-data {
+    color: lightgray;   
+  }
+
+  .from-data, .to-data {
+    color: yellow;
+    text-decoration: none;
+  }
+
+  .text-data {
+    text-align: left;
+    color: cyan;
+  }
+ </style>

src/routes/ldb/+page.svelte

@@ -36,7 +36,7 @@
 {#if !staff}
 <PublicLdb {station} bind:title={title} />
 {:else}
-<PublicLdb {station} bind:title={title} />
+<StaffLdb {station} bind:title={title} />
 <!--<StaffLdb {station} bind:title={title} /> -- Temporary, Disable StaffLdb - it isn't implemented -->
 {/if}