Work on NRCC Notices

Signed-off-by: Fred Boniface <fred@fjla.uk>

UpNext.md

@@ -1,6 +1,10 @@
 # What to do next:
 
-* Frontend - Implement scrolling NRCC Notices as they take up lots of space.
+* Frontend - Implement paginated NRCC Notices as they take up lots of space.
+    - Either a carousel of multiple notices that auto-step, or an accordian.
+    - Carousel: https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/
 * Frontend - If Ferry Services Present - Load at bottom of screen.
 * Frontend - Load train services to screen.
 * Frontend - Decide what to do with Bus Services.
+* Frontend - Implement error pages - will need to look at including these on the proxy container too?
+    - https://expressjs.com/en/guide/error-handling.html

static/board.html

@@ -22,7 +22,9 @@
             </div>
 
             <div id="nrcc_notices" class="hidden-while-loading">
-                <p id="notices"></p>
+                <p>
+                    Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon.
+                </p>
             </div>
 
             <div id="loading">

static/js/board.js

@@ -90,10 +90,10 @@ async function buildPage(data){
 
 async function displayNotices(notices){
     // Input: data.GetStationBoardResult.nrccMessages.messages
-    // Processing: For each message, add a text scroll to the top of the page.
+    // Processing: For each message, create a <p> inside #notices.
+    //             If there is more than one notice, scroll between them.
     // Output: Only to DOM.
-    document.getElementById("notices").innerHTML = notices; // This is a mess if more than one notice is present.
+    //document.getElementById("notices").innerHTML = notices;
-    document.getElementById("nrcc_notices").style = "display: block;";
 }
 
 // Log Helper

static/styles/boards.css

@@ -97,7 +97,13 @@
     display: none;
 }
 
-/* Injected Data */
+/* NRCC Notices */
 #nrcc_notices {
     margin-top: 60px;
+    height: 65px;
+    font-size: 14px;
+}
+#nrcc_notices p {
+    width: 95%;
+    margin: auto;
 }

static/styles/style.css

@@ -23,7 +23,14 @@
   font-weight: normal;
   font-style: normal;
 }
-
+@font-face {
+  font-family: 'urwgothic';
+  src: url('/styles/fonts/urwgothic/urwgothicDemi.woff2') format('woff2'),
+       url('/styles/fonts/urwgothic/urwgothicDemi.woff') format('woff'),
+       url('/styles/fonts/urwgothic/urwgothicDemi.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
 /* COLOR VARS */
 :root {
   --main-bg-color: #404c55;