Add train details on public LDB

src/lib/islands/overlay-island.svelte

@@ -0,0 +1,32 @@
+<script>
+    export let variables = {title:""}
+</script>
+
+<div>
+    <span>{variables.title}</span>
+    <slot />
+</div>
+
+<style>
+span {
+    font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    font-weight: 600;
+    font-size: 20px;
+}
+div {
+    position: fixed;
+    top: 60px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 75%;
+    height: auto;
+    max-height: 75vh;
+    overflow-y: scroll;
+    max-width: 400px;
+    margin: auto;
+    margin-top: 25px;
+    padding: 10px;
+    background-color: var(--overlay-color);
+    border-radius: 10px;
+}
+</style>

src/lib/ldb/public-ldb.svelte

@@ -3,6 +3,7 @@
   export let title = "Loading...";
   import { onMount } from 'svelte'
   import Loading from '$lib/navigation/loading.svelte';
+	import OverlayIsland from '$lib/islands/overlay-island.svelte';
 
   let requestedStation;
   $: requestedStation = station;
@@ -14,6 +15,7 @@
   let dataAge = null;
   let isLoading = true;
   let dataExists = false;
+  let serviceDetail;
 
   $: {
       if (jsonData === null && requestedStation) {
@@ -73,6 +75,7 @@
       output = 'CANC'
       change = "cancelled"
       break
+    case 'On Time':
     case 'On time':
       output = 'RT'
       change = ""
@@ -100,6 +103,19 @@
     return {data: output, changed: change}
   }
 
+  async function loadService(sid) {
+    console.log(`Loading: ${sid}`);
+    for (const service of services) {
+      if (service.serviceID == sid) {
+        serviceDetail = service
+      }
+    }
+  }
+
+  async function closeService() {
+    serviceDetail = null;
+  }
+
   onMount(() => {
     if (requestedStation && jsonData === null) {
       fetchData();
@@ -125,7 +141,7 @@
         </tr>
         {#each services as service}
           <tr>
-            <td class="origdest from">
+            <td class="origdest from" on:click={loadService(service.serviceID)}>
               {#if Array.isArray(service.origin?.location)}
                 {service.origin.location[0]['locationName'] +
                  " & " + 
@@ -134,7 +150,7 @@
                 {service.origin?.location?.locationName || ''}
               {/if}
             </td>
-            <td class="origdest to">
+            <td class="origdest to" on:click={loadService(service.serviceID)}>
               {#if Array.isArray(service.destination?.location)}
                 {service.destination.location[0]['locationName'] + 
                  " & " +
@@ -244,6 +260,44 @@
     <p>Unable to find this station</p>
   {/if}
 {/if}
+
+{#if serviceDetail}
+  <OverlayIsland>
+    <h6>Service Detail</h6>
+    <button type="button" id="closeService" on:click={closeService}>X</button>
+    <table id="detailTable">
+      <tr>
+        <th>Location</th>
+        <th>Sch</th>
+        <th>Exp</th>
+      </tr>
+      {#if serviceDetail?.previousCallingPoints?.callingPointList?.callingPoint}
+        {#each serviceDetail.previousCallingPoints.callingPointList.callingPoint as prevPoint}
+          <tr>
+            <td>{prevPoint.locationName}</td>
+            <td>{prevPoint.st}</td>
+            <td class="time {parseTime(prevPoint.at || prevPoint.et).changed}">{parseTime(prevPoint.at || prevPoint.et).data}</td>
+          </tr>
+        {/each}
+      {/if}
+      <tr class="thisStop">
+        <td>{title}</td>
+        <td>{serviceDetail.std || serviceDetail.sta}</td>
+        <td class="time {parseTime(serviceDetail.etd || serviceDetail.eta).changed}">{parseTime(serviceDetail.etd || serviceDetail.eta).data}</td>
+      </tr>
+      {#if serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint}
+        {#each serviceDetail.subsequentCallingPoints.callingPointList.callingPoint as nextPoint}
+          <tr>
+            <td>{nextPoint.locationName}</td>
+            <td>{nextPoint.st}</td>
+            <td class="time {parseTime(nextPoint.et).changed}">{parseTime(nextPoint.et).data}</td>
+          </tr>
+        {/each}
+      {/if}
+    </table>
+  </OverlayIsland>
+{/if}
+
 <style>
   #timestamp {
     margin: auto;
@@ -321,4 +375,29 @@
         color: var(--main-alert-color);
     }
 }
+h6 {
+  position: absolute;
+  top: -25px;
+  left: 20px;
+  font-size: 18px;
+}
+#closeService {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  border: none;
+  border-radius: 60px;
+  width: 35px;
+  height: 35px;
+  background-color: var(--main-bg-color);
+  color: white;
+  font-weight: 700;
+  font-size: 16px;
+}
+#detailTable {
+  margin-top: 40px;
+}
+.thisStop {
+  color: yellow;
+}
 </style>