Frontend:

- Make all theme colours CSS Vars.
 - Dynamic text in loading box.

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

UpNext.md

@@ -1,7 +1,18 @@
 # What to do next:
 
-* Backend - Add Indexes:
+## Frontend:
+
+* Implement error pages.
+* Alerts box should not be clickable, bar should be.
+* Issue page: Submit using API.
+* Support multiple service origins/destinations:
+    - Where there are multiples an array is returned for trainServices.service
+* Enable text search for `locationName` on find-code page.
+
+
+## Backend:
+
+* DB Indexes:
     - "stations": 3ALPHA, STANOX, TIPLOC
     - "corpus": 3ALPHA, NLC, NLCDESC(TEXT)
-* Backend - The list of services should always be an array [] as per the NRCC MEssages.
+* Add Gitea Issue API
-* Frontend - Implement error pages

static/board.html

@@ -20,7 +20,7 @@
     <div id="loading">
       <div class="spinner">
       </div>
-      <p>Loading</p>
+      <p id="loading_desc">Loading</p>
     </div>
 
     <div id="content">
@@ -34,18 +34,19 @@
         </div>
       </div>
 
-      <div id="alerts">
+      <div id="alerts" onclick="">
         <div id="alerts_bar" onclick="inflateAlerts()">
           <img id="alert_icon" src="./images/nav/alert_icon.svg" alt="">
           <p id="alert_bar_note"></p>
           <button id="alert_expand_arrow">&#8897;</button>
-          <div id="alerts_msg">
+          <div id="alerts_msg" onclick="NULL">
           </div>
         </div>
       </div>
 
       <div id="output">
         <table>
+          <caption>Train Services</caption>
           <tr>
             <th class="name">Origin</th>
             <th class="name">Dest.</th>
@@ -61,9 +62,9 @@
         </div>
       </div>
 
-      <div id="ferry" class="hide-when-loading">
+      <div id="ferry" class="hide-when-loading secondary-table">
-        <p>Ferry Services</p>
         <table>
+          <caption>Ferry Services</caption>
           <tr>
             <th class="name">Origin</th>
             <th class="name">Dest.</th>
@@ -76,9 +77,9 @@
         </table>
       </div>
 
-      <div id="bus" class="hide-when-loading">
+      <div id="bus" class="hide-when-loading secondary-table">
-        <p>Bus Services</p>
         <table>
+          <caption>Bus Services</caption>
           <tr>
             <th class="name">Origin</th>
             <th class="name">Dest.</th>

static/find-code.html

@@ -38,7 +38,7 @@
         <div id="loading">
           <div class="spinner">
           </div>
-          <p>Searching</p>
+          <p id="loading_desc">Searching</p>
       </div>
 
       <label for="name">Location name:</label><br>

static/index.html

@@ -20,7 +20,7 @@
     <div id="loading">
       <div class="spinner">
       </div>
-      <p>Loading</p>
+      <p id="loading_desc">Loading</p>
     </div>
 
     <!-- Popup Menu -->

static/js/find-code.js

