add and save button functionality
This commit is contained in:
parent
f277ae7983
commit
3ce6a91e6e
1 changed files with 50 additions and 3 deletions
|
|
@ -43,15 +43,62 @@ function buildTree(nodes) {
|
||||||
return roots;
|
return roots;
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderTree(nodes) {
|
function renderTree(nodes, textId) {
|
||||||
const ul = document.createElement('ul');
|
const ul = document.createElement('ul');
|
||||||
nodes.forEach(node => {
|
nodes.forEach(node => {
|
||||||
const li = document.createElement('li');
|
const li = document.createElement('li');
|
||||||
li.textContent = node.title;
|
|
||||||
|
const titleSpan = document.createElement('span');
|
||||||
|
titleSpan.textContent = node.title;
|
||||||
|
li.appendChild(titleSpan);
|
||||||
|
|
||||||
|
const addBtn = document.createElement('button');
|
||||||
|
addBtn.textContent = 'Add child';
|
||||||
|
addBtn.className = 'add-child';
|
||||||
|
addBtn.addEventListener('click', () => toggleAddForm(li, node.id, textId));
|
||||||
|
li.appendChild(addBtn);
|
||||||
|
|
||||||
if (node.children.length > 0) {
|
if (node.children.length > 0) {
|
||||||
li.appendChild(renderTree(node.children));
|
li.appendChild(renderTree(node.children, textId));
|
||||||
}
|
}
|
||||||
|
|
||||||
ul.appendChild(li);
|
ul.appendChild(li);
|
||||||
});
|
});
|
||||||
return ul;
|
return ul;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleAddForm(li, parentNodeId, textId) {
|
||||||
|
const existing = li.querySelector('input.child-title');
|
||||||
|
if (existing) {
|
||||||
|
existing.remove();
|
||||||
|
li.querySelector('button.save-child').remove();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const input = document.createElement('input');
|
||||||
|
input.type = 'text';
|
||||||
|
input.className = 'child-title';
|
||||||
|
input.placeholder = 'Node title';
|
||||||
|
|
||||||
|
const saveBtn = document.createElement('button');
|
||||||
|
saveBtn.textContent = 'Save';
|
||||||
|
saveBtn.className = 'save-child';
|
||||||
|
saveBtn.addEventListener('click', () => {
|
||||||
|
const title = input.value.trim();
|
||||||
|
if (!title) return;
|
||||||
|
|
||||||
|
fetch('/api/nodes', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ textId: parseInt(textId), title, parentNodeId }),
|
||||||
|
})
|
||||||
|
.then(res => {
|
||||||
|
if (!res.ok) throw new Error('Failed to create node');
|
||||||
|
return res.json();
|
||||||
|
})
|
||||||
|
.then(() => fetchAndRenderNodes(textId));
|
||||||
|
});
|
||||||
|
|
||||||
|
li.appendChild(input);
|
||||||
|
li.appendChild(saveBtn);
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue