From 393c59c1d7855c518491af117db1d172e5528a79 Mon Sep 17 00:00:00 2001 From: Fred Boniface Date: Wed, 18 Jan 2023 13:09:15 +0000 Subject: [PATCH] Frontend: Implement display of train data Signed-off-by: Fred Boniface --- static/board.html | 30 +++++--------------- static/js/boards.js | 59 ++++++++++++++++++++++++++++++++++++++-- static/styles/boards.css | 19 ++++++++++--- 3 files changed, 78 insertions(+), 30 deletions(-) diff --git a/static/board.html b/static/board.html index ff4cb5f..8d92519 100644 --- a/static/board.html +++ b/static/board.html @@ -1,3 +1,4 @@ + @@ -30,39 +31,22 @@

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

- +
- + - - - - - - - - - - - - - - - - - - - - +
Origin Dest. Plat. Sch Arr.Act Arr.Exp Arr. Sch Dep.Act Dep.
Bristol Temple MeadsSouthampton Airport Parkway110:5710:5911:02On Time
Bristol ParkwayDorchester South1311:0711:2211:0911:23Exp Dep.
diff --git a/static/js/boards.js b/static/js/boards.js index 2574e9c..0ca49b0 100644 --- a/static/js/boards.js +++ b/static/js/boards.js @@ -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 = ` + + + + + + + + + + +
${svc.origin.location.locationName}${svc.destination.location.locationName}${plt}${sta}${eta}${std}${etd}
` + // Put Table Row + table.insertAdjacentHTML("beforeend", row) + // Parse cancelReason & delayReason + if (svc.cancelReason) { + console.log(`Cancel reason: ${svc.cancelReason}`) + var cancelRow = `

${svc.cancelReason}

` + table.insertAdjacentHTML("beforeend", cancelRow); + } + if (svc.delayReason) { + console.log(`Delay reason: ${svc.delayReason}`) + var delayRow = `

${svc.delayReason}

` + table.insertAdjacentHTML("beforeend", delayRow); + } + } + clearLoading(); + log(`Insertion complete`) +} + +async function parsePlatform(){ +} + +async function parseExpTime(){ +} + +async function parseName(){ } // Log Helper diff --git a/static/styles/boards.css b/static/styles/boards.css index 4ca05f2..52ef333 100644 --- a/static/styles/boards.css +++ b/static/styles/boards.css @@ -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; }