Frontend: Refactoring Excersize Finished

Signed-off-by: Fred Boniface <fred@fjla.uk>
More notes
2023-01-25 11:38:48 +00:00 · 2023-01-24 21:32:45 +00:00 · 2023-01-24 21:31:51 +00:00 · 2023-01-24 21:29:03 +00:00 · 2023-01-24 21:26:47 +00:00 · 2023-01-24 21:24:53 +00:00
18 changed files with 425 additions and 357 deletions
--- a/UpNext.md
+++ b/UpNext.md
@ -9,24 +9,15 @@
 * Enable text search for `locationName` on find-code page.
 * Recreate raster logos with the new vector file.
 * Responsive text sizes for boards.
-* Rework details div to include the current station and make all stops a single list.  The time parsing function needs to work for `et` OR `at`
-    - Also include other details from the API such as:
-        - Platform number
-        - Operator
-* Frontend code refactoring:
-    - Refactor into files:
-        - lib.main.js
-        - lib.board.js
-        - simple-board.js
-        - index.js
-        - settings.js
-        - find-code.js
-        - service-worker.js
+* Change dockerfile to deploy with brotli support for faster laoding.
+
+### In Progress:

 ### Completed - Testing:

 * Implement calling list.
 * Support multiple origins/destinations: NOT INCLUDING ON CALLING LIST
+* Frontend Code Refactor


 ## Backend:
--- a/static/board.html
+++ b/static/board.html
@ -12,9 +12,9 @@
    <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/main.js" defer></script>
-    <script src="./js/boards.js" defer></script>
-    <script src="./js/public-board.js" defer></script>
+    <script src="./js/lib.main.js" defer></script>
+    <script src="./js/lib.board.js" defer></script>
+    <script src="./js/simple-board.js" defer></script>
  </head>
  <body>
    <div id="loading">
--- 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/main.js" defer></script>
+    <script src="./js/lib.main.js" defer></script>
    <script src="./js/find-code.js" defer></script>
  </head>

--- a/static/help.html
+++ b/static/help.html
@ -10,6 +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"/>
+    <!-- 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/main.js" defer></script>
+    <script src="./js/lib.main.js" defer></script>
    <script src="./js/index.js" defer></script>
    <title>OwlBoard</title>
  </head>
--- a/static/issue.html
+++ b/static/issue.html
@ -9,6 +9,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"/>
+        <!-- NO SCRIPTS LOADED - NOT REQUIRED AT PRESENT -->
        <title>OwlBoard - Report</title>
    </head>
    <body>
