From ae7f9e18a874a6f35e2210a76e44890ee0ff24b0 Mon Sep 17 00:00:00 2001
From: Bel LaPointe <breel@qualtrics.com>
Date: Wed, 9 Feb 2022 15:55:06 -0700
Subject: [PATCH] hide when nothing to edit is k

---
 spike/review/reinvent/ezmded/ui/index.html | 50 +++++++++++++---------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/spike/review/reinvent/ezmded/ui/index.html b/spike/review/reinvent/ezmded/ui/index.html
index fe2f9af..4c1ba08 100644
--- a/spike/review/reinvent/ezmded/ui/index.html
+++ b/spike/review/reinvent/ezmded/ui/index.html
@@ -34,12 +34,11 @@
 		</style>
 		<script>
 			function init() {
-				/* TODO when no drawFile, disable editor or somethin */
 				drawTree()
 				setInterval(drawTree, 100000)
 				var queryF = getParameterByName("f")
 				console.log("init query f:", queryF)
-				if (!queryF || queryF.length == "") {
+				if (queryF && queryF.length > 0) {
 					drawFile(queryF)
 				}
 			}
@@ -55,20 +54,20 @@
 				const title = document.getElementById("title").innerHTML ? document.getElementById("title").innerHTML : ""
 				const body = easyMDE.value() ? easyMDE.value() : ""
 				const id = easyMDE.meta.id ? easyMDE.meta.id : ""
-				var method = "PUT"
-				if (id == "")
-					method = "POST"
 				headers = {}
 				if (title)
 					headers["Title"] = title
-				http(method, "/api/v0/files" + (id == "" ? "" : "/"+id), (body, status) => {
-					console.log(status, body)
-					alert("todo")
+				http("PUT", "/api/v0/files/" + id, (body, status) => {
+					if (status != 200) {
+						alert(`failed to push file ${id}: ${status}: ${body}`)
+						raise `failed to push file ${id}: ${status}: ${body}`
+					}
+					drawTree()
+					drawFile(id)
+					document.getElementById("saveFeedback").innerHTML = "success!"
+					// todo cancel set timeout on setmde
+					setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
 				}, body, headers)
-				drawTree()
-				document.getElementById("saveFeedback").innerHTML = "success!"
-				// todo cancel set timeout on setmde
-				setTimeout(() => {document.getElementById("saveFeedback").innerHTML = ""}, 5000)
 			}
 			function drawFile(id) {
 				if (!id || id.length < 1) {
@@ -80,12 +79,17 @@
 					}
 					const title = headers("title") ? headers("title") : ""
 					setMDE(id, title, body)
-					document.getElementById("saveFeedback").innerHTML = ""
 				})
 			}
 			function drawNewFile(pid) {
 				setMDE(pid + "/" + crypto.randomUUID().substr(0, 5), "", "")
 			}
+			function enableMDE() {
+				document.getElementById("article").style.display = "";
+			}
+			function disableMDE() {
+				document.getElementById("article").style.display = "none";
+			}
 			function setMDE(id, title, body) {
 				if (id[0] == "/")
 					id = id.slice(1, id.length)
@@ -99,6 +103,7 @@
 					titlePath += ` <input type="button" value="${pids[pid]}" onclick="drawFile('${pids.slice(0, pid+1).join("/")}');"/> /`
 				}
 
+				enableMDE()
 				document.getElementById("titlePath").innerHTML = titlePath
 				document.getElementById("title").innerHTML = title
 				easyMDE.value(body)
@@ -168,14 +173,17 @@
 			</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;"/>
-						<span id="saveFeedback"></span>
-					</h1>
+				<article id="article" style="display: none; flex-grow: 1; margin-left: 1em;">
+					<div>
+						<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>
+					</div>
+					<div id="saveFeedback" style="min-height: 1.2em; text-align: right;">
+					</div>
 					<textarea id="my-text-area"></textarea>
 				</article>
 			</div>