Frontend: Changed text in saved box

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

UpNext.md

@@ -9,12 +9,12 @@
 * Enable text search for `locationName` on find-code page.
 * Recreate raster logos with the new vector file.
 * Responsive text sizes for boards.
-* Change dockerfile to deploy with brotli support for faster laoding.
 
 ### In Progress:
 
 ### Completed - Testing:
 
+* Change dockerfile to deploy with brotli support for faster laoding.
 * Implement calling list.
 * Support multiple origins/destinations: NOT INCLUDING ON CALLING LIST
 * Frontend Code Refactor

static/help.html

@@ -8,6 +8,7 @@
     <meta name="author" content="Frederick Boniface">
     <meta name="theme-color" content="#155bb7">
     <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
+    <link rel="stylesheet" type="text/css" href="./styles/help.css"/>
     <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
     <link rel="manifest" type="application/json" href="./manifest.json"/>
     <!-- NO SCRIPTS LOADED - NOT REQUIRED AT PRESENT -->
@@ -25,21 +26,61 @@
       <source srcset="/images/logo/logo-full-256.webp" type="image/webp">
       <img class="titleimg" src="/images/logo/logo-full-256.png" alt="OwlBoard Logo">
     </picture>
-      <h2>Help</h2>
-        <p>OwlBoard gives you quick and easy access to departure boards for 
+    <h2>Help</h2>
+      <p>OwlBoard gives you quick and easy access to departure boards for 
          all National Rail stations in the UK.</p>
-        <p>Just type a CRS or TIPLOC into the textbox on the homepage and tap 
-           enter on the screen or your keypad.</p>
-        <p>For example, Portway Park & 
-           Ride's CRS is 'PRI', and its TIPLOC is 'PTWYPR'; Portsmouth Harbour's 
-           CRS is 'PMH', and its TIPLOC is 'PHBR'.</p>
-        <p>A CRS is always three letters, 
-           a TIPLOC can be between 4-7 letters.</p>
-        <br>
-        <h3>Don't know the CRS or TIPLOC?</h3>
-        <p>Sorry, you can't search for them on OwlBoard yet but will be able to 
-           in the future.</p>
-        <h3>Spotted an issue with the site?</h3>
+      <p>Just type a CRS, TIPLOC or STANOX into the textbox on the homepage and tap 
+         enter on the screen or your keypad.  You can also select a differnt board type,
+         more details on your choices below.</p>
+      <p>For example, Portway Park & 
+         Ride's CRS is 'PRI', and its TIPLOC is 'PTWYPR'; Portsmouth Harbour's 
+         CRS is 'PMH', and its TIPLOC is 'PHBR'.</p>
+      <p>A CRS is always three letters, 
+         a TIPLOC can be between 4-7 letters.</p>
+      <br>
+      <h3>Don't know the CRS or TIPLOC?</h3>
+        <p>Sorry, you can't search by name but you can use our <a href="find-code.html">
+           Code Lookup</a> page to help.</p>
+      <h3>Board Types</h3>
+        <h4>Basic Board - Default</h4>
+          <p>The basic board shows the next 10 train arrival and departures, as well as 
+             bus and ferry departures where available.</p>
+          <p>You can tap on a trains origin or destination to see service details.</p>
+      <br>
+      <h3>Glossary</h3>
+        <p>Some of the terms may be new to you or different from those commonly used.</p>
+        <table id="table">
+          <tr>
+            <th>Term</th>
+            <th>Definition</th>
+          </tr>
+          <tr>
+            <td>CAN</td>
+            <td>Cancelled</td>
+          </tr>
+          <tr>
+            <td>CRS</td>
+            <td>Computer Reservation System Code - correctly termed as '3ALPHA'</td>
+          </tr>
+          <tr>
+            <td>NLC</td>
+            <td>National Location Code - Used for finance & accounting</td>
+          </tr>
+          <tr>
+            <td>RT</td>
+            <td>Right rime (On time)</td>
+          </tr>
+          <tr>
+            <td>STANOX</td>
+            <td>Station Number</td>
+          </tr>
+          <tr>
+            <td>TIPLOC</td>
+            <td>Timing Point Location (Name)</td>
+          </tr>
+        </table>
+      <br>
+      <h3>Spotted an issue with the site?</h3>
         <p>Let me know by <a href="./report.html">reporting an issue</a>.</p>
   </body>
 </html>

