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;
|
||||
}
|
||||
|
||||
function renderTree(nodes) {
|
||||
function renderTree(nodes, textId) {
|
||||
const ul = document.createElement('ul');
|
||||
nodes.forEach(node => {
|
||||
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) {
|
||||
li.appendChild(renderTree(node.children));
|
||||
li.appendChild(renderTree(node.children, textId));
|
||||
}
|
||||
|
||||
ul.appendChild(li);
|
||||
});
|
||||
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