Frontend: Add support for bus services

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

src/services/ldb.services.js

@@ -7,10 +7,10 @@
 
 //  convertTiploc(TIPLOC)  : Exported: Looks up CRS, Name & STANOX for Tiploc
 
-const log      = require('../utils/log.utils');          // Log Helper
+const log  = require('../utils/log.utils');          // Log Helper
 const ldb  = require('ldbs-json')
 const util = require('../utils/ldb.utils')
-const san = require('../utils/sanitizer.utils')
+const san  = require('../utils/sanitizer.utils')
 
 const ldbKey   = process.env.OWL_LDB_KEY
 const ldbsvKey = process.env.OWL_LDB_SVKEY
@@ -22,13 +22,32 @@ async function get(body, id){
         var crs = obj[0]['3ALPHA'];
         log.out(`ldbService.get: Determined CRS for lookup to be: ${crs}`);
         var data = await arrDepBoard(crs);
+    } catch (err) {
+        log.out(`ldbService.get: Error, Unable to find CRS: ${err}`)
+        var data = {ERROR:'NOT_FOUND',description:'The entered station was not found.  Please check and try again.'};
+    }
+    try {
         if (data.GetStationBoardResult.nrccMessages) {
             var msg = await util.cleanMessages(data.GetStationBoardResult.nrccMessages);
             data.GetStationBoardResult.nrccMessages.message = msg;
         }
+        if (data.GetStationBoardResult.trainServices && !Array.isArray(data.GetStationBoardResult.trainServices.service)) {
+            log.out(`ldbService.get: Transforming trainServices`)
+            var services = await util.cleanServices(data.GetStationBoardResult.trainServices.service)
+            data.GetStationBoardResult.trainServices.service = services;
+        }
+        if (data.GetStationBoardResult.ferryServices && !Array.isArray(data.GetStationBoardResult.ferryServices.service)) {
+            log.out(`ldbService.get: Transforming ferryServices`)
+            var services = await util.cleanServices(data.GetStationBoardResult.ferryServices.service)
+            data.GetStationBoardResult.ferryServices.service = services;
+        }
+        if (data.GetStationBoardResult.busServices && !Array.isArray(data.GetStationBoardResult.busServices.service)) {
+            log.out(`ldbService.get: Transforming busServices`)
+            var services = await util.cleanServices(data.GetStationBoardResult.busServices.service)
+            data.GetStationBoardResult.busServices.service = services;
+        }
     } catch (err) {
-        log.out(`ldbService.get: Error, Unable to find CRS: ${err}`)
-        var data = {ERROR:'NOT_FOUND',description:'The entered station was not found.  Please check and try again.'};
+        log.out(`ldbService.get: Error transforming upstream data: ${err}`)
     }
     return data;
 }

src/utils/ldb.utils.js

@@ -23,7 +23,21 @@ async function cleanMessages(input){
     return out;
 }
 
+// Accepts an object but not an Array and returns it wrapped in an array.
+async function cleanServices(input){
+    var out = []
+    if (!Array.isArray(input)) {
+        log.out(`ldbUtils.cleanServices: Transforming input: ${input}`)
+        out.push(input)
+        log.out(`ldbUtils.cleanServices: Returning output: ${out}`)
+        return out;
+    } else {
+        return input;
+    }
+}
+
 module.exports = {
     checkCrs,
-    cleanMessages
+    cleanMessages,
+    cleanServices
 }

static/board.html

@@ -35,10 +35,10 @@
       </div>
 
       <div id="alerts">
-        <div id="alerts_bar">
+        <div id="alerts_bar" onclick="inflateAlerts()">
           <img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
-          <p id="alert_bar_note">There are <span id="alert_number">no</span> active alerts</p>
-          <button id="alert_expand_arrow" onclick="inflateAlerts()">&#8897;</button>
+          <p id="alert_bar_note"></p>
+          <button id="alert_expand_arrow">&#8897;</button>
           <div id="alerts_msg">
           </div>
         </div>
@@ -56,6 +56,9 @@
             <th class="time">Exp Dep.</th>
           </tr>
         </table>
+        <div id="no_services" class="main-notice hidden-whille-loading">
+          <p>There are no scheduled train services from this station</p>
+        </div>
       </div>
 
       <div id="ferry" class="hide-when-loading">
@@ -73,6 +76,21 @@
         </table>
       </div>
 
+      <div id="bus" class="hide-when-loading">
+        <p>Bus Services</p>
+        <table>
+          <tr>
+            <th class="name">Origin</th>
+            <th class="name">Dest.</th>
+            <th class="plat"></th>
+            <th class="time">Sch Arr.</th>
+            <th class="time">Exp Arr.</th>
+            <th class="time">Sch Dep.</th>
+            <th class="time">Exp Dep.</th>
+          </tr>
+        </table>
+      </div>
+
       <div id="error_notice" class="main-notice hide-when-loading">
         <h1 class="error">Oops</h1>
           <p class="error">There was an error with your request</p>
