Static dir configuration and tree view of notes

static/js/node.mjs

@@ -7,6 +7,7 @@ export class NodeUI extends Component {
 	constructor() {//{{{
 		super()
 		this.menu = signal(false)
+		this.tree = signal(null)
 		this.node = signal(null)
 		this.nodeContent = createRef()
 		window.addEventListener('popstate', evt=>{
@@ -21,6 +22,11 @@ export class NodeUI extends Component {
 			return
 
 		let node = this.node.value
+		let tree = this.tree.value
+
+		let treeHTML = html`Tree`
+		if(tree !== null)
+			treeHTML = this.renderTree(tree)
 
 		let crumbs = [
 			html`<div class="crumb" onclick=${()=>this.goToNode(0)}>Start</div>`
@@ -58,6 +64,10 @@ export class NodeUI extends Component {
 			<div class="crumbs">${crumbs}</crumbs>
 
 			${children.length > 0 ? html`<div class="child-nodes">${children}</div>` : html``}
+			<div class="tree" onclick=${()=>this.retrieveTree()} style="color: #000">
+				<div class="node">Start</div>
+				${treeHTML}
+			</div>
 
 			${node.ID > 0 ? html`
 				<div class="node-name">${node.Name}</div>
@@ -146,6 +156,16 @@ export class NodeUI extends Component {
 		})
 		.catch(this.props.app.responseError)
 	}//}}}
+	retrieveTree() {//{{{
+		this.props.app.request('/node/tree', { StartNodeID: this.node.value.ID })
+		.then(res=>{
+			this.tree.value = res.Nodes
+		})
+		.catch(this.props.app.responseError)
+	}//}}}
+	renderTree(tree) {//{{{
+		return tree.map(node=>html`<div class="node" style="margin-left: ${(node.Level+1) * 32}px">${node.Name}</div>`)
+	}//}}}
 }
 
 class NodeContent extends Component {