Add NRCC messages to publicldb

src/lib/ldb/alert-bar.svelte

@@ -0,0 +1,112 @@
+<script>
+    import { fly } from "svelte/transition";
+
+    export let alerts = [];
+    $: uniqueAlerts = [...new Set(alerts)];
+
+    let displayAlerts = false;
+
+    async function alertsToggle() {
+        displayAlerts = !displayAlerts
+    }
+
+    function numberAsWord(number) {
+        const words = ['zero', 'one', 'two','three','four','five','six','seven','eight'];
+        let word = words[number];
+        if (word) {
+            return word;
+        }
+        return number;
+    }
+</script>
+
+<div id="block"><!--Prevent content slipping underneath the bar--></div>
+<div id="bar">
+    <img src="/images/navigation/alert.svg" alt="">
+    {#if uniqueAlerts.length == 1}
+      <p id="bartext">There is one active alert</p>
+    {:else if uniqueAlerts.length > 1}
+      <p id="bartext">There are {numberAsWord(uniqueAlerts.length)} active alerts</p>
+    {:else}
+      <p id="bartext">There are no active alerts</p>
+    {/if}
+    <button id="arrow" class:displayAlerts on:click={alertsToggle}>V</button>
+</div>
+{#if displayAlerts}
+    <div id="alerts" in:fly={{ y:-200, duration: 500}} out:fly={{ y: -200, duration: 800 }}>
+        {#each uniqueAlerts as msg}
+          <p class="alert">{@html msg}</p>
+        {/each}
+    </div>
+{/if}
+
+<style>
+    #block {
+        height: 40px;
+    }
+    #bar {
+        width: 100%;
+        height: 40px;
+        background-color: var(--main-alert-color);
+        opacity: 1;
+        position: fixed;
+        width: 100%;
+        top: 50px;
+        left: 0px;
+        z-index: 10;
+    }
+    img {
+        height: 25px;
+        width: 25px;
+        position: absolute;
+        left: 8px;
+        top: 8px;
+        margin: 0;
+        padding: 0;
+    }
+    #bartext {
+        color: white;
+        margin: auto;
+        font-weight: 600;
+        margin-top: 8px;
+        margin-bottom: 0px;
+        padding: 0px;
+    }
+    #arrow{
+        color: white;
+        font-family: Arial, Helvetica, sans-serif;
+        font-weight: 900;
+        position: absolute;
+        right: 15px;
+        top: 10px;
+        border: none;
+        background-color: transparent;
+        transition-duration: 500ms;
+    }
+    #arrow:focus {
+        background-color: transparent;
+    }
+    #alerts {
+        position: fixed;
+        background-color: var(--main-alert-color);
+        opacity: 0.9;
+        width: 100%;
+        max-height: 40%;
+        overflow-y: scroll;
+        left: 0;
+        top: 89px;
+    }
+    .alert {
+        color: white;
+        text-align: center;
+        width: 80%;
+        margin:auto;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        font-weight: 600;
+    }
+    .displayAlerts {
+        transition-duration: 500ms;
+        transform: rotate(180deg);
+    }
+</style>

src/lib/ldb/public-ldb.svelte

@@ -4,6 +4,7 @@
   import { onMount } from 'svelte'
   import Loading from '$lib/navigation/loading.svelte';
 	import OverlayIsland from '$lib/islands/overlay-island.svelte';
+	import AlertBar from './alert-bar.svelte';
 
   let requestedStation;
   $: requestedStation = station;
@@ -15,6 +16,7 @@
   let dataAge = null;
   let isLoading = true;
   let dataExists = false;
+  let alerts = [];
   let serviceDetail;
 
   $: {
@@ -61,6 +63,7 @@
     } finally {
       isLoading = false; // Clear loading state
     }
+    prepareNrcc()
   }
 
   function parseTime(string){
@@ -123,6 +126,18 @@
     serviceDetail = null;
   }
 
+  async function prepareNrcc() {
+    if (jsonData?.GetStationBoardResult?.nrccMessages?.message) {
+      const nrcc = jsonData.GetStationBoardResult.nrccMessages.message;
+      if (Array.isArray(nrcc)) {
+        alerts = nrcc
+        return;
+      }
+      alerts.push(nrcc);
+      return;
+    }
+  }
+
   onMount(() => {
     if (requestedStation && jsonData === null) {
       fetchData();
@@ -130,6 +145,10 @@
   });
 </script>
 
+{#if alerts.length}
+  <AlertBar {alerts}/>
+{/if}
+
 {#if isLoading}
   <Loading />
 {:else}

src/lib/navigation/header.svelte

@@ -23,6 +23,7 @@
     margin: 0;
     padding: 0;
     height: 50px;
+    z-index: 20;
 }
 
 img {