gogs
/
notea-de-me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tree traversal in title

master
Bel LaPointe 2022-02-08 16:40:57 -07:00
parent 92ffc7061a
commit baca4e0415
2 changed files with 111 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
spike/review/reinvent/ezmded/server/testdata/tree.yaml vendored
View File

@ -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: b7fe2c91-6bd7-4b49-8590-4223ccc772ac:
title: my file title title: my file title
deleted: false deleted: false

105
spike/review/reinvent/ezmded/ui/index.html
View File

@ -12,39 +12,106 @@
#tree details { #tree details {
padding-inline-start: 1em; padding-inline-start: 1em;
} }
#tree summary {
min-width: 60px;
}
details { details {
margin-top: .35em; margin-top: .35em;
margin-bottom: .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> </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> </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="width: 100%; display: flex; flex-direction: column;">
<div style="margin: 1em; display: flex; flex-direction: row;"> <div style="margin: 1em; display: flex; flex-direction: row;">
<input type="text" style="flex-grow: 1;" placeholder="not impl"/> <input type="text" style="flex-grow: 1;" placeholder="not impl"/>
<input type="submit" value="search"/> <input type="submit" value="search"/>
</div> </div>
<div style="width: 100%; display: flex; flex-direction: row; flex-grow: 1;"> <div style="width: 100%; display: flex; flex-direction: row; flex-grow: 1;">
<details open> <div id="tree"></div>
<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>
<article style="flex-grow: 1; margin-left: 1em;"> <article style="flex-grow: 1; margin-left: 1em;">
<h1 style="display: flex; flex-direction: row;"> <h1 style="display: flex; flex-direction: row;">
<a href="#?f=">Tree</a> / <span id="titlePath">
<a href="#?f=abc">L1</a> / <a href="#">Tree</a> /
<a href="#">L1</a> /
</span>
<span id="title" contenteditable style="flex-grow: 1;">L2</span> <span id="title" contenteditable style="flex-grow: 1;">L2</span>
</h1> </h1>
<textarea id="my-text-area"></textarea> <textarea id="my-text-area"></textarea>