fred.boniface/OwlBoard
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Frontend: Add code-lookup page

Browse Source 
Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-15 20:00:18 +00:00
parent 0d18fd6c26
commit eb828896d0
7 changed files with 136 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
static/find-code.html Normal file
View File

@ -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>

5
static/help.html
View File

@ -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">

2
static/index.html
View File

@ -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>

21
static/issue.html Normal file
View File

@ -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>

43
static/js/find-code.js Normal file
View File

@ -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")
}

8
static/report.html
View File

@ -1,8 +0,0 @@
<html>
<head>
<title>Report an Issue</title>
</head>
<body>
<p>This page is (temporarily) intentionally blank.</p>
</body>
</html>

16
static/styles/style.css
View File

@ -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 {