Adjust styling for find-code

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

static/find-code.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/style.css"/>
+    <link rel="stylesheet" type="text/css" href="./styles/find-code.css"/>
     <link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
     <link rel="manifest" type="application/json" href="./manifest.json"/>
     <title>OwlBoard - Code Lookup</title>
@@ -34,6 +35,13 @@
           Where they exist, the other code types will be filled in.</p>
         <p>You cannot yet lookup by Station name as the values are not unique.</p>
         <p>Station name search will be added in the future.</p>
+
+        <div id="loading">
+          <div class="spinner">
+          </div>
+          <p>Searching</p>
+      </div>
+
         <label for="name">Station name:</label><br>
         <input type="text" class="small-lookup-box" id="name" name="name" readonly=""><br>
         <label for="3alpha">CRS/3ALPHA:</label><br>

static/index.html

@@ -67,7 +67,7 @@
       <div class="text-description">
         <p>This is a development release and is under testing.</p>
         <p>Departure boards do not yet work.</p>
-        <p>API Responses are being cached for a long time, any data you access may be stale</p>
+        <p>API Responses are being cached for a long time during testing, any data you access may be stale</p>
       </div>
 
     <!-- Footer -->

static/js/find-code.js

@@ -1,4 +1,5 @@
 async function fetchEntry(){
+    showLoading();
     var name = document.getElementById("name")
     var crs = document.getElementById("3alpha")
     var nlc = document.getElementById("nlc")
@@ -31,7 +32,7 @@ async function parseData(values){
         var data = await getData("name", values.name)
     } else {
         errorNoData()
-        data = {status: "failed"}
+        hideLoading()
         return
     }
 
@@ -51,6 +52,7 @@ async function getData(type, value){
 }
 
 async function displayData(data){
+    hideLoading();
     if (data.status === "failed" || data == ""){
         errorNotFound()
     }
@@ -68,6 +70,15 @@ async function clearForm(){
     document.getElementById("nlc").value = ""
     document.getElementById("tiploc").value = ""
     document.getElementById("stanox").value = ""
+    hideLoading();
+}
+
+async function showLoading(){
+    document.getElementById("loading").style = "display: block;";
+}
+
+async function hideLoading(){
+    document.getElementById("loading").style = "display: none;";
 }
 
 async function errorNoData(){

static/styles/boards.css

@@ -23,7 +23,7 @@
     will-change: transform;
 }
 #loading {
-    position: absolute;
+    position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);

static/styles/find-code.css

@@ -0,0 +1,60 @@
+/* Logo Size Override */
+
+
+/* Loading Box: */
+@keyframes spinner {
+    0% {
+        transform: translate3d(-50%, -50%, 0) rotate(0deg);
+    }
+    100% {
+        transform: translate3d(-50%, -50%, 0) rotate(360deg);
+    }
+}
+.spinner::before {
+    animation: 1.5s linear infinite spinner;
+    animation-play-state: inherit;
+    border: solid 5px var(--overlay-color);
+    border-bottom-color: white;
+    border-radius: 50%;
+    content: "";
+    height: 40px;
+    width: 40px;
+    position: absolute;
+    top: 30%;
+    margin: auto;
+    transform: translate3d(-50%, -50%, 0);
+    will-change: transform;
+}
+#loading {
+    display: none;
+    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;
+}
+#loading p {
+    padding-top: 50px;
+    font-weight: bolder;
+}
+/*Overrides*/
+.titleimg{
+    min-width: 100px;
+    max-width: 200px;
+    width: 30%;
+    padding-bottom: 0px;
+}
+.small-lookup-box{
+    width: 25%;
+    min-width: 75px;
+    max-width: 125px;
+}
+#name{
+    width: 75%;
+    max-width: 275px;
+}