Browse Source

stuff

main
Martin Dørum 2 years ago
parent
commit
5ba634350f
3 changed files with 97 additions and 18 deletions
  1. 68
    13
      web/files.html
  2. 0
    2
      web/index.html
  3. 29
    3
      web/util.js

+ 68
- 13
web/files.html View File

@@ -1,11 +1,21 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Mediator</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png">

<style>
#breadcrumbs .crumb:first-child {
margin-left: 0px;
}

#breadcrumbs .crumb {
margin-left: 2px;
margin-right: 2px;
}
</style>
</head>

<body>
@@ -15,30 +25,75 @@

<script src="util.js"></script>
<script>
let filesEl = document.getElementById("files");
let breadcrumbsEl = document.getElementById("breadcrumbs");
let path = [];
let filesEl = document.getElementById("files");

function renderEntry(ent) {
function renderEntry(path, ent) {
if (ent.type == "d") {
return html("span", {}, [
html("text", ent.name + "/")]);
let href =
path == "/" ? "#/" + ent.name
: "#" + path + "/" + ent.name;
return html("li", {}, [
html("a", {href}, ent.name + "/"),
]);
} else {
return html("span", {}, [
html("text", ent.name)]);
let href =
path == "/" ? "play.html#/" + ent.name
: "play.html#" + path + "/" + ent.name;
return html("li", {}, [
html("a", {href}, ent.name),
]);
}
}

function renderEntries(path, entries) {
let els = entries.map(ent => renderEntry(path, ent));
if (entries.length == 0) {
els.push(html("li", {}, "No files."));
}

return els;
}

function renderBreadcrumbs(path) {
let crumbPath = "#/";
let els = [];

els.push(html("a",
{class: "crumb", href: "#/"}, "/"));

for (let component of path.split("/")) {
if (component == "") {
continue;
}

if (crumbPath == "#/") {
crumbPath += component;
} else {
crumbPath += "/" + component;
els.push(html("text", "/"));
}

els.push(html("a",
{class: "crumb", href: crumbPath}, component));
}

return els;
}

async function render() {
let resp = await api("GET", "dir/" + path.join("/"));
clearElement(filesEl);
for (let ent of resp.entries) {
filesEl.appendChild(renderEntry(ent));
let path = "/";
if (location.hash.length > 1) {
path = location.hash.substr(1);
}

let resp = await api("GET", "dir" + path);
renderToElement(filesEl, renderEntries(path, resp.entries));
renderToElement(breadcrumbsEl, renderBreadcrumbs(path));
}

render();
window.onhashchange = render;
</script>
</body>

</html>

+ 0
- 2
web/index.html View File

@@ -1,6 +1,5 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>Mediator</title>
@@ -14,5 +13,4 @@
<a href="remote.html">Remote</a>
</div>
</body>

</html>

+ 29
- 3
web/util.js View File

@@ -4,10 +4,17 @@ async function api(method, path, body = null) {
options.body = JSON.stringify(body);
}

let resp = await fetch("/api/" + path, options).then(r => r.text());
let json = JSON.parse(resp);
let json;
try {
let resp = await fetch("/api/" + path, options).then(r => r.text());
json = JSON.parse(resp);
} catch (err) {
alert(err.toString());
throw err;
}

if (json.error != null) {
alert(json.error);
throw new Error(json.error);
}

@@ -15,6 +22,10 @@ async function api(method, path, body = null) {
}

function html(name, attrs, children) {
if (!(children instanceof Array)) {
children = [children];
}

if (name == "text") {
return document.createTextNode(attrs);
}
@@ -29,7 +40,11 @@ function html(name, attrs, children) {
}

for (let child of children) {
el.appendChild(child);
if (typeof child == "string") {
el.appendChild(document.createTextNode(child));
} else {
el.appendChild(child);
}
}

return el;
@@ -40,3 +55,14 @@ function clearElement(el) {
el.removeChild(el.firstChild);
}
}

function renderToElement(el, children) {
if (!(children instanceof Array)) {
children = [children];
}

clearElement(el);
for (let child of children) {
el.appendChild(child);
}
}

Loading…
Cancel
Save