Compare commits

..

No commits in common. "393c59c1d7855c518491af117db1d172e5528a79" and "cbd71efb45dece68659743f10fbd1d973f0ce4ad" have entirely different histories.

3 changed files with 9 additions and 120 deletions

View File

@ -1,4 +1,3 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
@ -31,26 +30,10 @@
<div id="nrcc_notices" class="hidden-while-loading">
<p>
Example NRCC Message Here... ... ...
NRCC Messages can sometimes be long, and sometimes
short so this must be accounted for.
Example: Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon.
</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>
@ -62,6 +45,9 @@
<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">

View File

@ -85,7 +85,7 @@ async function buildPage(data) {
if (typeof data.GetStationBoardResult.trainServices == 'undefined') {
displayNoTrains()
} else {
displayTrains(data)
// Function here to Parse train services and display.
}
}
@ -102,61 +102,8 @@ async function displayNoTrains() {
clearLoading();
}
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(){
async function displayTrains() {
return
}
// Log Helper

View File

@ -24,7 +24,6 @@
width: 100%;
height: 50px;
background-color: var(--overlay-color);
color: lightgrey;
}
#station_name {
@ -38,7 +37,7 @@
.header-right {
text-align: right;
padding-right: 5px;
margin: 3px;
margin: 4px;
}
#footer {
@ -61,53 +60,10 @@
/* 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;
}
}