@@ -80,9 +98,6 @@
           <p id="err_no_data" class="notices-hidden">The station has no data.  It may not be in operation yet/anymore.</p>
           <p id="err_conn" class="notices-hidden">Connection Error, check your data connection.  Retrying.</p>
       </div>
-      <div id="no_services" class="main-notice hidden-whille-loading">
-        <p>There are no scheduled train services from this station</p>
-      </div>
 
       <div id="footer">
         <picture>

static/js/boards.js

@@ -41,7 +41,7 @@ async function parseTime(string){
             break;
         case "Cancelled":
             var output = "CANC";
-            var change = "changed";
+            var change = "cancelled";
             break;
         case "On time":
             var output = "RT";
@@ -82,7 +82,12 @@ async function displayAlerts(array) {
         console.log(`Alert: ${msg}`);
         document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", `<p>${msg}</p>`);
     }
-    document.getElementById("alert_number").innerHTML = `${counter}`
+    if (counter == 1) {
+        document.getElementById("alert_bar_note").innerHTML = `There is ${counter} active alert`
+    } else if (counter > 1) {
+        document.getElementById("alert_bar_note").innerHTML = `There are ${counter} active alerts`
+
+    }
     document.getElementById("alerts").style = "display:block"
     document.getElementById("alerts_bar").style = "display:block"
     document.getElementById("output").style = "margin-top:95px" // Adjust margin of train table div.
@@ -91,11 +96,11 @@ async function displayAlerts(array) {
 async function inflateAlerts() {
     document.getElementById("alerts_msg").style = "display:block;";
     document.getElementById("alert_expand_arrow").style = "transform: rotate(180deg);";
-    document.getElementById("alert_expand_arrow").setAttribute("onclick", "deflateAlerts()")
+    document.getElementById("alerts_bar").setAttribute("onclick", "deflateAlerts()")
 }
 
 async function deflateAlerts() {
     document.getElementById("alerts_msg").style = "display.none;";
     document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
-    document.getElementById("alert_expand_arrow").setAttribute("onclick", "inflateAlerts()")
+    document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
 }

static/js/public-board.js

@@ -71,6 +71,9 @@ async function buildPage(data) {
     if (data.GetStationBoardResult.ferryServices) {
         displayFerry(data.GetStationBoardResult.ferryServices)
     }
+    if (data.GetStationBoardResult.busServices) {
+        displayBus(data.GetStationBoardResult.busServices)
+    }
 }
 
 async function displayNoTrains() {
@@ -97,6 +100,13 @@ async function displayFerry(ferrySvc) {
     }
 }
 
+async function displayBus(busSvc) {
+    log(JSON.stringify(busSvc))
+    for(var i = 0; i < busSvc.service.length; i++) {
+        displayBusService(busSvc.service[i])
+    }
+}
+
 async function displayService(svc) {
     var table = document.getElementById("output");
  
@@ -170,3 +180,40 @@ async function displayFerryService(svc) {
     }
     document.getElementById("ferry").style = "display:block"
 }
+
+async function displayBusService(svc) {
+    var table = document.getElementById("bus");
+    log(JSON.stringify(svc))
+    // Determine Time Message
+    var sta = await parseTime(svc.sta);
+    var eta = await parseTime(svc.eta);
+    var std = await parseTime(svc.std);
+    var etd = await parseTime(svc.etd);
+    // Determine Platform Message
+    var plt = "";
+    // Define Table Row
+    var row = `
+    <table>
+      <tr>
+        <td class="name name-item">${svc.origin.location.locationName}</td>
+        <td class="name name-item">${svc.destination.location.locationName}</td>
+        <td class="plat}">${plt}</td>
+        <td class="time">${sta.data}</td>
+        <td class="time ${eta.changed}">${eta.data}</td>
+        <td class="time">${std.data}</td>
+        <td class="time ${etd.changed}">${etd.data}</td>
+      </tr>
+    </table>`
+    // Put Table Row
+    table.insertAdjacentHTML("beforeend", row)
+    // Parse cancelReason & delayReason
+    if (svc.cancelReason) {
+        var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
+        table.insertAdjacentHTML("beforeend", cancelRow);
+    }
+    if (svc.delayReason) {
+        var delayRow = `<p class="msg">${svc.delayReason}</p>`
+        table.insertAdjacentHTML("beforeend", delayRow);
+    }
+    document.getElementById("bus").style = "display:block"
+}

static/styles/boards.css

@@ -16,7 +16,7 @@
 #no_services {
     width: 75%;
     margin: auto;
-    margin-top: 150px;
+    margin-top: 80px;
     font-size: 20px;
     font-weight: 900;
 }
@@ -179,7 +179,10 @@ table {
 }
 
 .changed{
-    animation: pulse 1.5s linear infinite;
+    animation: pulse-change 1.5s linear infinite;
+}
+.cancelled {
+    animation: pulse-cancel 1.5s linear infinite;
 }
 
 /* Footer: */
@@ -197,8 +200,14 @@ table {
 }
 
 /* Animations */
-@keyframes pulse {
+@keyframes pulse-change {
     50% {
         color: orange;
     }
 }
+
+@keyframes pulse-cancel {
+    50% {
+        color: darkorange;
+    }
+}