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,15 @@
 ## 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.
-* UNDER TEST:: 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/js/boards.js

@@ -79,29 +79,42 @@ async function parseName(location) {
 
 // Build calling list:
 async function buildCallLists(data) {
-    console.log(JSON.stringify(data))
-    if (data.previousCallingPoints.callingPointList.callingPoint) {
-        var preCallPoint = data.previousCallingPoints.callingPointList.callingPoint;
+    try {
+        if (data.previousCallingPoints.callingPointList.callingPoint) {
+            var preCallPoint = data.previousCallingPoints.callingPointList.callingPoint;
+        }
+    } catch (err) {
+        console.log(`Data not found error, ${err}`)
     }
-    if (data.subsequentCallingPoints.callingPointList.callingPoint) {
-        var postCallPoint = data.subsequentCallingPoints.callingPointList.callingPoint;
+    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 = "";
-    if (preCallPoint) {
-        for(var i = 0; i < preCallPoint.length; i++) {
-            var proc = await buildCalls(preCallPoint[i]);
-            procPre = `${procPre}\n${proc}`
+    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}`)
     }
-    if (postCallPoint) {
-        for (var i = 0; i < postCallPoint.length; i++) {
-            var proc = await buildCalls(postCallPoint[i]);
-            procPost = `${procPost}\n${proc}`
+    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}`)
     }
-    console.log(JSON.stringify(procPre))
-    console.log(JSON.stringify(procPost))
     var div = `
             <div class="call-data" id="${data.serviceID}">
               <p class="close-data" onclick="hideCalls('${data.serviceID}')">X</p>
@@ -176,8 +189,17 @@ async function deflateAlerts() {
 async function buildCalls(data) {
     var timeEt = await parseTime(data.et)
     return `<tr>
-              <td class="detail-name">${data.locationName}</td>
-              <td>${data.st}</td>
-              <td>${timeEt.data}</td>
+              <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

@@ -99,6 +99,7 @@ async function displayTrains(data) {
     }
 
     clearLoading();
+    document.getElementById("output").style = "display:block;";
     log(`Insertion complete`)
 }
 
@@ -113,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])
     }
 }
 
@@ -131,8 +133,8 @@ async function displayService(svc) {
     var row = `
     <table>
       <tr>
-        <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="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>
@@ -172,8 +174,8 @@ async function displayFerryService(svc) {
     var row = `
     <table>
       <tr>
-        <td class="name name-item">${parseName(svc.origin.location.locationName)}</td>
-        <td class="name name-item">${parseName(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>

static/styles/boards.css

@@ -137,6 +137,7 @@
 
 /* Content */
 #output {
+    display: none;
     width: 100%;
     margin-top: 65px;
 }
@@ -173,18 +174,20 @@ caption{
 
 .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;
@@ -199,7 +202,8 @@ caption{
     display: none;
     border-radius: 20px;
     width: 93%;
-    position: absolute;
+    max-height: 75%;
+    position: fixed;
     z-index: 10;
     top: 50px;
     left: 0;
@@ -210,6 +214,7 @@ caption{
     padding-bottom: 10px;
     margin-bottom: 25px;
     background-color: var(--overlay-color);
+    overflow: scroll;
 }
 
 .close-data {
@@ -219,6 +224,10 @@ caption{
     font-weight: 900;
 }
 
+.detail-table-content {
+    font-size: 12px;
+}
+
 .changed{
     animation: pulse-change 1.5s linear infinite;
 }