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

Fix JS Structure

Browse Source 
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

19
static/board.html
View File

@ -7,13 +7,20 @@
<meta name="author" content="Frederick Boniface">
<meta name="theme-color" content="#155bb7">
<title>OwlBoard - Loading</title>
<script src="./js/board.js"></script>
<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/boards.css"/>
<link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
<link rel="manifest" type="application/json" href="./manifest.json"/>
<script src="./js/main.js" defer></script>
<script src="./js/boards.js" defer></script>
</head>
<body>
<div id="loading">
<div class="spinner">
</div>
<p>Loading</p>
</div>
<div id="content">
<div id="header">
<h1 id="station_name"></h1>
@ -27,12 +34,6 @@
</p>
</div>
<div id="loading">
<div class="spinner">
</div>
<p>Loading</p>
</div>
<div id="error_notice" class="main-notice hidden-while-loading">
<h1 class="error">Oops</h1>
<p class="error">There was an error with your request</p>
@ -45,8 +46,8 @@
</div>
<div id="output">
</div>
<div id="footer">
<picture>
<source srcset="./images/nre/nre-powered_200w.webp" type="image/webp">

5
static/find-code.html
View File

@ -7,12 +7,13 @@
<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="stylesheet" type="text/css" href="./styles/main.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>
<script src="./js/find-code.js"></script>
<script src="./js/main.js" defer></script>
<script src="./js/find-code.js" defer></script>
</head>
<body>

2
static/help.html
View File

@ -7,7 +7,7 @@
<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="stylesheet" type="text/css" href="./styles/main.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</title>

23
static/index.html
View File

@ -7,14 +7,21 @@
<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="stylesheet" type="text/css" href="./styles/main.css"/>
<link rel="icon" type="image/png" href="./images/logo/logo-sq-256.png"/>
<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>
</head>
<body>
<!-- Loading Box -->
<div id="loading">
<div class="spinner">
</div>
<p>Loading</p>
</div>
<!-- Popup Menu -->
<div id="top_button" class="hide_micro">
@ -45,23 +52,15 @@
<br>
<input type="submit" value="Lookup Board" class="lookup-button">
</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>
<div id="quick_links">
</div>
<br>
<br>
<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 during testing, any data you access may be stale</p>
<p>Departure boards do not yet work and data may be stale.</p>
<p>Customise your quick links on the `Settings` page.</p>
</div>
<!-- Footer -->

2
static/issue.html
View File

@ -6,7 +6,7 @@
<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="stylesheet" type="text/css" href="./styles/main.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>

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
async function buildPage(data) {
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
showLoading();
var name = document.getElementById("name")

8
static/js/index.js
View File

@ -1,5 +1,6 @@
// Init:
setQls();
clearLoading();
async function sidebarOpen() {
document.getElementById("sidebar").style.width = "50%";
@ -19,17 +20,18 @@ async function gotoBoard(station){
async function setQls(){
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) {
for(var i = 0; i < qlOpt.length; 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
}
} else {
for(var i = 0; i < qlDef.length; 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
}
}

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:
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();
getQl();
clearLoading();
async function checkStorageSupport(){
if (window.localStorage){
@ -21,7 +23,7 @@ async function getQl(){
var qlOpt = JSON.parse(localStorage.getItem("qlOpt"))
if (qlOpt){
var i = 0
while (i < 10) {
while (i < 12) {
if (qlOpt[i] != 'undefined') {
console.log(`Setting box ql${i} to ${qlOpt[i]}`)
document.getElementById(`ql${i}`).value = qlOpt[i]
@ -32,11 +34,10 @@ async function getQl(){
}
async function setQl(){
await showLoading();
var qlSet = []
for (i in ql) {
console.log(`Try to get value of 'ql${i}'`)
var opt = document.getElementById(`ql${i}`).value
console.log(`Found value: ${opt}`)
if (opt != ""){
qlSet.push(opt)
}
@ -44,6 +45,7 @@ async function setQl(){
}
console.log(qlSet)
localStorage.setItem("qlOpt", JSON.stringify(qlSet))
clearLoading();
}
async function clearQl(){

13
static/settings.html
View File

@ -7,16 +7,21 @@
<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="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/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 - Settings</title>
<script async src="./js/settings.js"></script>
<script src="./js/main.js" defer></script>
<script src="./js/settings.js" defer></script>
</head>
<body>
<div id="loading">
<div class="spinner">
</div>
<p>Loading</p>
</div>
<div id="top_button" class="hide_micro">
<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="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="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="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-notice {
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*/
.titleimg{
min-width: 100px;

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

@ -40,6 +40,48 @@
--link-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 {
background-color: var(--main-bg-color);
color: var(--main-text-color);