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

Fix JS Structure 

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-18 01:25:01 +00:00
parent 827e77dc8a
commit cbd71efb45
14 changed files with 142 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
static/board.html
View File

@ -1,58 +1,59 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"/> <meta charset="UTF-8"/>
<meta name="description" content="OwlBoard - Live train departures for traincrew."/> <meta name="description" content="OwlBoard - Live train departures for traincrew."/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="OwlBoard"> <meta name="application-name" content="OwlBoard">
<meta name="author" content="Frederick Boniface"> <meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#155bb7"> <meta name="theme-color" content="#155bb7">
<title>OwlBoard - Loading</title> <title>OwlBoard - Loading</title>
<script src="./js/board.js"></script> <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
<link rel="stylesheet" type="text/css" href="./styles/style.css"/> <link rel="stylesheet" type="text/css" href="./styles/boards.css"/>
<link rel="stylesheet" type="text/css" href="./styles/boards.css"/> <link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
<link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/> <link rel="manifest" type="application/json" href="./manifest.json"/>
<link rel="manifest" type="application/json" href="./manifest.json"/> <script src="./js/main.js" defer></script>
</head> <script src="./js/boards.js" defer></script>
<body> </head>
<div id="content"> <body>
<div id="header"> <div id="loading">
<h1 id="station_name"></h1> <div class="spinner">
<p class="header-right">Data from:</p> </div>
<p id="fetch_time" class="header-right">Loading...</p> <p>Loading</p>
</div> </div>
<div id="nrcc_notices" class="hidden-while-loading"> <div id="content">
<p> <div id="header">
Example: Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon. <h1 id="station_name"></h1>
</p> <p class="header-right">Data from:</p>
</div> <p id="fetch_time" class="header-right">Loading...</p>
</div>
<div id="loading"> <div id="nrcc_notices" class="hidden-while-loading">
<div class="spinner"> <p>
</div> Example: Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon.
<p>Loading</p> </p>
</div> </div>
<div id="error_notice" class="main-notice hidden-while-loading"> <div id="error_notice" class="main-notice hidden-while-loading">
<h1 class="error">Oops</h1> <h1 class="error">Oops</h1>
<p class="error">There was an error with your request</p> <p class="error">There was an error with your request</p>
<p id="err_not_found" class="notices-hidden">The station you are searching for cannot be found</p> <p id="err_not_found" class="notices-hidden">The station you are searching for cannot be found</p>
<p id="err_no_data" class="notices-hidden">The station has no data. It may not be in operation yet/anymore.</p> <p id="err_no_data" class="notices-hidden">The station has no data. It may not be in operation yet/anymore.</p>
<p id="err_conn" class="notices-hidden">Connection Error, check your data connection. Retrying.</p> <p id="err_conn" class="notices-hidden">Connection Error, check your data connection. Retrying.</p>
</div> </div>
<div id="no_services" class="main-notice hidden-whille-loading"> <div id="no_services" class="main-notice hidden-whille-loading">
<p>There are no scheduled train services from this station</p> <p>There are no scheduled train services from this station</p>
</div> </div>
<div id="output"> <div id="output">
</div>
</div> <div id="footer">
<div id="footer"> <picture>
<picture> <source srcset="./images/nre/nre-powered_200w.webp" type="image/webp">
<source srcset="./images/nre/nre-powered_200w.webp" type="image/webp"> <img id="nre_logo" src="./images/nre/nre-powered_200w.webp" alt="Powered by National Rail Enquiries">
<img id="nre_logo" src="./images/nre/nre-powered_200w.webp" alt="Powered by National Rail Enquiries"> </picture>
</picture> </div>
</div> </div>
</div> </body>
</body>
</html> </html>

5
static/find-code.html
View File

