Frontend: Implement previous & next stops

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

UpNext.md

@@ -9,6 +9,7 @@
 * 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.
+* Implement calling list.
 
 
 ## Backend:

static/js/boards.js

@@ -77,6 +77,68 @@ 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;
+    }
+    if (data.subsequentCallingPoints.callingPointList.callingPoint) {
+        var postCallPoint = data.subsequentCallingPoints.callingPointList.callingPoint;
+    }
+    var procPre = "";
+    var procPost = "";
+    if (preCallPoint) {
+        for(var i = 0; i < preCallPoint.length; i++) {
+            var proc = await buildCalls(preCallPoint[i]);
+            procPre = `${procPre}\n${proc}`
+        }
+    }
+    if (postCallPoint) {
+        for (var i = 0; i < postCallPoint.length; i++) {
+            var proc = await buildCalls(postCallPoint[i]);
+            procPost = `${procPost}\n${proc}`
+        }
+    }
+    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>
+              <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;
+}
+
 // Display Alert Messages
 async function displayAlerts(array) {
     var counter = 0
@@ -111,45 +173,11 @@ async function deflateAlerts() {
     document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
 }
 
-async function buildPrevCalls(data) {
+async function buildCalls(data) {
-    /*
+    var timeEt = await parseTime(data.et)
-     $data: 
+    return `<tr>
-        "previousCallingPoints":{
+              <td class="detail-name">${data.locationName}</td>
-            "callingPointList":{
+              <td>${data.st}</td>
-                "callingPoint":[
+              <td>${timeEt.data}</td>
-                    {
+            </tr>`
-                        "locationName":"Rhymney",
-                        "crs":"RHY",
-                        "st":"10:27",
-                        "at":"10:32"
-                    },
-                    {
-                        "locationName":"Pontlottyn",
-                        "crs":"PLT",
-                        "st":"10:30",
-                        "at":"10:36"
-                    }...
-                ]
-    */
-}
-
-async function builtNextCalls(data) {
-        /*
-     $data: 
-        "subsequentCallingPoints":{
-            "callingPointList":{
-                "callingPoint":[
-                    {
-                        "locationName":"Pye Corner",
-                        "crs":"PYE",
-                        "st":"11:53",
-                        "et":"On time"
-                    },
-                    {"locationName":"Rogerstone",
-                    "crs":"ROR",
-                    "st":"11:57",
-                    "et":"On time"
-                }...
-            }
-    */
 }

static/js/public-board.js

@@ -94,7 +94,8 @@ 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();
@@ -130,8 +131,8 @@ async function displayService(svc) {
     var row = `
     <table>
       <tr>
-        <td class="name name-item">${svc.origin.location.locationName}</td>
+        <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${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.destination.location.locationName}</td>
         <td class="plat ${plt.changed}">${plt.num}</td>
         <td class="time">${sta.data}</td>
         <td class="time ${eta.changed}">${eta.data}</td>
@@ -208,8 +209,8 @@ async function displayBusService(svc) {
     var row = `
     <table>
       <tr>
-        <td class="name name-item">${svc.origin.location.locationName}</td>
+        <td class="name name-item" onclick="showCalls('${svc.serviceID}')">${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.destination.location.locationName}</td>
         <td class="plat}">${plt}</td>
         <td class="time">${sta.data}</td>
         <td class="time ${eta.changed}">${eta.data}</td>

static/styles/boards.css

@@ -163,6 +163,14 @@ caption{
     text-align: left;
 }
 
+.detail-name-head {
+    text-align: left;
+}
+
+.detail-name{
+    text-align: left;
+}
+
 .name-item {
     color: var(--board-name-color);
 }
@@ -186,6 +194,31 @@ caption{
     color: var(--note-text-color);
 }
 
+
+.call-data {
+    display: none;
+    border-radius: 20px;
+    width: 93%;
+    position: absolute;
+    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);
+}
+
+.close-data {
+    position: absolute;
+    right: 15px;
+    top: -8px;
+    font-weight: 900;
+}
+
 .changed{
     animation: pulse-change 1.5s linear infinite;
 }