@@ -23,19 +23,24 @@ async function fetchEntry(){  // This can be condensed
 
 async function parseData(values){
     if (values.crs != ""){
+        setLoadingDesc(`Searching\n${values.crs.toUpperCase()}`)
         var data = await getData("crs", values.crs)
     } else if (values.nlc != ""){
+        setLoadingDesc(`Searching\n${values.nlc.toUpperCase()}`)
         var data = await getData("nlc", values.nlc)
     } else if (values.tiploc != ""){
+        setLoadingDesc(`Searching\n${values.tiploc.toUpperCase()}`)
         var data = await getData("tiploc", values.tiploc)
     } else if (values.stanox != ""){
+        setLoadingDesc(`Searching\n${values.stanox.toUpperCase()}`)
         var data = await getData("stanox", values.stanox)
     } else if (values.name != ""){
+        setLoadingDesc(`Searching\n${values.name.capitalize()}`)
         var data = await getData("name", values.name)
     } else {
         errorNoData()
         hideLoading()
-        return
+        return;
     }
 
     displayData(data);

static/js/main.js

@@ -1,4 +1,4 @@
-// Toggle Loading Box
+// Loading Box
 async function clearLoading() {
     document.getElementById("loading").style = "display: none;";
 }
@@ -7,6 +7,10 @@ async function showLoading() {
     document.getElementById("loading").style = "display: block;";
 }
 
+async function setLoadingDesc(desc) {
+    document.getElementById("loading_desc").textContent = `${desc}`;
+}
+
 // Enable delays
 const delay = ms => new Promise(res => setTimeout(res, ms));
 

static/js/public-board.js

@@ -4,6 +4,7 @@ init()
 /* Supporting Functions */
 async function init() {
     var stn = await getQuery("stn");
+    setLoadingDesc(`Loading\n${stn.toUpperCase()}`)
     log(`init: Looking up: ${stn}`);
     var sv = await getQuery("sv");
     log(`init: Staff Version: ${sv}`);
@@ -13,10 +14,12 @@ async function init() {
     } else {
         try {
             var data = await publicLdb(stn)
+            setLoadingDesc(`${stn.toUpperCase()}\nParsing Data`)
             log("init: Fetched LDB Data")
             parseLdb(data)
         } catch (err) {
             var data = null
+            setLoadingDesc(`Handling\nError`)
             log("init: Unable to fetch LDB data")
         }
     }
@@ -54,6 +57,7 @@ async function parseLdb(data) {
 
 // Build and Display Functions
 async function buildPage(data) {
+    setLoadingDesc('Loading\nTrains')
     var stationName = data.GetStationBoardResult.locationName;
     log(`buildPage: Data ready for ${stationName}`);
     var generateTime = new Date(await data.GetStationBoardResult.generatedAt);
@@ -61,6 +65,7 @@ async function buildPage(data) {
     setHeaders(stationName, generateTime);
     // Check for notices and if true pass to function
     if (data.GetStationBoardResult.nrccMessages) {
+        setLoadingDesc('Loading\nAlerts')
         displayAlerts(data.GetStationBoardResult.nrccMessages.message);
     }
     if (typeof data.GetStationBoardResult.trainServices == 'undefined') {
@@ -69,9 +74,11 @@ async function buildPage(data) {
         displayTrains(data)
     }
     if (data.GetStationBoardResult.ferryServices) {
+        setLoadingDesc('Loading\nFerries')
         displayFerry(data.GetStationBoardResult.ferryServices)
     }
     if (data.GetStationBoardResult.busServices) {
+        setLoadingDesc('Loading\nBusses')
         displayBus(data.GetStationBoardResult.busServices)
     }
 }

static/styles/boards.css

@@ -28,7 +28,7 @@
     width: 100%;
     height: 50px;
     background-color: var(--overlay-color);
-    color: lightgrey;
+    color: var(--second-text-color);
 }
 
 #station_name {
@@ -84,8 +84,8 @@
     left: 0;
     width: 100%;
     height: 40px;
-    background-color: darkorange;
+    background-color: var(--main-alert-color);
-    color: white;
+    color: var(--second-text-color);
 }
 
 #alert_icon{
@@ -114,7 +114,7 @@
     background: none;
     border: none;
     font-weight: 900;
-    color: white;
+    color: var(--second-text-color);
     transition: transform 0.25s linear;
 }
 
@@ -124,7 +124,8 @@
     left: 0;
     top: 40px;
     width: 100%;
-    background-color: orange;
+    background-color: var(--main-alert-color);
+    background-image: radial-gradient(var(--second-alert-color) 10%,var(--main-alert-color) 70%); /* Undecided whether this actually looks better than plain orange? */
 }
 
 #alerts_msg p {
@@ -146,8 +147,16 @@ table {
     margin-top: 3px;
     font-size: 10.5px;
 }
-#ferry{
+
-    margin-top: 45px;
+caption{
+    padding-top: 5px;
+    padding-bottom: 10px;
+    font-size: larger;
+    font-weight: 900;
+}
+
+.secondary-table{
+    margin-top: 25px;
 }
 .name{
     width: 25%;
@@ -155,7 +164,7 @@ table {
 }
 
 .name-item {
-    color: yellow;
+    color: var(--board-name-color);
 }
 
 .plat{
@@ -174,7 +183,7 @@ table {
     margin: 0;
     margin-left: 3px;
     text-align: left;
-    color: lightblue;
+    color: var(--note-text-color);
 }
 
 .changed{
@@ -201,12 +210,12 @@ table {
 /* Animations */
 @keyframes pulse-change {
     50% {
-        color: orange;
+        color: var(--main-warning-color);
     }
 }
 
 @keyframes pulse-cancel {
     50% {
-        color: darkorange;
+        color: var(--main-alert-color);
     }
 }

static/styles/main.css

@@ -34,11 +34,19 @@
 /* COLOR VARS */
 :root {
   --main-bg-color: #404c55;
+  --second-bg-color: #2b343c; /* Use as first arg in radial gradient */
   --accent-color: #007979;
   --overlay-color: #3c6f79de;
   --main-text-color: #00b7b7;
+  --second-text-color: azure;
+  --note-text-color: #9de7ff;
   --link-color: azure;
+  --box-border-color: ;
   --link-visited-color: azure;
+  --main-alert-color: #ed6d00;
+  --second-alert-color: #e77f00; /* Use as second arg in radial gradient */
+  --main-warning-color: orange;
+  --board-name-color: #fcfc09;
 }
 /* Loading Box: */
 @keyframes spinner {
@@ -53,7 +61,7 @@
   animation: 1.5s linear infinite spinner;
   animation-play-state: inherit;
   border: solid 5px var(--overlay-color);
-  border-bottom-color: white;
+  border-bottom-color: var(--second-text-color);
   border-radius: 50%;
   content: "";
   height: 40px;
@@ -75,10 +83,13 @@
   padding: 20px;
   padding-bottom: 1px;
   min-width: 90px;
+  max-width: 90px;
+  transition: 0.5s;
 }
 #loading p {
   padding-top: 50px;
   font-weight: bolder;
+  overflow-wrap: normal;
 }
 
 /* MAIN */
@@ -88,6 +99,7 @@ html{
 }
 body {
   background-color: var(--main-bg-color);
+  background-image: radial-gradient(var(--second-bg-color), var(--main-bg-color));
   color: var(--main-text-color);
   font-family: urwgothic, sans-serif;
   text-align: center;
@@ -286,7 +298,7 @@ footer {
   background-color: var(--accent-color);
   font-family: firamono, monospace;
   font-size: smaller;
-  color: white;
+  color: var(--second-text-color);
   width: 100%;
   position: fixed;
   bottom: 0;
@@ -294,10 +306,10 @@ footer {
 }
 footer a {
   text-decoration: underline;
-  color: white;
+  color: var(--link-color);
 }
 footer a:visited {
-  color: white;
+  color: var(--link-visited-color);
 }
 footer a:hover {
   color: beige;