@ -7,12 +7,13 @@
<meta name="application-name" content="OwlBoard"> <meta name="application-name" content="OwlBoard">
<meta name="author" content="Frederick Boniface"> <meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#155bb7"> <meta name="theme-color" content="#155bb7">
<link rel="stylesheet" type="text/css" href="./styles/style.css"/> <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
<link rel="stylesheet" type="text/css" href="./styles/find-code.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="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
<link rel="manifest" type="application/json" href="./manifest.json"/> <link rel="manifest" type="application/json" href="./manifest.json"/>
<title>OwlBoard - Code Lookup</title> <title>OwlBoard - Code Lookup</title>
<script src="./js/find-code.js"></script> <script src="./js/main.js" defer></script>
<script src="./js/find-code.js" defer></script>
</head> </head>
<body> <body>

2
static/help.html
View File

@ -7,7 +7,7 @@
<meta name="application-name" content="OwlBoard"> <meta name="application-name" content="OwlBoard">
<meta name="author" content="Frederick Boniface"> <meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#155bb7"> <meta name="theme-color" content="#155bb7">
<link rel="stylesheet" type="text/css" href="./styles/style.css"/> <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
<link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/> <link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
<link rel="manifest" type="application/json" href="./manifest.json"/> <link rel="manifest" type="application/json" href="./manifest.json"/>
<title>OwlBoard</title> <title>OwlBoard</title>

27
static/index.html
View File

@ -7,14 +7,21 @@
<meta name="application-name" content="OwlBoard"> <meta name="application-name" content="OwlBoard">
<meta name="author" content="Frederick Boniface"> <meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#155bb7"> <meta name="theme-color" content="#155bb7">
<link rel="stylesheet" type="text/css" href="./styles/style.css"/> <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
<link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/> <link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
<link rel="manifest" type="application/json" href="./manifest.json"/> <link rel="manifest" type="application/json" href="./manifest.json"/>
<script src="./js/index.js"></script> <script src="./js/main.js" defer></script>
<script src="./js/index.js" defer></script>
<title>OwlBoard</title> <title>OwlBoard</title>
</head> </head>
<body> <body>
<!-- Loading Box -->
<div id="loading">
<div class="spinner">
</div>
<p>Loading</p>
</div>
<!-- Popup Menu --> <!-- Popup Menu -->
<div id="top_button" class="hide_micro"> <div id="top_button" class="hide_micro">
@ -45,23 +52,15 @@
<br> <br>
<input type="submit" value="Lookup Board" class="lookup-button"> <input type="submit" value="Lookup Board" class="lookup-button">
</form> </form>
<br>
<br>
<h2 hidden>Server Maintenance</h2>
<p hidden>Athena may be completely or partially unavailable between 1900-2300 on 07/10/2022,
apologies for any inconvinience caused to you.</p>
<h2>Quick Links</h2> <h2>Quick Links</h2>
<div id="quick_links"> <div id="quick_links">
</div> </div>
<br>
<br>
<div class="text-description"> <div class="text-description">
<p>This is a development release and is under testing.</p> <p>This is a development release and is under testing.</p>
<p>Departure boards do not yet work.</p> <p>Departure boards do not yet work and data may be stale.</p>
<p>API Responses are being cached for a long time during testing, any data you access may be stale</p> <p>Customise your quick links on the `Settings` page.</p>
</div> </div>
<!-- Footer --> <!-- Footer -->

2
static/issue.html
View File

@ -6,7 +6,7 @@
<meta name="application-name" content="OwlBoard"> <meta name="application-name" content="OwlBoard">
<meta name="author" content="Frederick Boniface"> <meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#155bb7"> <meta name="theme-color" content="#155bb7">
<link rel="stylesheet" type="text/css" href="./styles/style.css"/> <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
<link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/> <link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
<link rel="manifest" type="application/json" href="./manifest.json"/> <link rel="manifest" type="application/json" href="./manifest.json"/>
<title>OwlBoard - Report</title> <title>OwlBoard - Report</title>

5
static/js/board.js → static/js/boards.js
View File

