From c03a2e2fb847c29d01f6c593a2af0222eb50aa13 Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Fri, 20 Jan 2023 20:02:47 +0000
Subject: [PATCH] Frontend: Change alert msg when only one exists; Frontend:
 Change pulse colour if service cancelled

Signed-off-by: Fred Boniface <fred@fjla.uk>
---
 static/board.html        | 12 ++++++------
 static/js/boards.js      | 13 +++++++++----
 static/styles/boards.css | 15 ++++++++++++---
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/static/board.html b/static/board.html
index 27ae136..c1f1279 100644
--- a/static/board.html
+++ b/static/board.html
@@ -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>
diff --git a/static/js/boards.js b/static/js/boards.js
index f2712af..5713182 100644
--- a/static/js/boards.js
+++ b/static/js/boards.js
@@ -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()")
 }
\ No newline at end of file
diff --git a/static/styles/boards.css b/static/styles/boards.css
index 3783052..e375a9b 100644
--- a/static/styles/boards.css
+++ b/static/styles/boards.css
@@ -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;
+    }
 }
\ No newline at end of file