--- a/static/js/boards.js
+++ b/static/js/boards.js
@ -1,205 +0,0 @@
-// 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").innerHTML = title
-    document.getElementById("fetch_time").innerHTML = time.toLocaleTimeString()
-}
-
-// Determine what should display in 'platform' column
-async function parsePlatform(svc){
-    if (svc.platform != undefined) {
-        var platform = svc.platform;
-    } else {
-        var platform = "-";
-    }
-    if (svc.platformChanged) {
-        var changed = "changed";
-    } else {
-        var changed = "";
-    }
-    return {num: platform, change: changed}
-}
-
-// Use different time strings to default to make better on small screens
-async function parseTime(string){
-    switch (string) {
-        case "Delayed":
-            var output = "LATE";
-            var change = "changed";
-            break;
-        case "Cancelled":
-            var output = "CANC";
-            var change = "cancelled";
-            break;
-        case "On time":
-            var output = "RT";
-            var change = "";
-            break;
-        case "":
-            var output = "-";
-            var change = "";
-            break;
-        case undefined:
-            var output = "-";
-            var change = "";
-            break;
-        case "No report":
-            var output = "?";
-            var change = "";
-            break;
-        default:
-            var output = string;
-            var change = "changed";
-    }
-    return {data: output, changed: change};
-}
-
-// 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']}`
-        return name;
-    }
-    else {
-        return location.locationName;
-    }
-}
-
-// Build calling list:
-async function buildCallLists(data) {
-    try {
-        if (data.previousCallingPoints.callingPointList.callingPoint) {
-            var preCallPoint = data.previousCallingPoints.callingPointList.callingPoint;
-        }
-    } catch (err) {
-        console.log(`Data not found error, ${err}`)
-    }
-    try {
-        if (data.subsequentCallingPoints.callingPointList.callingPoint) {
-            var postCallPoint = data.subsequentCallingPoints.callingPointList.callingPoint;
-        }
-    } catch (err) {
-        console.log(`Data not found error, ${err}`)
-    }
-    var procPre = "";
-    var procPost = "";
-    try {
-        if (preCallPoint) {
-            for(var i = 0; i < preCallPoint.length; i++) {
-                var proc = await buildPastCalls(preCallPoint[i]);
-                procPre = `${procPre}\n${proc}`
-            }
-        }
-    } catch (err) {
-        console.log(`Error reading previous stops. ${err}`)
-    }
-    try {
-        if (postCallPoint) {
-            for (var i = 0; i < postCallPoint.length; i++) {
-                var proc = await buildCalls(postCallPoint[i]);
-                procPost = `${procPost}\n${proc}`
-            }
-        }
-    } catch (err) {
-        console.log(`Error reading next stops. ${err}`)
-    }
-    var div = `
-            <div class="call-data" id="${data.serviceID}">
-              <p class="close-data" onclick="hideCalls('${data.serviceID}')">X</p>
-              <table class="calling-at">
-                <caption>Calling at:</caption>
-                <tr>
-                  <th class="detail-name-head">Location</th>
-                  <th class="time">Schedule</th>
-                  <th class="time">Exp.</th>
-                </tr>
-                ${procPost}
-              </table>
-              <table class="called-at">
-                <caption>Previous stops:</caption>
-                <tr>
-                  <th class="detail-name-head">Location</th>
-                  <th class="time">Schedule</th>
-                  <th class="time">Actual</th>
-                </tr>
-                ${procPre}
-              </table>
-            </div>`
-    document.body.insertAdjacentHTML("beforeend", div)
-    return;
-}
-
-// Display calling list:
-async function showCalls(id) {
-    document.getElementById(id).style = "display: block;";
-    return;
-}
-
-async function hideCalls(id) {
-    document.getElementById(id).style = "display: none;";
-    return;
-}
-
-// Display Alert Messages
-async function displayAlerts(array) {
-    var counter = 0
-    for(var i = 0; i < array.length; i++) {
-        // Increment counter
-        counter += 1;
-        // Reset Vars
-        var msg = array[i];
-        console.log(`Alert: ${msg}`);
-        document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", `<p>${msg}</p>`);
-    }
-    if (counter == 1) {
-        document.getElementById("alert_bar_note").innerHTML = `There is ${counter} active alert`
-    } else if (counter > 1) {
-        document.getElementById("alert_bar_note").innerHTML = `There are ${counter} active alerts`
-
-    }
-    document.getElementById("alerts").style = "display:block"
-    document.getElementById("alerts_bar").style = "display:block"
-    document.getElementById("output").style = "margin-top:95px" // Adjust margin of train table div.
-}
-
-async function inflateAlerts() {
-    document.getElementById("alerts_msg").style = "display:block;";
-    document.getElementById("alert_expand_arrow").style = "transform: rotate(180deg);";
-    document.getElementById("alerts_bar").setAttribute("onclick", "deflateAlerts()")
-}
-
-async function deflateAlerts() {
-    document.getElementById("alerts_msg").style = "display.none;";
-    document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
-    document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
-}
-
-async function buildCalls(data) {
-    var timeEt = await parseTime(data.et)
-    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 ${timeEt.changed}">${timeEt.data}</td>
-            </tr>`
-}
-
-async function buildPastCalls(data) {
-    var timeEt = 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 ${timeEt.changed}">${timeEt.data}</td>
-            </tr>`
-}
--- a/static/js/find-code.js
+++ b/static/js/find-code.js
@ -1,4 +1,4 @@
-clearLoading();
+hideLoading();

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

