Add 'getTrainByUID - and format

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

@@ -333,7 +333,10 @@
     .tableTxt {
       font-size: 14px;
     }
-    td.to,td.from,th.to,th.from {
+    td.to,
+    td.from,
+    th.to,
+    th.from {
       text-align: center;
     }
   }

src/lib/navigation/loading-text.svelte

@@ -0,0 +1,15 @@
+<p id="load">Loading...</p>
+<style>
+    #load {
+        margin-top: 5px;
+        font-size: 18px;
+        font-weight: 600;
+        color: white;
+        animation: pulse-loading 2.5s linear infinite;
+    }
+      @keyframes pulse-loading {
+    50% {
+      color: rgb(136, 164, 255);
+    }
+  }
+</style>

src/lib/train/train-detail.svelte

@@ -1,15 +1,34 @@
 <script>
   import { fly } from 'svelte/transition';
+  import { uuid } from '$lib/stores/uuid';
+  import LoadingText from '$lib/navigation/loading-text.svelte';
 
   export let service = '';
 
   let isExpanded = false;
 
+  async function getTrainByUID(tuid = '') {
+    const url = `https://owlboard.info/api/v2/timetable/train/byTrainUid/${tuid}`;
+    const options = {
+      method: 'GET',
+      headers: {
+        uuid: $uuid
+      }
+    };
+    const res = await fetch(url, options);
+    if (res.status === 200) {
+      return await res.json();
+    } else {
+      throw new Error('Unable to Fetch');
+    }
+  }
+
   async function expand() {
     isExpanded = !isExpanded;
   }
 </script>
- <!-- The next version of backend will only return a subset of information required to display the container-header
+
+<!-- The next version of backend will only return a subset of information required to display the container-header
       , the container will then be responsible for fetching more data using the trainUid. -->
 <div class="container">
   <div class="container-header" on:click={expand} on:keypress={expand}>
@@ -21,48 +40,54 @@
   </div>
   {#if isExpanded}
     <div class="container-detail" in:fly={{ y: -20, duration: 200 }}>
-      {#if service.pis}
+      {#await getTrainByUID(service.trainUid)}
-        <p class="pis">PIS: {service.pis}</p>
+        <LoadingText />
-      {/if}
+      {:then serviceDetail}
-      <p class="svc-detail">
+        {#if serviceDetail.pis}
-        Planned Type: {parseInt(service.planSpeed) || 68}mph {service.powerType || 'Bus'}
+          <p class="pis">PIS: {serviceDetail.pis}</p>
-      </p>
+        {/if}
-      <p class="svc-detail">
+        <p class="svc-detail">
-        Days Run: {service.daysRun.join(', ').toUpperCase()}
+          Planned Type: {parseInt(serviceDetail.planSpeed) || 68}mph {serviceDetail.powerType || 'Bus'}
-      </p>
+        </p>
-      <p class="svc-detail validity">
+        <p class="svc-detail">
-        Valid From: {new Date(service.scheduleStartDate).toLocaleDateString('en-GB', {
+          Days Run: {serviceDetail.daysRun.join(', ').toUpperCase()}
-          timeZone: 'UTC'
+        </p>
-        })} - {new Date(service.scheduleEndDate).toLocaleDateString('en-GB', {
+        <p class="svc-detail validity">
-          timeZone: 'UTC'
+          Valid From: {new Date(serviceDetail.scheduleStartDate).toLocaleDateString('en-GB', {
-        })}
+            timeZone: 'UTC'
-      </p>
+          })} - {new Date(serviceDetail.scheduleEndDate).toLocaleDateString('en-GB', {
-      <table>
+            timeZone: 'UTC'
-        <tr>
+          })}
-          <th>Location</th>
+        </p>
-          <th>Sch Arr.</th>
+        <table>
-          <th>Sch Dep.</th>
+          <tr>
-        </tr>
+            <th>Location</th>
-        {#if service.stops[0]['publicDeparture']}
+            <th>Sch Arr.</th>
-          {#each service.stops as stop}
+            <th>Sch Dep.</th>
-            {#if stop.publicArrival || stop.publicDeparture}
+          </tr>
+          {#if serviceDetail.stops[0]['publicDeparture']}
+            {#each serviceDetail.stops as stop}
+              {#if stop.publicArrival || stop.publicDeparture}
+                <tr>
+                  <td>{stop.tiploc}</td>
+                  <td>{stop.publicArrival || '-'}</td>
+                  <td>{stop.publicDeparture || '-'}</td>
+                </tr>
+              {/if}
+            {/each}
+          {:else}
+            {#each serviceDetail.stops as stop}
               <tr>
                 <td>{stop.tiploc}</td>
-                <td>{stop.publicArrival || '-'}</td>
+                <td>{stop.wttArrival || '-'}</td>
-                <td>{stop.publicDeparture || '-'}</td>
+                <td>{stop.wttDeparture || '-'}</td>
               </tr>
-            {/if}
+            {/each}
-          {/each}
+          {/if}
-        {:else}
+        </table>
-          {#each service.stops as stop}
+      {:catch}
-            <tr>
+        <p>Unable to fetch train data</p>
-              <td>{stop.tiploc}</td>
+      {/await}
-              <td>{stop.wttArrival || '-'}</td>
-              <td>{stop.wttDeparture || '-'}</td>
-            </tr>
-          {/each}
-        {/if}
-      </table>
     </div>
   {/if}
 </div>