Adjust formatting for 'via' destinations

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

@@ -7,24 +7,32 @@
   export let services: TrainServices[];
   export let click: Function;
 
+  interface locationObject {
+    location: string,
+    via?: string,
+  }
+
   function detail(event: any, rid: string, uid: string, tid: string) {
     const target = event.target;
     click(rid, uid, tid);
   }
 
-  async function formatLocations(locations: ServiceLocation[]): Promise<string> {
+  async function formatLocations(locations: ServiceLocation[]): Promise<locationObject> {
     let tiplocs: string[] = [];
     for (const location of locations) {
       tiplocs.push(location.tiploc);
     }
-    let location = tiplocs.join(' & ');
+    let locationObj: locationObject = {
+      location: tiplocs.join(' & '),
+    };
     if (locations[0]['via']) {
-      location = `${location} ${locations[0]['via']}` // Maybe this should be converted to TIPLOC server-side?
+      locationObj.via = locations[0]['via'];
     }
-    return location
+    return locationObj;
   }
 
-  async function classGenerator(service: TrainServices) { // This function needs updating next
+  async function classGenerator(service: TrainServices) {
+    // This function needs updating next
     let otherArr: string[] = [];
     let arrArr: string[] = [];
     let depArr: string[] = [];
@@ -106,10 +114,10 @@
     <th class="from">From</th>
     <th class="to">To</th>
     <th class="plat">Plat</th>
-    <th class="time">Sch</th>
+    <th class="time arrsch">Sch</th>
-    <th class="time">Exp</th>
+    <th class="time arrexp">Exp</th>
-    <th class="time">Sch</th>
+    <th class="time depsch">Sch</th>
-    <th class="time">Exp</th>
+    <th class="time depexp">Exp</th>
   </tr>
   <tr>
     <th class="other" colspan="4" />
@@ -123,18 +131,22 @@
       on:keypress={(event) => detail(event, service.rid, service.uid, service.trainid)}
     >
       {#await classGenerator(service) then classes}
+        <!-- HEADCODE -->
         <td class="id {classes.other}">{service.trainid}</td>
-        <td class="from {classes.other}">{#await formatLocations(service.origin) then origin}{origin}{/await}</td>
+        <!-- ORIGIN -->
-        <td class="to {classes.other}">{#await formatLocations(service.destination) then dest}{dest}{/await}</td>
+        <td class="loc from {classes.other}">{#await formatLocations(service.origin) then origin}{origin.location}{#if origin.via}<br><span class="via">{origin.via}</span>{/if}{/await}</td>
-        <td class="plat">{service.platform || '-'}</td>
+        <!-- DESTINATION -->
+        <td class="loc to {classes.other}">{#await formatLocations(service.destination) then dest}{dest.location}{#if dest.via}<br><span class="via">{dest.via}</span>{/if}{/await}</td>
+        <!-- PLATFORM -->
+        <td class="plat {classes.other} {classes.plat}">{service.platform || '-'}</td>
+        <!-- SCHEDULED ARR -->
         <td class="time schTime {classes.other}">{fmtTime(service?.sta) || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
+        <!-- EXPECTED/ACTUAL ARR -->
         <td class="time {classes.other} {classes.arr}">{fmtTime(service.eta) || fmtTime(service.ata) || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
+        <!-- SCHEDULED DEP -->
         <td class="time schTime {classes.other}">{fmtTime(service.std) || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
+        <!-- EXPECTED/ACTUAL DEP -->
         <td class="time {classes.other} {classes.dep}">{fmtTime(service.etd) || fmtTime(service.atd) || '-'}</td>
-        <!-- All time need to be displayed appropriately -->
       {/await}
     </tr>
     <tr>
@@ -222,7 +234,11 @@
     vertical-align: top;
     font-size: 12px;
   }
-
+  .via {
+    font-size: 10px;
+    margin-bottom: 0px;
+    padding: 0px;
+  }
   /* Handle small screens */
   .smallScreen {
     display: none;
@@ -279,21 +295,21 @@
   }
 
   /* Conditional Classes */
-  .cancTxt {
+  .loc.canc, .id.canc, .canc {
-    color: grey !important;
+    color: grey;
     text-decoration: line-through;
     opacity: 0.8;
   }
 
   .nonPass {
-    opacity: 0.6;
+    opacity: 0.4;
   }
 
   .late {
     animation: pulse-late 1.5s linear infinite;
   }
 
-  .canc {
+  .canc.time {
     animation: pulse-cancel 1.5s linear infinite;
   }