Work on staff train detail

src/lib/islands/overlay-island.svelte

@@ -21,7 +21,7 @@
     top: 50%;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
-    width: 75%;
+    width: 85%;
     height: auto;
     max-height: 75vh;
     overflow-y: auto;

src/lib/ldb/staff-ldb.svelte

@@ -16,6 +16,7 @@
   let dataAge = null;
   let isLoading = true;
   let alerts = [];
+  let detail = {show: false, rid:'',uid:'', headcode:''}
 
   $: {
     if (jsonData?.GetBoardResult?.generatedAt) {
@@ -213,11 +214,35 @@
     return processedMessages;
   }
 
+  async function showDetails(rid, uid, tid) {
+    detail = {
+      rid: rid,
+      uid: uid,
+      headcode: tid,
+      show: true
+    };
+  }
+
+  function hideDetails() {
+    detail = {
+      rid: '',
+      uid: '',
+      headcode: '',
+      show: false
+    };
+  }
+
   onMount(() => {
     fetchData();
   });
 </script>
 
+{#key detail}
+  {#if detail.show}
+    <StaffTrainDetail {detail} close={hideDetails} />
+  {/if}
+{/key}
+
 {#if isLoading}
   <Loading />
 {:else}
@@ -242,10 +267,10 @@
           <td colspan="8"> Loading... </td>
         </tr>
       {:then serviceStats}
-        <tr class="{serviceStats.isCancelled && 'can-dat'}">
-          <td class="id id-data data">{service.trainid}</td>
-          <td class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">{serviceStats.from}</td>
-          <td class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">{serviceStats.to}</td>
+        <tr class="{serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}">
+          <td class="id id-data data" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{service.trainid}</td>
+          <td class="from from-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.from}</td>
+          <td class="to to-data data {serviceStats.isCancelled && 'can-dat'} {serviceStats.isNonPublic && 'ecs'}" on:click={showDetails(service.rid, service.uid, service.trainid)} on:keypress={showDetails(service.rid, service.uid, service.trainid)}>{serviceStats.to}</td>
           <td class="plat plat-data data {serviceStats.platformHidden && 'hidden'}">{serviceStats.platform.number || '-'}</td>
           <td class="time time-data data">{serviceStats.schArr}</td>
           <td class="time time-data data {serviceStats.isArrDelayed && 'late'} {serviceStats.isEarlyArr && 'early'} {serviceStats.isLateArr && 'late'}"
@@ -336,7 +361,7 @@
   }
 
   .hidden {
-    color: grey;
+    opacity: 0.5;
   }
 
   .ecs {

src/lib/ldb/staff-train-detail.svelte

@@ -0,0 +1,142 @@
+<script>
+    import OverlayIsland from "$lib/islands/overlay-island.svelte";
+    import Loading from "$lib/navigation/loading.svelte";
+    import { uuid } from "$lib/stores/uuid";
+    export let detail = {
+        uid: '',
+        rid: '',
+        headcode: '',
+        show: true,
+    };
+    export let close;
+
+    function handleClick() {
+        close();
+    }
+
+    async function getTrain(rid) {
+    try {
+      console.log(`Requested Station: ${rid}`);
+      const url = `https://owlboard.info/api/v2/live/train/rid/${rid}`;
+      const opt = {
+        method: 'GET',
+        headers: {
+          uuid: $uuid
+        }
+      };
+      const data = await fetch(url, opt);
+      return await data.json();
+    } catch (error) {
+      console.error('Error fetching data:', error);
+    }
+  }
+
+  async function parseDelay(location) {
+    let string, state;
+    if (location?.lateness) {
+        try {
+          const result = Math.floor(location.lateness / 60)
+          if (result === 0) {string = "RT", state = ''}
+          else if (result < 0) {string = -result + 'E', state = "early"}
+          else if (result > 0) {string = result + 'L', state = "late"};
+        } catch {
+            string = '-', state = '';
+        }
+    } else if (location.arrivalType === "Delayed") {
+        string = "LATE", state = "late";
+    }
+    return {
+        string: string,
+        state: state
+    };
+  }
+</script>
+
+<OverlayIsland>
+    <div id="detailBox">
+      {#await getTrain(detail.rid)}
+        <h6>{detail.headcode}</h6>
+        <Loading />
+      {:then train}
+        <h6>{train.GetServiceDetailsResult.operatorCode}: {detail.headcode}</h6>
+        <p>Locations in grey are not scheduled stops
+            <br>
+           Some stops may be operational stops, not passenger stops.
+        </p>
+      <button type="button" id="closeService" on:click={handleClick}>X</button>
+        <table id="detailTable">
+            <tr>
+                <th>Location</th>
+                <th>Plat.</th>
+                <th>Sch Arr</th>
+                <th>Sch Dep</th>
+                <th>Delay</th>
+            </tr>
+            {#each train.GetServiceDetailsResult.locations.location as location}
+              <tr>
+                <td class="{location?.isPass === 'true' ? 'pass' : ''}">{location.tiploc}</td>
+                <td class="{location?.isPass === 'true' ? 'pass' : ''}">{location.platform || ''}</td>
+                <td class="{location?.isPass === 'true' ? 'pass' : ''}">AR</td>
+                <td class="{location?.isPass === 'true' ? 'pass' : ''}">DP</td>
+                {#await parseDelay(location)}
+                    <td>-</td>
+                {:then delay} 
+                    <td class="{delay.state}">{delay.string}</td>
+                {/await}
+              </tr>
+            {/each}
+        </table>
+        {:catch}
+        <h6>Error loading data</h6>
+        {/await}
+      </div>
+</OverlayIsland>
+
+<style>
+    #detailBox {
+    width: 100%;
+    min-height: 100px;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  h6 {
+    position: absolute;
+    top: -25px;
+    left: 20px;
+    font-size: 18px;
+  }
+  p {
+    margin-top: 45px;
+  }
+  #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 {
+    width: 100%;
+    margin-top: 40px;
+    color: white;
+    font-size: 15px;
+  }
+  .thisStop {
+    color: yellow;
+  }
+  .pass {
+    opacity: 0.45
+  }
+  .early {
+    color: blue;
+  }
+  .late {
+    color: red;
+  }
+</style>