@ -35,40 +32,54 @@ 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.capitalize()}`)
+        setLoadingDesc(`Searching\n${values.name}`)
        var data = await getData("name", values.name)
    } else {
-        errorNoData()
-        hideLoading()
+        log("find-code.parseData: No data entered", "WARN")
+        await clearForm();
+        document.getElementById("name").value = "No data entered"
+        hideLoading();
        return;
    }
-
    displayData(data);
 }

 async function getData(type, value){
-    console.log(`Looking for: ${type} ${value}`)
+    log(`find-code.getData: Looking for: ${type} '${value}'`, "INFO")
    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) {
-        errorFetch(err)
+        log(`find-code.getData: Error getting data: ${err}`, "WARN")
+        return "";
    }
 }

 async function displayData(data){
    hideLoading();
    if (data.status === "failed" || data == ""){
-        errorNotFound()
-    }
+        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']
-//    document.getElementById("stanme").value = data['0']['STANME']  // NOT PRESENT IN CORPUS
+        } catch (err) {}
+    }
 }

 async function clearForm(){
@ -79,26 +90,3 @@ async function clearForm(){
    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,38 +1,21 @@
 // Init:
-setQls();
-clearLoading();
+pageInit();

-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 pageInit() {
+  await loadQuickLinks();
+  hideLoading(); // From lib.main
 }

 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","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
-    }
+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>`
    }
+  document.getElementById("quick_links").insertAdjacentHTML("beforeend", buttons)
 }
