Frontend: Refactoring Excersize Finished

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

UpNext.md

@@ -9,39 +9,15 @@
 * Enable text search for `locationName` on find-code page.
 * Recreate raster logos with the new vector file.
 * Responsive text sizes for boards.
-* Rework details div to include the current station and make all stops a single list.  The time parsing function needs to work for `et` OR `at`
-    - Also include other details from the API such as:
-        - Platform number
-        - Operator
-    - If only one callingPoint, a string is returned instead of an array.
 * Change dockerfile to deploy with brotli support for faster laoding.
 
 ### In Progress:
 
-* Frontend code refactoring: --- Pre-Refactor /static/js: 22132B
-                             --- Pre-Refactor /static/js COMPRESSED: 
-                             --- Post-Refactor /static/js:
-                             --- Post-Refactor /static/js COMPRESSED:
-    - Refactor into files:
-        - DONE - lib.main.js
-        - lib.board.js
-        - simple-board.js
-        - DONE - index.js
-        - DONE - settings.js
-        - DONE - find-code.js
-        - DONE - service-worker.js *in / not /js*
-    - Notes:
-        - DONE - Do not put train details into DOM until requested - load into sessionStorage.
-        - Put any reusable code in to a suitable lib file.
-        - Make the board code actually readable.
-        - Prevent the whole page reloading when the PWA is re-opened, that just wastes API calls.
-        - If statements in the displayCallingPoints?() function needs to test for '-' not 'undefined'!!!  Remove new test for 'undefined' in parseTime()!!!
-        - Something in the CSS is messing with scrolling and overflow on mobile.
-
 ### Completed - Testing:
 
 * Implement calling list.
 * Support multiple origins/destinations: NOT INCLUDING ON CALLING LIST
+* Frontend Code Refactor
 
 
 ## Backend:

static/js/lib.board.js

@@ -1,5 +1,3 @@
-const e = require("express");
-
 /* Fetch Functions */
 async function publicLdb(stn) {
     var url = `${window.location.origin}/api/v1/ldb/${stn}`;
@@ -139,17 +137,13 @@ async function buildCallLists(svc) {
             let array = await makeArray(svc.previousCallingPoints.callingPointList.callingPoint);
             oSvcData.pre = array;
         }
-    } catch (err) { /* Log if ERR */
+    } catch (err) { /* Do nothing if ERR */ }
-        log(`Error reading previous calling points: ${err}`, "INFO")
-    }
     try {
         if (typeof svc.subsequentCallingPoints.callingPointList.callingPoint != 'undefined') {
             let array = await makeArray(svc.subsequentCallingPoints.callingPointList.callingPoint);
             oSvcData.post = array;
         }
-    } catch (err) { /* Log if ERR */
+    } catch (err) { /* Do nothing if ERR */ }
-        log(`Error reading future calling points: ${err}`, "INFO")
-    } 
     sessionStorage.setItem(sSvcId, JSON.stringify(oSvcData))
 }
 
@@ -176,25 +170,25 @@ async function showCalls(id) {
     var thisEta = await parseTime(svcDetail.eta);
     var thisPlat = await parsePlatform(svcDetail.plat);
     /* Prepare data for this station */
-    if (thisStd.data != "undefined") {
+    if (thisStd.data != "-") {
-        var sTime = thisStd.data
+        var sTime = `${thisStd.data}`
-        var eTime = thisEtd.data
+        var eTime = `${thisEtd.data}`
         var change = thisEtd.changed
     } else {
-        var sTime = thisSta.data
+        var sTime = `${thisSta.data}`
-        var eTime = thisEta.data
+        var eTime = `${thisEta.data}`
         var change = thisEta.changed
     };
 
     let here = `<tr>
-                  <td class="detail-name detail-table-content">${sessionStorage.getItem("board_location")}</td>
+                  <td class="detail-name detail-name-here detail-table-content">${sessionStorage.getItem("board_location")}</td>
                   <td class="detail-table-content">${sTime}</td>
                   <td class="detail-table-content ${change}">${eTime}</td>
                 </tr> `
     /* Prepare then insert DOM Data */
     let dom = ` <div id="${id}" class="call-data">
                   <p class="close-data" onclick="hideCalls('${id}')">X</p>
-                  <table class="called-at">
+                  <table class="call-table">
                     <tr>
                       <th class="detail-name-head">Location</th>
                       <th class="time">Schedule</th>

static/js/simple-board.js

@@ -3,6 +3,7 @@ init()
 
 /* Init function */
 async function init() {
+    console.time("Loading Time")
     setLoadingDesc(`Loading\nservices`)
     var stn = await getQuery("stn");
     setLoadingDesc(`Loading\n${stn.toUpperCase()}`)
@@ -30,17 +31,17 @@ async function init() {
    If no errors, if there are none, call buildPage(). */
 async function parseLdb(data) {
     if (data.ERROR == "NOT_FOUND") { // Station not found
-        clearLoading();
+        hideLoading();
         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();
+        hideLoading();
         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();
+        hideLoading();
         document.getElementById("error_notice").style = "display: block;";
         document.getElementById("err_conn").style = "display: block;";
         setHeaders("Connection Error",new Date())
@@ -78,6 +79,7 @@ async function buildPage(data) {
         setLoadingDesc('Loading\nBusses')
         displayBus(data.GetStationBoardResult.busServices)
     }
+    console.timeEnd("Loading Time")
 }
 
 
@@ -90,7 +92,7 @@ async function displayTrains(data) {
         buildCallLists(svc);
     }
 
-    clearLoading();
+    hideLoading();
     document.getElementById("output").style = "display:block;";
     log(`Insertion complete`)
 }

static/styles/boards.css

@@ -214,7 +214,7 @@ caption{
     padding-bottom: 10px;
     margin-bottom: 25px;
     background-color: var(--overlay-color);
-    overflow: scroll;
+    overflow: auto;
 }
 
 .close-data {
@@ -224,8 +224,17 @@ caption{
     font-weight: 900;
 }
 
+.call-table {
+    margin: auto;
+    width: 90%;
+}
+
+.detail-name-here {
+    color: var(--board-name-color);
+}
+
 .detail-table-content {
-    font-size: 12px;
+    font-size: 13px;
 }
 
 .changed{