From 21c17be5adbf006f015a964f35a75dc2e7216bea Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Mon, 16 Jan 2023 10:10:06 +0000
Subject: [PATCH] Adjust styling for find-code

Signed-off-by: Fred Boniface <fred@fjla.uk>
---
 static/find-code.html       |  8 +++++
 static/index.html           |  2 +-
 static/js/find-code.js      | 13 +++++++-
 static/styles/boards.css    |  2 +-
 static/styles/find-code.css | 60 +++++++++++++++++++++++++++++++++++++
 5 files changed, 82 insertions(+), 3 deletions(-)
 create mode 100644 static/styles/find-code.css

diff --git a/static/find-code.html b/static/find-code.html
index 8441198..4606fb6 100644
--- a/static/find-code.html
+++ b/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>
diff --git a/static/index.html b/static/index.html
index 324235d..adbecbd 100644
--- a/static/index.html
+++ b/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 -->
diff --git a/static/js/find-code.js b/static/js/find-code.js
index ff18002..85969a1 100644
--- a/static/js/find-code.js
+++ b/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(){
diff --git a/static/styles/boards.css b/static/styles/boards.css
index d7835c4..c76f8e2 100644
--- a/static/styles/boards.css
+++ b/static/styles/boards.css
@@ -23,7 +23,7 @@
     will-change: transform;
 }
 #loading {
-    position: absolute;
+    position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
diff --git a/static/styles/find-code.css b/static/styles/find-code.css
new file mode 100644
index 0000000..2132255
--- /dev/null
+++ b/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;
+}
\ No newline at end of file