Compare commits
2 Commits
cbd71efb45
...
393c59c1d7
Author | SHA1 | Date |
---|---|---|
Fred Boniface | 393c59c1d7 | |
Fred Boniface | 04e66c3317 |
|
@ -1,3 +1,4 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
|
@ -30,10 +31,26 @@
|
||||||
|
|
||||||
<div id="nrcc_notices" class="hidden-while-loading">
|
<div id="nrcc_notices" class="hidden-while-loading">
|
||||||
<p>
|
<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>
|
</p>
|
||||||
</div>
|
</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">
|
<div id="error_notice" class="main-notice hidden-while-loading">
|
||||||
<h1 class="error">Oops</h1>
|
<h1 class="error">Oops</h1>
|
||||||
<p class="error">There was an error with your request</p>
|
<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>
|
<p>There are no scheduled train services from this station</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="output">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<picture>
|
<picture>
|
||||||
<source srcset="./images/nre/nre-powered_200w.webp" type="image/webp">
|
<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') {
|
if (typeof data.GetStationBoardResult.trainServices == 'undefined') {
|
||||||
displayNoTrains()
|
displayNoTrains()
|
||||||
} else {
|
} else {
|
||||||
// Function here to Parse train services and display.
|
displayTrains(data)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -102,8 +102,61 @@ async function displayNoTrains() {
|
||||||
clearLoading();
|
clearLoading();
|
||||||
}
|
}
|
||||||
|
|
||||||
async function displayTrains() {
|
async function displayTrains(data) {
|
||||||
return
|
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
|
// Log Helper
|
||||||
|
|
|
@ -24,6 +24,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: var(--overlay-color);
|
background-color: var(--overlay-color);
|
||||||
|
color: lightgrey;
|
||||||
}
|
}
|
||||||
|
|
||||||
#station_name {
|
#station_name {
|
||||||
|
@ -37,7 +38,7 @@
|
||||||
.header-right {
|
.header-right {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
margin: 4px;
|
margin: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
|
@ -60,10 +61,53 @@
|
||||||
/* NRCC Notices */
|
/* NRCC Notices */
|
||||||
#nrcc_notices {
|
#nrcc_notices {
|
||||||
margin-top: 60px;
|
margin-top: 60px;
|
||||||
height: 65px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
#nrcc_notices p {
|
#nrcc_notices p {
|
||||||
width: 95%;
|
width: 95%;
|
||||||
margin: auto;
|
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