Frontend:

- PNG Fallback option for alert icon.
 - Styling of calling boxes.
 - Styling of departure board headers.

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

UpNext.md

@@ -3,13 +3,16 @@
 ## Frontend:
 
 * Implement error pages.
-* Still need SVG Fallback option for alert icon on board.html
 * Alerts box should not be clickable, bar should be.
 * Issue page: Submit using API.
-* Support multiple service origins/destinations:
-    - Where there are multiples an array is returned for trainServices.service
 * Enable text search for `locationName` on find-code page.
 
+### Completed - Testing:
+
+* Implement calling list.
+* Still need SVG Fallback for alert icon.
+* Support multiple origins/destinations: NOT INCLUDING ON CALLING LIST
+
 
 ## Backend:
 

static/board.html

@@ -36,7 +36,10 @@
 
       <div id="alerts" onclick="">
         <div id="alerts_bar" onclick="inflateAlerts()">
-          <img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
+          <picture>
+            <source srcset="./images/nav/alert_icon.svg" type="image/svg+xml">
+            <img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
+          </picture>
           <p id="alert_bar_note"></p>
           <button id="alert_expand_arrow">&#8897;</button>
           <div id="alerts_msg" onclick="NULL">
@@ -113,7 +116,7 @@
           </picture>
           <picture id="home_icon">
             <source srcset="./images/nav/home_icon.svg" type="image/svg+xml">
-            <img src="./images/nav/home_icon-40.png" type="image/png" alt="Home">
+            <img src="./images/nav/home_icon-40.png" alt="Home">
           </picture>
         </a>
       </div>

static/index.html

@@ -55,7 +55,7 @@
 
       <div class="text-description">
         <p>This is a development release and is under testing.</p>
-        <p>Departure boards do not yet work and data may be stale.</p>
+        <p>Data may be stale.</p>
         <p>Customise your quick links on the `Settings` page.</p>
       </div>
 

static/js/boards.js

@@ -67,7 +67,88 @@ async function parseTime(string){
 }
 
 // Sometimes the origin or destination names are undefined, need to catch that
