mirror of
				https://gitlab.crans.org/bde/nk20
				synced 2025-11-04 01:12:08 +01:00 
			
		
		
		
	
		
			
				
	
	
		
			88 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			88 lines
		
	
	
		
			2.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
{% extends "base.html" %}
 | 
						|
{% comment %}
 | 
						|
Copyright (C) by BDE ENS Paris-Saclay
 | 
						|
SPDX-License-Identifier: GPL-3.0-or-later
 | 
						|
{% endcomment %}
 | 
						|
{% load i18n crispy_forms_tags %}
 | 
						|
 | 
						|
{% block content %}
 | 
						|
<div class="card bg-white mb-3">
 | 
						|
  <h3 class="card-header text-center">
 | 
						|
    {{ title }}
 | 
						|
  </h3>
 | 
						|
  <div class="card-body" id="form">
 | 
						|
    <form method="post">
 | 
						|
      {% csrf_token %}
 | 
						|
      {{ form | crispy }}
 | 
						|
      <table class="table table-condensed table-striped">
 | 
						|
        {# Fill initial data #}
 | 
						|
        {% for ingredient_form in formset %}
 | 
						|
        {% if forloop.first %}
 | 
						|
        <thead>
 | 
						|
          <tr>
 | 
						|
	    <th>{% trans "Name" %}</th>
 | 
						|
	    <th>{% trans "QR-code number" %}</th>
 | 
						|
	    <th>{% trans "Fully used" %}<th>
 | 
						|
          </tr>
 | 
						|
        </thead>
 | 
						|
        <tbody id="form_body">
 | 
						|
        {% endif %}
 | 
						|
        <tr class="row-formset">
 | 
						|
		{{ ingredient_form | crispy }}
 | 
						|
          <td>{{ ingredient_form.name }}</td>
 | 
						|
	  <td>{{ ingredient_form.qrcode }}</td>
 | 
						|
	  <td>{{ ingredient_form.fully_used }}</td>
 | 
						|
        </tr>
 | 
						|
        {% endfor %}
 | 
						|
        </tbody>
 | 
						|
      </table>
 | 
						|
      {# Display buttons to add and remove products #}
 | 
						|
      <div class="card-body">
 | 
						|
        <div class="btn-group btn-block" role="group">
 | 
						|
          <button type="button" id="add_more" class="btn btn-success">{% trans "Add ingredient" %}</button>
 | 
						|
	  <button type="button" id="remove_one" class="btn btn-danger">{% trans "Remove ingredient" %}</button>
 | 
						|
        </div>
 | 
						|
        <button type="submit" class="btn btn-block btn-primary">{% trans "Submit" %}</button>
 | 
						|
      </div>
 | 
						|
    </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.qrcode }}</td>
 | 
						|
		<td>{{ formset.empty_form.fully_used }}</td>
 | 
						|
            </tr>
 | 
						|
        </tbody>
 | 
						|
    </table>
 | 
						|
</div>
 | 
						|
{% endblock %}
 | 
						|
{% block extrajavascript %}
 | 
						|
<script>
 | 
						|
    /* script that handles add and remove lines */
 | 
						|
    IDS = {};
 | 
						|
 | 
						|
    $("#id_form-TOTAL_FORMS").val($(".row-formset").length - 1);
 | 
						|
 | 
						|
    $('#add_more').click(function () {
 | 
						|
        let form_idx = $('#id_form-TOTAL_FORMS').val();
 | 
						|
        $('#form_body').append($('#for_real').html().replace(/__prefix__/g, form_idx));
 | 
						|
        $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
 | 
						|
        $('#id_form-' + parseInt(form_idx) + '-id').val(IDS[parseInt(form_idx)]);
 | 
						|
    });
 | 
						|
 | 
						|
    $('#remove_one').click(function () {
 | 
						|
        let form_idx = $('#id_form-TOTAL_FORMS').val();
 | 
						|
        if (form_idx > 0) {
 | 
						|
            IDS[parseInt(form_idx) - 1] = $('#id_form-' + (parseInt(form_idx) - 1) + '-id').val();
 | 
						|
            $('#form_body tr:last-child').remove();
 | 
						|
            $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) - 1);
 | 
						|
        }
 | 
						|
    });
 | 
						|
</script>
 | 
						|
{% endblock %}
 |