Frontend: Implement display of train data
Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
parent
04e66c3317
commit
393c59c1d7
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user