208 lines
6.2 KiB
HTML
208 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<header>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/highlight.js/latest/highlight.min.js"></script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/highlight.js/latest/styles/github.min.css">
|
|
<style>
|
|
#tree {
|
|
min-width: 180px;
|
|
}
|
|
#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() {
|
|
/* TODO when no drawFile, disable editor or somethin */
|
|
drawTree()
|
|
setInterval(drawTree, 10000)
|
|
var queryF = getParameterByName("f")
|
|
console.log("init query f:", queryF)
|
|
if (!queryF || queryF.length == "") {
|
|
drawFile(queryF)
|
|
}
|
|
}
|
|
function getParameterByName(name, url = window.location.href) {
|
|
name = name.replace(/[\[\]]/g, '\\$&');
|
|
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
|
|
results = regex.exec(url);
|
|
if (!results) return null;
|
|
if (!results[2]) return '';
|
|
return decodeURIComponent(results[2].replace(/\+/g, ' '));
|
|
}
|
|
function pushFile() {
|
|
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")
|
|
}, body, headers)
|
|
drawTree()
|
|
}
|
|
function drawFile(id) {
|
|
if (!id || 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") ? headers("pid") : ""
|
|
const title = headers("title") ? headers("title") : ""
|
|
setMDE(id, pid, 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 = "/"
|
|
}
|
|
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 */
|
|
var children = ""
|
|
for (var child in branch.Children)
|
|
children += "\n" + htmlifyBranch(id, child, branch.Children[child])
|
|
return `
|
|
<details open>
|
|
<summary>
|
|
<div>
|
|
<a href="#?f=${id}"><input type="button" value="${branch.Title}" onclick="drawFile('${id}');"/></a>
|
|
<input type="button" value="+" onclick="drawNewFile('${id}');"/>
|
|
</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, headers) {
|
|
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
|
|
}
|
|
if (headers) {
|
|
for (var key in headers)
|
|
xmlhttp.setRequestHeader(key, headers[key])
|
|
}
|
|
xmlhttp.send(body);
|
|
}
|
|
</script>
|
|
</header>
|
|
<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="todo"/>
|
|
<input type="submit" value="search"/>
|
|
</div>
|
|
<div style="width: 100%; display: flex; flex-direction: row; flex-grow: 1;">
|
|
<div id="tree"></div>
|
|
<article style="flex-grow: 1; margin-left: 1em;">
|
|
<h1 style="display: flex; flex-direction: row;">
|
|
<span id="titlePath">
|
|
</span>
|
|
<span id="title" contenteditable style="flex-grow: 1;"></span>
|
|
<input type="submit" value="SAVE" onclick="pushFile(); return false;"/>
|
|
</h1>
|
|
<textarea id="my-text-area"></textarea>
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<footer>
|
|
<script>
|
|
const easyMDE = new EasyMDE({
|
|
autoDownloadFontAwesome: true,
|
|
autofocus: true,
|
|
autosave: {
|
|
enabled: false,
|
|
},
|
|
element: document.getElementById('my-text-area'),
|
|
forceSync: true,
|
|
indentWithTabs: false,
|
|
initialValue: "# initial\nvalue",
|
|
showIcons: ["code", "table"],
|
|
spellChecker: false,
|
|
sideBySideFullscreen: false,
|
|
tabSize: 3,
|
|
previewImagesInEditor: true,
|
|
insertTexts: {
|
|
image: ["![](", ")"],
|
|
link: ["[](", ")"],
|
|
},
|
|
lineNumbers: true,
|
|
uploadImage: true,
|
|
imageUploadEndpoint: "/api/v0/media", // POST wants {data: {filePath: "/..."}}
|
|
imagePathAbsolute: false,
|
|
renderingConfig: {
|
|
codeSyntaxHighlighting: true,
|
|
},
|
|
})
|
|
function logValue() {
|
|
console.log(easyMDE.value())
|
|
}
|
|
logValue()
|
|
</script>
|
|
</footer>
|
|
</html>
|