Frontend:Partial refactor of lib.board & simple-board.

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

static/js/lib.board.js

@@ -1,3 +1,5 @@
+const e = require("express");
+
 /* Fetch Functions */
 async function publicLdb(stn) {
     var url = `${window.location.origin}/api/v1/ldb/${stn}`;
@@ -11,6 +13,7 @@ async function setHeaders(title,time) {
     document.title = `${prefix}${title}`
     document.getElementById("stn_name").textContent = title
     document.getElementById("fetch_time").textContent = time.toLocaleTimeString()
+    sessionStorage.setItem("board_location", title);
 }
 
 /* Display No Trains Message */
@@ -62,6 +65,10 @@ async function parseTime(string){
             var output = "-";
             var change = "";
             break;
+        case "undefined":
+            var output = false;
+            var change = "";
+            break;
         default:
             var output = string;
             var change = "changed";
@@ -80,81 +87,6 @@ async function parseName(location) {
     }
 }
 
-// Build calling list:  -- This is a string if only one callingPoint is present, needs adapting to work with that
-async function buildCallLists(data) {
-    try { /* Check if previous calling points exist */
-        if (data.previousCallingPoints.callingPointList.callingPoint) {
-            var preCallPoint = data.previousCallingPoints.callingPointList.callingPoint;
-        }
-    } catch (err) { /* Log if ERR */
-        log(`Error reading previous calling points: ${err}`, "INFO")
-    }
-    try { /* Check if subsequent calling points exist */
-        if (data.subsequentCallingPoints.callingPointList.callingPoint) {
-            var postCallPoint = data.subsequentCallingPoints.callingPointList.callingPoint;
-        }
-    } catch (err) { /* Log if ERR */
-        log(`Error reading future calling points: ${err}`, "INFO")
-    }
-    var procPre = "";
-    var procPost = "";
-    try {
-        if (preCallPoint) {
-            for(var i = 0; i < preCallPoint.length; i++) {
-                var proc = await buildCalls(preCallPoint[i]);
-                procPre = `${procPre}\n${proc}`
-            }
-        }
-    } catch (err) {
-        console.log(`Error reading previous stops. ${err}`)
-    }
-    try {
-        if (postCallPoint) {
-            for (var i = 0; i < postCallPoint.length; i++) {
-                var proc = await buildCalls(postCallPoint[i]);
-                procPost = `${procPost}\n${proc}`
-            }
-        }
-    } catch (err) {
-        console.log(`Error reading next stops. ${err}`)
-    }
-    var div = `
-            <div class="call-data" id="${data.serviceID}">
-              <p class="close-data" onclick="hideCalls('${data.serviceID}')">X</p>
-              <table class="calling-at">
-                <caption>Calling at:</caption>
-                <tr>
-                  <th class="detail-name-head">Location</th>
-                  <th class="time">Schedule</th>
-                  <th class="time">Exp.</th>
-                </tr>
-                ${procPost}
-              </table>
-              <table class="called-at">
-                <caption>Previous stops:</caption>
-                <tr>
-                  <th class="detail-name-head">Location</th>
-                  <th class="time">Schedule</th>
-                  <th class="time">Actual</th>
-                </tr>
-                ${procPre}
-              </table>
-            </div>`
-    document.body.insertAdjacentHTML("beforeend", div)
-    return;
-}
-
-// Display calling list: - The calling list should be built on demand.
-async function showCalls(id) {
-    document.getElementById(id).style = "display: block;";
-    return;
-}
-
-async function hideCalls(id) {
-    document.getElementById(id).style = "display: none;";
-    return;
-}
-
 // Display Alert Messages
 async function displayAlerts(array) {
     var counter = 0
@@ -191,9 +123,103 @@ async function deflateAlerts() {
     document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
 }
 
+/*//// SERVICE DETAIL LISTS ////*/
+// Build calling list:  -- This outputs calling point data to sessionStorage in the format: key{pre: [{PREVIOUS_Stops}], post: [{POST_STOPS}]}
+async function buildCallLists(svc) {
+    var sSvcId = svc.serviceID;
+    var oSvcData = {
+        plat: svc.platform,
+        sta: svc.sta,
+        eta: svc.eta,
+        std: svc.std,
+        etd: svc.etd
+    };
+    try {
+        if (typeof svc.previousCallingPoints.callingPointList.callingPoint != 'undefined') {
+            let array = await makeArray(svc.previousCallingPoints.callingPointList.callingPoint);
+            oSvcData.pre = array;
+        }
+    } catch (err) { /* Log 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 */
+        log(`Error reading future calling points: ${err}`, "INFO")
+    } 
+    sessionStorage.setItem(sSvcId, JSON.stringify(oSvcData))
+}
+
+/* Display calling list: - Read data from sessionStorage and write to DOM. */
+async function showCalls(id) {
+    log(`Showing details for service ${id}`, "INFO")
+    var svcDetail = await JSON.parse(sessionStorage.getItem(id));
+    var pre = "";
+    var post = "";
+    if (typeof svcDetail.pre != 'undefined') {
+        for(var preCall = 0; preCall < svcDetail.pre.length; preCall++) {
+            pre += await singleCall(svcDetail.pre[preCall]);
+        }
+    }
+    if (typeof svcDetail.post != 'undefined') {
+        for(var postCall = 0; postCall < svcDetail.post.length; postCall++) {
+            post += await singleCall(svcDetail.post[postCall]);
+        }
+    }
+    /* Run retreived data through parsers */
+    var thisStd = await parseTime(svcDetail.std);
+    var thisEtd = await parseTime(svcDetail.etd);
+    var thisSta = await parseTime(svcDetail.sta);
+    var thisEta = await parseTime(svcDetail.eta);
+    var thisPlat = await parsePlatform(svcDetail.plat);
+    /* Prepare data for this station */
+    if (thisStd.data != "undefined") {
+        var sTime = thisStd.data
+        var eTime = thisEtd.data
+        var change = thisEtd.changed
+    } else {
+        var sTime = thisSta.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-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">
+                    <tr>
+                      <th class="detail-name-head">Location</th>
+                      <th class="time">Schedule</th>
+                      <th class="time">Act/Est</th>
+                    </tr>
+                    ${pre}
+                    ${here}
+                    ${post}
+                  </table>
+                </div>`
+
+    document.body.insertAdjacentHTML("beforeend", dom);
+    document.getElementById(id).style = "display: block;";
+    return;
+}
+
+async function hideCalls(id) {
+    let element = document.getElementById(id)
+    element.style = "display: none;";
+    element.remove();
+    return;
+}
 
 /* Builds the train data information in to a table row */
-async function buildCalls(data) {
+async function singleCall(data) {
     if (typeof data.et != "undefined") {
         var time = await parseTime(data.et)
     } else if (typeof data.at != "undefined") {

static/js/lib.main.js

@@ -16,6 +16,16 @@ async function storageAvailable(type) {  // Currently not used
     }
 }
 
+/* Array Converter
+   Converts a string to a single item array */
+async function makeArray(data) {
+    if (typeof data == "string") {
+        var array = [];
+        array.push(data);
+        return array;
+    }
+    return data;
+}
 
 /* Timeouts */
 /* Usage: '' */

static/styles/boards.css

@@ -208,7 +208,7 @@ caption{
     top: 50px;
     left: 0;
     margin: 2%;
-    padding-top: 4px;
+    padding-top: 30px;
     padding-left: 5px;
     padding-right: 5px;
     padding-bottom: 10px;
@@ -219,7 +219,7 @@ caption{
 
 .close-data {
     position: absolute;
-    right: 15px;
+    right: 19px;
     top: -8px;
     font-weight: 900;
 }