Frontend:

- PNG Fallback option for alert icon.
 - Styling of calling boxes.
 - Styling of departure board headers.

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-22 13:49:38 +00:00
parent 4d36177d17
commit 7debbe4860
6 changed files with 67 additions and 29 deletions

View File

@ -3,13 +3,15 @@
## Frontend:
* Implement error pages.
* Still need SVG Fallback option for alert icon on board.html
* Alerts box should not be clickable, bar should be.
* Issue page: Submit using API.
* UNDER TEST:: 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.
### Completed - Testing:
* Implement calling list.
* Still need SVG Fallback for alert icon.
* Support multiple origins/destinations: NOT INCLUDING ON CALLING LIST
## Backend:

View File

@ -36,7 +36,10 @@
<div id="alerts" onclick="">
<div id="alerts_bar" onclick="inflateAlerts()">
<img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
<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">&#8897;</button>
<div id="alerts_msg" onclick="NULL">
@ -113,7 +116,7 @@
</picture>
<picture id="home_icon">
<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>
</a>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -79,29 +79,42 @@ async function parseName(location) {
// Build calling list:
async function buildCallLists(data) {
console.log(JSON.stringify(data))
if (data.previousCallingPoints.callingPointList.callingPoint) {
var preCallPoint = data.previousCallingPoints.callingPointList.callingPoint;
try {
if (data.previousCallingPoints.callingPointList.callingPoint) {
var preCallPoint = data.previousCallingPoints.callingPointList.callingPoint;
}
} catch (err) {
console.log(`Data not found error, ${err}`)
}
if (data.subsequentCallingPoints.callingPointList.callingPoint) {
var postCallPoint = data.subsequentCallingPoints.callingPointList.callingPoint;
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 = "";
if (preCallPoint) {
for(var i = 0; i < preCallPoint.length; i++) {
var proc = await buildCalls(preCallPoint[i]);
procPre = `${procPre}\n${proc}`
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}`)
}
if (postCallPoint) {
for (var i = 0; i < postCallPoint.length; i++) {
var proc = await buildCalls(postCallPoint[i]);
procPost = `${procPost}\n${proc}`
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}`)
}
console.log(JSON.stringify(procPre))
console.log(JSON.stringify(procPost))
var div = `
<div class="call-data" id="${data.serviceID}">
<p class="close-data" onclick="hideCalls('${data.serviceID}')">X</p>
@ -176,8 +189,17 @@ async function deflateAlerts() {
async function buildCalls(data) {
var timeEt = await parseTime(data.et)
return `<tr>
<td class="detail-name">${data.locationName}</td>
<td>${data.st}</td>
<td>${timeEt.data}</td>
<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>`
}

View File

@ -99,6 +99,7 @@ async function displayTrains(data) {
}
clearLoading();
document.getElementById("output").style = "display:block;";
log(`Insertion complete`)
}
@ -113,6 +114,7 @@ async function displayBus(busSvc) {
log(JSON.stringify(busSvc))
for(var i = 0; i < busSvc.service.length; i++) {
displayBusService(busSvc.service[i])
buildCallLists(busSvc.service[i])
}
}
@ -131,8 +133,8 @@ async function displayService(svc) {
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="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>
@ -172,8 +174,8 @@ async function displayFerryService(svc) {
var row = `
<table>
<tr>
<td class="name name-item">${parseName(svc.origin.location.locationName)}</td>
<td class="name name-item">${parseName(svc.destination.location.locationName)}</td>
<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>

View File

@ -137,6 +137,7 @@
/* Content */
#output {
display: none;
width: 100%;
margin-top: 65px;
}
@ -173,18 +174,20 @@ caption{
.name-item {
color: var(--board-name-color);
font-size: 12px;
}
.plat{
width: 4%;
font-size: 12px;
text-align: center;
}
.time{
width: 11.5%;
font-size: 12px;
text-align: center;
}
.msg{
width: 95%;
font-size: 10px;
@ -199,7 +202,8 @@ caption{
display: none;
border-radius: 20px;
width: 93%;
position: absolute;
max-height: 75%;
position: fixed;
z-index: 10;
top: 50px;
left: 0;
@ -210,6 +214,7 @@ caption{
padding-bottom: 10px;
margin-bottom: 25px;
background-color: var(--overlay-color);
overflow: scroll;
}
.close-data {
@ -219,6 +224,10 @@ caption{
font-weight: 900;
}
.detail-table-content {
font-size: 12px;
}
.changed{
animation: pulse-change 1.5s linear infinite;
}