Frontend: QLS Settings under test

Signed-off-by: Fred Boniface <fred@fjla.uk>
This commit is contained in:
Fred Boniface 2023-01-17 13:54:10 +00:00
parent f77d262808
commit 3a93e29e51
7 changed files with 98 additions and 31 deletions

View File

@ -53,15 +53,8 @@
apologies for any inconvinience caused to you.</p> apologies for any inconvinience caused to you.</p>
<h2>Quick Links</h2> <h2>Quick Links</h2>
<button class="actionbutton" onclick="gotoBoard('bth')">BTH</button> <div id="quick_links">
<button class="actionbutton" onclick="gotoBoard('bri')">BRI</button> </div>
<button class="actionbutton" onclick="gotoBoard('bpw')">BPW</button>
<button class="actionbutton" onclick="gotoBoard('cdf')">CDF</button>
<button class="actionbutton" onclick="gotoBoard('gcr')">GCR</button>
<button class="actionbutton" onclick="gotoBoard('olf')">OLF</button>
<button class="actionbutton" onclick="gotoBoard('sou')">SOU</button>
<button class="actionbutton" onclick="gotoBoard('wsb')">WSB</button>
<button class="actionbutton" onclick="gotoBoard('wsm')">WSM</button>
<br> <br>
<br> <br>

View File

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

View File

@ -12,4 +12,22 @@ async function sidebarClose() {
async function gotoBoard(station){ async function gotoBoard(station){
window.location.assign(`${window.location.origin}/board.html?stn=${station}`) window.location.assign(`${window.location.origin}/board.html?stn=${station}`)
}
async function setQls(){
var qlOpt = JSON.parse(localStorage.getItem("qlOpt"))
var qlDef = ["bri","lwh","srd","mtp","rda","cfn","sml","shh","pri","avn"]
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>`
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>`
document.getElementById("quick_links").insertAdjacentHTML("beforeend", btn) // Append btn
}
}
} }

View File

@ -0,0 +1,52 @@
// Init:
const ql = ["ql0","ql1","ql2","ql3","ql4","ql5","ql6","ql7","ql8","ql9"]
checkStorageSupport();
async function checkStorageSupport(){
if (window.localStorage){
localStorage.setItem("support-check","8441");
if (localStorage.getItem("support-check")=="8441"){
console.log("Local Storage supported.")
localStorage.removeItem("support-check")
} else if (localStorage.getItem("support-check" != "8441")){
console.log("Error fetching test value.")
}
} else {
console.log("Local Storage is not supported")
window.alert("Settings cannot be saved on your device, try updating your browser.")
}
}
async function getQl(){
var qlOpt = JSON.parse(localStorage.getItem("qlOpt"))
if (qlOpt){
var i = 0
while (i < 10) {
if (qlOpt[i] != 'undefined') {
console.log(`Setting box ql${i} to ${qlOpt[i]}`)
document.getElementById(`ql${i}`).value = qlOpt[i]
i +=1
}
}
}
}
async function setQl(){
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)
}
qlSet.sort()
}
console.log(qlSet)
localStorage.setItem("qlOpt", JSON.stringify(qlSet))
}
async function clearQl(){
localStorage.removeItem("qlOpt")
getQl()
}

View File

@ -13,7 +13,7 @@
<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 src="./js/settings.js"></script> <script async src="./js/settings.js"></script>
</head> </head>
<body> <body>
@ -32,19 +32,21 @@
<p>Any settings you apply will only apply to the device you are using now.</p> <p>Any settings you apply will only apply to the device you are using now.</p>
<p>Settings are not yet fully implemented, some options won't apply properly yet.</p> <p>Settings are not yet fully implemented, some options won't apply properly yet.</p>
<form>
<label>Personal Quick Links:</label><br> <label>Personal Quick Links:</label><br>
<p>Enter one CRS/3ALPHA code per box</p> <p>Enter one CRS/3ALPHA code per box</p>
<input type="text" maxlength="3" id="ql0" name="ql0" autocomplete="off" class="small-box"> <input type="text" maxlength="3" id="ql0" name="ql0" autocomplete="off" class="small-lookup-box">
<input type="text" maxlength="3" id="ql1" name="ql1" autocomplete="off" class="small-box"><br> <input type="text" maxlength="3" id="ql1" name="ql1" autocomplete="off" class="small-lookup-box"><br>
<input type="text" maxlength="3" id="ql2" name="ql2" autocomplete="off" class="small-box"> <input type="text" maxlength="3" id="ql2" name="ql2" autocomplete="off" class="small-lookup-box">
<input type="text" maxlength="3" id="ql3" name="ql3" autocomplete="off" class="small-box"><br> <input type="text" maxlength="3" id="ql3" name="ql3" autocomplete="off" class="small-lookup-box"><br>
<input type="text" maxlength="3" id="ql4" name="ql4" autocomplete="off" class="small-box"> <input type="text" maxlength="3" id="ql4" name="ql4" autocomplete="off" class="small-lookup-box">
<input type="text" maxlength="3" id="ql5" name="ql5" autocomplete="off" class="small-box"><br> <input type="text" maxlength="3" id="ql5" name="ql5" autocomplete="off" class="small-lookup-box"><br>
<input type="text" maxlength="3" id="ql6" name="ql6" autocomplete="off" class="small-box"> <input type="text" maxlength="3" id="ql6" name="ql6" autocomplete="off" class="small-lookup-box">
<input type="text" maxlength="3" id="ql7" name="ql7" autocomplete="off" class="small-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-box"> <input type="text" maxlength="3" id="ql8" name="ql8" autocomplete="off" class="small-lookup-box">
<input type="text" maxlength="3" id="qp9" name="ql9" autocomplete="off" class="small-box"><br> <input type="text" maxlength="3" id="ql9" name="ql9" autocomplete="off" class="small-lookup-box"><br>
</form> <button onclick="setQl()" class="lookup-button">Apply</button>
<button onclick="clearQl()" class="lookup-button">Reset</button>
</body> </body>
</html> </html>

View File

@ -1,9 +1,4 @@
.small-box{ .small-lookup-box{
max-width: 100px; max-width: 100px;
height: 20px; height: 20px;
margin-top: 5px;
font-family: urwgothic, sans-serif;
text-align: center;
border-radius: 40px;
text-transform: uppercase;
} }

View File

@ -160,6 +160,11 @@ label {
margin-bottom: 10px; margin-bottom: 10px;
cursor: pointer; cursor: pointer;
} }
#quick_links{
width: 75%;
max-width: 300px;
margin: auto;
}
.actionbutton { .actionbutton {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
@ -173,6 +178,8 @@ label {
padding: 3px; padding: 3px;
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px; margin-bottom: 10px;
font-size: 18px; font-size: 18px;
} }