view: Add editing of existing recipe steps

2 files changed, 48 insertions, 34 deletions

diff --git a/view/html/recipe-edit.html b/view/html/recipe-edit.html
index a6b4a66..33661c3 100644
--- a/view/html/recipe-edit.html
+++ b/view/html/recipe-edit.html
@@ -29,7 +29,12 @@
 				<p>
 					<label>Notes</label>
 					<textarea name="notes" rows="4" cols="50">{{.Notes}}</textarea>
-				</p>
+				</p>{{range .Steps}}
+
+				<section>
+					<label>Text</label>
+					<textarea rows="4" cols="50">{{.Text}}</textarea>
+				</section>{{end}}
 
 				<button type="submit">save</button>
 				<button onclick="window.location.href='/recipe/{{.Id}}';">cancel</button>
@@ -37,6 +42,48 @@
 		</main>
 		{{ template "footer" }}
 		<script src="/static/view/static/ceres.js"></script>
+		<script>
+			var forms = document.querySelectorAll('form');
+			forms.forEach(form => {
+				form.addEventListener('submit', updateRecipe);
+			});
+
+			function updateRecipe(event) {
+				event.preventDefault();
+
+				const form = event.target;
+				const url = form.getAttribute('action');
+				const data = new FormData(form);
+				let obj = Object.fromEntries(data.entries());
+
+				obj.steps = [];
+				const steps = document.querySelectorAll('form section textarea');
+				steps.forEach(step => {
+					let s = {};
+					s.text = step.value;
+					obj.steps.push(s);
+				});
+
+				fetch(url, {
+					method: 'POST',
+					headers: {'Content-Type': 'application/json'},
+					body: JSON.stringify(obj)
+				})
+				.then(response => {
+					if (response.ok) {
+						console.log('Form submitted successfully');
+					} else {
+						console.error('Form submission failed');
+					}
+					if (response.redirected) {
+						window.location.href = response.url;
+					}
+				})
+				.catch(error => {
+					console.error('Network error:', error);
+				});
+			}
+		</script>
 	</body>
 </html>
 {{end}}
diff --git a/view/static/ceres.js b/view/static/ceres.js
index 2fff18c..a8326da 100644
--- a/view/static/ceres.js
+++ b/view/static/ceres.js
@@ -1,36 +1,3 @@
-var forms = document.querySelectorAll('form');
-forms.forEach(form => {
-	form.addEventListener('submit', updateFormData);
-});
-
-function updateFormData(event) {
-	event.preventDefault();
-
-	const form = event.target;
-	const url = form.getAttribute('action');
-	const data = new FormData(form);
-	const obj = Object.fromEntries(data.entries());
-
-	fetch(url, {
-		method: 'POST',
-		headers: {'Content-Type': 'application/json'},
-		body: JSON.stringify(obj)
-	})
-	.then(response => {
-		if (response.ok) {
-			console.log('Form submitted successfully');
-		} else {
-			console.error('Form submission failed');
-		}
-		if (response.redirected) {
-			window.location.href = response.url;
-		}
-	})
-	.catch(error => {
-		console.error('Network error:', error);
-	});
-}
-
 function create(url) {
 	fetch(url, {method: 'POST'})
 	.then(response => {