From 0a3da5cea45444856bc7da55b1fbe3ef3060f881 Mon Sep 17 00:00:00 2001 From: Ben Busby Date: Tue, 28 Apr 2020 20:50:12 -0600 Subject: [PATCH] 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 | 7 +++-- app/static/js/controller.js | 63 +++++++++++++++++-------------------- app/templates/index.html | 40 ++++++++++++----------- test/test_routes.py | 8 ++--- 4 files changed, 57 insertions(+), 61 deletions(-) diff --git a/app/routes.py b/app/routes.py index f5e141b..43b0901 100644 --- a/app/routes.py +++ b/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']) diff --git a/app/static/js/controller.js b/app/static/js/controller.js index bc28231..07edc89 100644 --- a/app/static/js/controller.js +++ b/app/static/js/controller.js @@ -1,8 +1,4 @@ -document.addEventListener("DOMContentLoaded", function() { - setTimeout(function() { - document.getElementById("main").style.display = "block"; - }, 100); - +const setupSearchLayout = () => { // 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 nearConfig = document.getElementById("config-near"); - const noJSConfig = document.getElementById("config-nojs"); - const darkConfig = document.getElementById("config-dark"); + const near = document.getElementById("config-near"); + const noJS = document.getElementById("config-nojs"); + const dark = 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"] : ""; - nearConfig.addEventListener("keyup", function() { - configSettings["near"] = nearConfig.value; + near.value = configSettings["near"] ? configSettings["near"] : ""; + near.addEventListener("keyup", function() { + configSettings["near"] = near.value; }); - noJSConfig.checked = !!configSettings["nojs"]; - noJSConfig.addEventListener("change", function() { - configSettings["nojs"] = noJSConfig.checked ? 1 : 0; + nojs.checked = !!configSettings["nojs"]; + nojs.addEventListener("change", function() { + configSettings["nojs"] = nojs.checked ? 1 : 0; }); - darkConfig.checked = !!configSettings["dark"]; - darkConfig.addEventListener("change", function() { - configSettings["dark"] = darkConfig.checked ? 1 : 0; + dark.checked = !!configSettings["dark"]; + dark.addEventListener("change", function() { + 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(); +} + +document.addEventListener("DOMContentLoaded", function() { + setTimeout(function() { + document.getElementById("main").style.display = "block"; + }, 100); + setupSearchLayout(); + setupConfigLayout(); }); diff --git a/app/templates/index.html b/app/templates/index.html index 915af1a..647f4dc 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -35,25 +35,27 @@
-
- - User Agent: {{ ua }} -
-
- - -
-
- - -
-
- - -
-
- -
+
+
+ + User Agent: {{ ua }} +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
diff --git a/test/test_routes.py b/test/test_routes.py index a875fdc..0b32430 100644 --- a/test/test_routes.py +++ b/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), - 'nojs': random.getrandbits(1) + 'dark_mode': str(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)) - assert rv._status_code == 200 + rv = client.post('/config', data=demo_config) + assert rv._status_code == 302 rv = client.get('/config') assert rv._status_code == 200