-async function parseName() {
+async function parseName(location) {
+    if (Array.isArray(location)) {
+        var name = `${location[0]['locationName']} & ${location[1]['locationName']}`
+        return name;
+    }
+    else {
+        return location.locationName;
+    }
+}
+
+// Build calling list:
+async function buildCallLists(data) {
+    try {
+        if (data.previousCallingPoints.callingPointList.callingPoint) {
+            var preCallPoint = data.previousCallingPoints.callingPointList.callingPoint;
+        }
+    } catch (err) {
+        console.log(`Data not found error, ${err}`)
+    }
+    try {
+        if (data.subsequentCallingPoints.callingPointList.callingPoint) {
+            var postCallPoint = data.subsequentCallingPoints.callingPointList.callingPoint;
+        }
+    } catch (err) {
+        console.log(`Data not found error, ${err}`)
+    }
+    var procPre = "";
+    var procPost = "";
+    try {
+        if (preCallPoint) {
+            for(var i = 0; i < preCallPoint.length; i++) {
+                var proc = await buildPastCalls(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:
+async function showCalls(id) {
+    document.getElementById(id).style = "display: block;";
+    return;
+}
+
+async function hideCalls(id) {
+    document.getElementById(id).style = "display: none;";
     return;
 }
 
@@ -104,3 +185,21 @@ async function deflateAlerts() {
     document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
     document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
 }
+
+async function buildCalls(data) {
+    var timeEt = await parseTime(data.et)
+    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 ${timeEt.changed}">${timeEt.data}</td>
+            </tr>`
+}
+
+async function buildPastCalls(data) {
+    var timeEt = 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 ${timeEt.changed}">${timeEt.data}</td>
+            </tr>`
+}

static/js/public-board.js

@@ -94,10 +94,12 @@ async function displayTrains(data) {
     for(var i = 0; i < data.GetStationBoardResult.trainServices.service.length; i++) {
         // Reset Vars
         var svc = data.GetStationBoardResult.trainServices.service[i];
-        await displayService(svc);
+        displayService(svc);
+        buildCallLists(svc);
     }
 
     clearLoading();
+    document.getElementById("output").style = "display:block;";
     log(`Insertion complete`)
 }
 
@@ -112,6 +114,7 @@ async function displayBus(busSvc) {
     log(JSON.stringify(busSvc))
     for(var i = 0; i < busSvc.service.length; i++) {
         displayBusService(busSvc.service[i])
+        buildCallLists(busSvc.service[i])
     }
 }
 
@@ -130,8 +133,8 @@ async function displayService(svc) {
     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="name name-item" onclick="showCalls('${svc.serviceID}')">${await parseName(svc.origin.location)}</td>
+        <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${await parseName(svc.destination.location)}</td>
         <td class="plat ${plt.changed}">${plt.num}</td>
         <td class="time">${sta.data}</td>
         <td class="time ${eta.changed}">${eta.data}</td>
@@ -141,6 +144,11 @@ async function displayService(svc) {
     </table>`
     // Put Table Row
     table.insertAdjacentHTML("beforeend", row)
+    // Display Operator
+    if (svc.operator) {
+        var opRow = `<p class="msg op">A ${svc.operator} service</p>`
+        table.insertAdjacentHTML("beforeend", opRow);
+    }
     // Parse cancelReason & delayReason
     if (svc.cancelReason) {
         var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
@@ -166,8 +174,8 @@ async function displayFerryService(svc) {
     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="name name-item">${await parseName(svc.origin.location)}</td>
+        <td class="name name-item">${await parseName(svc.destination.location)}</td>
         <td class="plat}">${plt}</td>
         <td class="time">${sta.data}</td>
         <td class="time ${eta.changed}">${eta.data}</td>
@@ -203,8 +211,8 @@ async function displayBusService(svc) {
     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="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.origin.location.locationName}</td>
+        <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.destination.location.locationName}</td>
         <td class="plat}">${plt}</td>
         <td class="time">${sta.data}</td>
         <td class="time ${eta.changed}">${eta.data}</td>
@@ -214,6 +222,11 @@ async function displayBusService(svc) {
     </table>`
     // Put Table Row
     table.insertAdjacentHTML("beforeend", row)
+    // Display operator
+    if (svc.operator) {
+        var opRow = `<p class="msg op">A ${svc.operator} service</p>`
+        table.insertAdjacentHTML("beforeend", opRow);
+    }
     // Parse cancelReason & delayReason
     if (svc.cancelReason) {
         var cancelRow = `<p class="msg">${svc.cancelReason}</p>`

static/styles/boards.css

@@ -137,6 +137,7 @@
 
 /* Content */
 #output {
+    display: none;
     width: 100%;
     margin-top: 65px;
 }
@@ -163,20 +164,30 @@ caption{
     text-align: left;
 }
 
+.detail-name-head {
+    text-align: left;
+}
+
+.detail-name{
+    text-align: left;
+}
+
 .name-item {
     color: var(--board-name-color);
+    font-size: 12px;
 }
 
 .plat{
     width: 4%;
+    font-size: 12px;
     text-align: center;
 }
 
 .time{
     width: 11.5%;
+    font-size: 12px;
     text-align: center;
 }
-
 .msg{
     width: 95%;
     font-size: 10px;
@@ -186,6 +197,37 @@ caption{
     color: var(--note-text-color);
 }
 
+
+.call-data {
+    display: none;
+    border-radius: 20px;
+    width: 93%;
+    max-height: 75%;
+    position: fixed;
+    z-index: 10;
+    top: 50px;
+    left: 0;
+    margin: 2%;
+    padding-top: 4px;
+    padding-left: 5px;
+    padding-right: 5px;
+    padding-bottom: 10px;
+    margin-bottom: 25px;
+    background-color: var(--overlay-color);
+    overflow: scroll;
+}
+
+.close-data {
+    position: absolute;
+    right: 15px;
+    top: -8px;
+    font-weight: 900;
+}
+
+.detail-table-content {
+    font-size: 12px;
+}
+
 .changed{
     animation: pulse-change 1.5s linear infinite;
 }