Compare commits
2 Commits
cbd71efb45
...
393c59c1d7
| Author | SHA1 | Date |
|---|---|---|
 Fred Boniface
|
393c59c1d7 | |
|
Fred Boniface
|
04e66c3317 |
|
|
@ -1,3 +1,4 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
|
|
@ -30,10 +31,26 @@
|
|||
|
||||
<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>
|
||||
<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">Exp Arr.</th>
|
||||
<th class="time">Sch Dep.</th>
|
||||
<th class="time">Exp Dep.</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="error_notice" class="main-notice hidden-while-loading">
|
||||
<h1 class="error">Oops</h1>
|
||||
<p class="error">There was an error with your request</p>
|
||||
|
|
@ -45,9 +62,6 @@
|
|||
<p>There are no scheduled train services from this station</p>
|
||||
</div>
|
||||
|
||||
<div id="output">
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<picture>
|
||||
<source srcset="./images/nre/nre-powered_200w.webp" type="image/webp">
|
||||
|
|
|
|||
|
|
@ -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,10 +61,53 @@
|
|||
/* NRCC Notices */
|
||||
#nrcc_notices {
|
||||
margin-top: 60px;
|
||||
height: 65px;
|
||||
font-size: 14px;
|
||||
}
|
||||
#nrcc_notices p {
|
||||
width: 95%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
/* Content */
|
||||
#output {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
font-size: 10.5px;
|
||||
}
|
||||
|
||||
.name{
|
||||
width: 25%;
|
||||
text-align: left;
|
||||
}
|
||||
.plat{
|
||||
width: 4%;
|
||||
text-align: center;
|
||||
}
|
||||
.time{
|
||||
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;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
Reference in New Issue