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

{% block contents %}
<h3>
 {% translate "Prévision des étiquettes d'après le plan « " %}{{ svgfile }}{% translate " »" %}
</h3>
<p>
 {% translate 'chaque groupe de classe "livres" donne' %}
 <input id="mul" style="width: 3em;" type="text" value="{{ multiplicateur }}"/>
 {% translate "étiquettes." %}
 <br/>
 <button onclick="location='/abreges/media/{{ svgfile }}/'+$('#mul').val()">
  {% translate "Nouveau nombre d'étiquette par groupe" %}
 </button>
</p>
<hr/>
<p>
 {% translate "Vérifiez les nombres d'étiquettes, puis ..." %}
</p>
<p>
 <button onclick="gen_abreges()">
  {% translate "Générez les planches d'étiquettes" %}
 </button>
 {% translate "à placer dans les rayons des étagères" %}
</p>
<table>
 <tr>
  <th>
   {% translate "Étiquette" %}
  </th>
  <th>
   {% translate "Nombre" %}
   <button onclick="zero()" title="{% translate 'mettre à zéro tous les nombres' %}">
    {% translate "000" %}
   </button>
   <button onclick="un()" title="{% translate 'mettre à un tous les nombres' %}">
    {% translate "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 id="etiquettes" name="etiquettes" type="text"/>
</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 %}