--- a/static/js/lib.board.js
+++ b/static/js/lib.board.js
@ -0,0 +1,227 @@
+/* Fetch Functions */
+async function publicLdb(stn) {
+    var url = `${window.location.origin}/api/v1/ldb/${stn}`;
+    var resp = await fetch(url);
+    return await resp.json();
+}
+
+/* Set page heading */
+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()
+    sessionStorage.setItem("board_location", title);
+}
+
+/* Display No Trains Message */
+async function displayNoTrains() {
+    document.getElementById('no_services').style = "display: block;";
+    clearLoading();
+}
+
+/* Parse the value of `platform` to account for unknown platforms */
+async function parsePlatform(svc){
+    if (svc.platform != undefined) {
+        var platform = svc.platform;
+    } else {
+        var platform = "-";
+    }
+    if (svc.platformChanged) { // Not present in public API, ready for staff version.
+        var changed = "changed";
+    } else {
+        var changed = "";
+    }
+    return {num: platform, change: changed}
+}
+
+
+/* Change value of time strings to fit well on small screens */
+async function parseTime(string){
+    switch (string) {
+        case "Delayed":
+            var output = "LATE";
+            var change = "changed";
+            break;
+        case "Cancelled":
+            var output = "CANC";
+            var change = "cancelled";
+            break;
+        case "On time":
+            var output = "RT";
+            var change = "";
+            break;
+        case "":
+            var output = "-";
+            var change = "";
+            break;
+        case undefined:
+            var output = "-";
+            var change = "";
+            break;
+        case "No report":
+            var output = "-";
+            var change = "";
+            break;
+        case "undefined":
+            var output = false;
+            var change = "";
+            break;
+        default:
+            var output = string;
+            var change = "changed";
+    }
+    return {data: output, changed: change};
+}
+
+/* Convert multiple Origin/Destinations to single string */
+async function parseName(location) {
+    if (Array.isArray(location)) {
+        var name = `${location[0]['locationName']} & ${location[1]['locationName']}`
+        return name;
+    }
+    else {
+        return location.locationName;
+    }
+}
+
+// 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>`;
+    }
+    document.getElementById("alerts_msg").insertAdjacentHTML("beforeend", messages);
+    if (counter == 1) {
+        document.getElementById("alert_bar_note").textContent = `There is ${counter} active alert`
+    } else if (counter > 1) {
+        document.getElementById("alert_bar_note").textContent = `There are ${counter} active alerts`
+
+    }
+    document.getElementById("alerts").style = "display:block"
+    document.getElementById("alerts_bar").style = "display:block"
+    document.getElementById("output").style = "margin-top:95px" /* The margin for the train table needs to be adjusted if the alert box exists. */
+}
+
+
+/* Show/Hide alerts box */
+async function inflateAlerts() {
+    document.getElementById("alerts_msg").style = "display:block;";
+    document.getElementById("alert_expand_arrow").style = "transform: rotate(180deg);";
+    document.getElementById("alerts_bar").setAttribute("onclick", "deflateAlerts()")
+}
+
+async function deflateAlerts() {
+    document.getElementById("alerts_msg").style = "display.none;";
+    document.getElementById("alert_expand_arrow").style = "transform: rotate(0deg);";
+    document.getElementById("alerts_bar").setAttribute("onclick", "inflateAlerts()")
+}
+
+/*//// SERVICE DETAIL LISTS ////*/
+// Build calling list:  -- This outputs calling point data to sessionStorage in the format: key{pre: [{PREVIOUS_Stops}], post: [{POST_STOPS}]}
+async function buildCallLists(svc) {
+    var sSvcId = svc.serviceID;
+    var oSvcData = {
+        plat: svc.platform,
+        sta: svc.sta,
+        eta: svc.eta,
+        std: svc.std,
+        etd: svc.etd
+    };
+    try {
+        if (typeof svc.previousCallingPoints.callingPointList.callingPoint != 'undefined') {
+            let array = await makeArray(svc.previousCallingPoints.callingPointList.callingPoint);
+            oSvcData.pre = array;
+        }
+    } catch (err) { /* Do nothing if ERR */ }
+    try {
+        if (typeof svc.subsequentCallingPoints.callingPointList.callingPoint != 'undefined') {
+            let array = await makeArray(svc.subsequentCallingPoints.callingPointList.callingPoint);
+            oSvcData.post = array;
+        }
+    } catch (err) { /* Do nothing if ERR */ }
+    sessionStorage.setItem(sSvcId, JSON.stringify(oSvcData))
+}
+
+/* Display calling list: - Read data from sessionStorage and write to DOM. */
+async function showCalls(id) {
+    log(`Showing details for service ${id}`, "INFO")
+    var svcDetail = await JSON.parse(sessionStorage.getItem(id));
+    var pre = "";
+    var post = "";
+    if (typeof svcDetail.pre != 'undefined') {
+        for(var preCall = 0; preCall < svcDetail.pre.length; preCall++) {
+            pre += await singleCall(svcDetail.pre[preCall]);
+        }
+    }
+    if (typeof svcDetail.post != 'undefined') {
+        for(var postCall = 0; postCall < svcDetail.post.length; postCall++) {
+            post += await singleCall(svcDetail.post[postCall]);
+        }
+    }
+    /* Run retreived data through parsers */
+    var thisStd = await parseTime(svcDetail.std);
+    var thisEtd = await parseTime(svcDetail.etd);
+    var thisSta = await parseTime(svcDetail.sta);
+    var thisEta = await parseTime(svcDetail.eta);
+    var thisPlat = await parsePlatform(svcDetail.plat);
+    /* Prepare data for this station */
+    if (thisStd.data != "-") {
+        var sTime = `${thisStd.data}`
+        var eTime = `${thisEtd.data}`
+        var change = thisEtd.changed
+    } else {
+        var sTime = `${thisSta.data}`
+        var eTime = `${thisEta.data}`
+        var change = thisEta.changed
+    };
+
+    let here = `<tr>
+                  <td class="detail-name detail-name-here detail-table-content">${sessionStorage.getItem("board_location")}</td>
+                  <td class="detail-table-content">${sTime}</td>
+                  <td class="detail-table-content ${change}">${eTime}</td>
+                </tr> `
+    /* Prepare then insert DOM Data */
+    let dom = ` <div id="${id}" class="call-data">
+                  <p class="close-data" onclick="hideCalls('${id}')">X</p>
+                  <table class="call-table">
+                    <tr>
+                      <th class="detail-name-head">Location</th>
+                      <th class="time">Schedule</th>
+                      <th class="time">Act/Est</th>
+                    </tr>
+                    ${pre}
+                    ${here}
+                    ${post}
+                  </table>
+                </div>`
+
+    document.body.insertAdjacentHTML("beforeend", dom);
+    document.getElementById(id).style = "display: block;";
+    return;
+}
+
+async function hideCalls(id) {
+    let element = document.getElementById(id)
+    element.style = "display: none;";
+    element.remove();
+    return;
+}
+
+/* Builds the train data information in to a table row */
+async function singleCall(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>`
+}
--- a/static/js/lib.main.js
+++ b/static/js/lib.main.js
@ -0,0 +1,115 @@
+/* Feature Detectors */
+
+/* Valid values for ${type}: localstorage, sessionstorage */
+async function storageAvailable(type) {  // Currently not used
+    try {
+        let storage = window[type];
+        let x = '__storage_test__';
+        storage.setItem(x, "test");
+        storage.getItem(x);
+        storage.removeItem(x);
+        log(`lib.main.storageAvailable: ${type} is available`, "INFO")
+        return true;
+    } catch (err) {
+        log(`lib.main.storageAvailable: ${type} is not available`, "ERR")
+        return false;
+    }
+}
+
+/* Array Converter
+   Converts a string to a single item array */
+async function makeArray(data) {
+    if (typeof data == "string") {
+        var array = [];
+        array.push(data);
+        return array;
+    }
+    return data;
+}
+
+/* Timeouts */
+/* Usage: '' */
+const delay = ms => new Promise(res => setTimeout(res, ms));
+
+
+/* Log Helper */
+/* Values for level: 1, 2, 3 */
+/* Maintains backwards compatibility for previous
+   implementation of log helper */
+async function log(msg, type) {
+    var time = new Date().toISOString();
+    switch (type) {
+        case "ERR":
+            console.error(`${time} - ${msg}`);
+            break;
+        case "WARN":
+            console.warn(`${time} - ${msg}`);
+            break;
+        case "INFO":
+            console.info(`${time} - ${msg}`);
+            break;
+        default:
+            console.log(`${time} - ${msg}`);
+            break;
+    };
+};
+
+/* Show/Hide - 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;";
+}
+
+    /* DEPRECIATED: Alias for hideLoading() - Marked for removal*/
+    async function clearLoading() {
+        log("Depreciated function called - clearLoading() - Alias to hideLoading()", "WARN")
+        await hideLoading();
+    }
+
+async function showLoading() {
+    document.getElementById("loading").style = "display: block;";
+}
+
+async function setLoadingDesc(desc) {
+    document.getElementById("loading_desc").textContent = `${desc}`;
+}
+
+/* Fetch User Settings */
+async function getQuickLinks() {
+    var defaults =
+                ["bri","lwh","srd","mtp","rda","cfn",
+                "sml","shh","pri","avn","sar","svb"];
+    try {
+        if (localStorage.getItem("qlOpt")) {
+            var data = JSON.parse(localStorage.getItem("qlOpt"));
+        } else {
+            data = defaults;
+        }
+    } catch (err) {
+        data = defaults;
+    }
+    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
@ -1,21 +0,0 @@
-// 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/service-worker.js
+++ b/static/js/service-worker.js
--- a/static/js/settings.js
+++ b/static/js/settings.js
@ -1,31 +1,15 @@
 // Init:
 const ql = ["ql0","ql1","ql2","ql3","ql4","ql5","ql6","ql7","ql8","ql9","ql10","ql11"]
-checkStorageSupport();
+storageAvailable("localStorage");
 getQl();
-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.")
-    }
-}
+hideLoading();

 async function getQl(){
-    var qlOpt = JSON.parse(localStorage.getItem("qlOpt"))
+    var qlOpt = await getQuickLinks()
    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
            }
@ -43,9 +27,9 @@ async function setQl(){
        }
        qlSet.sort()
    }
-    console.log(qlSet)
    localStorage.setItem("qlOpt", JSON.stringify(qlSet))
-    clearLoading();
+    log(`settings.setQl: User settings saved`, "INFO")
+    hideLoading();
 }

 async function clearQl(){
--- a/static/js/simple-board.js
+++ b/static/js/simple-board.js
@ -1,8 +1,9 @@
 /* Page Init: */
 init()

-/* Supporting Functions */
+/* Init function */
 async function init() {
+    console.time("Loading Time")
    setLoadingDesc(`Loading\nservices`)
    var stn = await getQuery("stn");
    setLoadingDesc(`Loading\n${stn.toUpperCase()}`)
@ -26,25 +27,21 @@ 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();}
-
-
+/* Check for any errors in data returned from the Fetch call
+   If no errors, if there are none, call buildPage(). */
 async function parseLdb(data) {
    if (data.ERROR == "NOT_FOUND") { // Station not found
-        clearLoading();
+        hideLoading();
        document.getElementById("error_notice").style = "display: block;";
        document.getElementById("err_not_found").style = "display: block;";
        setHeaders("Not Found",new Date())
    } else if (data == false) {  // No data for station
-        clearLoading();
+        hideLoading();
        document.getElementById("error_notice").style = "display: block;";
        document.getElementById("err_no_data").style = "display:block;";
        setHeaders("No Data",new Date())
    } else if (data == "err") {  // Connection Error
-        clearLoading();
+        hideLoading();
        document.getElementById("error_notice").style = "display: block;";
        document.getElementById("err_conn").style = "display: block;";
        setHeaders("Connection Error",new Date())
@ -82,12 +79,9 @@ async function buildPage(data) {
        setLoadingDesc('Loading\nBusses')
        displayBus(data.GetStationBoardResult.busServices)
    }
+    console.timeEnd("Loading Time")
 }

-async function displayNoTrains() {
-    document.getElementById('no_services').style = "display: block;";
-    clearLoading();
-}

 async function displayTrains(data) {
    log(`Inserting data in DOM`)
@ -98,7 +92,7 @@ async function displayTrains(data) {
        buildCallLists(svc);
    }

-    clearLoading();
+    hideLoading();
    document.getElementById("output").style = "display:block;";
    log(`Insertion complete`)
 }
--- 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/main.js" defer></script>
+    <script src="./js/lib.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">Reset</button>
+        <button onclick="clearQl()" class="lookup-button">Defaults</button>

  </body>
 </html>
--- a/static/styles/boards.css
+++ b/static/styles/boards.css
@ -208,24 +208,33 @@ caption{
    top: 50px;
    left: 0;
    margin: 2%;
-    padding-top: 4px;
+    padding-top: 30px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    margin-bottom: 25px;
    background-color: var(--overlay-color);
-    overflow: scroll;
+    overflow: auto;
 }

 .close-data {
    position: absolute;
-    right: 15px;
+    right: 19px;
    top: -8px;
    font-weight: 900;
 }

+.call-table {
+    margin: auto;
+    width: 90%;
+}
+
+.detail-name-here {
+    color: var(--board-name-color);
+}
+
 .detail-table-content {
-    font-size: 12px;
+    font-size: 13px;
 }

 .changed{
--- a/static/sw.js
+++ b/static/sw.js
@ -0,0 +1 @@
+/* Service Worker */
Author	SHA1	Message	Date
Fred Boniface	bd9e2e71dd	Frontend: Refactoring Excersize Finished Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-25 11:38:48 +00:00
Fred Boniface	cbfbe6f9b9	More notes Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-24 21:32:45 +00:00
Fred Boniface	e07c9c4864	More fucking notes Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-24 21:31:51 +00:00
Fred Boniface	4df567463d	Update notes again! Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-24 21:29:03 +00:00
Fred Boniface	a42a00ddf9	Add notes Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-24 21:26:47 +00:00
Fred Boniface	f9b1dd5861	Frontend:Partial refactor of lib.board & simple-board. Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-24 21:24:53 +00:00
Fred Boniface	62dcc5cd02	Frontend: Reorganise code between simple-board and lib.board Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-24 19:41:22 +00:00
Fred Boniface	ceba276ac0	Frontend: Preparing for boards refactor Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-24 11:23:01 +00:00
Fred Boniface	bfb7d56983	Frontend: Fix fallback to default settings Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-23 21:14:53 +00:00
Fred Boniface	5a8f3f0d85	Frontend: Begin refactoring boards.js and public-board.js Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-23 21:00:53 +00:00
Fred Boniface	5e9f9e13bc	Frontend: Refactor settings.js Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-23 20:25:05 +00:00
Fred Boniface	018ddf8c47	Frontend: Further refactoring find-code.js Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-23 20:11:23 +00:00
Fred Boniface	7ea8f153cd	Frontend: Refactor fine-code.js - Will need work Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-23 19:46:41 +00:00
Fred Boniface	0958bc92f5	Frontend: Refactor indexjs Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-23 19:29:20 +00:00
Fred Boniface	67cc929158	Frontend: lib.main.js replaces main.js Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-23 18:46:33 +00:00
Fred Boniface	3e66cdad8d	Add lib.main.js and lib.board.js Migrate code from main.js to lib.main.js Signed-off-by: Fred Boniface <fred@fjla.uk>	2023-01-23 16:39:36 +00:00