14 changed files with 163 additions and 134 deletions
--- a/UpNext.md
+++ b/UpNext.md
@ -13,11 +13,7 @@
    - Also include other details from the API such as:
        - Platform number
        - Operator
-    - If only one callingPoint, a string is returned instead of an array.
-
-### In Progress:
-
-* Frontend code refactoring: --- Pre-Refactor /static/js folder size: 22132B *Check Compressed Size Before Next Build*
+* Frontend code refactoring:
    - Refactor into files:
        - lib.main.js
        - lib.board.js
@ -25,7 +21,19 @@
        - index.js
        - settings.js
        - find-code.js
-        - service-worker.js *in / not /js*
+        - service-worker.js
+
+### In Progress:
+
+* Frontend code refactoring: --- Pre-Refactor /static/js folder size: 22132B
+    - Refactor into files:
+        - lib.main.js
+        - lib.board.js
+        - simple-board.js
+        - index.js
+        - settings.js
+        - find-code.js
+        - service-worker.js

 ### Completed - Testing:

--- a/static/board.html
+++ b/static/board.html
@ -12,7 +12,7 @@
    <link rel="stylesheet" type="text/css" href="./styles/boards.css"/>
    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
    <link rel="manifest" type="application/json" href="./manifest.json"/>
-    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/main.js" defer></script>
    <script src="./js/boards.js" defer></script>
    <script src="./js/public-board.js" defer></script>
  </head>
--- a/static/find-code.html
+++ b/static/find-code.html
@ -12,7 +12,7 @@
    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
    <link rel="manifest" type="application/json" href="./manifest.json"/>
    <title>OwlBoard - Code Lookup</title>
-    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/main.js" defer></script>
    <script src="./js/find-code.js" defer></script>
  </head>

--- a/static/help.html
+++ b/static/help.html
@ -10,7 +10,6 @@
    <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
    <link rel="manifest" type="application/json" href="./manifest.json"/>
-    <!-- NO SCRIPTS LOADED - NOT REQUIRED AT PRESENT -->
    <title>OwlBoard</title>
  </head>

--- a/static/index.html
+++ b/static/index.html
@ -10,7 +10,7 @@
    <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
    <link rel="manifest" type="application/json" href="./manifest.json"/>
-    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/main.js" defer></script>
    <script src="./js/index.js" defer></script>
    <title>OwlBoard</title>
  </head>
--- a/static/issue.html
+++ b/static/issue.html
@ -9,7 +9,6 @@
        <link rel="stylesheet" type="text/css" href="./styles/main.css"/>
        <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
        <link rel="manifest" type="application/json" href="./manifest.json"/>
-        <!-- NO SCRIPTS LOADED - NOT REQUIRED AT PRESENT -->
        <title>OwlBoard - Report</title>
    </head>
    <body>
--- a/static/js/boards.js
+++ b/static/js/boards.js
@ -1,9 +1,20 @@
+// Fetch a known query parameter from the pages URL
+async function getQuery(param) {
+    var params = new URLSearchParams(window.location.search)
+    var query = params.get(param)
+    if (query) {
+        return query
+    } else {
+        return 'false'
+    }
+}
+
 // Set page headers
 async function setHeaders(title,time) {
    var prefix = `OwlBoard - `
    document.title = `${prefix}${title}`
-    document.getElementById("stn_name").textContent = title
-    document.getElementById("fetch_time").textContent = time.toLocaleTimeString()
+    document.getElementById("stn_name").innerHTML = title
+    document.getElementById("fetch_time").innerHTML = time.toLocaleTimeString()
 }

 // Determine what should display in 'platform' column
@ -13,7 +24,7 @@ async function parsePlatform(svc){
    } else {
        var platform = "-";
    }
