From fec2fea87615e6ee3a6e73f7f98e021eee1b7098 Mon Sep 17 00:00:00 2001
From: xengineering <me@xengineering.eu>
Date: Sun, 12 May 2024 20:38:24 +0200
Subject: view: Use HTML template to add recipe steps

This makes the JS function way simpler and removes a duplication of the
step HTML code.
---
 view/html/recipe-edit.html |  6 +++++-
 view/html/recipe-step.html |  6 ++----
 view/static/ceres.js       | 11 ++++-------
 3 files changed, 11 insertions(+), 12 deletions(-)

(limited to 'view')

diff --git a/view/html/recipe-edit.html b/view/html/recipe-edit.html
index 5467895..c46bbd4 100644
--- a/view/html/recipe-edit.html
+++ b/view/html/recipe-edit.html
@@ -16,7 +16,8 @@
 				<p><input type="text" name="url" value="{{.Url}}" placeholder="URL"></p>
 				<p><textarea name="notes" rows="4" cols="50" placeholder="Notes">{{.Notes}}</textarea></p>
 
-				<div id="steps">{{range .Steps}}{{template "recipe-step" .}}{{end}}
+				<div id="steps">{{range .Steps}}
+{{template "recipe-step" .}}{{end}}
 				</div>
 
 				<button type="button" onclick="addNewStep();">add step</button>
@@ -26,6 +27,9 @@
 			</form>
 		</main>
 		{{ template "footer" }}
+		<template id="recipe-step-template">
+{{template "recipe-step"}}
+		</template>
 		<script src="/static/view/static/ceres.js"></script>
 	</body>
 </html>
diff --git a/view/html/recipe-step.html b/view/html/recipe-step.html
index 96fbb48..8008d9c 100644
--- a/view/html/recipe-step.html
+++ b/view/html/recipe-step.html
@@ -1,6 +1,4 @@
-{{define "recipe-step"}}
-					<section>
+{{define "recipe-step"}}					<section>
 						<textarea rows="4" cols="50" placeholder="Step description">{{.Text}}</textarea>
 						<button type="button" onclick="parentNode.remove();">remove</button>
-					</section>
-{{end}}
+					</section>{{end}}
diff --git a/view/static/ceres.js b/view/static/ceres.js
index abd5f30..43b8290 100644
--- a/view/static/ceres.js
+++ b/view/static/ceres.js
@@ -87,12 +87,9 @@ function updateRecipe(event) {
 }
 
 function addNewStep() {
-	var newStep = document.createElement("section");
-	newStep.innerHTML = `
-		<textarea rows="4" cols="50" placeholder="Step description"></textarea>
-		<button type="button" onclick="parentNode.remove();">remove</button>
-	`;
+	let template = document.getElementById("recipe-step-template");
+	let steps = document.getElementById("steps");
 
-	var steps = document.querySelector("#steps");
-	steps.appendChild(newStep);
+	let step = template.content.cloneNode(true);
+	steps.appendChild(step);
 }
-- 
cgit v1.2.3-70-g09d2