view: Use HTML template to add recipe steps

This makes the JS function way simpler and removes a duplication of the
step HTML code.

3 files changed, 11 insertions, 12 deletions

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);
 }