Frontend: Implement display of train data

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-18 13:09:15 +00:00
parent 04e66c3317
commit 393c59c1d7
3 changed files with 78 additions and 30 deletions

View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
@ -30,39 +31,22 @@
<div id="nrcc_notices" class="hidden-while-loading">
<p>
Example: Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon.
Example NRCC Message Here... ... ...
NRCC Messages can sometimes be long, and sometimes
short so this must be accounted for.
</p>
</div>
<div id="output">
<table id="pub-table">
<table>
<tr>
<th class="name">Origin</th>
<th class="name">Dest.</th>
<th class="plat">Plat.</th>
<th class="time">Sch Arr.</th>
<th class="time">Act Arr.</th>
<th class="time">Exp Arr.</th>
<th class="time">Sch Dep.</th>
<th class="time">Act Dep.</th>
</tr>
<!-- EXAMPLE DATA FOR STYLING REASONS -->
<tr>
<td class="name">Bristol Temple Meads</td>
<td class="name">Southampton Airport Parkway</td>
<td class="plat">1</td>
<td class="time">10:57</td>
<td class="time changed">10:59</td>
<td class="time">11:02</td>
<td class="time">On Time</td>
</tr>
<tr>
<td class="name">Bristol Parkway</td>
<td class="name">Dorchester South</td>
<td class="plat changed">13</td>
<td class="time">11:07</td>
<td class="time">11:22</td>
<td class="time">11:09</td>
<td class="time changed">11:23</td>
<th class="time">Exp Dep.</th>
</tr>
</table>
</div>

View File

@ -85,7 +85,7 @@ async function buildPage(data) {
if (typeof data.GetStationBoardResult.trainServices == 'undefined') {
displayNoTrains()
} else {
// Function here to Parse train services and display.
displayTrains(data)
}
}
@ -102,8 +102,61 @@ async function displayNoTrains() {
clearLoading();
}
async function displayTrains() {
return
async function displayTrains(data) {
log(`Inserting data in DOM`)
var table = document.getElementById("output");
for(var i = 0; i < data.GetStationBoardResult.trainServices.service.length; i++) {
// Reset Vars
var svc = data.GetStationBoardResult.trainServices.service[i];
var eaChg = "";
var edChg = "";
// Determine Time Message
if (svc.sta){var sta = svc.sta}else{var sta = '-'};
if (svc.eta){var eta = svc.eta}else{var eta = '-'};
if (eta=="On time"){var eta='RT'}else if(eta=="Delayed"){var eta="LATE";var eaChg="changed";}else if(eta!='-'){var eaChg="changed";};
if (svc.std){var std = svc.std}else{var std = '-'};
if (svc.etd){var etd = svc.etd}else{var etd = '-'};
if (etd=="On time"){var etd='RT';}else if(etd=="Delayed"){var etd="LATE";var edChg="changed";}else if(etd!='-'){var edChg="changed";};
// Determine Platform Message
if (svc.platform){var plt = svc.platform}else{var plt = "-"};
// Define Table Row
var row = `
<table>
<tr>
<td class="name">${svc.origin.location.locationName}</td>
<td class="name">${svc.destination.location.locationName}</td>
<td class="plat">${plt}</td>
<td class="time">${sta}</td>
<td class="time ${eaChg}">${eta}</td>
<td class="time">${std}</td>
<td class="time ${edChg}">${etd}</td>
</tr>
</table>`
// Put Table Row
table.insertAdjacentHTML("beforeend", row)
// Parse cancelReason & delayReason
if (svc.cancelReason) {
console.log(`Cancel reason: ${svc.cancelReason}`)
var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
table.insertAdjacentHTML("beforeend", cancelRow);
}
if (svc.delayReason) {
console.log(`Delay reason: ${svc.delayReason}`)
var delayRow = `<p class="msg">${svc.delayReason}</p>`
table.insertAdjacentHTML("beforeend", delayRow);
}
}
clearLoading();
log(`Insertion complete`)
}
async function parsePlatform(){
}
async function parseExpTime(){
}
async function parseName(){
}
// Log Helper

View File

@ -24,6 +24,7 @@
width: 100%;
height: 50px;
background-color: var(--overlay-color);
color: lightgrey;
}
#station_name {
@ -37,7 +38,7 @@
.header-right {
text-align: right;
padding-right: 5px;
margin: 4px;
margin: 3px;
}
#footer {
@ -60,7 +61,6 @@
/* NRCC Notices */
#nrcc_notices {
margin-top: 60px;
height: 65px;
font-size: 14px;
}
#nrcc_notices p {
@ -75,21 +75,32 @@
table {
width: 100%;
margin-top: 3px;
font-size: 10.5px;
}
.name{
width: 25%;
text-align: left;
}
.plat{
width: 50px;
width: 4%;
text-align: center;
}
.time{
width: 75px;
width: 11.5%;
text-align: center;
}
.msg{
width: 95%;
font-size: 10px;
margin: 0;
margin-left: 3px;
text-align: left;
color: white;
}
.changed{
animation: pulse 1.5s linear infinite;
}