Frontend: Implement NRCC Display

Signed-off-by: Fred Boniface <fred@fjla.uk>

UpNext.md

@@ -3,12 +3,5 @@
 * Backend - Add Indexes:
     - "stations": 3ALPHA, STANOX, TIPLOC
     - "corpus": 3ALPHA, NLC, NLCDESC(TEXT)
-* Backend - Tidy up nrcc messages.  Remove `<p></p>` and `\n`.
+* Backend - The list of services should always be an array [] as per the NRCC MEssages.
-* Frontend - Implement paginated NRCC Notices as they take up lots of space.
+* Frontend - Implement error pages
-    - Carousel: https://www.section.io/engineering-education/how-to-make-an-image-carousel-for-your-website/
-    - "Active Alerts" dropdown accordian?
-* Frontend - If Ferry Services Present - Load at bottom of screen.
-* Frontend - Decide what to do with Bus Services.
-* Frontend - Implement error pages - will need to look at including these on the proxy container too?
-    - https://expressjs.com/en/guide/error-handling.html
-* Building - Implement build process in dockerfile that minifies and then compresses the static source.

static/board.html

@@ -38,9 +38,8 @@
         <div id="alerts_bar">
           <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">&#8897;</button>
+          <button id="alert_expand_arrow" onclick="inflateAlerts()">&#8897;</button>
           <div id="alerts_msg">
-            <p>\nThe lifts are out of order between Platforms 1 &amp; 2 and the station at Cardiff Central station.</p>","\nDisruption in the Bristol area due to a number of incidents. More details can be found in <a href=\"http://nationalrail.co.uk/service_disruptions/315247.aspx\">Latest Travel News.</a>","\nBuses replace trains between Radyr and Cardiff Central. More details can be found in <a href=\"http://https://t.co/vj5Fty90sw\">Latest Travel News</a>.","\nPoor weather affecting services in Wales due to flooding on the railway More details can be found in <a href=\"https://t.co/uBU966PUmX\">Latest Travel News</a>.","Poor weather affecting services across the South West of England. More details can be found in <a href=\"http://nationalrail.co.uk/service_disruptions/315471.aspx\">Latest Travel News</a>
           </div>
         </div>
       </div>

static/js/boards.js

@@ -55,6 +55,10 @@ async function parseTime(string){
             var output = "-";
             var change = "";
             break;
+        case "No report":
+            var output = "?";
+            var change = "";
+            break;
         default:
             var output = string;
             var change = "changed";
@@ -68,14 +72,30 @@ async function parseName() {
 }
 
 // Display Alert Messages
-async function displayAlerts() {
+async function displayAlerts(array) {
+    var counter = 0
+    for(var i = 0; i < array.length; i++) {
+        // Increment counter
+        counter += 1;
+        // Reset Vars
+        var msg = array[i];
+        console.log(`Alert: ${msg}`);
+        document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", `<p>${msg}</p>`);
+    }
+    document.getElementById("alert_number").innerHTML = `${counter}`
+    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.
 }
 
-async function expandAlerts() {
+async function inflateAlerts() {
-    return
+    document.getElementById("alerts_msg").style = "display:block;";
+    document.getElementById("alert_expand_arrow").style = "transform: rotate(180deg);";
+    document.getElementById("alert_expand_arrow").setAttribute("onclick", "deflateAlerts()")
 }
 
 async function deflateAlerts() {
-    return
+    document.getElementById("alerts_msg").style = "display.none;";
+    document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
+    document.getElementById("alert_expand_arrow").setAttribute("onclick", "inflateAlerts()")
 }

static/js/public-board.js

@@ -61,7 +61,7 @@ async function buildPage(data) {
     setHeaders(stationName, generateTime);
     // Check for notices and if true pass to function
     if (data.GetStationBoardResult.nrccMessages) {
-        displayNotices(data.GetStationBoardResult.nrccMessages.message)
+        displayAlerts(data.GetStationBoardResult.nrccMessages.message);
     }
     if (typeof data.GetStationBoardResult.trainServices == 'undefined') {
         displayNoTrains()
@@ -73,14 +73,6 @@ async function buildPage(data) {
     }
 }
 
-async function displayNotices(notices) {
-    // Input: data.GetStationBoardResult.nrccMessages.messages
-    // Processing: For each message, create a <p> inside #notices.
-    //             If there is more than one notice, scroll between them.
-    // Output: Only to DOM.
-    //document.getElementById("notices").innerHTML = notices;
-}
-
 async function displayNoTrains() {
     document.getElementById('no_services').style = "display: block;";
     clearLoading();

static/styles/boards.css

@@ -71,6 +71,7 @@
 
 /* NRCC Notices */
 #alerts{
+    display: none;
     position: fixed;
     width: 100%;
     left: 0;
@@ -78,6 +79,7 @@
 }
 
 #alerts_bar{
+    display: none;
     position: absolute;
     margin-top:50px;
     left: 0;
@@ -109,25 +111,34 @@
     top: 0;
     padding: 10px;
     padding-right: 15px;
-    padding-left: 30px;
+    padding-left: 15px;
     background: none;
     border: none;
     font-weight: 900;
     color: white;
+    transition: transform 0.25s linear;
 }
 
 #alerts_msg{
+    display: none;
     position: absolute;
     left: 0;
     top: 40px;
     width: 100%;
-    background-color: pink;
+    background-color: orange;
+}
+
+#alerts_msg p {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    font-weight: 900;
 }
 
 /* Content */
 #output {
     width: 100%;
-    margin-top: 95px;  /* SHOULD BE REMOVED AFTER IMPLEMENTING ALERTS */
+    margin-top: 65px;
 }
 
 table {