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

{% block contents %}
<script src="{% static 'js/html5-qrcode.min.js' %}"></script>
<script src="{% static 'js/jquery/jquery.js' %}"></script>
<style>
  .ok {
      background: green;
      text-align: center;
      font-size: 32px;
  }
  .ko {
      background: red;
      text-align: center;
      font-size: 32px;
  }
  .kk{
      background: yellow;
      text-align: center;
      font-size: 32px;
  }
</style>
<script>
  var a_chercher = [{'abrege': 'grammaire anglais', 'ids': [19, 50]}, {'abrege': 'anglais seasons', 'ids': [51]}, {'abrege': 'géo', 'ids': [52, 83, 85]}, {'abrege': 'histoire', 'ids': [26, 45, 46, 53]}, {'abrege': 'Ens. scient.', 'ids': [48, 54, 105]}, {'abrege': 'philo lire', 'ids': [55, 56]}, {'abrege': 'philo', 'ids': [9, 80, 106]}, {'abrege': 'espagnol', 'ids': [11, 78, 98]}, {'abrege': 'chinois', 'ids': [29]}, {'abrege': 'cambridge euro', 'ids': [33]}, {'abrege': 'arabe', 'ids': [28, 36]}, {'abrege': 'cambridge test', 'ids': [57]}, {'abrege': 'llce anglais', 'ids': [38, 58]}, {'abrege': 'H.G.S.P.', 'ids': [39, 59]}, {'abrege': 'littérature anglais', 'ids': [60]}, {'abrege': 'physique chimie', 'ids': [22, 61]}, {'abrege': 'ses spé', 'ids': [41, 62]}, {'abrege': 'svt spé', 'ids': [42, 63]}, {'abrege': 'maths Spé', 'ids': [64]}, {'abrege': 'lsf', 'ids': [32, 65]}, {'abrege': 'maths expertes', 'ids': [66]}, {'abrege': 'maths compl.', 'ids': [67]}, {'abrege': 'poche', 'ids': [68, 69, 70, 71, 72, 90, 93, 94, 95, 96, 97, 104, 107]}, {'abrege': 'llcer anglais', 'ids': [74]}, {'abrege': 'latin', 'ids': [76, 77, 79]}, {'abrege': 'hlp', 'ids': [91, 92]}];
  var codes = [];
  var dejapris = [];
  a_chercher.forEach(function(elt){
      elt.ids.forEach(function(id){
	  codes["coop-" + id] = elt.abrege;
      });
  });

  function docReady(fn) {
      // see if DOM is already available
      if (document.readyState === "complete"
          || document.readyState === "interactive") {
          // call on next available tick
          setTimeout(fn, 1);
      } else {
          document.addEventListener("DOMContentLoaded", fn);
      }
  }
  

  function prendre(abrege){
      dejapris[abrege] = true;
      $("#qr-reader-results").html("<p class='kk'>Scannez les QR-codes ...</p>");
  }

  function repondre(code, statut){
      response = {
	  oui: "<p class='ok'>Je prends : " + codes[code] + "<button onclick='prendre(\"" + code + "\")'>Pris !</button></p>",
	  deja: "<p class='kk'>" + codes[code] + " a déjà été pris ?</p>",
	  non: "<p class='ko'>Je laisse :" + codes[code] + "</p>",
      }
      $("#qr-reader-results").html(response[statut]);
  }

  docReady(function () {
      var resultContainer = document.getElementById('qr-reader-results');
      var lastResult, countResults = 0;
      var response = "";
      function onScanSuccess(decodedText, decodedResult) {
	  $("#feedback").html(decodedText + " " + countResults);
          /*if (decodedText !== lastResult) {*/
	  if(1){
              ++countResults;
              lastResult = decodedText;
              // Handle on success condition with the decoded message.
              // console.log(`Scan result ${decodedText}`, decodedResult, countResults);
	      var statut = "";
	      if (decodedText in codes){
		  if (decodedText in dejapris){
		      statut="deja";
		  } else {
		      statut = "oui";
		  }
	      } else {
		  statut = "non";
	      }
	      repondre(decodedText, statut);
          }
      }

      var html5QrcodeScanner = new Html5QrcodeScanner(
          "qr-reader", { fps: 10, qrbox: 250 });
      html5QrcodeScanner.render(onScanSuccess);
  });
  </script>
<div id="qr-reader" style="width:500px"></div>
<div id="qr-reader-results"></div>
<div id="feedback"></div>
{% endblock %}
