1 files changed, 64 insertions, 0 deletions
diff --git a/data/templates/recipe.html b/data/templates/recipe.html
new file mode 100644
index 0000000..fcfdf67
--- /dev/null
+++ b/data/templates/recipe.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+
+<html>
+	
+	<head>
+
+		<title>Recipes</title>
+
+		<meta charset="utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link rel="stylesheet" href="../../../static/libweb.css" type="text/css">
+
+	</head>
+	
+	<body>
+
+		<main>
+			<h1>{{.Title}}</h1>
+			<img src="./recipe/image?id={{.Id}}" alt="Recipe image">{{if ne .UpstreamUrl ""}}
+			<p><a href="{{.UpstreamUrl}}">Link to recipe</a></p>{{end}}
+			<h2>Recipe description</h2>
+			<button id="editbtn" style="margin-top:20px;margin-bottom:20px;display:block" onclick=startEditMode()>edit</button>
+			<button id="cancelbtn" style="margin-top:20px;margin-bottom:20px;display:none" onclick=cancelEditMode()>abort</button>
+			<button id="savebtn" style="margin-top:20px;margin-bottom:20px;display:none" onclick=saveDescriptionMarkdown()>save</button>
+			<pre id="description_md" style="display:none;" contenteditable="true">{{.DescriptionMarkdown}}</pre>
+			<div id="rendered_description_md" style="display:block;">
+				{{.RenderedDescriptionMarkdown}}
+			</div>
+		</main>
+
+		<script>
+			var editbtn = document.getElementById("editbtn");
+			var cancelbtn = document.getElementById("cancelbtn");
+			var savebtn = document.getElementById("savebtn");
+			var description_md = document.getElementById("description_md");
+			var rendered_description_md = document.getElementById("rendered_description_md");
+
+			function startEditMode() {
+				editbtn.style.display = "none";
+				rendered_description_md.style.display = "none";
+				cancelbtn.style.display = "block";
+				savebtn.style.display = "block";
+				description_md.style.display = "block";
+			}
+
+			function cancelEditMode() {
+				window.location.reload(true);
+			}
+
+			function saveDescriptionMarkdown() {
+				var xhttp = new XMLHttpRequest();
+				xhttp.onreadystatechange = function() {
+					if (this.readyState == 4) {
+						window.location.reload(true);
+					}
+				}
+				xhttp.open("POST", window.location.href, true);
+				xhttp.send(description_md.innerHTML.replaceAll("<br>", "\n"));
+			}
+		</script>
+
+	</body>
+
+</html>