Frontend: Add support for 'No Scheduled Services'

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

.test-tools/NO-SERVICES_API-EG-pil.json

@@ -0,0 +1 @@
+{"GetStationBoardResult":{"generatedAt":"2023-01-14T11:23:12.6558466+00:00","locationName":"Pilning","crs":"PIL","nrccMessages":{"message":"\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>."},"platformAvailable":"true"}}

static/board.html

@@ -23,7 +23,7 @@
 
             <div id="nrcc_notices" class="hidden-while-loading">
                 <p>
-                    Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon.
+                    Example: Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon.
                 </p>
             </div>
 
@@ -33,13 +33,16 @@
                 <p>Loading</p>
             </div>
 
-            <div id="error_notice" class="hidden-unless-error">
+            <div id="error_notice" class="main-notice hidden-while-loading">
                 <h1 class="error">Oops</h1>
                 <p class="error">There was an error with your request</p>
                 <p id="err_not_found">The station you are searching for cannot be found</p>
                 <p id="err_no_data">The station has no data.  It may not be in operation yet/anymore.</p>
                 <p id="err_conn">Connection Error, check your data connection.  Retrying.</p>
             </div>
+            <div id="no_services" class="main-notice hidden-whille-loading">
+                <p>There are no scheduled services from this station</p>
+            </div>
 
             <div id="output">
 

static/js/board.js

@@ -40,7 +40,7 @@ async function publicLdb(stn) {
     return await resp.json();
 }
 
-async function setHeaders(title,time){
+async function setHeaders(title,time) {
     var prefix = `OwlBoard - `
     document.title = `${prefix}${title}`
     document.getElementById("station_name").innerHTML = title
@@ -71,12 +71,13 @@ async function parseLdb(data) {
     }
 }
 
-// Hide all loading classes
+// Hide loading spinner
-async function clearLoading(){
+async function clearLoading() {
     document.getElementById("loading").style = "display: none;";
 }
 
-async function buildPage(data){
+// Build and Display Functions
+async function buildPage(data) {
     var stationName = data.GetStationBoardResult.locationName;
     log(`buildPage: Data ready for ${stationName}`);
     var generateTime = new Date(await data.GetStationBoardResult.generatedAt);
@@ -86,9 +87,14 @@ async function buildPage(data){
     if (data.GetStationBoardResult.nrccMessages) {
         displayNotices(data.GetStationBoardResult.nrccMessages.message)
     }
+    if (typeof data.GetStationBoardResult.trainServices == 'undefined') {
+        displayNoTrains()
+    } else {
+        // Function here to Parse train services and display.
+    }
 }
 
-async function displayNotices(notices){
+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.
@@ -96,6 +102,15 @@ async function displayNotices(notices){
     //document.getElementById("notices").innerHTML = notices;
 }
 
+async function displayNoTrains() {
+    document.getElementById('no_services').style = "display: block;";
+    clearLoading();
+}
+
+async function displayTrains() {
+    return
+}
+
 // Log Helper
 function log(msg) {
     var time = new Date().toISOString();

static/styles/boards.css

@@ -39,8 +39,8 @@
     font-weight: bolder;
 }
 
-/* Error Notices: */
+/* Main Notices: */
-.hidden-unless-error {
+.main-notice {
     display: none;
     margin-top: 150px;
 }