Frontend: Implement previous & next stops

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-22 12:37:25 +00:00
parent e15824381e
commit 4d36177d17
4 changed files with 109 additions and 46 deletions

View File

@ -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:

View File

@ -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) {
/*
$data:
"previousCallingPoints":{
"callingPointList":{
"callingPoint":[
{
"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"
}...
}
*/
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>
</tr>`
}

View File

@ -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">${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.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">${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>

View File

@ -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;
}