static/images/nav/save.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.0" viewBox="0 0 187.5 187.5" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<g transform="translate(.54506 1.0901)">
+<g transform="translate(11.649 12.217)">
+<rect x="27.357" y="25.341" width="108.4" height="110.2" rx="2.97" ry="2.8871" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="3.063"/>
+<rect x="44.497" y="25.703" width="74.653" height="56.282" rx="2.0454" ry="1.4745" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="3.063"/>
+<rect x="54.873" y="104.02" width="50.282" height="31.224" rx="1.8157" ry="1.2523" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="3.063"/>
+<rect x="54.42" y="104.02" width="38.051" height="31.224" rx="1.8157" ry="1.2523" fill="#fff" stroke="#000" stroke-linejoin="round" stroke-width="3.063"/>
+<rect x="59.661" y="108.85" width="9.9589" height="20.587"/>
+</g>
+</g>
+<metadata>
+<rdf:RDF>
+<cc:Work>
+<dc:format>image/svg+xml</dc:format>
+<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+<cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/>
+<dc:publisher>
+<cc:Agent rdf:about="http://openclipart.org/">
+<dc:title>Openclipart</dc:title>
+</cc:Agent>
+</dc:publisher>
+<dc:title>Floppy disk icon</dc:title>
+<dc:date>2006-12-26T00:00:00</dc:date>
+<dc:description/>
+<dc:source>https://openclipart.org/detail/24502/-by--24502</dc:source>
+<dc:creator>
+<cc:Agent>
+<dc:title>Anonymous</dc:title>
+</cc:Agent>
+</dc:creator>
+</cc:Work>
+<cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
+<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
+<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
+<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
+</cc:License>
+</rdf:RDF>
+</metadata>
+</svg>

static/js/lib.main.js

@@ -19,7 +19,7 @@ async function storageAvailable(type) {  // Currently not used
 /* Array Converter
    Converts a string to a single item array */
 async function makeArray(data) {
-    if (typeof data == "string") {
+    if (!Array.isArray(data)) {
         var array = [];
         array.push(data);
         return array;

static/js/settings.js

@@ -29,10 +29,27 @@ async function setQl(){
     }
     localStorage.setItem("qlOpt", JSON.stringify(qlSet))
     log(`settings.setQl: User settings saved`, "INFO")
-    hideLoading();
+    await hideLoading();
+    await showDone();
+    await delay(600);
+    hideDone();
 }
 
 async function clearQl(){
+    showLoading();
     localStorage.removeItem("qlOpt")
+    log(`settings.setQl: User settings reset to default`, "INFO")
     getQl()
+    await hideLoading();
+    await showDone();
+    await delay(600);
+    hideDone();
+}
+
+async function showDone() {
+    document.getElementById("done").style = "opacity: 1";
+}
+
+async function hideDone() {
+    document.getElementById("done").style = "opacity: 0";
 }

static/settings.html

@@ -23,6 +23,15 @@
       <p>Loading</p>
     </div>
 
+    <div id="done">
+      <!-- Insert white tick SVG Here -->
+      <picture id="save-icon">
+        <source srcset="./images/nav/save.svg" type="image/svg+xml">
+        <img src="./images/nav/save-59.png" alt="">
+      </picture>
+      <p>Saved</p>
+    </div>
+
     <div id="top_button" class="hide_micro">
       <button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button>
     </div>

static/styles/help.css

@@ -0,0 +1,13 @@
+/* Glossary */
+table, th, td {
+    border: 1px solid;
+    border-color: lightgrey;
+    border-collapse: collapse;
+  }
+
+#table {
+    color: lightgrey;
+    width: 80%;
+    max-width: 700px;
+    margin: auto;
+}

static/styles/main.css

@@ -294,6 +294,7 @@ label {
   white-space: nowrap;
   transition: 0.5s;
 }
+
 /* Footer Styles */
 footer {
   background-color: var(--accent-color);

static/styles/settings.css

@@ -2,3 +2,25 @@
     max-width: 100px;
     height: 20px;
 }
+
+#done {
+    opacity: 0;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    margin: auto;
+    background-color: var(--overlay-color);
+    border-radius: 45px;
+    padding: 20px;
+    padding-bottom: 1px;
+    min-width: 90px;
+    max-width: 90px;
+    transition: opacity 0.25s;
+  }
+
+#done p {
+    padding-top: 0px;
+    font-weight: bolder;
+    overflow-wrap: normal;
+  }