fred.boniface/OwlBoard
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Frontend: Implement display of train data

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
static/board.html
View File

@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
@ -30,39 +31,22 @@
<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"> <div id="output">
<table id="pub-table"> <table>
<tr> <tr>
<th class="name">Origin</th> <th class="name">Origin</th>
<th class="name">Dest.</th> <th class="name">Dest.</th>
<th class="plat">Plat.</th> <th class="plat">Plat.</th>
<th class="time">Sch Arr.</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">Sch Dep.</th>
<th class="time">Act Dep.</th> <th class="time">Exp 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>
</tr> </tr>
</table> </table>
</div> </div>

59
static/js/boards.js
View File

@ -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

19
static/styles/boards.css
View File

@ -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,7 +61,6 @@
/* 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 {
@ -75,21 +75,32 @@
table { table {
width: 100%; width: 100%;
margin-top: 3px;
font-size: 10.5px; font-size: 10.5px;
} }
.name{ .name{
width: 25%;
text-align: left; text-align: left;
} }
.plat{ .plat{
width: 50px; width: 4%;
text-align: center; text-align: center;
} }
.time{ .time{
width: 75px; width: 11.5%;
text-align: center; text-align: center;
} }
.msg{
width: 95%;
font-size: 10px;
margin: 0;
margin-left: 3px;
text-align: left;
color: white;
}
.changed{ .changed{
animation: pulse 1.5s linear infinite; animation: pulse 1.5s linear infinite;
} }