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;

Browse Source 
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>
<div id="alerts"> <div id="alerts">
<div id="alerts_bar"> <div id="alerts_bar" onclick="inflateAlerts()">
<img id="alert_icon" src="./images/nav/alert_icon.svg" alt=""> <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> <p id="alert_bar_note"></p>
<button id="alert_expand_arrow" onclick="inflateAlerts()">&#8897;</button> <button id="alert_expand_arrow">&#8897;</button>
<div id="alerts_msg"> <div id="alerts_msg">
</div> </div>
</div> </div>
@ -56,6 +56,9 @@
<th class="time">Exp Dep.</th> <th class="time">Exp Dep.</th>
</tr> </tr>
</table> </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>
<div id="ferry" class="hide-when-loading"> <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_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> <p id="err_conn" class="notices-hidden">Connection Error, check your data connection. Retrying.</p>
</div> </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"> <div id="footer">
<picture> <picture>

13
static/js/boards.js
View File

@ -41,7 +41,7 @@ async function parseTime(string){
break; break;
case "Cancelled": case "Cancelled":
var output = "CANC"; var output = "CANC";
var change = "changed"; var change = "cancelled";
break; break;
case "On time": case "On time":
var output = "RT"; var output = "RT";
@ -82,7 +82,12 @@ async function displayAlerts(array) {
console.log(`Alert: ${msg}`); console.log(`Alert: ${msg}`);
document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", `<p>${msg}</p>`); 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").style = "display:block"
document.getElementById("alerts_bar").style = "display:block" document.getElementById("alerts_bar").style = "display:block"
document.getElementById("output").style = "margin-top:95px" // Adjust margin of train table div. document.getElementById("output").style = "margin-top:95px" // Adjust margin of train table div.
@ -91,11 +96,11 @@ async function displayAlerts(array) {
async function inflateAlerts() { async function inflateAlerts() {
document.getElementById("alerts_msg").style = "display:block;"; document.getElementById("alerts_msg").style = "display:block;";
document.getElementById("alert_expand_arrow").style = "transform: rotate(180deg);"; 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() { async function deflateAlerts() {
document.getElementById("alerts_msg").style = "display.none;"; document.getElementById("alerts_msg").style = "display.none;";
document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);"; 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 { #no_services {
width: 75%; width: 75%;
margin: auto; margin: auto;
margin-top: 150px; margin-top: 80px;
font-size: 20px; font-size: 20px;
font-weight: 900; font-weight: 900;
} }
@ -179,7 +179,10 @@ table {
} }
.changed{ .changed{
animation: pulse 1.5s linear infinite; animation: pulse-change 1.5s linear infinite;
}
.cancelled {
animation: pulse-cancel 1.5s linear infinite;
} }
/* Footer: */ /* Footer: */
@ -197,8 +200,14 @@ table {
} }
/* Animations */ /* Animations */
@keyframes pulse { @keyframes pulse-change {
50% { 50% {
color: orange; color: orange;
} }
}
@keyframes pulse-cancel {
50% {
color: darkorange;
}
} }