From cbd71efb45dece68659743f10fbd1d973f0ce4ad Mon Sep 17 00:00:00 2001 From: Fred Boniface Date: Wed, 18 Jan 2023 01:25:01 +0000 Subject: [PATCH] Fix JS Structure Signed-off-by: Fred Boniface --- static/board.html | 103 +++++++++++++------------- static/find-code.html | 5 +- static/help.html | 2 +- static/index.html | 27 ++++--- static/issue.html | 2 +- static/js/{board.js => boards.js} | 5 -- static/js/find-code.js | 2 + static/js/index.js | 8 +- static/js/main.js | 7 ++ static/js/settings.js | 10 ++- static/settings.html | 13 +++- static/styles/boards.css | 41 ---------- static/styles/find-code.css | 44 ----------- static/styles/{style.css => main.css} | 42 +++++++++++ 14 files changed, 142 insertions(+), 169 deletions(-) rename static/js/{board.js => boards.js} (96%) create mode 100644 static/js/main.js rename static/styles/{style.css => main.css} (87%) diff --git a/static/board.html b/static/board.html index 9a83022..30e4635 100644 --- a/static/board.html +++ b/static/board.html @@ -1,58 +1,59 @@ - - - - - - - - OwlBoard - Loading - - - - - - - -
- + + + + + + + + OwlBoard - Loading + + + + + + + + +
+ +

Loading

+
-
-

- Example: Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon. -

-
+
+ -
- -

Loading

-
+
+

+ Example: Services may be subject to alterations due to heavy rain flooding the railway between Bristol Parkway and Swindon. +

+
-
-

Oops

-

There was an error with your request

-

The station you are searching for cannot be found

-

The station has no data. It may not be in operation yet/anymore.

-

Connection Error, check your data connection. Retrying.

-
-
-

There are no scheduled train services from this station

-
+
+

Oops

+

There was an error with your request

+

The station you are searching for cannot be found

+

The station has no data. It may not be in operation yet/anymore.

+

Connection Error, check your data connection. Retrying.

+
+
+

There are no scheduled train services from this station

+
-
+
+
-
- -
- + +
+ \ No newline at end of file diff --git a/static/find-code.html b/static/find-code.html index 5c0ea6a..17869a1 100644 --- a/static/find-code.html +++ b/static/find-code.html @@ -7,12 +7,13 @@ - + OwlBoard - Code Lookup - + + diff --git a/static/help.html b/static/help.html index efab30c..1169b31 100644 --- a/static/help.html +++ b/static/help.html @@ -7,7 +7,7 @@ - + OwlBoard diff --git a/static/index.html b/static/index.html index 247a658..2a56999 100644 --- a/static/index.html +++ b/static/index.html @@ -7,14 +7,21 @@ - + - + + OwlBoard + +
+ +

Loading

+
@@ -45,23 +52,15 @@
-
-
- - -

Quick Links

- + -
-

This is a development release and is under testing.

-

Departure boards do not yet work.

-

API Responses are being cached for a long time during testing, any data you access may be stale

+

Departure boards do not yet work and data may be stale.

+

Customise your quick links on the `Settings` page.

diff --git a/static/issue.html b/static/issue.html index c11ffe7..d50b561 100644 --- a/static/issue.html +++ b/static/issue.html @@ -6,7 +6,7 @@ - + OwlBoard - Report diff --git a/static/js/board.js b/static/js/boards.js similarity index 96% rename from static/js/board.js rename to static/js/boards.js index b5b0c4b..2574e9c 100644 --- a/static/js/board.js +++ b/static/js/boards.js @@ -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; diff --git a/static/js/find-code.js b/static/js/find-code.js index fe3e0f6..91a18f8 100644 --- a/static/js/find-code.js +++ b/static/js/find-code.js @@ -1,3 +1,5 @@ +clearLoading(); + async function fetchEntry(){ // This can be condensed showLoading(); var name = document.getElementById("name") diff --git a/static/js/index.js b/static/js/index.js index 5880482..9b75e91 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -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 = `` + var btn = `` + 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 = `` + var btn = `` document.getElementById("quick_links").insertAdjacentHTML("beforeend", btn) // Append btn } } diff --git a/static/js/main.js b/static/js/main.js new file mode 100644 index 0000000..7c985d9 --- /dev/null +++ b/static/js/main.js @@ -0,0 +1,7 @@ +async function clearLoading() { + document.getElementById("loading").style = "display: none;"; +} + +async function showLoading() { + document.getElementById("loading").style = "display: block;"; +} \ No newline at end of file diff --git a/static/js/settings.js b/static/js/settings.js index 32edc8f..459813e 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -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(){ diff --git a/static/settings.html b/static/settings.html index 57248e3..3c48c18 100644 --- a/static/settings.html +++ b/static/settings.html @@ -7,16 +7,21 @@ - + - OwlBoard - Settings - + + +
+ +

Loading

+
@@ -45,6 +50,8 @@

+ +
diff --git a/static/styles/boards.css b/static/styles/boards.css index c76f8e2..0d552b2 100644 --- a/static/styles/boards.css +++ b/static/styles/boards.css @@ -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; diff --git a/static/styles/find-code.css b/static/styles/find-code.css index 2132255..2e05eea 100644 --- a/static/styles/find-code.css +++ b/static/styles/find-code.css @@ -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; diff --git a/static/styles/style.css b/static/styles/main.css similarity index 87% rename from static/styles/style.css rename to static/styles/main.css index 1f49eab..1040cef 100644 --- a/static/styles/style.css +++ b/static/styles/main.css @@ -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);