Public board complete

src/lib/ldb/public-ldb.svelte

@@ -13,6 +13,7 @@
   let ferryServices = [];
   let dataAge = null;
   let isLoading = true;
+  let dataExists = false;
 
   $: {
       if (jsonData === null && requestedStation) {
@@ -40,11 +41,12 @@
       if (jsonData?.GetStationBoardResult?.locationName) {
         title = jsonData.GetStationBoardResult.locationName
       } else {
-        title = "Loading Board"
+        title = requestedStation.toUpperCase()
       }
     }
 
   async function fetchData() {
+    dataExists = true;
     isLoading = true; // Set loading state
     try {
       console.log(`Requested Station: ${requestedStation}`);
@@ -52,6 +54,8 @@
       jsonData = await data.json();
     } catch (error) {
       console.error("Error fetching data:", error);
+      dataExists = false;
+      title = "Not Found";
     } finally {
       isLoading = false; // Clear loading state
     }
@@ -106,6 +110,7 @@
 {#if isLoading}
   <Loading />
 {:else}
+  {#if dataAge}
     <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
     {#if services.length}
       <table>
@@ -219,6 +224,9 @@
         {/each}
       </table>
     {/if}
+  {:else}
+    <p>Unable to find this station</p>
+  {/if}
 {/if}
 <style>
   #timestamp {

src/lib/navigation/nav-ldb.svelte

@@ -0,0 +1,91 @@
+<script>
+    const links = [
+      {
+        title: "Home",
+        path: "/",
+        svgPath: "/images/navigation/home.svg"
+      }
+    ]
+    import { page } from "$app/stores";
+</script>
+
+<footer>
+  {#each links as item}
+        <a class="footerLink" href={item.path} class:active={$page.url.pathname == item.path}>
+          <img src="{item.svgPath}" alt="{item.title}">
+          <br>
+          <span>{item.title}</span>
+        </a>
+  {/each}
+  <div class="data-source">
+    <a href="https://nationalrail.co.uk" target="_blank">
+      <picture>
+        <source srcset="/images/nre/nre-powered_200w.jxl" type="image/jxl">
+        <source srcset="/images/nre/nre-powered_200w.webp" type="image/webp">
+        <img id="nre-logo" src="/images/nre/nre-powered_200w.png" alt="Data sourced from National Rail and others">
+      </picture>
+    </a>
+  </div>
+</footer>
+
+<style>
+    footer {
+        position: fixed;
+        display: flex;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 50px;
+        background-color: var(--overlay-color);
+    }
+
+   .footerLink {
+        width: 30%;
+        height: 100%;
+        background-color: var(--overlay-color);
+        border-style: solid;
+        border-width: 1px;
+        border-top: none;
+        border-bottom: none;
+        border-color: rgba(0, 0, 0, 0.24);
+        text-decoration: double;
+        font-weight: 600;
+    }
+
+    footer a.active {
+        background-color: transparent;
+    }
+    .data-source {
+      flex-grow: 2;
+      background: rgb(255,255,255);
+    }
+    #nre-logo {
+      width: 150px;
+      height: auto;
+      margin: auto;
+      margin-top: 13px;
+    }
+    @media only screen and (min-width: 475px) {
+      .data-source {
+        background: rgb(255,255,255);
+        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%);
+      }
+      #nre-logo {
+        position: absolute;
+        right: 0;
+        right: 20px;
+      }
+    }
+    img {
+      height: 20px;
+      width: 20px;
+      margin: 0;
+      margin-top: 3px;
+      padding: 0;
+    }
+    span {
+      margin: 0;
+      margin-bottom: 3px;
+      padding: 0;
+    }
+</style>

src/routes/ldb/+page.svelte

@@ -1,6 +1,6 @@
 <script>
     import Header from '$lib/navigation/header.svelte'
-    import Nav from '$lib/navigation/nav.svelte'
+    import Nav from '$lib/navigation/nav-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';