Add button to modify text, not save

This commit is contained in:
Saba 2021-11-27 18:00:47 -05:00
parent d150bd9ad7
commit 7ffa70a001

View file

@ -1,10 +1,12 @@
var showConfig = document.getElementById("show-config"); var showConfig = document.getElementById("show-config");
var rawConfig = {};
showConfig.addEventListener("click", () => { showConfig.addEventListener("click", () => {
var configForm = document.getElementById("config-form"); var configForm = document.getElementById("config-form");
fetch("/config") fetch("/config")
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
rawConfig = data;
configForm.style.display = "block"; configForm.style.display = "block";
processChildren(configForm, data); processChildren(configForm, data);
}); });
@ -17,11 +19,42 @@ function processChildren(element, data) {
child.className = "config-element"; child.className = "config-element";
child.appendChild(document.createTextNode(key + ": ")); child.appendChild(document.createTextNode(key + ": "));
if (data[key] === Object(data[key])) { if (data[key] === Object(data[key])) {
console.log(key, data[key]);
processChildren(child, data[key]); processChildren(child, data[key]);
} else { } else {
child.textContent+=data[key]; 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);
});
child.appendChild(value);
} }
element.appendChild(child); element.appendChild(child);
} }
}
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) => {
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);
} }