-    if (svc.platformChanged) { // Not present in public API, ready for staff version.
+    if (svc.platformChanged) {
        var changed = "changed";
    } else {
        var changed = "";
@ -45,7 +56,7 @@ async function parseTime(string){
            var change = "";
            break;
        case "No report":
-            var output = "-";
+            var output = "?";
            var change = "";
            break;
        default:
@ -55,7 +66,7 @@ async function parseTime(string){
    return {data: output, changed: change};
 }

-// Convert multiple Origin/Destinations to single string
+// Sometimes the origin or destination names are undefined, need to catch that
 async function parseName(location) {
    if (Array.isArray(location)) {
        var name = `${location[0]['locationName']} & ${location[1]['locationName']}`
@ -66,7 +77,7 @@ async function parseName(location) {
    }
 }

-// Build calling list:  -- This is a string if only one callingPoint is present, needs adapting to work with that
+// Build calling list:
 async function buildCallLists(data) {
    try {
        if (data.previousCallingPoints.callingPointList.callingPoint) {
@ -130,7 +141,7 @@ async function buildCallLists(data) {
    return;
 }

-// Display calling list: - The calling list should be built on demand.
+// Display calling list:
 async function showCalls(id) {
    document.getElementById(id).style = "display: block;";
    return;
@ -144,18 +155,18 @@ async function hideCalls(id) {
 // Display Alert Messages
 async function displayAlerts(array) {
    var counter = 0
-    var messages = ""
    for(var i = 0; i < array.length; i++) {
        // Increment counter
        counter += 1;
        // Reset Vars
-        messages += `<p>${array[i]}</p>`;
+        var msg = array[i];
+        console.log(`Alert: ${msg}`);
+        document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", `<p>${msg}</p>`);
    }
-    document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", messages);
    if (counter == 1) {
-        document.getElementById("alert_bar_note").textContent = `There is ${counter} active alert`
+        document.getElementById("alert_bar_note").innerHTML = `There is ${counter} active alert`
    } else if (counter > 1) {
-        document.getElementById("alert_bar_note").textContent = `There are ${counter} active alerts`
+        document.getElementById("alert_bar_note").innerHTML = `There are ${counter} active alerts`

    }
    document.getElementById("alerts").style = "display:block"
@ -175,22 +186,6 @@ async function deflateAlerts() {
    document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
 }

-/*
-Compress buildCalls() and buildPastCalls() into a single function
-that can selectively work with either data.et or data.at.
-async function buildCalls(data) {
-    if (typeof data.et != "undefined") {
-        var time = await parseTime(data.et)
-    } else if (typeof data.at != "undefined") {
-        var time = await parseTime(data.at)
-    }
-    return `<tr>
-              <td class="detail-name detail-table-content">${data.locationName}</td>
-              <td class="detail-table-content">${data.st}</td>
-              <td class="detail-table-content ${time.changed}">${time.data}</td>
-            </tr>`
-}
-*/
 async function buildCalls(data) {
    var timeEt = await parseTime(data.et)
    return `<tr>
--- a/static/js/find-code.js
+++ b/static/js/find-code.js
@ -1,4 +1,4 @@
-hideLoading();
+clearLoading();

 async function fetchEntry(){  // This can be condensed
    showLoading();
@ -15,7 +15,10 @@ async function fetchEntry(){  // This can be condensed
        tiploc: tiploc.value,
        stanox: stanox.value
    }
-      parseData(values)
+
+    console.log(`Read values: ${JSON.stringify(values)}`)
+    
+    parseData(values)
 }

 async function parseData(values){
@ -32,54 +35,40 @@ async function parseData(values){
        setLoadingDesc(`Searching\n${values.stanox.toUpperCase()}`)
        var data = await getData("stanox", values.stanox)
    } else if (values.name != ""){
-        setLoadingDesc(`Searching\n${values.name}`)
+        setLoadingDesc(`Searching\n${values.name.capitalize()}`)
        var data = await getData("name", values.name)
    } else {
-        log("find-code.parseData: No data entered", "WARN")
-        await clearForm();
-        document.getElementById("name").value = "No data entered"
-        hideLoading();
+        errorNoData()
+        hideLoading()
        return;
    }
+
    displayData(data);
 }

 async function getData(type, value){
-    log(`find-code.getData: Looking for: ${type} '${value}'`, "INFO")
+    console.log(`Looking for: ${type} ${value}`)
    try {
        var url = `${window.location.origin}/api/v1/find/${type}/${value}`;
        var resp = await fetch(url);
+        console.log(`Response: ${resp.json}`)
        return await resp.json()
    } catch (err) {
-        log(`find-code.getData: Error getting data: ${err}`, "WARN")
-        return "";
+        errorFetch(err)
    }
 }

 async function displayData(data){
    hideLoading();
    if (data.status === "failed" || data == ""){
-        log(`find-code.displayData: Unable to find data`, "WARN")
-        clearForm();
-        document.getElementById("name").value = "Not Found";
-    } else {
-        log(`find-code.displayData: Inserting data`, "INFO")
-        try {
-            document.getElementById("name").value = data['0']['NLCDESC']
-        } catch (err) {}
-        try {
-            document.getElementById("3alpha").value = data['0']['3ALPHA']
-        } catch (err) {}
-        try {
-            document.getElementById("nlc").value = data['0']['NLC']
-        } catch (err) {}
-        try {
-            document.getElementById("tiploc").value = data['0']['TIPLOC']
-        } catch (err) {}
-        try {
-            document.getElementById("stanox").value = data['0']['STANOX']
-        } catch (err) {}
+        errorNotFound()
    }
+    document.getElementById("name").value = data['0']['NLCDESC']
+    document.getElementById("3alpha").value = data['0']['3ALPHA']
+    document.getElementById("nlc").value = data['0']['NLC']
+    document.getElementById("tiploc").value = data['0']['TIPLOC']
+    document.getElementById("stanox").value = data['0']['STANOX']
+//    document.getElementById("stanme").value = data['0']['STANME']  // NOT PRESENT IN CORPUS
 }

 async function clearForm(){
@ -89,4 +78,27 @@ async function clearForm(){
    document.getElementById("tiploc").value = ""
    document.getElementById("stanox").value = ""
    hideLoading();
+}
+
+async function showLoading(){
+    document.getElementById("loading").style = "display: block;";
+}
+
+async function hideLoading(){
+    document.getElementById("loading").style = "display: none;";
+}
+
+async function errorNoData(){
+    console.log("No data entered")
+    window.alert("You haven't entered any data")
+}
+
+async function errorFetch(err){
+    console.log("Error fetching data")
+    console.log(err)
+}
+
+async function errorNotFound(){
+    console.log("Location not found")
+    window.alert("No location was found.  Check and try again.")
 }
--- a/static/js/index.js
+++ b/static/js/index.js
@ -1,21 +1,38 @@
 // Init:
-pageInit();
+setQls();
+clearLoading();

-async function pageInit() {
-  await loadQuickLinks();
-  hideLoading(); // From lib.main
+async function sidebarOpen() {
+  document.getElementById("sidebar").style.width = "50%";
+  document.getElementById("sidebar_open_short").style.display = "none";
+  document.getElementById("sidebar_close_short").style.display = "block";
+}
+
+async function sidebarClose() {
+  document.getElementById("sidebar").style.width = "0%"
+  document.getElementById("sidebar_open_short").style.display = "block";
+  document.getElementById("sidebar_close_short").style.display = "none";
 }

 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 loadQuickLinks(){
-  var data = await getQuickLinks(); // From lib.main
-  var buttons = "";
-    for(var i = 0; i < data.length; i++) {
-        buttons += `
-        <button class="actionbutton" onclick="gotoBoard('${data[i]}')">${data[i].toUpperCase()}</button>`
+async function setQls(){
+  var qlOpt = JSON.parse(localStorage.getItem("qlOpt"))
+  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>`
+        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>`
+      document.getElementById("quick_links").insertAdjacentHTML("beforeend", btn) // Append btn
    }
-  document.getElementById("quick_links").insertAdjacentHTML("beforeend", buttons)
+  }
 }
--- a/static/js/lib.main.js
+++ b/static/js/lib.main.js
@ -1,22 +1,20 @@
 /* Feature Detectors */

 /* Valid values for ${type}: localstorage, sessionstorage */
-async function storageAvailable(type) {  // Currently not used
+async function storageAvailable(type) {
    try {
-        let storage = window[type];
-        let x = '__storage_test__';
-        storage.setItem(x, "test");
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
        storage.getItem(x);
-        log(`lib.main.storageAvailable: ${type} is available`, "INFO")
        return true;
    } catch (err) {
-        log(`lib.main.storageAvailable: ${type} is not available`, "ERR")
        return false;
    }
 }


-/* Timeouts */
+/* Delays */
 /* Usage: '' */
 const delay = ms => new Promise(res => setTimeout(res, ms));

@ -43,19 +41,6 @@ async function log(msg, type) {
    };
 };

-/* Menu Control */
-async function sidebarOpen() {
-    document.getElementById("sidebar").style.width = "50%";
-    document.getElementById("sidebar_open_short").style.display = "none";
-    document.getElementById("sidebar_close_short").style.display = "block";
-  }
-  
-  async function sidebarClose() {
-    document.getElementById("sidebar").style.width = "0%"
-    document.getElementById("sidebar_open_short").style.display = "block";
-    document.getElementById("sidebar_close_short").style.display = "none";
-  }
-
 /* Loading Box Control */
 async function hideLoading() {
    document.getElementById("loading").style = "display: none;";
@ -63,7 +48,7 @@ async function hideLoading() {

    /* DEPRECIATED: Alias for hideLoading() - Marked for removal*/
    async function clearLoading() {
-        log("Depreciated function called - clearLoading() - Alias to hideLoading()", "WARN")
+        log("Depreciated function called - clearLoading()", "WARN")
        await hideLoading();
    }

@ -73,27 +58,4 @@ async function showLoading() {

 async function setLoadingDesc(desc) {
    document.getElementById("loading_desc").textContent = `${desc}`;
-}
-
-/* Fetch User Settings */
-async function getQuickLinks() {
-    try {
-        var data = JSON.parse(localStorage.getItem("qlOpt"));
-    } catch (err) {
-        var data = 
-        ["bri","lwh","srd","mtp","rda","cfn",
-        "sml","shh","pri","avn","sar","svb"];
-    }
-    return data;
-}
-
-/* Fetch a known query parameter from the pages URL */
-async function getQuery(param) {
-    var params = new URLSearchParams(window.location.search)
-    var query = params.get(param)
-    if (query) {
-        return query
-    } else {
-        return 'false'
-    }
 }
--- a/static/js/main.js
+++ b/static/js/main.js
@ -0,0 +1,21 @@
+// Loading Box
+async function clearLoading() {
+    document.getElementById("loading").style = "display: none;";
+}
+
+async function showLoading() {
+    document.getElementById("loading").style = "display: block;";
+}
+
+async function setLoadingDesc(desc) {
+    document.getElementById("loading_desc").textContent = `${desc}`;
+}
+
+// Enable delays
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+// Log Helper
+function log(msg) {
+    var time = new Date().toISOString();
+    console.log(`${time} - ${msg}`)
+}
--- a/static/js/public-board.js
+++ b/static/js/public-board.js
@ -29,8 +29,8 @@ async function init() {
 async function publicLdb(stn) {
    var url = `${window.location.origin}/api/v1/ldb/${stn}`;
    var resp = await fetch(url);
-    return await resp.json();
-}
+    return await resp.json();}
+

 async function parseLdb(data) {
    if (data.ERROR == "NOT_FOUND") { // Station not found
--- a/static/js/settings.js
+++ b/static/js/settings.js
@ -1,15 +1,31 @@
 // Init:
 const ql = ["ql0","ql1","ql2","ql3","ql4","ql5","ql6","ql7","ql8","ql9","ql10","ql11"]
-storageAvailable("localStorage");
+checkStorageSupport();
 getQl();
-hideLoading();
+clearLoading();
+
+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 = await getQuickLinks()
+    var qlOpt = JSON.parse(localStorage.getItem("qlOpt"))
    if (qlOpt){
        var i = 0
        while (i < 12) {
            if (qlOpt[i] != 'undefined') {
+                console.log(`Setting box ql${i} to ${qlOpt[i]}`)
                document.getElementById(`ql${i}`).value = qlOpt[i]
                i +=1
            }
@ -27,9 +43,9 @@ async function setQl(){
        }
        qlSet.sort()
    }
+    console.log(qlSet)
    localStorage.setItem("qlOpt", JSON.stringify(qlSet))
-    log(`settings.setQl: User settings saved`, "INFO")
-    hideLoading();
+    clearLoading();
 }

 async function clearQl(){
--- a/static/settings.html
+++ b/static/settings.html
@ -12,7 +12,7 @@
    <link rel="icon" type="image/svg+xml" href="./images/icon.svg"/>
    <link rel="manifest" type="application/json" href="./manifest.json"/>
    <title>OwlBoard - Settings</title>
-    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/main.js" defer></script>
    <script src="./js/settings.js" defer></script>
  </head>

@ -50,7 +50,7 @@
        <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">Defaults</button>
+        <button onclick="clearQl()" class="lookup-button">Reset</button>

  </body>
 </html>