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

Frontend: Change alert msg when only one exists; 

Frontend: Change pulse colour if service cancelled

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-20 20:02:47 +00:00
parent 3148e4b8e9
commit c03a2e2fb8
3 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/board.html
View File

@ -35,10 +35,10 @@
</div>
<div id="alerts">
<div id="alerts_bar">
<div id="alerts_bar" onclick="inflateAlerts()">
<img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
<p id="alert_bar_note">There are <span id="alert_number">no</span> active alerts</p>
<button id="alert_expand_arrow" onclick="inflateAlerts()">&#8897;</button>
<p id="alert_bar_note"></p>
<button id="alert_expand_arrow">&#8897;</button>
<div id="alerts_msg">
</div>
</div>
@ -56,6 +56,9 @@
<th class="time">Exp Dep.</th>
</tr>
</table>
<div id="no_services" class="main-notice hidden-whille-loading">
<p>There are no scheduled train services from this station</p>
</div>
</div>
<div id="ferry" class="hide-when-loading">
@ -80,9 +83,6 @@
<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="no_services" class="main-notice hidden-whille-loading">
<p>There are no scheduled train services from this station</p>
</div>
<div id="footer">
<picture>

13
static/js/boards.js
View File

@ -41,7 +41,7 @@ async function parseTime(string){
break;
case "Cancelled":
var output = "CANC";
var change = "changed";
var change = "cancelled";
break;
case "On time":
var output = "RT";
@ -82,7 +82,12 @@ async function displayAlerts(array) {
console.log(`Alert: ${msg}`);
document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", `<p>${msg}</p>`);
}
document.getElementById("alert_number").innerHTML = `${counter}`
if (counter == 1) {
document.getElementById("alert_bar_note").innerHTML = `There is ${counter} active alert`
} else if (counter > 1) {
document.getElementById("alert_bar_note").innerHTML = `There are ${counter} active alerts`
}
document.getElementById("alerts").style = "display:block"
document.getElementById("alerts_bar").style = "display:block"
document.getElementById("output").style = "margin-top:95px" // Adjust margin of train table div.
@ -91,11 +96,11 @@ async function displayAlerts(array) {
async function inflateAlerts() {
document.getElementById("alerts_msg").style = "display:block;";
document.getElementById("alert_expand_arrow").style = "transform: rotate(180deg);";
document.getElementById("alert_expand_arrow").setAttribute("onclick", "deflateAlerts()")
document.getElementById("alerts_bar").setAttribute("onclick", "deflateAlerts()")
}
async function deflateAlerts() {
document.getElementById("alerts_msg").style = "display.none;";
document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
document.getElementById("alert_expand_arrow").setAttribute("onclick", "inflateAlerts()")
document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
}

15
static/styles/boards.css
View File

@ -16,7 +16,7 @@
#no_services {
width: 75%;
margin: auto;
margin-top: 150px;
margin-top: 80px;
font-size: 20px;
font-weight: 900;
}
@ -179,7 +179,10 @@ table {
}
.changed{
animation: pulse 1.5s linear infinite;
animation: pulse-change 1.5s linear infinite;
}
.cancelled {
animation: pulse-cancel 1.5s linear infinite;
}
/* Footer: */
@ -197,8 +200,14 @@ table {
}
/* Animations */
@keyframes pulse {
@keyframes pulse-change {
50% {
color: orange;
}
}
@keyframes pulse-cancel {
50% {
color: darkorange;
}
}