Update and implement TimeBar, needs testing with NRCC messages present.

src/lib/DevBanner.svelte

@@ -3,8 +3,8 @@
 <style>
     #banner {
         width: 200px;
-        background: red;
-        color: #fff;
+        background: rgba(255, 0, 0,0.5);
+        color: #ffffff7a;
         position: fixed;
         text-align: center;
         top: 25px;

src/lib/cards/Card.svelte

@@ -35,8 +35,8 @@
         width: 85%;
         max-width: 400px;
         margin: auto;
-        margin-top: 20px;
-        margin-bottom: 10px;
+        margin-top: 10px;
+        margin-bottom: 20px;
         padding: 10px 5px 5px 5px;
         background-color: var(--island-bg-color);
         border-radius: 10px;

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

@@ -6,6 +6,7 @@
     import TrainDetail from "./train-detail.svelte";
     import { fetchStaffLdb } from "./fetch";
     import AlertBar from "../nrcc/alert-bar.svelte";
+    import TimeBar from "$lib/navigation/TimeBar.svelte";
 
     export let station: string;
     export let title: string | undefined = "Loading...";
@@ -56,9 +57,14 @@
 {/key}
 
 {#await callFetch(station)}
+    <TimeBar updatedTime={undefined} />
     <Loading />
 {:then data}
     {#if data}
+        {#if nrcc.length}
+            <AlertBar alerts={nrcc} />
+        {/if}
+        <TimeBar updatedTime={new Date(data.generatedAt)} />
         <p class="generatedTime" style="margin-top: {generatedMarginTop};">Updated: {new Date(data.generatedAt).toLocaleTimeString()}</p>
         {#if data.trainServices?.length}
             <TableGenerator services={data.trainServices} click={showDetail} />
@@ -73,12 +79,9 @@
             <span class="table-head-text">Ferry Services</span>
             <TableGenerator services={data.ferryServices} click={showDetail} />
         {/if}
-        {#if nrcc.length}
-            <AlertBar alerts={nrcc} />
-        {/if}
-        <!-- NRCC Alerts are not available -->
     {/if}
 {:catch}
+    <TimeBar updatedTime={new Date} />
     <h2>Error</h2>
     <p>ERR-CODE: {errorDetail.code}</p>
     <p>Message:<br />{errorDetail.message}</p>

src/lib/navigation/TimeBar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte";
 
-    export let updatedTime: Date = new Date();
+    export let updatedTime: Date | undefined;
 
 let currentTime: string = "00:00:00"
 function updateTime() {
@@ -20,14 +20,18 @@ onMount(() => {
 </script>
 
 <div id="TimeBar">
+    {#if updatedTime}
         <span class="updated-time">Updated: {updatedTime.toLocaleTimeString()}</span>
+    {:else}
+        <span></span>
+    {/if}
     <span class="current-time">{currentTime}</span>
 </div>
 
 <style>
     #TimeBar {
         width: 100%;
-        background-color: black;
+        background-color: transparent;
         height: 30px;
         display: flex;
         justify-content: space-between;
@@ -37,12 +41,14 @@ onMount(() => {
     .updated-time {
         font-family: firamono, 'Courier New', Courier, monospace;
         margin-left: 10px;
+        font-size: 14px;
     }
     .current-time {
         font-family: firamono, 'Courier New', Courier, monospace;
         font-weight: 900;
         vertical-align: middle;
-        color: orange;
+        color: aliceblue;
         margin-right: 10px;
+        font-size: 17px;
     }
 </style>

src/lib/navigation/nav-ldb.svelte

@@ -8,22 +8,7 @@
     ];
     import { page } from "$app/stores";
     import { IconHome } from "@tabler/icons-svelte";
-    import { onMount } from "svelte";
 
-    let currentTime: string = "00:00:00"
-    function updateTime() {
-        const now = new Date();
-        const hours = now.getHours().toString().padStart(2, '0');
-        const mins = now.getMinutes().toString().padStart(2, '0');
-        const secs = now.getSeconds().toString().padStart(2, '0');
-        currentTime = `${hours}:${mins}:${secs}`
-    }
-
-    onMount(() => {
-        updateTime();
-        const interval = setInterval(updateTime, 1000);
-        return () => clearInterval(interval);
-    })
 </script>
 
 <footer>
@@ -42,7 +27,6 @@
                 <img id="nre-logo" src="/images/nre/nre-powered_200w.png" alt="Data sourced from National Rail and others" />
             </picture>
         </a>
-        <span class="clock">{currentTime}</span>
     </div>
 </footer>
 
@@ -107,12 +91,4 @@
         margin-bottom: 3px;
         padding: 0;
     }
-
-    .clock {
-        color: black;
-        font-size: 10px;
-        position: absolute;
-        bottom: 2px;
-        right: 10px;
-    }
 </style>

src/routes/test/+page.svelte

@@ -30,7 +30,7 @@
     }
 </script>
 <Header title={"Test"} />
-<TimeBar />
+<TimeBar updatedTime={new Date} />
 <LookupCard config={LookupConfig} />
 <LookupCard config={TimetableConfig} />
 <NearToMeCard />

src/routes/train/+page.svelte

@@ -9,6 +9,7 @@
     import TrainDetail from "$lib/train/train-detail.svelte";
     import { getApiUrl } from "$lib/scripts/upstream";
     import toast from "svelte-french-toast";
+    import TimeBar from "$lib/navigation/TimeBar.svelte";
 
     let title = "Timetable Results";
     let id = "";
@@ -79,7 +80,7 @@
 </script>
 
 <Header {title} />
-<div id="whitespace" />
+<TimeBar updatedTime={undefined} />
 
 {#if error}
     <Island>
@@ -100,9 +101,6 @@
 <Nav />
 
 <style>
-    #whitespace {
-        height: 15px;
-    }
     p {
         color: white;
         font-size: 18px;