From cf60d8330eaab409b8833244443d96683ddf8fb9 Mon Sep 17 00:00:00 2001
From: Bel LaPointe <breel@qualtrics.com>
Date: Tue, 15 Feb 2022 12:17:26 -0700
Subject: [PATCH] whee

---
 spike/review/reinvent/ezmded/ui/render.go     |  56 ++++------
 .../ezmded/ui/templates/_filetree.ctmpl       | 103 ++++++++++--------
 2 files changed, 84 insertions(+), 75 deletions(-)

diff --git a/spike/review/reinvent/ezmded/ui/render.go b/spike/review/reinvent/ezmded/ui/render.go
index e09b26a..1e40b4f 100644
--- a/spike/review/reinvent/ezmded/ui/render.go
+++ b/spike/review/reinvent/ezmded/ui/render.go
@@ -38,40 +38,32 @@ func main() {
 	data := map[string]interface{}{
 		"This": map[string]interface{}{
 			"ID":     "id00/id11",
-			"Title":  "title11",
+			"Title":  "title id11",
 			"PID":    "id00",
-			"PTitle": "title00",
-		},
-		"Tree": []map[string]interface{}{
-			map[string]interface{}{
-				"ID":     "id00",
-				"Title":  "title00",
-				"PID":    "",
-				"PTitle": "",
-			},
-			map[string]interface{}{
-				"ID":    "id00/id10",
-				"Title": "title10",
-			},
-			map[string]interface{}{
-				"ID":     "id00/id11",
-				"Title":  "title11",
-				"PID":    "",
-				"PTitle": "",
-			},
-			map[string]interface{}{
-				"ID":     "id00/id11/id20",
-				"Title":  "title20",
-				"PID":    "",
-				"PTitle": "",
-			},
-			map[string]interface{}{
-				"ID":     "id01",
-				"Title":  "title01",
-				"PID":    "",
-				"PTitle": "",
-			},
+			"PTitle": "title id00",
 		},
+		"Tree": `{
+			"Leaf": {"Title": ""},
+			"Branches": {
+				"id00": {
+					"Leaf": {"Title": "title id00"},
+					"Branches": {
+						"id10": {"Leaf":{"Title":"title id10"},"Branches":{
+							"id20": {"Leaf":{"Title":"title id20"},"Branches":{}}
+						}},
+						"id11": {"Leaf":{"Title":"title id11"},"Branches":{}}
+					}
+				},
+				"id01": {"Leaf":{"Title":"title id01"},"Branches":{}},
+				"id02": {"Leaf":{"Title":"title id02"},"Branches":{}},
+				"id03": {"Leaf":{"Title":"title id03"},"Branches":{}},
+				"id04": {"Leaf":{"Title":"title id04"},"Branches":{}},
+				"id04": {"Leaf":{"Title":"title id04"},"Branches":{}},
+				"id05": {"Leaf":{"Title":"title id05"},"Branches":{}},
+				"id06": {"Leaf":{"Title":"title id06"},"Branches":{}},
+				"id07": {"Leaf":{"Title":"title id07"},"Branches":{}}
+			}
+		}`,
 	}
 	if err := recursePwd(func(p string) error {
 		switch path.Ext(p) {
diff --git a/spike/review/reinvent/ezmded/ui/templates/_filetree.ctmpl b/spike/review/reinvent/ezmded/ui/templates/_filetree.ctmpl
index 43fc545..9f1a623 100644
--- a/spike/review/reinvent/ezmded/ui/templates/_filetree.ctmpl
+++ b/spike/review/reinvent/ezmded/ui/templates/_filetree.ctmpl
@@ -1,45 +1,62 @@
-{{ $filetreeLevel := 0 }}
-
-{{ define "_filetreeLevelUpOpen" }}
-   {{ if gt .Level $filetreeLevel }}
-      <details>
-      {{ $filetreeLevel = $filetreeLevel + 1 }}
-      {{ template "_filetreeLevelUpOpen" . }}
-   {{ end }}
-{{ end }}
-
-{{ define "_filetreeCloseAll" }}
-   {{ if lt 0 $filetreeLevel }}
-      </details>
-      {{ $filetreeLevel = $filetreeLevel - 1 }}
-      {{ template "_filetreeCloseAll" . }}
-   {{ end }}
-{{ end }}
-
-{{ define "_filetreeLevelDownOpen" }}
-   {{ if lt .Level $filetreeLevel }}
-      </details>
-      {{ $filetreeLevel = $filetreeLevel - 1 }}
-      {{ template "_filetreeLevelDownOpen" . }}
-   {{ end }}
-{{ end }}
-
-{{ define "_filetreeRecurse" }}
-   <plaintext>
-   {{ range . }}
-      {{ template "_filetreeLevelUpOpen" . }}
-      {{ template "_filetreeLevelDownOpen" . }}
-         <details>
-            <summary>
-               <a href="/files/{{ .ID }}">{{ .Title }}</a>
-            </summary>
-   {{ end }}
-   {{ template "_filetreeLevelDownOpen" . }}
-{{ end }}
-
 {{ define "_filetree" }}
-input = {{ . }}
-<div>
-   {{ template "_filetreeRecurse" .Tree }}
-</div>
+<style>
+	details > details {
+		padding-inline-start: 2em;
+	}
+	summary {
+		display: flex;
+		flex-direction: row;
+	}
+	summary.no-children {
+		list-style: none;
+	}
+	summary.no-children::-webkit-details-marker {
+		display: none;
+	}
+	#filetree {
+		padding-right: 1em;
+	}
+</style>
+<details open id="filetree">
+</details>
+<script>
+	function drawTree(tree) {
+		document.getElementById("filetree").innerHTML = branchHTML("", tree)
+	}
+	function branchHTML(id, branch) {
+		return `
+			<summary class="${branchesHaveContent(branch.Branches) ? "" : "no-children"}">
+				${leafHTML(id, branch)}
+			</summary>
+			${branchesHTML(id, branch.Branches)}
+		`
+	}
+	function leafHTML(id, branch) {
+		const href=id ? id : "#"
+		const name=`filetree-leaf-${id}`
+		const title=id ? branch.Leaf.Title : "ROOT"
+		return `
+			<a style="flex-grow: 1;" href="${href}"><button style="width: 100%; text-align: left;">${title}</button></a>
+			<button>+</button>
+		`
+	}
+	function branchesHTML(id, branches) {
+		if (!branchesHaveContent(branches))
+			return ""
+		var out = ``
+		for(var i in branches) {
+			out += `<details open>`
+			out += branchHTML((id ? id + "/" : "") + i, branches[i])
+			out += `</details>`
+		}
+		return out
+	}
+	function branchesHaveContent(branches) {
+		var n = 0
+		for (var i in branches)
+			n += 1
+		return n > 0
+	}
+	drawTree(JSON.parse(`{{ .Tree }}`))
+</script>
 {{ end }}