Port the preliminary UI to Mithril.js

1 files changed, 76 insertions, 7 deletions

diff --git a/public/gallery.js b/public/gallery.js
index 1935220..d25c544 100644
--- a/public/gallery.js
+++ b/public/gallery.js
@@ -3,27 +3,96 @@
 function call(method, params) {
 	return m.request({
 		method: "POST",
-		url: `/api/{method}`,
+		url: `/api/${method}`,
 		body: params,
 	})
 }
 
+let BrowseModel = {
+	path: undefined,
+	subdirectories: [],
+	entries: [],
+
+	async reload(path) {
+		this.path = path
+		this.subdirectories = []
+		this.entries = []
+
+		let resp = await call('browse', {path: path})
+		this.subdirectories = resp.subdirectories
+		this.entries = resp.entries
+	},
+}
+
 let Browse = {
-	view: vnode => {
-		return m('')
+	// Reload the model immediately, to improve responsibility.
+	// But we don't need to: https://mithril.js.org/route.html#preloading-data
+	// Also see: https://mithril.js.org/route.html#route-cancellation--blocking
+	oninit(vnode) {
+		let path = vnode.attrs.key || "/"
+		BrowseModel.reload(path)
+	},
+
+	view(vnode) {
+		return m('.container', {}, [
+			m('.header', {}, "Browse"),
+			m('h1', "Root"),
+			m('ul', BrowseModel.subdirectories.map(sd => {
+				const name = sd.split('/').pop()
+				return m('li', m(m.route.Link, {
+					href: `/browse/:key`,
+					params: {key: `${BrowseModel.path}/${sd}`},
+				}, name))
+			})),
+			m('.browser', {}, BrowseModel.entries.map(e => {
+				return m(m.route.Link, {href: `/view/${e.sha1}`},
+					m('img', {src: `/thumb/${e.sha1}`,
+						width: e.thumbW, height: e.thumbH, title: e.name}))
+			})),
+		])
+	},
+}
+
+let ViewModel = {
+	sha1: undefined,
+	paths: [],
+	tags: {},
+
+	async reload(sha1) {
+		this.sha1 = sha1
+		this.paths = []
+		this.tags = {}
+
+		let resp = await call('info', {sha1: sha1})
+		this.paths = resp.paths
+		this.tags = resp.tags
 	},
 }
 
 let View = {
-	view: vnode => {
-		return m('')
+	oninit(vnode) {
+		let sha1 = vnode.attrs.key || ""
+		ViewModel.reload(sha1)
+	},
+
+	view(vnode) {
+		// TODO: Show more information.
+		return m('.container', {}, [
+			m('.header', {}, "View"),
+			m('ul', ViewModel.paths.map(sd => m('li', sd))),
+			ViewModel.sha1 !== undefined
+				? m('img', {src: `/image/${ViewModel.sha1}`})
+				: "No image.",
+		])
 	},
 }
 
 window.addEventListener('load', () => {
 	m.route(document.body, "/browse/", {
-		"/browse/:path": Browse,
-		"/view/:sha1": View,
+		// The path doesn't need to be escaped, perhaps change that (":key...").
+		"/browse/": Browse,
+		"/browse/:key": Browse,
+		"/view/:key": View,
 
 		"/similar/:sha1": undefined,
 		"/tags": undefined,