Frontend: QLS Settings under test

Signed-off-by: Fred Boniface <fred@fjla.uk>

static/index.html

@@ -53,15 +53,8 @@
          apologies for any inconvinience caused to you.</p>
 
     <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>

static/js/find-code.js

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

static/js/index.js

@@ -12,4 +12,22 @@ async function sidebarClose() {
 
 async function gotoBoard(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
+    }
+  }
 }

static/js/settings.js

@@ -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()
+}

static/settings.html

@@ -13,7 +13,7 @@
     <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 src="./js/settings.js"></script>
+    <script async src="./js/settings.js"></script>
   </head>
 
   <body>
@@ -32,19 +32,21 @@
         <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>
-        <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>
 </html>

static/styles/settings.css

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

static/styles/style.css

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