@ -71,11 +71,6 @@ async function parseLdb(data) {
} }
} }
// Hide loading spinner
async function clearLoading() {
document.getElementById("loading").style = "display: none;";
}
// Build and Display Functions // Build and Display Functions
async function buildPage(data) { async function buildPage(data) {
var stationName = data.GetStationBoardResult.locationName; var stationName = data.GetStationBoardResult.locationName;

2
static/js/find-code.js
View File

@ -1,3 +1,5 @@
clearLoading();
async function fetchEntry(){ // This can be condensed async function fetchEntry(){ // This can be condensed
showLoading(); showLoading();
var name = document.getElementById("name") var name = document.getElementById("name")

8
static/js/index.js
View File

@ -1,5 +1,6 @@
// Init: // Init:
setQls(); setQls();
clearLoading();
async function sidebarOpen() { async function sidebarOpen() {
document.getElementById("sidebar").style.width = "50%"; document.getElementById("sidebar").style.width = "50%";
@ -19,17 +20,18 @@ async function gotoBoard(station){
async function setQls(){ async function setQls(){
var qlOpt = JSON.parse(localStorage.getItem("qlOpt")) var qlOpt = JSON.parse(localStorage.getItem("qlOpt"))
var qlDef = ["bri","lwh","srd","mtp","rda","cfn","sml","shh","pri","avn"] var qlDef = ["bri","lwh","srd","mtp","rda","cfn","sml","shh","pri","avn","sar","svb"]
if (qlOpt) { if (qlOpt) {
for(var i = 0; i < qlOpt.length; i++) { for(var i = 0; i < qlOpt.length; i++) {
console.log(`Button: ${qlOpt[i]}`) console.log(`Button: ${qlOpt[i]}`)
var btn = `<button class="actionbutton" onclick="gotoBoard(${qlOpt[i]})">${qlOpt[i].toUpperCase()}</button>` var btn = `<button class="actionbutton" onclick="gotoBoard('${qlOpt[i]}')">${qlOpt[i].toUpperCase()}</button>`
console.log(btn);
document.getElementById("quick_links").insertAdjacentHTML("beforeend", btn) // Append btn document.getElementById("quick_links").insertAdjacentHTML("beforeend", btn) // Append btn
} }
} else { } else {
for(var i = 0; i < qlDef.length; i++) { for(var i = 0; i < qlDef.length; i++) {
console.log(`Button: ${qlDef[i]}`) console.log(`Button: ${qlDef[i]}`)
var btn = `<button class="actionbutton" onclick="gotoBoard(${qlDef[i]})">${qlDef[i].toUpperCase()}</button>` var btn = `<button class="actionbutton" onclick="gotoBoard('${qlDef[i]}')">${qlDef[i].toUpperCase()}</button>`
document.getElementById("quick_links").insertAdjacentHTML("beforeend", btn) // Append btn document.getElementById("quick_links").insertAdjacentHTML("beforeend", btn) // Append btn
} }
} }

7
static/js/main.js Normal file
View File

@ -0,0 +1,7 @@
async function clearLoading() {
document.getElementById("loading").style = "display: none;";
}
async function showLoading() {
document.getElementById("loading").style = "display: block;";
}

10
static/js/settings.js
View File

@ -1,6 +1,8 @@
// Init: // Init:
const ql = ["ql0","ql1","ql2","ql3","ql4","ql5","ql6","ql7","ql8","ql9"] const ql = ["ql0","ql1","ql2","ql3","ql4","ql5","ql6","ql7","ql8","ql9","ql10","ql11"]
checkStorageSupport(); checkStorageSupport();
getQl();
clearLoading();
async function checkStorageSupport(){ async function checkStorageSupport(){
if (window.localStorage){ if (window.localStorage){
@ -21,7 +23,7 @@ async function getQl(){
var qlOpt = JSON.parse(localStorage.getItem("qlOpt")) var qlOpt = JSON.parse(localStorage.getItem("qlOpt"))
if (qlOpt){ if (qlOpt){
var i = 0 var i = 0
while (i < 10) { while (i < 12) {
if (qlOpt[i] != 'undefined') { if (qlOpt[i] != 'undefined') {
console.log(`Setting box ql${i} to ${qlOpt[i]}`) console.log(`Setting box ql${i} to ${qlOpt[i]}`)
document.getElementById(`ql${i}`).value = qlOpt[i] document.getElementById(`ql${i}`).value = qlOpt[i]
@ -32,11 +34,10 @@ async function getQl(){
} }
async function setQl(){ async function setQl(){
await showLoading();
var qlSet = [] var qlSet = []
for (i in ql) { for (i in ql) {
console.log(`Try to get value of 'ql${i}'`)
var opt = document.getElementById(`ql${i}`).value var opt = document.getElementById(`ql${i}`).value
console.log(`Found value: ${opt}`)
if (opt != ""){ if (opt != ""){
qlSet.push(opt) qlSet.push(opt)
} }
@ -44,6 +45,7 @@ async function setQl(){
} }
console.log(qlSet) console.log(qlSet)
localStorage.setItem("qlOpt", JSON.stringify(qlSet)) localStorage.setItem("qlOpt", JSON.stringify(qlSet))
clearLoading();
} }
async function clearQl(){ async function clearQl(){

13
static/settings.html
View File

@ -7,16 +7,21 @@
<meta name="application-name" content="OwlBoard"> <meta name="application-name" content="OwlBoard">
<meta name="author" content="Frederick Boniface"> <meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#155bb7"> <meta name="theme-color" content="#155bb7">
<link rel="stylesheet" type="text/css" href="./styles/style.css"/> <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
<link rel="stylesheet" type="text/css" href="./styles/settings.css"/> <link rel="stylesheet" type="text/css" href="./styles/settings.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="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
<link rel="manifest" type="application/json" href="./manifest.json"/> <link rel="manifest" type="application/json" href="./manifest.json"/>
<title>OwlBoard - Settings</title> <title>OwlBoard - Settings</title>
<script async src="./js/settings.js"></script> <script src="./js/main.js" defer></script>
<script src="./js/settings.js" defer></script>
</head> </head>
<body> <body>
<div id="loading">
<div class="spinner">
</div>
<p>Loading</p>
</div>
<div id="top_button" class="hide_micro"> <div id="top_button" class="hide_micro">
<button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button> <button aria-label="Back" class="sidebar_control" onclick="history.back()">&#8678;</button>
@ -45,6 +50,8 @@
<input type="text" maxlength="3" id="ql7" name="ql7" autocomplete="off" class="small-lookup-box"><br> <input type="text" maxlength="3" id="ql7" name="ql7" autocomplete="off" class="small-lookup-box"><br>
<input type="text" maxlength="3" id="ql8" name="ql8" autocomplete="off" class="small-lookup-box"> <input type="text" maxlength="3" id="ql8" name="ql8" autocomplete="off" class="small-lookup-box">
<input type="text" maxlength="3" id="ql9" name="ql9" autocomplete="off" class="small-lookup-box"><br> <input type="text" maxlength="3" id="ql9" name="ql9" autocomplete="off" class="small-lookup-box"><br>
<input type="text" maxlength="3" id="ql10" name="ql10" autocomplete="off" class="small-lookup-box">
<input type="text" maxlength="3" id="ql11" name="ql11" autocomplete="off" class="small-lookup-box"><br>
<button onclick="setQl()" class="lookup-button">Apply</button> <button onclick="setQl()" class="lookup-button">Apply</button>
<button onclick="clearQl()" class="lookup-button">Reset</button> <button onclick="clearQl()" class="lookup-button">Reset</button>

41
static/styles/boards.css
View File

@ -1,44 +1,3 @@
/* 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 {
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;
}
/* Main Notices: */ /* Main Notices: */
.main-notice { .main-notice {
display: none; display: none;

44
static/styles/find-code.css
View File

@ -1,47 +1,3 @@
/* 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*/ /*Overrides*/
.titleimg{ .titleimg{
min-width: 100px; min-width: 100px;

42
static/styles/style.css → static/styles/main.css
View File

@ -40,6 +40,48 @@
--link-color: azure; --link-color: azure;
--link-visited-color: azure; --link-visited-color: azure;
} }
/* 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 {
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;
}
/* MAIN */
body { body {
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
color: var(--main-text-color); color: var(--main-text-color);