Compare commits
4 Commits
6c2b0e6271
...
7debbe4860
Author | SHA1 | Date |
---|---|---|
Fred Boniface | 7debbe4860 | |
Fred Boniface | 4d36177d17 | |
Fred Boniface | e15824381e | |
Fred Boniface | e8c6d3bfc5 |
|
@ -3,13 +3,16 @@
|
||||||
## Frontend:
|
## Frontend:
|
||||||
|
|
||||||
* Implement error pages.
|
* Implement error pages.
|
||||||
* Still need SVG Fallback option for alert icon on board.html
|
|
||||||
* Alerts box should not be clickable, bar should be.
|
* Alerts box should not be clickable, bar should be.
|
||||||
* Issue page: Submit using API.
|
* Issue page: Submit using API.
|
||||||
* Support multiple service origins/destinations:
|
|
||||||
- Where there are multiples an array is returned for trainServices.service
|
|
||||||
* Enable text search for `locationName` on find-code page.
|
* Enable text search for `locationName` on find-code page.
|
||||||
|
|
||||||
|
### Completed - Testing:
|
||||||
|
|
||||||
|
* Implement calling list.
|
||||||
|
* Still need SVG Fallback for alert icon.
|
||||||
|
* Support multiple origins/destinations: NOT INCLUDING ON CALLING LIST
|
||||||
|
|
||||||
|
|
||||||
## Backend:
|
## Backend:
|
||||||
|
|
||||||
|
|
|
@ -36,7 +36,10 @@
|
||||||
|
|
||||||
<div id="alerts" onclick="">
|
<div id="alerts" onclick="">
|
||||||
<div id="alerts_bar" onclick="inflateAlerts()">
|
<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="">
|
<img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
|
||||||
|
</picture>
|
||||||
<p id="alert_bar_note"></p>
|
<p id="alert_bar_note"></p>
|
||||||
<button id="alert_expand_arrow">⋁</button>
|
<button id="alert_expand_arrow">⋁</button>
|
||||||
<div id="alerts_msg" onclick="NULL">
|
<div id="alerts_msg" onclick="NULL">
|
||||||
|
@ -113,7 +116,7 @@
|
||||||
</picture>
|
</picture>
|
||||||
<picture id="home_icon">
|
<picture id="home_icon">
|
||||||
<source srcset="./images/nav/home_icon.svg" type="image/svg+xml">
|
<source srcset="./images/nav/home_icon.svg" type="image/svg+xml">
|
||||||
<img src="./images/nav/home_icon-40.png" type="image/png" alt="Home">
|
<img src="./images/nav/home_icon-40.png" alt="Home">
|
||||||
</picture>
|
</picture>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 2.1 KiB |
|
@ -55,7 +55,7 @@
|
||||||
|
|
||||||
<div class="text-description">
|
<div class="text-description">
|
||||||
<p>This is a development release and is under testing.</p>
|
<p>This is a development release and is under testing.</p>
|
||||||
<p>Departure boards do not yet work and data may be stale.</p>
|
<p>Data may be stale.</p>
|
||||||
<p>Customise your quick links on the `Settings` page.</p>
|
<p>Customise your quick links on the `Settings` page.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -67,7 +67,88 @@ async function parseTime(string){
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sometimes the origin or destination names are undefined, need to catch that
|
// Sometimes the origin or destination names are undefined, need to catch that
|
||||||
async function parseName() {
|
async function parseName(location) {
|
||||||
|
if (Array.isArray(location)) {
|
||||||
|
var name = `${location[0]['locationName']} & ${location[1]['locationName']}`
|
||||||
|
return name;
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
return location.locationName;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Build calling list:
|
||||||
|
async function buildCallLists(data) {
|
||||||
|
try {
|
||||||
|
if (data.previousCallingPoints.callingPointList.callingPoint) {
|
||||||
|
var preCallPoint = data.previousCallingPoints.callingPointList.callingPoint;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(`Data not found error, ${err}`)
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
if (data.subsequentCallingPoints.callingPointList.callingPoint) {
|
||||||
|
var postCallPoint = data.subsequentCallingPoints.callingPointList.callingPoint;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(`Data not found error, ${err}`)
|
||||||
|
}
|
||||||
|
var procPre = "";
|
||||||
|
var procPost = "";
|
||||||
|
try {
|
||||||
|
if (preCallPoint) {
|
||||||
|
for(var i = 0; i < preCallPoint.length; i++) {
|
||||||
|
var proc = await buildPastCalls(preCallPoint[i]);
|
||||||
|
procPre = `${procPre}\n${proc}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(`Error reading previous stops. ${err}`)
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
if (postCallPoint) {
|
||||||
|
for (var i = 0; i < postCallPoint.length; i++) {
|
||||||
|
var proc = await buildCalls(postCallPoint[i]);
|
||||||
|
procPost = `${procPost}\n${proc}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.log(`Error reading next stops. ${err}`)
|
||||||
|
}
|
||||||
|
var div = `
|
||||||
|
<div class="call-data" id="${data.serviceID}">
|
||||||
|
<p class="close-data" onclick="hideCalls('${data.serviceID}')">X</p>
|
||||||
|
<table class="calling-at">
|
||||||
|
<caption>Calling at:</caption>
|
||||||
|
<tr>
|
||||||
|
<th class="detail-name-head">Location</th>
|
||||||
|
<th class="time">Schedule</th>
|
||||||
|
<th class="time">Exp.</th>
|
||||||
|
</tr>
|
||||||
|
${procPost}
|
||||||
|
</table>
|
||||||
|
<table class="called-at">
|
||||||
|
<caption>Previous stops:</caption>
|
||||||
|
<tr>
|
||||||
|
<th class="detail-name-head">Location</th>
|
||||||
|
<th class="time">Schedule</th>
|
||||||
|
<th class="time">Actual</th>
|
||||||
|
</tr>
|
||||||
|
${procPre}
|
||||||
|
</table>
|
||||||
|
</div>`
|
||||||
|
document.body.insertAdjacentHTML("beforeend", div)
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Display calling list:
|
||||||
|
async function showCalls(id) {
|
||||||
|
document.getElementById(id).style = "display: block;";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function hideCalls(id) {
|
||||||
|
document.getElementById(id).style = "display: none;";
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -104,3 +185,21 @@ async function deflateAlerts() {
|
||||||
document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
|
document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
|
||||||
document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
|
document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function buildCalls(data) {
|
||||||
|
var timeEt = await parseTime(data.et)
|
||||||
|
return `<tr>
|
||||||
|
<td class="detail-name detail-table-content">${data.locationName}</td>
|
||||||
|
<td class="detail-table-content">${data.st}</td>
|
||||||
|
<td class="detail-table-content ${timeEt.changed}">${timeEt.data}</td>
|
||||||
|
</tr>`
|
||||||
|
}
|
||||||
|
|
||||||
|
async function buildPastCalls(data) {
|
||||||
|
var timeEt = await parseTime(data.at)
|
||||||
|
return `<tr>
|
||||||
|
<td class="detail-name detail-table-content">${data.locationName}</td>
|
||||||
|
<td class="detail-table-content">${data.st}</td>
|
||||||
|
<td class="detail-table-content ${timeEt.changed}">${timeEt.data}</td>
|
||||||
|
</tr>`
|
||||||
|
}
|
|
@ -94,10 +94,12 @@ async function displayTrains(data) {
|
||||||
for(var i = 0; i < data.GetStationBoardResult.trainServices.service.length; i++) {
|
for(var i = 0; i < data.GetStationBoardResult.trainServices.service.length; i++) {
|
||||||
// Reset Vars
|
// Reset Vars
|
||||||
var svc = data.GetStationBoardResult.trainServices.service[i];
|
var svc = data.GetStationBoardResult.trainServices.service[i];
|
||||||
await displayService(svc);
|
displayService(svc);
|
||||||
|
buildCallLists(svc);
|
||||||
}
|
}
|
||||||
|
|
||||||
clearLoading();
|
clearLoading();
|
||||||
|
document.getElementById("output").style = "display:block;";
|
||||||
log(`Insertion complete`)
|
log(`Insertion complete`)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -112,6 +114,7 @@ async function displayBus(busSvc) {
|
||||||
log(JSON.stringify(busSvc))
|
log(JSON.stringify(busSvc))
|
||||||
for(var i = 0; i < busSvc.service.length; i++) {
|
for(var i = 0; i < busSvc.service.length; i++) {
|
||||||
displayBusService(busSvc.service[i])
|
displayBusService(busSvc.service[i])
|
||||||
|
buildCallLists(busSvc.service[i])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -130,8 +133,8 @@ async function displayService(svc) {
|
||||||
var row = `
|
var row = `
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="name name-item">${svc.origin.location.locationName}</td>
|
<td class="name name-item" onclick="showCalls('${svc.serviceID}')">${await parseName(svc.origin.location)}</td>
|
||||||
<td class="name name-item">${svc.destination.location.locationName}</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="plat ${plt.changed}">${plt.num}</td>
|
||||||
<td class="time">${sta.data}</td>
|
<td class="time">${sta.data}</td>
|
||||||
<td class="time ${eta.changed}">${eta.data}</td>
|
<td class="time ${eta.changed}">${eta.data}</td>
|
||||||
|
@ -141,6 +144,11 @@ async function displayService(svc) {
|
||||||
</table>`
|
</table>`
|
||||||
// Put Table Row
|
// Put Table Row
|
||||||
table.insertAdjacentHTML("beforeend", 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
|
// Parse cancelReason & delayReason
|
||||||
if (svc.cancelReason) {
|
if (svc.cancelReason) {
|
||||||
var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
|
var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
|
||||||
|
@ -166,8 +174,8 @@ async function displayFerryService(svc) {
|
||||||
var row = `
|
var row = `
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="name name-item">${svc.origin.location.locationName}</td>
|
<td class="name name-item">${await parseName(svc.origin.location)}</td>
|
||||||
<td class="name name-item">${svc.destination.location.locationName}</td>
|
<td class="name name-item">${await parseName(svc.destination.location)}</td>
|
||||||
<td class="plat}">${plt}</td>
|
<td class="plat}">${plt}</td>
|
||||||
<td class="time">${sta.data}</td>
|
<td class="time">${sta.data}</td>
|
||||||
<td class="time ${eta.changed}">${eta.data}</td>
|
<td class="time ${eta.changed}">${eta.data}</td>
|
||||||
|
@ -203,8 +211,8 @@ async function displayBusService(svc) {
|
||||||
var row = `
|
var row = `
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td class="name name-item">${svc.origin.location.locationName}</td>
|
<td class="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.origin.location.locationName}</td>
|
||||||
<td class="name name-item">${svc.destination.location.locationName}</td>
|
<td class="name name-item" onclick="showCalls('${svc.serviceID}')">${svc.destination.location.locationName}</td>
|
||||||
<td class="plat}">${plt}</td>
|
<td class="plat}">${plt}</td>
|
||||||
<td class="time">${sta.data}</td>
|
<td class="time">${sta.data}</td>
|
||||||
<td class="time ${eta.changed}">${eta.data}</td>
|
<td class="time ${eta.changed}">${eta.data}</td>
|
||||||
|
@ -214,6 +222,11 @@ async function displayBusService(svc) {
|
||||||
</table>`
|
</table>`
|
||||||
// Put Table Row
|
// Put Table Row
|
||||||
table.insertAdjacentHTML("beforeend", 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
|
// Parse cancelReason & delayReason
|
||||||
if (svc.cancelReason) {
|
if (svc.cancelReason) {
|
||||||
var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
|
var cancelRow = `<p class="msg">${svc.cancelReason}</p>`
|
||||||
|
|
|
@ -137,6 +137,7 @@
|
||||||
|
|
||||||
/* Content */
|
/* Content */
|
||||||
#output {
|
#output {
|
||||||
|
display: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 65px;
|
margin-top: 65px;
|
||||||
}
|
}
|
||||||
|
@ -163,20 +164,30 @@ caption{
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.detail-name-head {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-name{
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
.name-item {
|
.name-item {
|
||||||
color: var(--board-name-color);
|
color: var(--board-name-color);
|
||||||
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plat{
|
.plat{
|
||||||
width: 4%;
|
width: 4%;
|
||||||
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.time{
|
.time{
|
||||||
width: 11.5%;
|
width: 11.5%;
|
||||||
|
font-size: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg{
|
.msg{
|
||||||
width: 95%;
|
width: 95%;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
|
@ -186,6 +197,37 @@ caption{
|
||||||
color: var(--note-text-color);
|
color: var(--note-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.call-data {
|
||||||
|
display: none;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 93%;
|
||||||
|
max-height: 75%;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10;
|
||||||
|
top: 50px;
|
||||||
|
left: 0;
|
||||||
|
margin: 2%;
|
||||||
|
padding-top: 4px;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding-right: 5px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
background-color: var(--overlay-color);
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close-data {
|
||||||
|
position: absolute;
|
||||||
|
right: 15px;
|
||||||
|
top: -8px;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-table-content {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.changed{
|
.changed{
|
||||||
animation: pulse-change 1.5s linear infinite;
|
animation: pulse-change 1.5s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue