Frontend: Begin refactoring boards.js and public-board.js

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

UpNext.md

@@ -13,19 +13,11 @@
     - Also include other details from the API such as:
         - Platform number
         - Operator
-* Frontend code refactoring:
-    - Refactor into files:
-        - lib.main.js
-        - lib.board.js
-        - simple-board.js
-        - index.js
-        - settings.js
-        - find-code.js
-        - service-worker.js
+    - If only one callingPoint, a string is returned instead of an array.
 
 ### In Progress:
 
-* Frontend code refactoring: --- Pre-Refactor /static/js folder size: 22132B
+* Frontend code refactoring: --- Pre-Refactor /static/js folder size: 22132B *Check Compressed Size Before Next Build*
     - Refactor into files:
         - lib.main.js
         - lib.board.js
@@ -33,7 +25,7 @@
         - index.js
         - settings.js
         - find-code.js
-        - service-worker.js
+        - service-worker.js *in / not /js*
 
 ### Completed - Testing:
 

static/js/boards.js

@@ -1,20 +1,9 @@
-// Fetch a known query parameter from the pages URL
-async function getQuery(param) {
-    var params = new URLSearchParams(window.location.search)
-    var query = params.get(param)
-    if (query) {
-        return query
-    } else {
-        return 'false'
-    }
-}
-
 // Set page headers
 async function setHeaders(title,time) {
     var prefix = `OwlBoard - `
     document.title = `${prefix}${title}`
-    document.getElementById("stn_name").innerHTML = title
-    document.getElementById("fetch_time").innerHTML = time.toLocaleTimeString()
+    document.getElementById("stn_name").textContent = title
+    document.getElementById("fetch_time").textContent = time.toLocaleTimeString()
 }
 
 // Determine what should display in 'platform' column
@@ -24,7 +13,7 @@ async function parsePlatform(svc){
     } else {
         var platform = "-";
     }
-    if (svc.platformChanged) {
+    if (svc.platformChanged) { // Not present in public API, ready for staff version.
         var changed = "changed";
     } else {
         var changed = "";
@@ -56,7 +45,7 @@ async function parseTime(string){
             var change = "";
             break;
         case "No report":
-            var output = "?";
+            var output = "-";
             var change = "";
             break;
         default:
@@ -66,7 +55,7 @@ async function parseTime(string){
     return {data: output, changed: change};
 }
 
-// Sometimes the origin or destination names are undefined, need to catch that
+// Convert multiple Origin/Destinations to single string
 async function parseName(location) {
     if (Array.isArray(location)) {
         var name = `${location[0]['locationName']} & ${location[1]['locationName']}`
@@ -77,7 +66,7 @@ async function parseName(location) {
     }
 }
 
-// Build calling list:
+// Build calling list:  -- This is a string if only one callingPoint is present, needs adapting to work with that
 async function buildCallLists(data) {
     try {
         if (data.previousCallingPoints.callingPointList.callingPoint) {
@@ -141,7 +130,7 @@ async function buildCallLists(data) {
     return;
 }
 
-// Display calling list:
+// Display calling list: - The calling list should be built on demand.
 async function showCalls(id) {
     document.getElementById(id).style = "display: block;";
     return;
@@ -155,18 +144,18 @@ async function hideCalls(id) {
 // Display Alert Messages
 async function displayAlerts(array) {
     var counter = 0
+    var messages = ""
     for(var i = 0; i < array.length; i++) {
         // Increment counter
         counter += 1;
         // Reset Vars
-        var msg = array[i];
-        console.log(`Alert: ${msg}`);
-        document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", `<p>${msg}</p>`);
+        messages += `<p>${array[i]}</p>`;
     }
+    document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", messages);
     if (counter == 1) {
-        document.getElementById("alert_bar_note").innerHTML = `There is ${counter} active alert`
+        document.getElementById("alert_bar_note").textContent = `There is ${counter} active alert`
     } else if (counter > 1) {
-        document.getElementById("alert_bar_note").innerHTML = `There are ${counter} active alerts`
+        document.getElementById("alert_bar_note").textContent = `There are ${counter} active alerts`
 
     }
     document.getElementById("alerts").style = "display:block"
@@ -186,6 +175,22 @@ async function deflateAlerts() {
     document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
 }
 
+/*
+Compress buildCalls() and buildPastCalls() into a single function
+that can selectively work with either data.et or data.at.
+async function buildCalls(data) {
+    if (typeof data.et != "undefined") {
+        var time = await parseTime(data.et)
+    } else if (typeof data.at != "undefined") {
+        var time = await parseTime(data.at)
+    }
+    return `<tr>
+              <td class="detail-name detail-table-content">${data.locationName}</td>
+              <td class="detail-table-content">${data.st}</td>
+              <td class="detail-table-content ${time.changed}">${time.data}</td>
+            </tr>`
+}
+*/
 async function buildCalls(data) {
     var timeEt = await parseTime(data.et)
     return `<tr>

static/js/lib.main.js

@@ -86,3 +86,14 @@ async function getQuickLinks() {
     }
     return data;
 }
+
+/* Fetch a known query parameter from the pages URL */
+async function getQuery(param) {
+    var params = new URLSearchParams(window.location.search)
+    var query = params.get(param)
+    if (query) {
+        return query
+    } else {
+        return 'false'
+    }
+}

static/js/public-board.js

@@ -29,8 +29,8 @@ async function init() {
 async function publicLdb(stn) {
     var url = `${window.location.origin}/api/v1/ldb/${stn}`;
     var resp = await fetch(url);
-    return await resp.json();}
-
+    return await resp.json();
+}
 
 async function parseLdb(data) {
     if (data.ERROR == "NOT_FOUND") { // Station not found