nk20/apps/sheets/templates/sheets/food_form.html

{% extends "base.html" %}
{% comment %}
SPDX-License-Identifier: GPL-3.0-or-later
{% endcomment %}
{% load crispy_forms_tags %}
{% load i18n %}

{% block content %}
<div class="card bg-light mb-3">
    <h3 class="card-header text-center">
        {{ title }}
    </h3>
    <div class="card-body">
        <form method="post">
            {% csrf_token %}
            {{ form|crispy }}

            {# The next part concerns the option formset #}
            {# Generate some hidden fields that manage the number of options, and make easier the parsing #}
            {{ formset.management_form }}
            <table class="table table-condensed table-striped">
                {# Fill initial data #}
                {% for form in formset %}
                {% if forloop.first %}
                <thead>
                    <tr>
                        <th>{{ form.name.label }}<span class="asteriskField">*</span></th>
                        <th>{{ form.extra_cost.label }}<span class="asteriskField">*</span></th>
                        <th>{{ form.available.label }}<span class="asteriskField">*</span></th>
                    </tr>
                </thead>
                <tbody id="form_body">
                    {% endif %}
                    <tr class="row-formset">
                        <td>{{ form.name }}</td>
                        <td>{{ form.extra_cost }}</td>
                        <td>{{ form.available }}</td>
                        {# These fields are hidden but handled by the formset to link the id and the invoice id #}
                        {{ form.food }}
                        {{ form.id }}
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

            {# Display buttons to add and remove options #}
            <div class="card-body">
            <button type="button" id="add_more" class="btn btn-success">{% trans "Add option" %}</button>
            </div>

            <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
        </form>
    </div>
</div>

{# Hidden div that store an empty product form, to be copied into new forms #}
<div id="empty_form" style="display: none;">
    <table class='no_error'>
        <tbody id="for_real">
            <tr class="row-formset">
                <td>{{ formset.empty_form.name }}</td>
                <td>{{ formset.empty_form.extra_cost }} </td>
                <td>{{ formset.empty_form.available }}</td>
                {{ formset.empty_form.food }}
                {{ formset.empty_form.id }}
            </tr>
        </tbody>
    </table>
</div>
{% endblock %}

{% block extrajavascript %}
<script>
    /* script that handles add and remove lines */
    IDS = {};

    $("#id_foodoption_set-TOTAL_FORMS").val($(".row-formset").length - 1);

    $('#add_more').click(function () {
        let form_idx = $('#id_foodoption_set-TOTAL_FORMS').val();
        $('#form_body').append($('#for_real').html().replace(/__prefix__/g, form_idx));
        $('#id_foodoption_set-TOTAL_FORMS').val(parseInt(form_idx) + 1);
        $('#id_foodoption_set-' + parseInt(form_idx) + '-id').val(IDS[parseInt(form_idx)]);
    });
</script>
{% endblock %}