Barn/django-project
1
0
Fork 0
Code Issues 6 Pull requests Packages Projects 1 Releases Activity

Add HTML templates

Browse source
This commit is contained in:
Benjamin 2023-03-11 19:18:01 +01:00
parent 0141332d2e
commit de214a9e2a
7 changed files with 171 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
recipes/templates/add-recipe.html Normal file
View file

@ -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 %}

40
recipes/templates/add-version.html Normal file
View file

@ -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 %}

10
recipes/templates/edit-recipe.html Normal file
View file

@ -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 %}

40
recipes/templates/edit-version.html Normal file
View file

@ -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 %}

12
recipes/templates/recipe.html Normal file
View file

@ -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 %}

11
recipes/templates/recipes.html Normal file
View file

@ -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 %}

17
recipes/templates/version.html Normal file
View file

@ -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 %}