From 7debbe48605079594315a7d0b5be673b27b1015e Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Sun, 22 Jan 2023 13:49:38 +0000
Subject: [PATCH] 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                           |   8 ++--
 static/board.html                   |   7 +++-
 static/images/nav/alert_icon-50.png | Bin 0 -> 2139 bytes
 static/js/boards.js                 |  58 +++++++++++++++++++---------
 static/js/public-board.js           |  10 +++--
 static/styles/boards.css            |  13 ++++++-
 6 files changed, 67 insertions(+), 29 deletions(-)
 create mode 100644 static/images/nav/alert_icon-50.png

diff --git a/UpNext.md b/UpNext.md
index 0c0c9ba..d9db93c 100644
--- a/UpNext.md
+++ b/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:
diff --git a/static/board.html b/static/board.html
index ebbe8b9..f7ed4d6 100644
--- a/static/board.html
+++ b/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>
diff --git a/static/images/nav/alert_icon-50.png b/static/images/nav/alert_icon-50.png
new file mode 100644
index 0000000000000000000000000000000000000000..fac429ee9e7a19f598c70c811367fbcd5a0d0373
GIT binary patch
literal 2139
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
RJ-Pq@002ovPDHLkV1h^3;2Qt{

literal 0
HcmV?d00001

diff --git a/static/js/boards.js b/static/js/boards.js
index f4753c8..9a88b64 100644
--- a/static/js/boards.js
+++ b/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>`
 }
\ No newline at end of file
diff --git a/static/js/public-board.js b/static/js/public-board.js
index ae02089..3ea57e5 100644
--- a/static/js/public-board.js
+++ b/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>
diff --git a/static/styles/boards.css b/static/styles/boards.css
index 6c793e8..039389a 100644
--- a/static/styles/boards.css
+++ b/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;
 }