Componentisation of LDB

src/app.css

@@ -38,6 +38,7 @@
     --second-bg-color: #2b343c; /* Use as first arg in radial gradient */
     --accent-color: #007979;
     --overlay-color: #3c6f79de;
+    --overlay-color-solid: #3c6f79;
     --main-text-color: #00b7b7;
     --second-text-color: #0afdfd;
     --note-text-color: #9de7ff;

src/lib/ldb/public-ldb.svelte

@@ -0,0 +1,60 @@
+<script>
+    export let station = "";
+    import {onMount} from 'svelte'
+
+    let requestedStation = "";
+    $: requestedStation = station;
+
+    let jsonData = {};
+    /**
+	 * @type {any[]}
+	 */
+    let services = [];
+    $: {
+        if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
+            services = [...jsonData.GetStationBoardResult.trainServices.service];
+        } else {
+            services = ["No train services available"];
+        }
+    }
+
+    onMount(async () => {
+        const data = await fetch(`https://owlboard.info/api/v1/ldb/${station}`);
+        jsonData = await data.json();
+    })
+
+</script>
+
+<p>{requestedStation.toUpperCase()}</p>
+
+<p>
+    {#each services as service}
+        <span>{service.origin?.location?.locationName || 'Unknown'}</span>
+    {/each}
+</p>
+
+<table>
+    <tr>
+        <th>From</th>
+        <th>To</th>
+        <th>Plat.</th>
+        <th>Sch Arr.</th>
+        <th>Exp Arr.</th>
+        <th>Sch Dep.</th>
+        <th>Exp Dep.</th>
+    </tr>
+    {#each services as service}
+    <tr>
+        <td>{service.origin?.location?.locationName || ''}</td>
+        <td>{service.destination?.location?.locationName || ''}</td>
+        <td>{service.platform || ''}</td>
+    </tr>
+    {/each}
+</table>
+
+<style>
+    table {
+        width: 100%;
+        margin: auto;
+    }
+</style>

src/lib/navigation/header.svelte

@@ -16,7 +16,7 @@
 </div>
 <style>
 .headerBar {
-    background: var(--overlay-color);
+    background: var(--overlay-color-solid);
     position: fixed;
     top: 0; left: 0;
     width: 100%;

src/lib/navigation/nav.svelte

@@ -37,7 +37,7 @@
         left: 0;
         width: 100%;
         height: 50px;
-        background-color: rgba(0, 0, 0, 0.123);
+        background-color: rgb(54, 54, 54);
     }
 
    footer a {

src/lib/stores/quick-links.js

@@ -10,7 +10,7 @@ function fromLocalStorage(storageKey, fallback) {
         if (storedValue !== 'undefined' && storedValue !== null) {
             return (typeof fallback === 'object')
             ? JSON.parse(storedValue)
-           : storedValue
+            : storedValue
         }
     }
     return fallback

src/routes/+error.svelte

@@ -0,0 +1,24 @@
+<script>
+    import { page } from '$app/stores';
+	import Header from '$lib/navigation/header.svelte';
+    import Nav from '$lib/navigation/nav.svelte';
+    const title = "OwlBoard - Error"
+</script>
+
+<Header {title} />
+
+<h1>{$page.status}: {$page?.error?.message}</h1>
+
+{#if $page.status === 404}
+<p>This is not the page you're looking for.</p>
+<p>The page you are looking for doesn't exist, use the tabs below to find another page.</p>
+{:else if $page.status === 500}
+<p>Something went wrong loading the app.<br>
+    Try going <a href="/">home</a> and try again.</p>
+<p>If the problem persists, you can report an issue from the 'More' menu.</p>
+{:else}
+<p>Not sure what went wrong, please try again later or report an issue from
+    the 'More' menu.</p>
+{/if}
+
+<Nav />

src/routes/ldb/+page.svelte

@@ -1,44 +1,25 @@
 <script>
-   import Header from '$lib/navigation/header.svelte'
-   import Nav from '$lib/navigation/nav.svelte'
-   
-   import {onMount} from 'svelte'
+    import Header from '$lib/navigation/header.svelte'
+    import Nav from '$lib/navigation/nav.svelte'
+    import PublicLdb from '$lib/ldb/public-ldb.svelte';   
+    import {onMount} from 'svelte'
 
-   const title = "Public Board"
-
-   async function getHeadcode() {
+    const title = "Public Board"
+    async function getHeadcode() {
         return new URLSearchParams(window.location.search).get('station');
     }
 
-    let jsonData = {}; // Extract train data from the object to pass to #each
-    let services = [];
-
-    $: {
-        if (jsonData && jsonData.GetStationBoardResult && jsonData.GetStationBoardResult.trainServices && jsonData.GetStationBoardResult.trainServices.service) {
-            services = [...jsonData.GetStationBoardResult.trainServices.service];
-        } else {
-            services = ["No train services available"];
-        }
-    }
+    let station = ""
 
     onMount(async () => {
-        const station = await getHeadcode();
-        document.getElementById('station').textContent = station;
-        const data = await fetch(`https://owlboard.info/api/v1/ldb/${station}`);
-        jsonData = await data.json();
+        station = await getHeadcode() || "";
     })
 
 </script>
 
 <Header {title} />
 
-<p>Station: <span id="station"></span></p>
-<p>
-{#each services as service}
-    <span>{service.origin?.location?.locationName || 'Unknown'}</span>
-{/each}
-</p>
-<p>{JSON.stringify(jsonData)}</p>
+<!-- If 'uuid' exists in store then load StaffLdb else load PublicLdb -->
+<PublicLdb {station} />
 
-
-<Nav />
+<Nav />

svelte.config.js

@@ -5,7 +5,7 @@ export default {
         adapter: adapter({
             pages: 'build',
             assets: 'build',
-            fallback: undefined,
+            fallback: '/',
             precompress: true,
             strict: true
         })