57 lines
1.6 KiB
JavaScript
57 lines
1.6 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const textId = window.location.pathname.split('/').pop();
|
|
|
|
fetch('/api/texts/' + textId)
|
|
.then(res => res.json())
|
|
.then(text => {
|
|
const h1 = document.createElement('h1');
|
|
h1.textContent = text.name;
|
|
document.getElementById('text-detail').appendChild(h1);
|
|
|
|
return fetchAndRenderNodes(textId);
|
|
});
|
|
});
|
|
|
|
function fetchAndRenderNodes(textId) {
|
|
return fetch('/api/nodes/' + textId)
|
|
.then(res => res.json())
|
|
.then(nodes => {
|
|
const existing = document.querySelector('#text-detail > ul');
|
|
if (existing) existing.remove();
|
|
|
|
const tree = buildTree(nodes);
|
|
const ul = renderTree(tree, textId);
|
|
document.getElementById('text-detail').appendChild(ul);
|
|
});
|
|
}
|
|
|
|
function buildTree(nodes) {
|
|
const map = {};
|
|
nodes.forEach(node => {
|
|
map[node.id] = { ...node, children: [] };
|
|
});
|
|
|
|
const roots = [];
|
|
nodes.forEach(node => {
|
|
if (node.parentNodeId === null) {
|
|
roots.push(map[node.id]);
|
|
} else if (map[node.parentNodeId]) {
|
|
map[node.parentNodeId].children.push(map[node.id]);
|
|
}
|
|
});
|
|
|
|
return roots;
|
|
}
|
|
|
|
function renderTree(nodes) {
|
|
const ul = document.createElement('ul');
|
|
nodes.forEach(node => {
|
|
const li = document.createElement('li');
|
|
li.textContent = node.title;
|
|
if (node.children.length > 0) {
|
|
li.appendChild(renderTree(node.children));
|
|
}
|
|
ul.appendChild(li);
|
|
});
|
|
return ul;
|
|
}
|