Updated js controller and config api route

Controller was refactored to be a bit less monolithic.

Config route was updated to accept an html form data POST rather than
just a json object.

app/routes.py

@@ -71,13 +71,14 @@ def config():
     if request.method == 'GET':
         return json.dumps(user_config)
     else:
+        config_data = request.form.to_dict()
         with open(app.config['STATIC_FOLDER'] + '/config.json', 'w') as config_file:
-            config_file.write(json.dumps(json.loads(request.data), indent=4))
+            config_file.write(json.dumps(config_data, indent=4))
             config_file.close()
 
-            user_config = json.loads(request.data)
+            user_config = config_data
 
-        return 'New config: ' + str(request.data)
+        return redirect('/')
 
 
 @app.route('/url', methods=['GET'])

app/static/js/controller.js

@@ -1,8 +1,4 @@
-document.addEventListener("DOMContentLoaded", function() {
+const setupSearchLayout = () => {
-    setTimeout(function() {
-        document.getElementById("main").style.display = "block";
-    }, 100);
-
     // Setup search field
     const searchBar = document.getElementById("search-bar");
     const searchBtn = document.getElementById("search-submit");
@@ -17,7 +13,9 @@ document.addEventListener("DOMContentLoaded", function() {
             searchBtn.click();
         }
     });
+}
 
+const setupConfigLayout = () => {
     // Setup shoogle config
     const collapsible = document.getElementById("config-collapsible");
     collapsible.addEventListener("click", function() {
@@ -32,11 +30,14 @@ document.addEventListener("DOMContentLoaded", function() {
         content.classList.toggle("open");
     });
 
-    const saveConfig = document.getElementById("config-submit");
+    const near = document.getElementById("config-near");
-    const nearConfig = document.getElementById("config-near");
+    const noJS = document.getElementById("config-nojs");
-    const noJSConfig = document.getElementById("config-nojs");
+    const dark = document.getElementById("config-dark");
-    const darkConfig = document.getElementById("config-dark");
 
+    fillConfigValues(near, noJS, dark);
+}
+
+const fillConfigValues = (near, nojs, dark) => {
     // Request existing config info
     let xhrGET = new XMLHttpRequest();
     xhrGET.open("GET", "/config");
@@ -49,38 +50,30 @@ document.addEventListener("DOMContentLoaded", function() {
         // Allow for updating/saving config values
         let configSettings = JSON.parse(xhrGET.responseText);
 
-        nearConfig.value = configSettings["near"] ? configSettings["near"] : "";
+        near.value = configSettings["near"] ? configSettings["near"] : "";
-        nearConfig.addEventListener("keyup", function() {
+        near.addEventListener("keyup", function() {
-            configSettings["near"] = nearConfig.value;
+            configSettings["near"] = near.value;
         });
 
-        noJSConfig.checked = !!configSettings["nojs"];
+        nojs.checked = !!configSettings["nojs"];
-        noJSConfig.addEventListener("change", function() {
+        nojs.addEventListener("change", function() {
-           configSettings["nojs"] = noJSConfig.checked ? 1 : 0;
+           configSettings["nojs"] = nojs.checked ? 1 : 0;
         });
 
-        darkConfig.checked = !!configSettings["dark"];
+        dark.checked = !!configSettings["dark"];
-        darkConfig.addEventListener("change", function() {
+        dark.addEventListener("change", function() {
-           configSettings["dark"] = darkConfig.checked ? 1 : 0;
+           configSettings["dark"] = dark.checked ? 1 : 0;
         });
-
-        saveConfig.onclick = function() {
-            let xhrPOST = new XMLHttpRequest();
-            xhrPOST.open("POST", "/config");
-            xhrPOST.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
-            xhrPOST.send(JSON.stringify(configSettings));
-            xhrPOST.onload = function() {
-                if (xhrGET.readyState === 4 && xhrPOST.status !== 200) {
-                    alert("Failure to save config file");
-                    return;
-                }
-
-                if (confirm("Configuration saved. Reload now?")) {
-                    window.location.reload();
-                }
-            }
-        }
     };
-    xhrGET.send();
 
+    xhrGET.send();
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+    setTimeout(function() {
+        document.getElementById("main").style.display = "block";
+    }, 100);
+
+    setupSearchLayout();
+    setupConfigLayout();
 });

app/templates/index.html

@@ -35,25 +35,27 @@
             <button id="config-collapsible" class="collapsible">Configuration</button>
             <div class="content">
                 <div class="config-fields">
+                    <form action="/config" method="post">
                         <div class="config-div">
                             <!-- TODO: Add option to regenerate user agent? -->
                             <span class="ua-span">User Agent: {{ ua }}</span>
                         </div>
                         <div class="config-div">
                             <label for="config-near">Near: </label>
-                        <input type="text" name="config-near" id="config-near" placeholder="City Name">
+                            <input type="text" name="near" id="config-near" placeholder="City Name">
                         </div>
                         <div class="config-div">
                             <label for="config-nojs">Show NoJS Links: </label>
-                        <input type="checkbox" name="config-nojs" id="config-nojs">
+                            <input type="checkbox" name="nojs" id="config-nojs">
                         </div>
                         <div class="config-div">
                             <label for="config-dark">Dark Mode: </label>
-                        <input type="checkbox" name="config-dark" id="config-dark">
+                            <input type="checkbox" name="dark" id="config-dark">
                         </div>
                         <div class="config-div">
-                        <button type="submit" id="config-submit">Save</button>
+                            <input type="submit" id="config-submit" value="Save">
                         </div>
+                    </form>
                 </div>
             </div>
         </div>

test/test_routes.py

@@ -3,8 +3,8 @@ import random
 
 demo_config = {
     'near': random.choice(['Seattle', 'New York', 'San Francisco']),
-    'dark_mode': random.getrandbits(1),
+    'dark_mode': str(random.getrandbits(1)),
-    'nojs': random.getrandbits(1)
+    'nojs': str(random.getrandbits(1))
 }
 
 
@@ -19,8 +19,8 @@ def test_search(client):
 
 
 def test_config(client):
-    rv = client.post('/config', data=json.dumps(demo_config))
+    rv = client.post('/config', data=demo_config)
-    assert rv._status_code == 200
+    assert rv._status_code == 302
 
     rv = client.get('/config')
     assert rv._status_code == 200