Add page conent to issue.html

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

nginx-proxy-docker/nginx.conf

@@ -39,7 +39,7 @@ http {
             proxy_pass http://localhost:8460;
             proxy_cache_key $scheme://$host$uri$is_args$query_string;
             proxy_ignore_headers Cache-Control;
-            proxy_cache_valid 200 5m;
+            proxy_cache_valid 200 20m;  # Change to 1m for release.
         }
 
         location /api/v1/list/ {

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/issue.html

@@ -15,7 +15,23 @@
           <div id="top_button" class="hide_micro">
             <button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button>
           </div>
-
-        <p>This page is (temporarily) intentionally blank.</p>
+          <picture>
+            <source media="(min-width:800px)" secset="/images/logo/logo-full-715.webp" type="image/webp">
+            <source media="(min-width:800px)" srcset="/images/logo/logo-full-715.png" type="image/png">
+            <source media="(min-width:700px)" srcset="/images/logo/logo-full-512.webp" type="image/webp">
+            <source media="(min-width:700px)" srcset="/images/logo/logo-full-512.png" type="image/png">
+            <source media="(min-width:450px)" srcset="/images/logo/logo-full-256.webp" type="image/png">
+            <source media="(min-width:450px)" srcset="/images/logo/logo-full-256.png" type="image/png">
+            <img class="titleimg" src="/images/logo/logo-full-512.png" alt="OwlBoard Logo">
+          </picture>
+          <h2>Report an Issue</h2>
+        <p>This page's functionality is not yet implemented.</p>
+        <form>
+          <label for="subject">Subject:</label><br>
+          <input type="text" name="subject" id="subject" class="text-entry"/><br>
+          <label for="content">Message:</label><br>
+          <textarea name="content" id="content" class="text-entry-long"></textarea><br>
+          <input type="submit" name="submit" id="submit" label="Submit" class="lookup-button">
+        </form>
     </body>
 </html>

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;
+}

static/styles/style.css

@@ -68,6 +68,32 @@ body a:visited {color:var(--link-visited-color)}
   font-family: urwgothic, sans-serif;
   transition: 0.2s;
 }
+.text-entry {
+  text-align: center;
+  border: black;
+  width: 75%;
+  max-width: 250px;
+  border-radius: 40px;
+  padding: 10px;
+  margin-bottom: 5px;
+  font-size: 12px;
+  font-family: urwgothic, sans-serif;
+  transition: 0.2s;
+}
+.text-entry-long{
+  text-align: left;
+  border: black;
+  width: 75%;
+  max-width: 250px;
+  height: 30%;
+  max-height: 350px;
+  border-radius: 20px;
+  padding: 10px;
+  margin-bottom: 5px;
+  font-size: 12px;
+  font-family: urwgothic, sans-serif;
+  transition: 0.2s;
+}
 label {
   font-weight: 900;
 }