view: Add recipe step adding

1 files changed, 21 insertions, 6 deletions

diff --git a/view/html/recipe-edit.html b/view/html/recipe-edit.html
index 18c4ab0..b5fea1d 100644
--- a/view/html/recipe-edit.html
+++ b/view/html/recipe-edit.html
@@ -29,14 +29,17 @@
 				<p>
 					<label>Notes</label>
 					<textarea name="notes" rows="4" cols="50">{{.Notes}}</textarea>
-				</p>{{range .Steps}}
+				</p>
 
-				<section>
-					<label>Text</label>
-					<textarea rows="4" cols="50">{{.Text}}</textarea>
-					<button type="button" onclick="parentNode.remove();">remove</button>
-				</section>{{end}}
+				<div id="steps">{{range .Steps}}
+					<section>
+						<label>Text</label>
+						<textarea rows="4" cols="50">{{.Text}}</textarea>
+						<button type="button" onclick="parentNode.remove();">remove</button>
+					</section>{{end}}
+				</div>
 
+				<button type="button" onclick="addNewStep();">add step</button>
 				<button type="submit">save</button>
 				<button onclick="window.location.href='/recipe/{{.Id}}';">cancel</button>
 			</form>
@@ -84,6 +87,18 @@
 					console.error('Network error:', error);
 				});
 			}
+
+			function addNewStep() {
+				var newStep = document.createElement("section");
+				newStep.innerHTML = `
+					<label>Text</label>
+					<textarea rows="4" cols="50"></textarea>
+					<button type="button" onclick="parentNode.remove();">remove</button>
+				`;
+
+				var steps = document.querySelector("#steps");
+				steps.appendChild(newStep);
+			}
 		</script>
 	</body>
 </html>