From faa0708e75ecac0466fc573299fdf4daefe371eb Mon Sep 17 00:00:00 2001
From: Benjamin <bstadlbauer@posteo.de>
Date: Sat, 11 Mar 2023 19:18:01 +0100
Subject: [PATCH] Add HTML templates

---
 recipes/templates/add-recipe.html   | 41 +++++++++++++++++++++++++++++
 recipes/templates/add-version.html  | 40 ++++++++++++++++++++++++++++
 recipes/templates/edit-recipe.html  | 10 +++++++
 recipes/templates/edit-version.html | 40 ++++++++++++++++++++++++++++
 recipes/templates/recipe.html       | 12 +++++++++
 recipes/templates/recipes.html      | 11 ++++++++
 recipes/templates/version.html      | 17 ++++++++++++
 7 files changed, 171 insertions(+)
 create mode 100644 recipes/templates/add-recipe.html
 create mode 100644 recipes/templates/add-version.html
 create mode 100644 recipes/templates/edit-recipe.html
 create mode 100644 recipes/templates/edit-version.html
 create mode 100644 recipes/templates/recipe.html
 create mode 100644 recipes/templates/recipes.html
 create mode 100644 recipes/templates/version.html

diff --git a/recipes/templates/add-recipe.html b/recipes/templates/add-recipe.html
new file mode 100644
index 0000000..bd8968c
--- /dev/null
+++ b/recipes/templates/add-recipe.html
@@ -0,0 +1,41 @@
+{% extends "base_main.html" %}
+{% block title %}{{ recipe.title }}{% endblock %}
+{% block main %}
+<form action="" method="post" id="add-version-form">
+	{%csrf_token %}
+	{{ recipe_form.as_div }}
+	<table>
+		{{ version_form.as_table }}
+	</table>
+	{{ ingredients_formset.management_form }}
+	{% for ingredient_form in ingredients_formset %}
+		{{ ingredient_form.as_div }}
+	{% endfor %}
+	<button id="add-ingredient" type="button">Add Ingredient</button>
+	<input type="submit" value="Submit">
+</form>
+
+<script>
+	let firstIngredientDiv = document.querySelector("input[id^=id_ingredient][id$=text]").parentElement;
+	let addIngredientButton = document.querySelector("#add-ingredient");
+	let form = document.querySelector("#add-version-form");
+	let totalIngredientFormsInput = document.querySelector("#id_ingredient-TOTAL_FORMS");
+
+	addIngredientButton.addEventListener('click', addIngredient);
+
+	function addIngredient(e) {
+		let nextIngredientIndex = document.querySelectorAll("input[id^=id_ingredient][id$=text]").length
+		e.preventDefault();
+
+		let newIngredientDiv = firstIngredientDiv.cloneNode(true);
+		let formRegex = new RegExp('ingredient-(\\d){1}-', 'g');
+
+		newIngredientDiv.innerHTML = newIngredientDiv.innerHTML.replace(formRegex, `ingredient-${nextIngredientIndex}-`);
+
+		form.insertBefore(newIngredientDiv, addIngredientButton);
+		totalIngredientFormsInput.setAttribute('value', `${nextIngredientIndex + 1}`);
+	}
+
+</script>
+
+{% endblock %}
diff --git a/recipes/templates/add-version.html b/recipes/templates/add-version.html
new file mode 100644
index 0000000..e67d86b
--- /dev/null
+++ b/recipes/templates/add-version.html
@@ -0,0 +1,40 @@
+{% extends "base_main.html" %}
+{% block title %}{{ recipe.title }}{% endblock %}
+{% block main %}
+<form action="" method="post" id="add-version-form">
+	{%csrf_token %}
+	<table>
+		{{ version_form.as_table }}
+	</table>
+	{{ ingredients_formset.management_form }}
+	{% for ingredient_form in ingredients_formset %}
+		{{ ingredient_form.as_div }}
+	{% endfor %}
+	<button id="add-ingredient" type="button">Add Ingredient</button>
+	<input type="submit" value="Submit">
+</form>
+
+<script>
+	let firstIngredientDiv = document.querySelector("input[id^=id_ingredient][id$=text]").parentElement;
+	let addIngredientButton = document.querySelector("#add-ingredient");
+	let form = document.querySelector("#add-version-form");
+	let totalIngredientFormsInput = document.querySelector("#id_ingredient-TOTAL_FORMS");
+
+	addIngredientButton.addEventListener('click', addIngredient);
+
+	function addIngredient(e) {
+		let nextIngredientIndex = document.querySelectorAll("input[id^=id_ingredient][id$=text]").length
+		e.preventDefault();
+
+		let newIngredientDiv = firstIngredientDiv.cloneNode(true);
+		let formRegex = new RegExp('ingredient-(\\d){1}-', 'g');
+
+		newIngredientDiv.innerHTML = newIngredientDiv.innerHTML.replace(formRegex, `ingredient-${nextIngredientIndex}-`);
+
+		form.insertBefore(newIngredientDiv, addIngredientButton);
+		totalIngredientFormsInput.setAttribute('value', `${nextIngredientIndex + 1}`);
+	}
+
+</script>
+
+{% endblock %}
diff --git a/recipes/templates/edit-recipe.html b/recipes/templates/edit-recipe.html
new file mode 100644
index 0000000..09bc18e
--- /dev/null
+++ b/recipes/templates/edit-recipe.html
@@ -0,0 +1,10 @@
+{% extends "base_main.html" %}
+{% block title %}{{ recipe.title }}{% endblock %}
+{% block main %}
+<form action="" method="post">
+	{%csrf_token %}
+	{{ form.as_div }}
+	<input type="submit" value="Submit">
+</form>
+
+{% endblock %}
diff --git a/recipes/templates/edit-version.html b/recipes/templates/edit-version.html
new file mode 100644
index 0000000..e3fa642
--- /dev/null
+++ b/recipes/templates/edit-version.html
@@ -0,0 +1,40 @@
+{% extends "base_main.html" %}
+{% block title %}{{ recipe.title }}{% endblock %}
+{% block main %}
+<form action="" method="post" id="edit-version-form"> <!-- TODO refactor with add-version.html-->
+	{%csrf_token %}
+	<table>
+		{{ version_form.as_table }}
+	</table>
+	{{ ingredients_formset.management_form }}
+	{% for ingredient_form in ingredients_formset %}
+		{{ ingredient_form.as_div }}
+	{% endfor %}
+	<button id="add-ingredient" type="button">Add Ingredient</button>
+	<input type="submit" value="Submit">
+</form>
+
+<script>
+	let firstIngredientDiv = document.querySelector("input[id^=id_ingredient][id$=text]").parentElement;
+	let addIngredientButton = document.querySelector("#add-ingredient");
+	let form = document.querySelector("#edit-version-form");
+	let totalIngredientFormsInput = document.querySelector("#id_ingredient-TOTAL_FORMS");
+
+	addIngredientButton.addEventListener('click', addIngredient);
+
+	function addIngredient(e) {
+		let nextIngredientIndex = document.querySelectorAll("input[id^=id_ingredient][id$=text]").length
+		e.preventDefault();
+
+		let newIngredientDiv = firstIngredientDiv.cloneNode(true);
+		let formRegex = new RegExp('ingredient-(\\d){1}-', 'g');
+
+		newIngredientDiv.innerHTML = newIngredientDiv.innerHTML.replace(formRegex, `ingredient-${nextIngredientIndex}-`);
+
+		form.insertBefore(newIngredientDiv, addIngredientButton);
+		totalIngredientFormsInput.setAttribute('value', `${nextIngredientIndex + 1}`);
+	}
+
+</script>
+
+{% endblock %}
diff --git a/recipes/templates/recipe.html b/recipes/templates/recipe.html
new file mode 100644
index 0000000..08d20d9
--- /dev/null
+++ b/recipes/templates/recipe.html
@@ -0,0 +1,12 @@
+{% extends "base_main.html" %}
+{% block title %}{{ recipe.title }}{% endblock %}
+{% block main %}
+<h1>{{ recipe.title }}</h1>
+<p><a href="{% url 'edit-recipe' recipe.slug %}">Edit recipe name</a></p>
+<p><a href="{% url 'add-version' recipe.slug %}">Add version</a></p>
+	<ul>
+		{% for v in versions %}
+		<li><a href="{{ v.get_absolute_url }}">{{ v.label }}</a></li>
+		{% endfor %}
+	</ul>
+{% endblock %}
diff --git a/recipes/templates/recipes.html b/recipes/templates/recipes.html
new file mode 100644
index 0000000..faee634
--- /dev/null
+++ b/recipes/templates/recipes.html
@@ -0,0 +1,11 @@
+{% extends "base_main.html" %}
+{% block title %}Recipes{% endblock %}
+{% block main %}
+<h1>Recipes</h1>
+<p><a href="{% url 'add-recipe' %}">Add recipe</a></p>
+	<ul>
+		{% for recipe in recipes %}
+		<li><a href="{{ recipe.get_absolute_url }}">{{ recipe.title }}</a></li>
+		{% endfor %}
+	</ul>
+{% endblock %}
diff --git a/recipes/templates/version.html b/recipes/templates/version.html
new file mode 100644
index 0000000..00ad0ff
--- /dev/null
+++ b/recipes/templates/version.html
@@ -0,0 +1,17 @@
+{% extends "base_main.html" %}
+{% block title %}{{ recipe.title }}{% endblock %}
+{% block main %}
+<h1>{{ version.recipe.title }}{% if has_multiple_versions %} ({{ version.label }}){% endif %}</h1>
+{% if has_multiple_versions %}
+<p><a href="{{ recipe.get_absolute_url }}">Show all versions</a></p>
+{% endif %}
+<p><a href="{% url 'edit-recipe' recipe.slug %}">Edit recipe name</a></p>
+<p><a href="{% url 'add-version' recipe.slug %}">Add version</a></p>
+<p><a href="{% url 'edit-version' recipe.slug version.slug %}">Edit Version</a></p>
+	<ul>
+		{% for i in ingredients %}
+			<li>{{ i.text }}</li>
+		{% endfor %}
+	</ul>
+<p>{{ version.body }}</p>
+{% endblock %}