From a87128138bdb301ede64049ec5068e47abb5c839 Mon Sep 17 00:00:00 2001
From: xengineering <me@xengineering.eu>
Date: Tue, 14 May 2024 20:14:42 +0200
Subject: view: Complete ingredient editing

---
 view/html/recipe-edit.html       |  3 +++
 view/html/recipe-ingredient.html |  6 +++---
 view/html/recipe-step.html       |  3 ++-
 view/static/ceres.js             | 28 ++++++++++++++++++++++++----
 4 files changed, 32 insertions(+), 8 deletions(-)

(limited to 'view')

diff --git a/view/html/recipe-edit.html b/view/html/recipe-edit.html
index c46bbd4..f8a6bd9 100644
--- a/view/html/recipe-edit.html
+++ b/view/html/recipe-edit.html
@@ -29,6 +29,9 @@
 		{{ template "footer" }}
 		<template id="recipe-step-template">
 {{template "recipe-step"}}
+		</template>
+		<template id="recipe-ingredient-template">
+{{template "recipe-ingredient"}}
 		</template>
 		<script src="/static/view/static/ceres.js"></script>
 	</body>
diff --git a/view/html/recipe-ingredient.html b/view/html/recipe-ingredient.html
index 9ea90be..e925737 100644
--- a/view/html/recipe-ingredient.html
+++ b/view/html/recipe-ingredient.html
@@ -1,6 +1,6 @@
 {{define "recipe-ingredient"}}							<p>
-								<input type="text" placeholder="Amount" value="{{.Amount}}">
-								<input type="text" placeholder="Unit" value="{{.Unit}}">
-								<input type="text" placeholder="Type" value="{{.Type}}">
+								<input class="amount" type="text" placeholder="Amount" value="{{.Amount}}">
+								<input class="unit" type="text" placeholder="Unit" value="{{.Unit}}">
+								<input class="type" type="text" placeholder="Type" value="{{.Type}}">
 								<button type="button" onclick="parentNode.remove();">remove ingredient</button>
 							</p>{{end}}
diff --git a/view/html/recipe-step.html b/view/html/recipe-step.html
index 3fd22a7..13c0bb7 100644
--- a/view/html/recipe-step.html
+++ b/view/html/recipe-step.html
@@ -1,7 +1,8 @@
 {{define "recipe-step"}}					<section>
 						<textarea rows="4" cols="50" placeholder="Step description">{{.Text}}</textarea>
-						<div>{{range .Ingredients}}
+						<div class="ingredients">{{range .Ingredients}}
 {{ template "recipe-ingredient" . }}{{end}}
 						</div>
+						<button type="button" onclick="addNewIngredient(this);">add ingredient</button>
 						<button type="button" onclick="parentNode.remove();">remove step</button>
 					</section>{{end}}
diff --git a/view/static/ceres.js b/view/static/ceres.js
index 43b8290..2405a59 100644
--- a/view/static/ceres.js
+++ b/view/static/ceres.js
@@ -59,12 +59,23 @@ function updateRecipe(event) {
 	let obj = Object.fromEntries(data.entries());
 
 	obj.steps = [];
-	const steps = document.querySelectorAll('form section textarea');
-	steps.forEach(step => {
+	var steps_container = document.getElementById('steps');
+	var steps = steps_container.children;
+	for (var i = 0; i < steps.length; i++) {
 		let s = {};
-		s.text = step.value;
+		s.text = steps[i].querySelector('textarea').value;
+		s.ingredients = [];
+		var ingredients_container = steps[i].querySelector('.ingredients')
+		var ingredients = ingredients_container.children;
+		for (var j = 0; j < ingredients.length; j++) {
+			let ingr = {};
+			ingr.amount = ingredients[j].querySelector('.amount').value;
+			ingr.unit = ingredients[j].querySelector('.unit').value;
+			ingr.type = ingredients[j].querySelector('.type').value;
+			s.ingredients.push(ingr)
+		}
 		obj.steps.push(s);
-	});
+	}
 
 	fetch(url, {
 		method: 'POST',
@@ -93,3 +104,12 @@ function addNewStep() {
 	let step = template.content.cloneNode(true);
 	steps.appendChild(step);
 }
+
+function addNewIngredient(button) {
+	let step = button.parentNode;
+	let template = document.getElementById("recipe-ingredient-template");
+	let ingredients = step.querySelector('.ingredients');
+
+	let ingredient = template.content.cloneNode(true);
+	ingredients.appendChild(ingredient);
+}
-- 
cgit v1.2.3-70-g09d2