From eb828896d0ffddc1e297601ac296cce446e26c6b Mon Sep 17 00:00:00 2001
From: Fred Boniface <fred@fjla.uk>
Date: Sun, 15 Jan 2023 20:00:18 +0000
Subject: [PATCH] Frontend: Add code-lookup page

Signed-off-by: Fred Boniface <fred@fjla.uk>
---
 static/find-code.html   | 51 +++++++++++++++++++++++++++++++++++++++++
 static/help.html        |  5 ++++
 static/index.html       |  2 +-
 static/issue.html       | 21 +++++++++++++++++
 static/js/find-code.js  | 43 ++++++++++++++++++++++++++++++++++
 static/report.html      |  8 -------
 static/styles/style.css | 16 ++++++++++++-
 7 files changed, 136 insertions(+), 10 deletions(-)
 create mode 100644 static/find-code.html
 create mode 100644 static/issue.html
 create mode 100644 static/js/find-code.js
 delete mode 100644 static/report.html
diff --git a/static/find-code.html b/static/find-code.html
new file mode 100644
index 0000000..1682262
--- /dev/null
+++ b/static/find-code.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="application-name" content="OwlBoard">
+    <meta name="author" content="Frederick Boniface">
+    <meta name="theme-color" content="#155bb7">
+    <link rel="stylesheet" type="text/css" href="./styles/style.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>
+    <script src="./js/find-code.js"></script>
+  </head>
+
+  <body>
+
+    <div id="top_button" class="hide_micro">
+      <button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button>
+    </div>
+
+    <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>Code Lookup</h2>
+        <p>Enter one known code in the relevant box below and hit submit.  
+          Where they exist, the other code types will be filled in.</p>
+        <p>You cannot lookup by STANME as the values are not unique.</p>
+        <p>Station name search will be added in the future.</p>
+        <label for="name">Station name:</label><br>
+        <input type="text" class="small-lookup-box" id="name" name="name"><br>
+        <label for="3alpha">CRS/3ALPHA:</label><br>
+        <input type="text" class="small-lookup-box" id="3alpha" name="3alpha" maxlength="3"><br>
+        <label for="nlc">NLC:</label><br>
+        <input type="number" class="small-lookup-box" id="nlc" name="nlc" min="100000" max="999999"><br>
+        <label for="tiploc">TIPLOC:</label><br>
+        <input type="text" class="small-lookup-box" id="tiploc" name="tiploc" maxlength="7"><br>
+        <label for="stanox">STANOX:</label><br>
+        <input type="number" class="small-lookup-box" id="stanox" name="stanox"><br>
+        <label for="stanme">STANME:</label><br>
+        <input type="test" class="small-lookup-box" id="stanme" name="stanme" readonly=""><br>
+        <input type="submit" value="Find" class="lookup-button" onclick="fetchEntry()">
+  </body>
+</html>
\ No newline at end of file
diff --git a/static/help.html b/static/help.html
index 0e9d63a..efab30c 100644
--- a/static/help.html
+++ b/static/help.html
@@ -14,6 +14,11 @@
   </head>
 
   <body>
+
+    <div id="top_button" class="hide_micro">
+      <button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button>
+    </div>
+
     <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">
diff --git a/static/index.html b/static/index.html
index d54b562..450aaec 100644
--- a/static/index.html
+++ b/static/index.html
@@ -17,7 +17,7 @@
   <body>
 
     <!-- Popup Menu -->
-    <div id="menubar_hamburger" class="hide_micro">
+    <div id="top_button" class="hide_micro">
       <button aria-label="Menu" class="sidebar_control" id="sidebar_open_short" onclick="sidebarOpen()">&#9776;</button>
       <button aria-label="Close Menu" class="sidebar_control" id="sidebar_close_short" onclick="sidebarClose()">&times;</button>
     </div>
diff --git a/static/issue.html b/static/issue.html
new file mode 100644
index 0000000..8503460
--- /dev/null
+++ b/static/issue.html
@@ -0,0 +1,21 @@
+<html>
+    <head>
+        <meta charset="UTF-8"/>
+        <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="application-name" content="OwlBoard">
+        <meta name="author" content="Frederick Boniface">
+        <meta name="theme-color" content="#155bb7">
+        <link rel="stylesheet" type="text/css" href="./styles/style.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 - Report</title>
+    </head>
+    <body>
+          <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>
+    </body>
+</html>
\ No newline at end of file
diff --git a/static/js/find-code.js b/static/js/find-code.js
new file mode 100644
index 0000000..dff065d
--- /dev/null
+++ b/static/js/find-code.js
@@ -0,0 +1,43 @@
+async function fetchEntry(){
+    var name = document.getElementById("name")
+    var crs = document.getElementById("3alpha")
+    var nlc = document.getElementById("nlc")
+    var tiploc = document.getElementById("tiploc")
+    var stanox = document.getElementById("stanox")
+
+    var values = {
+        name: name.value,
+        crs: crs.value,
+        nlc: nlc.value,
+        tiploc: tiploc.value,
+        stanox: stanox.value
+    }
+
+    console.log(`Read values: ${JSON.stringify(values)}`)
+    
+    parseData(values)
+}
+
+async function parseData(values){
+    if (values.crs != ""){
+        getData("crs", values.crs)
+    } else if (values.nlc != ""){
+        getData("nlc", values.nlc)
+    } else if (values.tiploc != ""){
+        getData("tiploc", values.tiploc)
+    } else if (values.stanox != ""){
+        getData("stanox", values.stanox)
+    } else if (values.station != ""){
+        getData("name", values.name)
+    } else {
+        errorNoData()
+    }
+}
+
+async function getData(type, value){
+    console.log(`Looking for: ${type} ${value}`)
+}
+
+async function errorNoData(){
+    window.alert("You haven't entered any data")
+}
\ No newline at end of file
diff --git a/static/report.html b/static/report.html
deleted file mode 100644
index 919768e..0000000
--- a/static/report.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<html>
-    <head>
-        <title>Report an Issue</title>
-    </head>
-    <body>
-        <p>This page is (temporarily) intentionally blank.</p>
-    </body>
-</html>
\ No newline at end of file
diff --git a/static/styles/style.css b/static/styles/style.css
index 6235030..1d2c4a6 100644
--- a/static/styles/style.css
+++ b/static/styles/style.css
@@ -68,6 +68,19 @@ body a:visited {color:var(--link-visited-color)}
   font-family: urwgothic, sans-serif;
   transition: 0.2s;
 }
+label {
+  font-weight: 900;
+}
+.small-lookup-box {
+  text-align: center;
+  border: black;
+  border-radius: 40px;
+  padding: 10px;
+  margin-bottom: 10px;
+  text-transform: uppercase;
+  font-family: urwgothic, sans-serif;
+  transition: 0.2s;
+}
 .form-text-small {
   text-align: center;
   border: black;
@@ -143,7 +156,7 @@ body a:visited {color:var(--link-visited-color)}
   cursor: pointer;
 }
 /* START MENU STYLE */
-#menubar_hamburger {
+#top_button {
   position: absolute;
   top: 2px;
   right: 0;
@@ -155,6 +168,7 @@ body a:visited {color:var(--link-visited-color)}
   border: none;
   font-family: sans-serif;
   font-size: larger;
+  cursor: pointer;
 }
 #sidebar_open_short {display: block;}
 #sidebar_close_short {
