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

Refactor forms

Browse source
This commit is contained in:
Benjamin 2023-03-19 18:28:29 +01:00
parent 1d1a0653e5
commit c5b3e83f6f
4 changed files with 9 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
recipes/templates/add-version.html
View file

@ -1,58 +0,0 @@
{% extends "base_main.html" %}
{% comment %}
Barn Web App - A collection of web-apps for my family's personal use,
including a recipe database.
Copyright © 2023 Benjamin Stadlbauer
This program is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or (at
your option) any later version.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
General Public License for more details.
This program comes with a copy of the GNU Affero General Public License
file at the root of this project.
{% endcomment %}
{% 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 %}

58
recipes/templates/edit-version.html
View file

@ -1,58 +0,0 @@
{% extends "base_main.html" %}
{% comment %}
Barn Web App - A collection of web-apps for my family's personal use,
including a recipe database.
Copyright © 2023 Benjamin Stadlbauer
This program is free software: you can redistribute it and/or modify it
under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or (at
your option) any later version.
This program is distributed in the hope that it will be useful, but
WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero
General Public License for more details.
This program comes with a copy of the GNU Affero General Public License
file at the root of this project.
{% endcomment %}
{% 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/add-recipe.html → recipes/templates/recipe-form.html
View file

@ -19,12 +19,12 @@
{% endcomment %}
{% block title %}{{ recipe.title }}{% endblock %}
{% block main %}
<form action="" method="post" id="add-version-form">
<form action="" method="post" id="version-form">
{%csrf_token %}
{{ recipe_form.as_div }}
<table>
{{ version_form.as_table }}
</table>
{% if recipe_form %}
{{ recipe_form.as_div }}
{% endif %}
{{ version_form.as_div }}
{{ ingredients_formset.management_form }}
{% for ingredient_form in ingredients_formset %}
{{ ingredient_form.as_div }}
@ -36,7 +36,7 @@
<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 form = document.querySelector("#version-form");
let totalIngredientFormsInput = document.querySelector("#id_ingredient-TOTAL_FORMS");
addIngredientButton.addEventListener('click', addIngredient);

6
recipes/views.py
View file

@ -85,7 +85,7 @@ def add_recipe(request):
version_form = VersionForm(prefix=VERSION_FORM_PREFIX, author_placeholder=get_name_of_user(request.user))
ingredients_formset = IngredientFormSet(queryset=Ingredient.objects.none(), prefix=INGREDIENTS_FORMSET_PREFIX)
return render(request, 'add-recipe.html', {'recipe_form': recipe_form, 'version_form': version_form, 'ingredients_formset': ingredients_formset})
return render(request, 'recipe-form.html', {'recipe_form': recipe_form, 'version_form': version_form, 'ingredients_formset': ingredients_formset})
@login_required
def edit_recipe(request, slug):
@ -135,7 +135,7 @@ def add_version(request, slug):
version_form = VersionForm(prefix=VERSION_FORM_PREFIX, initial=version_initial, author_placeholder=get_name_of_user(request.user))
ingredients_formset = IngredientFormSet(queryset=Ingredient.objects.none(), prefix=INGREDIENTS_FORMSET_PREFIX)
return render(request, 'add-version.html', {'version_form': version_form, 'ingredients_formset': ingredients_formset})
return render(request, 'recipe-form.html', {'version_form': version_form, 'ingredients_formset': ingredients_formset})
@login_required
def edit_version(request, slug_recipe, slug_version):
@ -164,4 +164,4 @@ def edit_version(request, slug_recipe, slug_version):
version_form = VersionForm(instance=version, prefix=VERSION_FORM_PREFIX, author_placeholder=get_name_of_user(request.user))
ingredients_formset = IngredientFormSet(queryset=version.ingredients.all(), prefix=INGREDIENTS_FORMSET_PREFIX) # type: ignore
return render(request, 'edit-version.html', {'version_form': version_form, 'ingredients_formset': ingredients_formset})
return render(request, 'recipe-form.html', {'version_form': version_form, 'ingredients_formset': ingredients_formset})