From f3b03ea5b7a5694b422352c62d50917336f90840 Mon Sep 17 00:00:00 2001 From: Saba Date: Sat, 27 Nov 2021 19:17:15 -0500 Subject: [PATCH] Make raw data reactive to changes --- src/main.py | 6 +++ views/config.html | 5 +-- views/scripts/config.js | 84 +++++++++++++++++++++++++---------------- 3 files changed, 59 insertions(+), 36 deletions(-) diff --git a/src/main.py b/src/main.py index d8c4c30c..e71871f0 100644 --- a/src/main.py +++ b/src/main.py @@ -36,6 +36,12 @@ def config(): print(config) return config +@app.post('/config') +def config(): + print("hello posted config") + print(config) + return config + @app.get('/search') def search(q: str, n: Optional[int] = 5, t: Optional[SearchType] = None): if q is None or q == '': diff --git a/views/config.html b/views/config.html index 7651de9f..afe69d4f 100644 --- a/views/config.html +++ b/views/config.html @@ -4,10 +4,7 @@ - - diff --git a/views/scripts/config.js b/views/scripts/config.js index f8fb1eb8..53046a5c 100644 --- a/views/scripts/config.js +++ b/views/scripts/config.js @@ -1,14 +1,25 @@ var showConfig = document.getElementById("show-config"); var rawConfig = {}; -showConfig.addEventListener("click", () => { - var configForm = document.getElementById("config-form"); - fetch("/config") - .then(response => response.json()) - .then(data => { - rawConfig = data; - configForm.style.display = "block"; - processChildren(configForm, data); +var configForm = document.getElementById("config-form"); +fetch("/config") + .then(response => response.json()) + .then(data => { + rawConfig = data; + configForm.style.display = "block"; + processChildren(configForm, data); + + var submitButton = document.createElement("button"); + submitButton.type = "submit"; + submitButton.innerHTML = "update"; + configForm.appendChild(submitButton); + + configForm.addEventListener("submit", (event) => { + event.preventDefault(); + console.log("submitted!"); + console.log(event); + console.log(configForm.children); + console.log(configForm.childNodes); }); }); @@ -24,37 +35,46 @@ function processChildren(element, data) { var value = document.createElement("span"); value.id = key+"-value"; value.textContent = data[key]; - createEditButton(value); - value.addEventListener("click", (event) => { - var inputNewText = document.createElement("input"); - inputNewText.type = "text"; - inputNewText.class = "config-element-edit"; - inputNewText.id = key+"-value"; - console.log(value.parentNode); - console.log(value); - child.replaceChild(inputNewText, value); - console.log(event); - }); + makeElementEditable(value, data, key); child.appendChild(value); } element.appendChild(child); + // data[key] = "wassup?"; } + console.log(data); + console.log(rawConfig); } -function createEditButton(parent) { - var editButton = document.createElement("button"); - editButton.type = "button"; - editButton.className = "config-edit-button"; - editButton.textContent = "🖊️"; - editButton.id = "parentId-" + parent.id; - // console.log(parent); - editButton.addEventListener("click", (event) => { +function makeElementEditable(original, data, key) { + original.addEventListener("click", (event) => { var inputNewText = document.createElement("input"); inputNewText.type = "text"; - inputNewText.class = "config-element-edit"; - parent.parentNode.replaceChild(inputNewText, parent); - // console.log(event); + inputNewText.className = "config-element-edit"; + inputNewText.value = original.textContent; + fixInputOnFocusOut(inputNewText, data, key); + original.parentNode.replaceChild(inputNewText, original); + inputNewText.focus(); + }); +} + +function fixInputOnFocusOut(original, data, key) { + original.addEventListener("blur", () => { + console.log(original); + var value = document.createElement("span"); + value.id = original.id; + value.textContent = original.value; + data[key] = value.textContent; + console.log(data); + console.log(rawConfig); + makeElementEditable(value); + original.parentNode.replaceChild(value, original); }) - // console.log("edit button", editButton); - parent.appendChild(editButton); +} + +function handleSubmit() { + submitButton.addEventListener("click", (event) => { + var submitButton = document.createElement("button"); + submitButton.type = "submit"; + }); + configForm.appendChild(submitButton); } \ No newline at end of file