tree traversal in title
Bel LaPointe
parent
92ffc7061a
commit
baca4e0415
|
|
@ -1,3 +1,28 @@
|
|||
A:
|
||||
title: A
|
||||
deleted: false
|
||||
updated: 2022-02-08T23:40:44.951597Z
|
||||
pid: ""
|
||||
AA:
|
||||
title: AA
|
||||
deleted: false
|
||||
updated: 2022-02-08T23:40:44.966702Z
|
||||
pid: A
|
||||
AAA:
|
||||
title: AAA
|
||||
deleted: false
|
||||
updated: 2022-02-08T23:40:44.976068Z
|
||||
pid: AA
|
||||
AB:
|
||||
title: AB
|
||||
deleted: false
|
||||
updated: 2022-02-08T23:40:44.985178Z
|
||||
pid: A
|
||||
B:
|
||||
title: B
|
||||
deleted: false
|
||||
updated: 2022-02-08T23:40:44.995572Z
|
||||
pid: ""
|
||||
b7fe2c91-6bd7-4b49-8590-4223ccc772ac:
|
||||
title: my file title
|
||||
deleted: false
|
||||
|
|
|
|||
|
|
@ -12,39 +12,106 @@
|
|||
#tree details {
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
#tree summary {
|
||||
min-width: 60px;
|
||||
}
|
||||
details {
|
||||
margin-top: .35em;
|
||||
margin-bottom: .35em;
|
||||
}
|
||||
#tree summary > div {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
width: calc(100% - 1em);
|
||||
}
|
||||
#tree summary > div > a {
|
||||
flex-grow: 1;
|
||||
}
|
||||
#tree summary > div > a > input {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
function init() {
|
||||
drawTree()
|
||||
}
|
||||
function drawFile(id) {
|
||||
if (id.length < 1) {
|
||||
return
|
||||
}
|
||||
http("GET", "/api/v0/files/"+id, (body, status, headers) => {
|
||||
if (status != 200) {
|
||||
throw Exception(`ERR loading file: ${status}: ${body}`)
|
||||
}
|
||||
const pid = headers("pid")
|
||||
document.getElementById("titlePath").innerHTML = `${pid ? "... / " : ""}<input type="button" value="${pid ? pid : ""}" onclick="drawFile('${pid}'); return false;"> / `
|
||||
if (!pid) {
|
||||
document.getElementById("titlePath").innerHTML = "/"
|
||||
}
|
||||
document.getElementById("title").innerHTML = headers("title")
|
||||
easyMDE.value(body)
|
||||
})
|
||||
}
|
||||
function drawTree() {
|
||||
function htmlifyBranch(id, branch) {
|
||||
var children = ""
|
||||
for (var child in branch.Children)
|
||||
children += "\n" + htmlifyBranch(child, branch.Children[child])
|
||||
return `
|
||||
<details open>
|
||||
<summary>
|
||||
<div>
|
||||
<a href="#"><input type="button" value="${branch.Title}" onclick="drawFile('${id}'); return false;"/></a>
|
||||
<input type="button" value="+" onclick="alert('todo'); return false;"/>
|
||||
</div>
|
||||
</summary>
|
||||
${children}
|
||||
</details>
|
||||
`
|
||||
}
|
||||
http("GET", "/api/v0/tree?pretty", (body, _) => {
|
||||
const tree = JSON.parse(body)
|
||||
var innerHTML = ""
|
||||
for(var id in tree) {
|
||||
innerHTML += htmlifyBranch(id, tree[id])
|
||||
}
|
||||
innerHTML = htmlifyBranch("", {
|
||||
Title: "Files",
|
||||
Children: {},
|
||||
}).replace("</summary>", "</summary>"+innerHTML)
|
||||
document.getElementById("tree").innerHTML = innerHTML
|
||||
})
|
||||
}
|
||||
function http(method, remote, callback, body) {
|
||||
var xmlhttp = new XMLHttpRequest();
|
||||
xmlhttp.onreadystatechange = function() {
|
||||
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
|
||||
callback(xmlhttp.responseText, xmlhttp.status, (key) => xmlhttp.getResponseHeader(key))
|
||||
}
|
||||
};
|
||||
xmlhttp.open(method, remote, true);
|
||||
if (typeof body == "undefined") {
|
||||
body = null
|
||||
}
|
||||
xmlhttp.send(body);
|
||||
}
|
||||
</script>
|
||||
</header>
|
||||
<body style="width: 90%; max-width: 1024px; margin: auto;">
|
||||
<body style="width: 90%; max-width: 1024px; margin: auto;" onload="init(); return false;">
|
||||
<div style="width: 100%; display: flex; flex-direction: column;">
|
||||
<div style="margin: 1em; display: flex; flex-direction: row;">
|
||||
<input type="text" style="flex-grow: 1;" placeholder="not impl"/>
|
||||
<input type="submit" value="search"/>
|
||||
</div>
|
||||
<div style="width: 100%; display: flex; flex-direction: row; flex-grow: 1;">
|
||||
<details open>
|
||||
<summary style="min-width: 60px;">
|
||||
<div style="display: inline-flex; flex-direction: row; width: calc(100% - 1em);">
|
||||
<a href="#?f=" style="flex-grow: 1"><input type="button" value="Tree" style="width: 100%; text-align: left;"/></a>
|
||||
<input type="button" value="+"/>
|
||||
</div>
|
||||
</summary>
|
||||
<div id="tree">
|
||||
<details open>
|
||||
<summary>L1</summary>
|
||||
<details open>
|
||||
<summary>L2</summary>
|
||||
</details>
|
||||
</details>
|
||||
</div>
|
||||
</details>
|
||||
<div id="tree"></div>
|
||||
<article style="flex-grow: 1; margin-left: 1em;">
|
||||
<h1 style="display: flex; flex-direction: row;">
|
||||
<a href="#?f=">Tree</a> /
|
||||
<a href="#?f=abc">L1</a> /
|
||||
<span id="titlePath">
|
||||
<a href="#">Tree</a> /
|
||||
<a href="#">L1</a> /
|
||||
</span>
|
||||
<span id="title" contenteditable style="flex-grow: 1;">L2</span>
|
||||
</h1>
|
||||
<textarea id="my-text-area"></textarea>
|
||||
|
|
|
|||
Loading…
Reference in New Issue