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,14 +1,33 @@
 <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 container will then be responsible for fetching more data using the trainUid. -->
 <div class="container">
@@ -21,19 +40,22 @@
   </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 />
+      {:then serviceDetail}
+        {#if serviceDetail.pis}
+          <p class="pis">PIS: {serviceDetail.pis}</p>
         {/if}
         <p class="svc-detail">
-        Planned Type: {parseInt(service.planSpeed) || 68}mph {service.powerType || 'Bus'}
+          Planned Type: {parseInt(serviceDetail.planSpeed) || 68}mph {serviceDetail.powerType || 'Bus'}
         </p>
         <p class="svc-detail">
-        Days Run: {service.daysRun.join(', ').toUpperCase()}
+          Days Run: {serviceDetail.daysRun.join(', ').toUpperCase()}
         </p>
         <p class="svc-detail validity">
-        Valid From: {new Date(service.scheduleStartDate).toLocaleDateString('en-GB', {
+          Valid From: {new Date(serviceDetail.scheduleStartDate).toLocaleDateString('en-GB', {
             timeZone: 'UTC'
-        })} - {new Date(service.scheduleEndDate).toLocaleDateString('en-GB', {
+          })} - {new Date(serviceDetail.scheduleEndDate).toLocaleDateString('en-GB', {
             timeZone: 'UTC'
           })}
         </p>
@@ -43,8 +65,8 @@
             <th>Sch Arr.</th>
             <th>Sch Dep.</th>
           </tr>
-        {#if service.stops[0]['publicDeparture']}
+          {#if serviceDetail.stops[0]['publicDeparture']}
-          {#each service.stops as stop}
+            {#each serviceDetail.stops as stop}
               {#if stop.publicArrival || stop.publicDeparture}
                 <tr>
                   <td>{stop.tiploc}</td>
@@ -54,7 +76,7 @@
               {/if}
             {/each}
           {:else}
-          {#each service.stops as stop}
+            {#each serviceDetail.stops as stop}
               <tr>
                 <td>{stop.tiploc}</td>
                 <td>{stop.wttArrival || '-'}</td>
@@ -63,6 +85,9 @@
             {/each}
           {/if}
         </table>
+      {:catch}
+        <p>Unable to fetch train data</p>
+      {/await}
     </div>
   {/if}
 </div>