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

ui seemingly not a total mess at least

master
Bel LaPointe 2022-02-09 15:10:37 -07:00
parent bb02ec7ada
commit 8b566d32f8
1 changed files with 24 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,15 +55,12 @@
const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
const body = easyMDE.value() ? easyMDE.value() : ""
const id = easyMDE.meta.id ? easyMDE.meta.id : ""
const pid = easyMDE.meta.pid ? easyMDE.meta.pid : ""
var method = "PUT"
if (id == "")
method = "POST"
headers = {}
if (title)
headers["Title"] = title
if (pid)
headers["Pid"] = pid
http(method, "/api/v0/files" + (id == "" ? "" : "/"+id), (body, status) => {
console.log(status, body)
alert("todo")
@ -76,40 +73,44 @@
}
http("GET", "/api/v0/files/"+id, (body, status, headers) => {
if (status != 200) {
throw Exception(`ERR loading file: ${status}: ${body}`)
raise `ERR loading file: ${status}: ${body}`
}
const pid = headers("pid") ? headers("pid") : ""
const title = headers("title") ? headers("title") : ""
setMDE(id, pid, title, body)
setMDE(id, title, body)
})
}
function drawNewFile(pid) {
setMDE("", pid, "", "")
}
function setMDE(id, pid, title, body) {
alert("TODO: set title as attr for prettier here")
document.getElementById("titlePath").innerHTML = `${pid ? "... / " : ""}<a href="#?f=${pid}"><input type="button" value="${pid}" onclick="drawFile('${pid}');"></a> / `
if (pid == "") {
document.getElementById("titlePath").innerHTML = "/"
setMDE(pid + "/" + crypto.randomUUID().substr(0, 5), "", "")
}
function setMDE(id, title, body) {
if (id[0] == "/")
id = id.slice(1, id.length)
if (id[id.length-1] == "/")
id = id.slice(0, id.length-1)
var pids = id.split("/")
pids = pids.slice(0, pids.length-1)
var titlePath = "/"
for (var pid in pids)
titlePath += ` <a href="#?f=${pids[pid]}"><input type="button" value="${pids[pid]}" onclick="drawFile('${pids[pid]}');"/></a> /`
document.getElementById("titlePath").innerHTML = titlePath
document.getElementById("title").innerHTML = title
easyMDE.value(body)
easyMDE.meta = {
id: id,
pid: pid,
}
}
function drawTree() {
function htmlifyBranch(pid, id, branch) {
/* TODO width limit title */
function htmlifyBranch(id, branch) {
var children = ""
for (var child in branch.Children)
children += "\n" + htmlifyBranch(id, child, branch.Children[child])
for (var child in branch.Branches)
children += "\n" + htmlifyBranch(id + "/" + child, branch.Branches[child])
return `
<details open>
<summary>
<div>
<a href="#?f=${id}"><input type="button" value="${branch.Title}" onclick="drawFile('${id}');"/></a>
<a href="#?f=${id}"><input type="button" value="${branch.Leaf.Title.substr(0, 15)}" onclick="drawFile('${id}');"/></a>
<input type="button" value="+" onclick="drawNewFile('${id}');"/>
</div>
</summary>
@ -117,17 +118,11 @@
</details>
`
}
http("GET", "/api/v0/tree?pretty", (body, _) => {
http("GET", "/api/v0/tree", (body, status) => {
if (status != 200)
raise `bad status getting tree: ${status}: ${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
document.getElementById("tree").innerHTML = htmlifyBranch("", tree)
})
}
function http(method, remote, callback, body, headers) {