Add store for UUID and conditional loading of the LDB page for public/staff boards

src/lib/ldb/public-ldb.svelte

@@ -90,6 +90,7 @@
   <Loading />
 {:else}
   <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
+  <p>Public LDB for {station}</p>
 
   <table>
     <tr>

src/lib/ldb/staff-ldb.svelte

@@ -0,0 +1,100 @@
+<script>
+    export let station = "";
+    import { onMount } from 'svelte'
+    import Loading from '$lib/navigation/loading.svelte';
+	import Nav from '$lib/navigation/nav.svelte';
+  
+    let requestedStation;
+    $: requestedStation = station;
+  
+    let jsonData = null;
+    let services = [];
+    let dataAge = null;
+    let isLoading = true;
+  
+    $: {
+      if (jsonData === null && requestedStation) {
+        fetchData();
+      }
+  
+      if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.generatedAt) {
+        dataAge = new Date(jsonData.GetStationBoardResult.generatedAt);
+      }
+  
+      if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
+        services = jsonData.GetStationBoardResult.trainServices.service;
+      } else {
+        services = [];
+      }
+    }
+  
+    async function fetchData() {
+      isLoading = true; // Set loading state
+      try {
+        console.log(`Requested Station: ${requestedStation}`);
+        const data = await fetch(`https://owlboard.info/api/v1/ldb/${requestedStation}`);
+        jsonData = await data.json();
+      } catch (error) {
+        console.error("Error fetching data:", error);
+      } finally {
+        isLoading = false; // Clear loading state
+      }
+    }
+  
+    function parseTime(string){
+      let output
+      let change
+      switch (string) {
+      case 'Delayed':
+        output = 'LATE'
+        change = "changed"
+        break
+      case 'Cancelled':
+        output = 'CANC'
+        change = "cancelled"
+        break
+      case 'On time':
+        output = 'RT'
+        change = ""
+        break
+      case '':
+        output = '-'
+        change = ""
+        break
+      case undefined:
+        output = '-'
+        change = ""
+        break
+      case 'No report':
+        output = '-'
+        change = ""
+        break
+      case 'undefined':
+        output = false
+        change = ""
+        break
+      default:
+        output = string
+        change = "changed"
+      }
+      return {data: output, changed: change}
+    }
+  
+    onMount(() => {
+      if (requestedStation && jsonData === null) {
+        fetchData();
+      }
+    });
+  </script>
+  
+  {#if isLoading}
+    <Loading />
+  {:else}
+    
+    <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
+    <p>Staff LDB for {station}</p>
+
+    <!--  REST OF PAGE HERE   -->
+  {/if}  
+
+ <Nav />

src/lib/stores/uuid.js

@@ -0,0 +1,23 @@
+import { writable } from 'svelte/store'
+import { browser } from '$app/environment';
+
+export const uuid = writable(fromLocalStorage('uuid', null))
+toLocalStorage(uuid, 'uuid');
+
+function fromLocalStorage(storageKey, fallback) {
+    if (browser) {
+        const storedValue = localStorage.getItem(storageKey);
+        if (storedValue !== 'undefined') {
+            return storedValue
+        }
+    }
+    return fallback
+}
+
+function toLocalStorage(store, storageKey) {
+    if (browser) {
+        store.subscribe(value => {
+            localStorage.setItem(storageKey, value)
+        })
+    }
+}

src/routes/ldb/+page.svelte

@@ -1,7 +1,9 @@
 <script>
     import Header from '$lib/navigation/header.svelte'
     import Nav from '$lib/navigation/nav.svelte'
-    import PublicLdb from '$lib/ldb/public-ldb.svelte';   
+    import PublicLdb from '$lib/ldb/public-ldb.svelte';
+    import StaffLdb from '$lib/ldb/staff-ldb.svelte';
+    import { uuid } from '$lib/stores/uuid.js';
     import {onMount} from 'svelte'
 
     const title = "Public Board"
@@ -11,10 +13,17 @@
 
     let station;
     let staff;
+    let uuidValue;
+
+    $: uuidValue = $uuid;
 
     onMount(async () => {
         station = await getHeadcode() || "";
-        staff = false;
+        if (uuidValue !== null) {
+            staff = true;
+        } else {
+            staff = false;
+        }
     })
 
 </script>
@@ -24,6 +33,8 @@
 <!-- If 'uuid' exists in store then load StaffLdb else load PublicLdb -->
 {#if !staff}
 <PublicLdb {station} />
+{:else}
+<StaffLdb {station} />
 {/if}
 
 <Nav />