Make raw data reactive to changes

This commit is contained in:
Saba 2021-11-27 19:17:15 -05:00
parent 7ffa70a001
commit f3b03ea5b7
3 changed files with 59 additions and 36 deletions

View file

@ -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 == '':

View file

@ -4,10 +4,7 @@
<link rel="stylesheet" href="views/style.css">
</head>
<body>
<button type="button" id="show-config">Show Config</button>
<form id="config-form" style="display: none;">
<h1 id="config-title"></h1>
<h2>content-type</h2>
<form id="config-form">
</form>
</body>
<script src="views/scripts/config.js"></script>

View file

@ -1,7 +1,6 @@
var showConfig = document.getElementById("show-config");
var rawConfig = {};
showConfig.addEventListener("click", () => {
var configForm = document.getElementById("config-form");
fetch("/config")
.then(response => response.json())
@ -9,6 +8,18 @@ showConfig.addEventListener("click", () => {
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);
})
// console.log("edit button", editButton);
parent.appendChild(editButton);
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);
})
}
function handleSubmit() {
submitButton.addEventListener("click", (event) => {
var submitButton = document.createElement("button");
submitButton.type = "submit";
});
configForm.appendChild(submitButton);
}