pis #2
134
board-staff.html
Normal file
134
board-staff.html
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8"/>
|
||||||
|
<meta name="description" content="OwlBoard - Live train departures for traincrew."/>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="application-name" content="OwlBoard">
|
||||||
|
<meta name="author" content="Frederick Boniface">
|
||||||
|
<meta name="theme-color" content="#00b7b7">
|
||||||
|
<title>OwlBoard - Loading</title>
|
||||||
|
<link rel="apple-touch-icon" href="/images/app-icons/any/apple-192.png">
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles/main.css"/>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./styles/board.css"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
|
||||||
|
<link rel="manifest" type="application/json" href="./manifest.json"/>
|
||||||
|
<script src="./js/lib.main.js" defer></script>
|
||||||
|
<script src="./js/lib.board.js" defer></script>
|
||||||
|
<script src="./js/staff-board.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="loading">
|
||||||
|
<div class="spinner">
|
||||||
|
</div>
|
||||||
|
<p id="loading_desc">\nLoading</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="content">
|
||||||
|
<div id="header">
|
||||||
|
<div id="station_name">
|
||||||
|
<h1 id="stn_name" class="header-large"></h1>
|
||||||
|
</div>
|
||||||
|
<div id="header-right">
|
||||||
|
<picture id="refresh" onclick="location.reload()">
|
||||||
|
<source srcset="./images/nav/refresh.svg" type="image/svg+xml">
|
||||||
|
<img src="./images/nav/refresh-50.png" alt="OwlBoard Logo">
|
||||||
|
</picture>
|
||||||
|
<a href="/">
|
||||||
|
<picture id="home_icon">
|
||||||
|
<source srcset="./images/nav/home_icon.svg" type="image/svg+xml">
|
||||||
|
<img src="./images/nav/home_icon-40.png" alt="Home">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="alerts" onclick="">
|
||||||
|
<div id="alerts_bar" onclick="inflateAlerts()">
|
||||||
|
<picture>
|
||||||
|
<source srcset="./images/nav/alert_icon.svg" type="image/svg+xml">
|
||||||
|
<img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
|
||||||
|
</picture>
|
||||||
|
<p id="alert_bar_note"></p>
|
||||||
|
<button id="alert_expand_arrow">⋁</button>
|
||||||
|
<div id="alerts_msg" onclick="NULL">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="output">
|
||||||
|
<table>
|
||||||
|
<caption>Train Services</caption>
|
||||||
|
<tr>
|
||||||
|
<th class="name">Headcode</th>
|
||||||
|
<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="no_services" class="main-notice hidden-while-loading">
|
||||||
|
<p>There are no scheduled train services from this station</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="ferry" class="hide-when-loading secondary-table">
|
||||||
|
<table>
|
||||||
|
<caption>Ferry Services</caption>
|
||||||
|
<tr>
|
||||||
|
<th class="name">Origin</th>
|
||||||
|
<th class="name">Dest.</th>
|
||||||
|
<th class="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="bus" class="hide-when-loading secondary-table">
|
||||||
|
<table>
|
||||||
|
<caption>Bus Services</caption>
|
||||||
|
<tr>
|
||||||
|
<th class="name">Headcode</th>
|
||||||
|
<th class="name">Origin</th>
|
||||||
|
<th class="name">Dest.</th>
|
||||||
|
<th class="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 hide-when-loading">
|
||||||
|
<h1 class="error">Oops</h1>
|
||||||
|
<p class="error">There was an error with your request</p>
|
||||||
|
<p id="err_not_auth" class="notices-hidden">You are not authorised to view staff versions, you can sign up in <a href="./settings.html">settings</a></p>
|
||||||
|
<p id="err_not_found" class="notices-hidden">The station you are searching for cannot be found</p>
|
||||||
|
<p id="err_no_data" class="notices-hidden">The station has no data. It may not be in operation yet/anymore.</p>
|
||||||
|
<p id="err_conn" class="notices-hidden">Connection Error, check your data connection. Retrying.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="footer">
|
||||||
|
<a href="https://nationalrail.co.uk" target="_blank" rel="nofollow external noreferrer noopener">
|
||||||
|
<picture id="nre_logo">
|
||||||
|
<source srcset="./images/nre/nre-powered_400w.jxl" type="image/jxl">
|
||||||
|
<source srcset="./images/nre/nre-powered_400w.webp" type="image/webp">
|
||||||
|
<img src="./images/nre/nre-powered_400w.png" alt="Powered by National Rail Enquiries">
|
||||||
|
</picture>
|
||||||
|
</a>
|
||||||
|
<div id="timeblock">
|
||||||
|
<p class="header-small">Data from:</p>
|
||||||
|
<p id="fetch_time" class="header-small">Loading...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
240
js/staff-board.js
Normal file
240
js/staff-board.js
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
/* Page Init: */
|
||||||
|
// Run the init function at page load.
|
||||||
|
init()
|
||||||
|
|
||||||
|
/* Init function */
|
||||||
|
async function init() { // Gets query string and then fetch API response and pass to parsing function
|
||||||
|
console.time("Time: Init to Complete")
|
||||||
|
setLoadingDesc(`Loading\nservices`)
|
||||||
|
var stn = await getQuery("stn");
|
||||||
|
setLoadingDesc(`Loading\n${stn.toUpperCase()}`)
|
||||||
|
log(`init: Looking up: ${stn}`);
|
||||||
|
var sv = await getQuery("sv");
|
||||||
|
log(`init: Staff Version: ${sv}`);
|
||||||
|
if (sv === 'true') {
|
||||||
|
log("init: Staff Version not supported yet.")
|
||||||
|
log("init: Unable to proceed.")
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
var data = await publicLdb(stn)
|
||||||
|
setLoadingDesc(`${stn.toUpperCase()}\nParsing Data`)
|
||||||
|
log("simple-board.init: Fetched LDB Data", "INFO")
|
||||||
|
} catch (err) {
|
||||||
|
var data = "err"
|
||||||
|
setLoadingDesc(`Waiting\nConnection`)
|
||||||
|
log(`simple-board.init: Error fetching data: ${err}`, "ERR")
|
||||||
|
}
|
||||||
|
parseLdb(data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Check for any errors in data returned from the Fetch call
|
||||||
|
If no errors, if there are none, call buildPage(). */
|
||||||
|
async function parseLdb(data) {
|
||||||
|
if (data.ERROR == "NOT_FOUND") { // Station not found
|
||||||
|
hideLoading();
|
||||||
|
document.getElementById("error_notice").style = "display: block;";
|
||||||
|
document.getElementById("err_not_found").style = "display: block;";
|
||||||
|
setHeaders("Not Found",new Date())
|
||||||
|
} else if (data == false) { // No data for station
|
||||||
|
hideLoading();
|
||||||
|
document.getElementById("error_notice").style = "display: block;";
|
||||||
|
document.getElementById("err_no_data").style = "display:block;";
|
||||||
|
setHeaders("No Data",new Date())
|
||||||
|
} else if (data == "err") { // Connection Error
|
||||||
|
await delay(2000);
|
||||||
|
hideLoading();
|
||||||
|
document.getElementById("error_notice").style = "display: block;";
|
||||||
|
document.getElementById("err_conn").style = "display: block;";
|
||||||
|
setHeaders("Connection Error",new Date())
|
||||||
|
showLoading();
|
||||||
|
await delay(5000);
|
||||||
|
log(`parseLdb: Passing to error handler`, "ERR")
|
||||||
|
errorHandler();
|
||||||
|
} else {
|
||||||
|
buildPage(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build and Display Functions
|
||||||
|
async function buildPage(data) {
|
||||||
|
setLoadingDesc('Loading\nData')
|
||||||
|
var stationName = data.GetStationBoardResult.locationName;
|
||||||
|
log(`buildPage: Data ready for ${stationName}`);
|
||||||
|
var generateTime = new Date(await data.GetStationBoardResult.generatedAt);
|
||||||
|
log(`buildPage: Data prepared at ${generateTime.toLocaleString()}`)
|
||||||
|
setHeaders(stationName, generateTime);
|
||||||
|
// Check for notices and if true pass to function
|
||||||
|
if (data.GetStationBoardResult.nrccMessages) {
|
||||||
|
setLoadingDesc('Loading\nAlerts')
|
||||||
|
await displayAlerts(await makeArray(data.GetStationBoardResult.nrccMessages.message));
|
||||||
|
}
|
||||||
|
if (data.GetStationBoardResult.trainServices) {
|
||||||
|
setLoadingDesc('Loading\nTrains')
|
||||||
|
displayTrains(await makeArray(data.GetStationBoardResult.trainServices.service))
|
||||||
|
} else {
|
||||||
|
displayNoTrains()
|
||||||
|
}
|
||||||
|
if (data.GetStationBoardResult.ferryServices) {
|
||||||
|
setLoadingDesc('Loading\nFerries')
|
||||||
|
displayFerry(await makeArray(data.GetStationBoardResult.ferryServices.service))
|
||||||
|
}
|
||||||
|
if (data.GetStationBoardResult.busServices) {
|
||||||
|
setLoadingDesc('Loading\nBusses')
|
||||||
|
displayBus(await makeArray(data.GetStationBoardResult.busServices.service))
|
||||||
|
}
|
||||||
|
hideLoading();
|
||||||
|
console.timeEnd("Time: Init to Complete")
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function displayTrains(data) { // Iterated through train services and passes API sections to other functions
|
||||||
|
log(`simple-board.displayTrains: Inserting data in DOM`)
|
||||||
|
for(var i = 0; i < data.length; i++) {
|
||||||
|
// Reset Vars
|
||||||
|
var svc = data[i];
|
||||||
|
displayService(svc);
|
||||||
|
buildCallLists(svc);
|
||||||
|
}
|
||||||
|
document.getElementById("output").style = "display:block;";
|
||||||
|
log(`simple-board.displayTrains: Insertion complete`)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function displayFerry(ferrySvc) { // Iterates through each ferry service and passes to another function
|
||||||
|
for(var i = 0; i < ferrySvc.length; i++) {
|
||||||
|
displayFerryService(ferrySvc[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function displayBus(busSvc) { // Iterates through each bus service and passes to other functions.
|
||||||
|
for(var i = 0; i < busSvc.length; i++) {
|
||||||
|
displayBusService(busSvc[i])
|
||||||
|
buildCallLists(busSvc[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function displayService(svc) { // Creates a table row from each train service.
|
||||||
|
var table = document.getElementById("output");
|
||||||
|
|
||||||
|
// Determine Time Message
|
||||||
|
var sta = await parseTime(svc.sta);
|
||||||
|
var eta = await parseTime(svc.eta);
|
||||||
|
var std = await parseTime(svc.std);
|
||||||
|
var etd = await parseTime(svc.etd);
|
||||||
|
// Determine Platform Message
|
||||||
|
//if (svc.platform != undefined){var plt = svc.platform} else {var plt = "-"};
|
||||||
|
var plt = await parsePlatform(svc);
|
||||||
|
// Define Table Row
|
||||||
|
var row = `
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td class="name name-item" onclick="showCalls('${svc.serviceID}')">${await parseName(svc.origin.location)}</td>
|
||||||
|
<td class="name name-item" onclick="showCalls('${svc.serviceID}')">${await parseName(svc.destination.location)}</td>
|
||||||
|
<td class="plat ${plt.changed}">${plt.num}</td>
|
||||||
|
<td class="time">${sta.data}</td>
|
||||||
|
<td class="time ${eta.changed}">${eta.data}</td>
|
||||||
|
<td class="time">${std.data}</td>
|
||||||
|
<td class="time ${etd.changed}">${etd.data}</td>
|
||||||
|
</tr>
|
||||||
|
</table>`
|
||||||
|
// Put Table Row
|
||||||
|
table.insertAdjacentHTML("beforeend", row)
|
||||||
|
// Display Operator where provided (it always will be, I think)
|
||||||
|
if (svc.operator) {
|
||||||
|
var opRow = `<p class="msg op">A ${svc.operator} service`
|
||||||
|
if (svc.length) { // Displays number of carriages where provided
|
||||||
|
opRow += ` with ${svc.length} carriages</p>`;
|
||||||
|
} else {
|
||||||
|
opRow += `</p>`
|
||||||
|
}
|
||||||
|
table.insertAdjacentHTML("beforeend", opRow);
|
||||||
|
}
|
||||||
|
// Parse cancelReason and then delayReason
|
||||||
|
if (svc.cancelReason) {
|
||||||
|
var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
|
||||||
|
table.insertAdjacentHTML("beforeend", cancelRow);
|
||||||
|
}
|
||||||
|
if (svc.delayReason) {
|
||||||
|
var delayRow = `<p class="msg">${svc.delayReason}</p>`
|
||||||
|
table.insertAdjacentHTML("beforeend", delayRow);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function displayFerryService(svc) { // Creates a table for for each ferry service
|
||||||
|
var table = document.getElementById("ferry");
|
||||||
|
log(JSON.stringify(svc))
|
||||||
|
// Determine Time Message
|
||||||
|
var sta = await parseTime(svc.sta);
|
||||||
|
var eta = await parseTime(svc.eta);
|
||||||
|
var std = await parseTime(svc.std);
|
||||||
|
var etd = await parseTime(svc.etd);
|
||||||
|
// Determine Platform Message
|
||||||
|
var plt = "";
|
||||||
|
// Define Table Row
|
||||||
|
var row = `
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td class="name name-item">${await parseName(svc.origin.location)}</td>
|
||||||
|
<td class="name name-item">${await parseName(svc.destination.location)}</td>
|
||||||
|
<td class="plat}">${plt}</td>
|
||||||
|
<td class="time">${sta.data}</td>
|
||||||
|
<td class="time ${eta.changed}">${eta.data}</td>
|
||||||
|
<td class="time">${std.data}</td>
|
||||||
|
<td class="time ${etd.changed}">${etd.data}</td>
|
||||||
|
</tr>
|
||||||
|
</table>`
|
||||||
|
// Put Table Row
|
||||||
|
table.insertAdjacentHTML("beforeend", row)
|
||||||
|
// Parse cancelReason & delayReason
|
||||||
|
if (svc.cancelReason) {
|
||||||
|
var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
|
||||||
|
table.insertAdjacentHTML("beforeend", cancelRow);
|
||||||
|
}
|
||||||
|
if (svc.delayReason) {
|
||||||
|
var delayRow = `<p class="msg">${svc.delayReason}</p>`
|
||||||
|
table.insertAdjacentHTML("beforeend", delayRow);
|
||||||
|
}
|
||||||
|
document.getElementById("ferry").style = "display:block"
|
||||||
|
}
|
||||||
|
|
||||||
|
async function displayBusService(svc) { // Creates a table row for each bus service.
|
||||||
|
var table = document.getElementById("bus");
|
||||||
|
log(JSON.stringify(svc))
|
||||||
|
// Determine Time Message
|
||||||
|
var sta = await parseTime(svc.sta);
|
||||||
|
var eta = await parseTime(svc.eta);
|
||||||
|
var std = await parseTime(svc.std);
|
||||||
|
var etd = await parseTime(svc.etd);
|
||||||
|
// Determine Platform Message
|
||||||
|
var plt = "";
|
||||||
|
// Define Table Row
|
||||||
|
var row = `
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td class="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.origin.location.locationName}</td>
|
||||||
|
<td class="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.destination.location.locationName}</td>
|
||||||
|
<td class="plat}">${plt}</td>
|
||||||
|
<td class="time">${sta.data}</td>
|
||||||
|
<td class="time ${eta.changed}">${eta.data}</td>
|
||||||
|
<td class="time">${std.data}</td>
|
||||||
|
<td class="time ${etd.changed}">${etd.data}</td>
|
||||||
|
</tr>
|
||||||
|
</table>`
|
||||||
|
// Put Table Row
|
||||||
|
table.insertAdjacentHTML("beforeend", row)
|
||||||
|
// Display operator
|
||||||
|
if (svc.operator) {
|
||||||
|
var opRow = `<p class="msg op">A ${svc.operator} service</p>`
|
||||||
|
table.insertAdjacentHTML("beforeend", opRow);
|
||||||
|
}
|
||||||
|
// Parse cancelReason & delayReason
|
||||||
|
if (svc.cancelReason) {
|
||||||
|
var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
|
||||||
|
table.insertAdjacentHTML("beforeend", cancelRow);
|
||||||
|
}
|
||||||
|
if (svc.delayReason) {
|
||||||
|
var delayRow = `<p class="msg">${svc.delayReason}</p>`
|
||||||
|
table.insertAdjacentHTML("beforeend", delayRow);
|
||||||
|
}
|
||||||
|
document.getElementById("bus").style = "display:block"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user