{% extends 'gestion/base.html' %}
{% load static %}

{% block contents %}
<h3>
  Prévision des étiquettes d'après le plan « {{ svgfile }} »
</h3>
<p>
  chaque groupe de classe "livres" donne
  <input type="text" id="mul" style="width: 3em;"
	 value="{{ multiplicateur }}"/> étiquettes.
  <br>
  <button onclick="location='/abreges/media/{{ svgfile }}/'+$('#mul').val()">
    Nouveau nombre d'étiquette par groupe
  </button>
</p>
<hr>
<p>
   Vérifiez les nombres d'étiquettes, puis ...
</p>
<p>
  <button onclick="gen_abreges()">
    Générez les planches d'étiquettes
  </button>
  à placer dans les rayons des étagères
</p>
<table>
  <tr>
    <th>Étiquette</th>
    <th>
      Nombre
      <button onclick="zero()" title="mettre à zéro tous les nombres">
	000
      </button>
      <button onclick="un()" title="mettre à un tous les nombres">
	001
      </button>
    </th>
  </tr>
  {% for a, nombre in abreges.items %}
  <tr>
    <td><label for="id{{ forloop.counter }}">{{ a }}</label></td>
    <td>
      <input id="id{{ forloop.counter }}" type="text" value="{{ nombre }}"/>
    </td>
  </tr>
  {% endfor %}
</table>
<form action="/qr_boutique_print_go" method="post">
  {% csrf_token %}
  <input type="text" id="etiquettes" name="etiquettes"/>
</form>
<script>
  /**
   * génération des étiquettes d'abrégés
   **/
  function gen_abreges(){
      var etiquettes=[]
      $("tr").each(function(i, tr){
	  tr = $(tr);
	  var td = tr.find("td");
	  if (td.length){
	      etiquettes.push({
		  "nom": tr.find("label").text(),
		  "nombre": parseInt(tr.find("input").val()),
	      });
	  }
      });
      $("#etiquettes").val(JSON.stringify(etiquettes));
      $("form").submit();
  }

  /**
   * Mise à zéro des cases du tableau
   **/
  function zero(){
      $("td input").val("0");
  }
  
  /**
   * Mise à un des cases du tableau
   **/
  function un(){
      $("td input").val("1");
  }
</script>
{% endblock %}
