From 3439c2ea266347af21fe9896cd49d6d7538ed30a Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Wed, 11 Jan 2023 23:18:00 +0000
Subject: [PATCH] Implement notices

---
 UpNext.md                |  8 ++++---
 static/board.html        | 17 ++++++++++---
 static/js/board.js       | 52 ++++++++++++++++++++++++++++++++++++----
 static/styles/boards.css | 25 ++++++++++++++++++-
 static/styles/style.css  |  2 ++
 5 files changed, 92 insertions(+), 12 deletions(-)

diff --git a/UpNext.md b/UpNext.md
index 0fe1938..8efff7e 100644
--- a/UpNext.md
+++ b/UpNext.md
@@ -1,7 +1,9 @@
 # What to do next:
 
+* Development - `npm i` needs running on Desktop
 * Docker - nginx-proxy needs rebuilding and repushing.
 * Docker - owlboard needs rebuilding and repushing.
-* Frontend - Fix index.html form.
-* Frontend - Implement message when API returns error state.
-* Frontend - Add page builder.
\ No newline at end of file
+* Frontend - Implement scrolling NRCC Notices as they take up lots of space.
+* Frontend - If Ferry Services Present - Load at bottom of screen.
+* Frontend - Load train services to screen.
+* Frontend - Decide what to do with Bus Services.
\ No newline at end of file
diff --git a/static/board.html b/static/board.html
index 045e3a6..76bd1d2 100644
--- a/static/board.html
+++ b/static/board.html
@@ -20,12 +20,23 @@
                 <p class="header-right">Data from:</p>
                 <p id="fetch_time" class="header-right">Loading...</p>
             </div>
+
+            <div id="nrcc_notices" class="hidden-while-loading">
+                <p id="notices"></p>
+            </div>
+
             <div id="loading">
                 <div class="spinner">
                 </div>
-            <p>
-                Loading
-            </p>
+                <p>Loading</p>
+            </div>
+
+            <div id="error_notice" class="hidden-unless-error">
+                <h1 class="error">Oops</h1>
+                <p class="error">There was an error with your request</p>
+                <p id="err_not_found">The station you are searching for cannot be found</p>
+                <p id="err_no_data">The station has no data.  It may not be in operation yet/anymore.</p>
+                <p id="err_conn">Connection Error, check your data connection.  Retrying.</p>
             </div>
 
             <div id="output">
diff --git a/static/js/board.js b/static/js/board.js
index e6b4748..577b042 100644
--- a/static/js/board.js
+++ b/static/js/board.js
@@ -1,3 +1,6 @@
+// Enable delays
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
 init()
 
 /* Supporting Functions */
@@ -13,12 +16,10 @@ async function init() {
         try {
             var data = await publicLdb(stn)
             log("init: Fetched LDB Data")
+            parseLdb(data)
         } catch (err) {
             var data = null
             log("init: Unable to fetch LDB data")
-        } finally {
-            log(data)
-            parseLdb(data)
         }
     }
 }
@@ -47,11 +48,52 @@ async function setHeaders(title,time){
 }
 
 async function parseLdb(data) {
+    if (data.ERROR == "NOT_FOUND") { // Station not found
+        clearLoading();
+        document.getElementById("error_notice").style = "display: block;";
+        document.getElementById("err_not_found").style = "display: block;";
+        setHeaders("Not Found",new Date())
+    } else if (data == false) {  // No data for station
+        clearLoading();
+        document.getElementById("error_notice").style = "display: block;";
+        document.getElementById("err_no_data").style = "display:block;";
+        setHeaders("No Data",new Date())
+    } else if (data == "err") {  // Connection Error
+        clearLoading();
+        document.getElementById("error_notice").style = "display: block;";
+        document.getElementById("err_conn").style = "display: block;";
+        setHeaders("Connection Error",new Date())
+        await delay(5000);
+        log(`parseLdb: Waited five seconds, reloading`)
+        location.reload()
+    } else {
+        buildPage(data);
+    }
+}
+
+// Hide all loading classes
+async function clearLoading(){
+    document.getElementById("loading").style = "display: none;";
+}
+
+async function buildPage(data){
     var stationName = data.GetStationBoardResult.locationName;
-    log(`parseLdb: Data ready for ${stationName}`);
+    log(`buildPage: Data ready for ${stationName}`);
     var generateTime = new Date(await data.GetStationBoardResult.generatedAt);
-    log(`parseLdb: Data prepared at ${generateTime.toLocaleString()}`)
+    log(`buildPage: Data prepared at ${generateTime.toLocaleString()}`)
     setHeaders(stationName, generateTime);
+    // Check for notices and if true pass to function
+    if (data.GetStationBoardResult.nrccMessages) {
+        displayNotices(data.GetStationBoardResult.nrccMessages.message)
+    }
+}
+
+async function displayNotices(notices){
+    // Input: data.GetStationBoardResult.nrccMessages.messages
+    // Processing: For each message, add a text scroll to the top of the page.
+    // Output: Only to DOM.
+    document.getElementById("notices").innerHTML = notices; // This is a mess if more than one notice is present.
+    document.getElementById("nrcc_notices").style = "display: block;";
 }
 
 // Log Helper
diff --git a/static/styles/boards.css b/static/styles/boards.css
index 22e83d0..9e8aade 100644
--- a/static/styles/boards.css
+++ b/static/styles/boards.css
@@ -39,7 +39,25 @@
     font-weight: bolder;
 }
 
-/* Content: */
+/* Error Notices: */
+.hidden-unless-error {
+    display: none;
+    margin-top: 150px;
+}
+
+#err_not_found {
+    display: none;
+}
+
+#err_no_data {
+    display: none;
+}
+
+#err_conn {
+    display: none;
+}
+
+/* Fixed Content: */
 #header {
     position: fixed;
     top: 0;
@@ -77,4 +95,9 @@
 
 .hide-when-loading {
     display: none;
+}
+
+/* Injected Data */
+#nrcc_notices {
+    margin-top: 60px;
 }
\ No newline at end of file
diff --git a/static/styles/style.css b/static/styles/style.css
index 7623351..2f145e6 100644
--- a/static/styles/style.css
+++ b/static/styles/style.css
@@ -40,6 +40,8 @@ body {
   text-align: center;
   padding-bottom: 60px; /*Footer height*/
 }
+body a {color:var(--link-color)}
+body a:visited {color:var(--link-visited-color)}
 .titleimg {
   width: 45%;
   padding-top: 20px;