sapl/sapl/templates/sessao/painel.html

{% extends "crud/detail.html" %}
{% load i18n %}
{% load common_tags %}
{% load staticfiles %}
{% load webpack_static from webpack_loader %}
{% load render_bundle from webpack_loader %}

{% block actions %} {% endblock %}

{% block title %}
	<h1 class="page-header">
		Painel Eletrônico <small>({{sessaoplenaria}})</small>
	</h1>
{% endblock %}


{% block detail_content %}

  <audio type="hidden" id="audio" src="{% webpack_static 'audio/ring.mp3' %}"></audio>

  <div class="row">
    <div class="col-md-4"><a href="" onclick="window.open('{% url 'sapl.painel:painel_principal' pk %}','Comprovante','width=800, height=800, scrollbars=yes'); return false;" class="btn btn-primary btn-sm active">Iniciar painel completo</a></div>
    <div class="col-md-4">
      <select id="sel-painel-modular" multiple="multiple" class="btn btn-primary btn-sm active">
        <option value="parlamentares">Parlamentares</option>
        <option value="oradores">Oradores</option>
        <option value="cronometros">Cronômetros</option>
        <option value="resultado-votacao">Resultado da votação</option>
        <option value="materia-votacao">Matéria em votação / votada</option>
      </select>
      <button class="btn btn-primary btn-sm active" onclick="painel_parcial();">Iniciar</button>
    </div>
    <div class="col-md-2"><button onclick="switch_painel(true)" id="id_abrir_painel" class="btn btn-primary btn-sm active" style="display: none">Abrir Painel</button></div>
    <div class="col-md-2"><button onclick="switch_painel(false)" id="id_fechar_painel" class="btn btn-danger btn-sm active" style="display: none;">Fechar Painel</button></div>
  </div>
	<br />

	<h1>Operação do Painel Eletrônico</h1>
	<h2><span id="relogio"></span></h2>
	<br />

  {% for cronometro in cronometros %}

    <div class="row">
      <div class="col-md-12 mb-2"><h3><a href="{% url 'sapl.painel:cronometro_detail' cronometro.id %}">{{cronometro}}</a></h3></div>
    </div>

    <div class="row">
      <div class="col-md-2"><input size="2" id="cronometro_{{cronometro.id}}" name="cronometro_{{cronometro.id}}" value="" readyonly="true" class="form-control"></div>
    </div>
    <br />

    <div class="row">
      <div class="col-md-6"><button type="button" id="cronometro_{{cronometro.id}}_Start" class="btn btn-success">Iniciar</button></div>
      <div class="col-md-6"><button type="button" id="cronometro_{{cronometro.id}}_Reset" class="btn btn-success">Reiniciar</button></div>
    </div>

    <br><br>
  {% endfor %}

  <div class="row">
    <div class="col-md-6"><button type="button" id="sinalSonoro" class="btn btn-success" onclick="document.getElementById('audio').play();">Sinal Sonoro</button></div>
  </div>
  <br><br>

{% endblock detail_content %}

{% block extra_js %}
<script language="JavaScript">

function painel_parcial(){
  let selecionados = $('#sel-painel-modular').find(":selected");
  let param = 0;
  // Seleciona um bit diferente do número para cada escolha
  // Exemplo: se "Parlamentares" estiver selecionado, o bit 0
  // do parâmetro estará marcado como 1
  for(var sel of selecionados){
    switch (sel.text) {
      case 'Parlamentares':
        param += 1;
        break;
      case 'Oradores':
        param += 2;
        break;
      case 'Cronômetros':
        param += 4;
        break;
      case 'Resultado da votação':
        param += 8;
        break;
      case 'Matéria em votação / votada':
        param += 16;
    }
  }
  // Monta a URL passando o parâmetros dos selecionados
  let url = "{% url 'sapl.painel:painel_parcial' pk 12345 %}";
  url = url.replace('12345', param.toString());
  window.open(url,"_blank",'Comprovante', 'width=800, height=800, scrollbars=yes'); 
  return false;
}

function switch_painel(aberto) {
  let pk_sessao = {{root_pk}};
  let botao_abrir = $('#id_abrir_painel');
  let botao_fechar = $('#id_fechar_painel');

  $.ajax({
    data: {pk_sessao: pk_sessao, aberto: aberto},
    type: 'POST',
    url: "{% url 'sapl.painel:switch_painel' %}",
    headers: {'X-CSRFToken': getCookie('csrftoken')},
  });

  if (aberto) {
    botao_abrir.hide();
    botao_fechar.show();
  } else {
    botao_abrir.show();
    botao_fechar.hide();
  }
}

function checkTime(i) {
  if (i<10) {
    i = "0" + i;
  }
  return i;
}

function startTime() {
  let today=new Date();
  let h=today.getHours();
  let m=today.getMinutes();
  let s=today.getSeconds();
  m = checkTime(m);
  s = checkTime(s);
  $("#relogio").text(h+":"+m+":"+s)
  let t = setTimeout(function(){
      startTime();
  },500);
}

function playAudioNumVezes(audio, times, ended) {
  if (times <= 0) {
      return;
  }
  let played = 0;
  audio.addEventListener("ended", function() {
      played++;
      if (played < times) {            
          audio.play();
      } else if (ended) {
          ended();
      }
  });
  audio.play();
}

function convertValueToDuration(value){
  let h = Math.floor((value/1000) / 3600);
  h = checkTime(h);
  let m = Math.floor((value/1000) % 3600 / 60);
  m = checkTime(m);
  let s = Math.floor((value/1000) % 3600 % 60);
  s = checkTime(s);
  return h.toString() + ":" + m.toString() + ":" + s.toString();
}


$(document).ready(function(){
  $('#sel-painel-modular').multiselect({
            inheritClass: true,
            buttonText: function(options, select) {
              return "Painel modular";
            },
            includeSelectAllOption: true,
            selectAllText: 'Selecionar todos',
            selectAllValue: 'select-all-value'
  });
  let pk_sessao = parseInt("{{root_pk}}");
  let botao_abrir = $('#id_abrir_painel');
  let botao_fechar = $('#id_fechar_painel');

	startTime();
  let audioAlertFinish = document.getElementById("audio");

  // Obtém duração do disparo ao término do tempo e converte para segundos
  var duracao_disparo = "{{ painel_config.tempo_disparo_termino }}";
  let tmp = duracao_disparo.split(":");
  duracao_disparo = parseInt(tmp[0])*3600 + parseInt(tmp[1])*60 + parseInt(tmp[2]);
  let num_vezes_toca_audio = Math.round(duracao_disparo/audioAlertFinish.duration);

  var cronometros_previous = [];

  {% for cron in cronometros %}
    cronometros_previous.push(0);
    $('#cronometro_' + "{{cron.id}}").prop('disabled', false);

    {% if cron.status == 'I' %}
      $('#cronometro_' + "{{cron.id}}" + '_Reset').hide();
      $('#cronometro_' + "{{cron.id}}").runner('start');
      $('#cronometro_' + "{{cron.id}}" + '_Start').text('Parar');
    {% else %}
      $('#cronometro_' + "{{cron.id}}" + '_Reset').show();
      $('#cronometro_' + "{{cron.id}}").runner('stop');
      $('#cronometro_' + "{{cron.id}}" + '_Start').text('Iniciar');
    {% endif %}

    $('#cronometro_' + "{{cron.id}}").runner({
      autostart: {% if cron.status == "I"%} true {% else %} false {% endif %},
      countdown: true,
      startAt:
        {% if cron.status == "R"%}
          parseInt("{{cron.duracao_cronometro|duration_to_seconds}}") * 1000
        {% elif cron.status == "S"%}
          {% if cron.last_stop_duration %} 
            parseInt("{{cron.last_stop_duration|duration_to_seconds}}") * 1000
          {% else %}
            parseInt("{{cron.duracao_cronometro|duration_to_seconds}}") * 1000
          {% endif %}
        {% elif cron.status == "I" %} 
          parseInt("{{cron.duracao_cronometro|duration_difference:cron.ultima_alteracao_status}}") * 1000
        {% endif %},
      stopAt: 0,
      milliseconds: false,
      format: convertValueToDuration
    }).on('runnerFinish', function(eventObject, info){
      $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'stop', last_time: $('#cronometro_' + "{{c.id}}").val() } );
      playAudioNumVezes(audioAlertFinish, num_vezes_toca_audio);
      $('#cronometro_' + "{{cron.id}}" + '_Reset').show();
      $('#cronometro_' + "{{cron.id}}").runner('stop');
      $('#cronometro_' + "{{cron.id}}" + '_Start').text('Iniciar');
    });

    $('#cronometro_' + "{{cron.id}}" + '_Start').click(function() {
      // Como o botão de start e stop está sendo reaproveitado (é o mesmo botão, que fica mudando de texto),
      // deve-se checar se é um start ou um stop
      // Ação de start
      if ($('#cronometro_' + "{{cron.id}}" + '_Start').text() == 'Iniciar'){
        // Cronômetro da questão de ordem é tratado separadamente
        // porque pode parar os demais quando inicia
        {% if painel_config.cronometro_ordem and cron.tipo == "Cronômetro da Questão de Ordem" %}
        // cronometro da questão de ordem
          {% for c in cronometros %}
            {% if c.tipo == "Cronômetro da Questão de Ordem" %}
              $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{c.id}}", action: 'start', last_time: '0'  } );
              $('#cronometro_' + "{{c.id}}" + '_Reset').hide();
              $('#cronometro_' + "{{c.id}}").runner('start');
              $('#cronometro_' + "{{c.id}}" + '_Start').text('Parar');
            {% else %}
              $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{c.id}}", action: 'stop', last_time: $('#cronometro_' + "{{c.id}}").val() } );
              $('#cronometro_' + "{{c.id}}" + '_Reset').show();
              $('#cronometro_' + "{{c.id}}").runner('stop');
              $('#cronometro_' + "{{c.id}}" + '_Start').text('Iniciar');
            {% endif %}
          {% endfor %}
        // Demais cronômetros
        {% else %}
          $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'start', last_time: '0' } );
          $('#cronometro_' + "{{cron.id}}" + '_Reset').hide();
          $('#cronometro_' + "{{cron.id}}").runner('start');
          $('#cronometro_' + "{{cron.id}}" + '_Start').text('Parar');
        {% endif %}
      // Ação de stop é igual para todos os cronômetros
      } else{
        $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'stop', last_time: $('#cronometro_' + "{{cron.id}}").val() } );
        $('#cronometro_' + "{{cron.id}}" + '_Reset').show();
        $('#cronometro_' + "{{cron.id}}").runner('stop');
        $('#cronometro_' + "{{cron.id}}" + '_Start').text('Iniciar');
      }
    });

    // Ação de reset é igual para todos os cronômetros
    $('#cronometro_' + "{{cron.id}}" + '_Reset').click(function() {
      $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'reset', last_time: '0' } );
      // é necessário recriar o cronômetro com o valor da duração original devido a limitações da API
      $('#cronometro_' + "{{cron.id}}").runner({
        autostart: false,
        countdown: true,
        startAt: parseInt("{{cron.duracao_cronometro|duration_to_seconds}}") * 1000,
        stopAt: 0,
        milliseconds: false,
        format: convertValueToDuration
      }).on('runnerFinish', function(eventObject, info){
        $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'stop', last_time: $('#cronometro_' + "{{c.id}}").val() } );
        playAudioNumVezes(audioAlertFinish, num_vezes_toca_audio);
        $('#cronometro_' + "{{cron.id}}" + '_Reset').show();
        $('#cronometro_' + "{{cron.id}}").runner('stop');
        $('#cronometro_' + "{{cron.id}}" + '_Start').text('Iniciar');
      });
    });    

  {% endfor %}
  (function poll() {
  $.ajax({
    data: {pk_sessao: pk_sessao},
    type: 'GET',
    dataType: 'json',
    url: "{% url 'sapl.painel:verifica_painel' %}",
    error: function () {
      alert("Erro ao verificar o Painel");
    },
    success: function (data) {
      if (data['status']) {
        botao_abrir.hide();
        botao_fechar.show();
      } else {
        botao_abrir.show();
        botao_fechar.hide();
      }

      // ajustes do painel para caso haja dois controladores

      // obtém todos os ids em uma lista e
      // converte os dados do status dos cronômetros de dicionário para uma lista
      var ids = [];
      var status_cronometros = [];
      for (var key in data['cronometros']) {
        if (data['cronometros'].hasOwnProperty(key)) {           
            ids.push(key);
            status_cronometros.push(data['cronometros'][key]);
        }
      }

      // converte os dados de dicionário para uma lista
      var duracao_cronometros = [];
      for (let id of ids) {
        duracao_cronometros.push(data['duracao_cronometros'][id]);
      }

      for(let i=0; i<status_cronometros.length; i++){
        if (!cronometros_previous[i]){
          cronometros_previous[i] = ''
        }

        // se houve alteração de status
        if (status_cronometros[i] != cronometros_previous[i]) {
          if(status_cronometros[i] == 'reset'){
            // é necessário recriar o cronômetro com o valor da duração original devido a limitações da API
            $('#cronometro_' + ids[i]).runner({
              autostart: false,
              countdown: true,
              startAt: parseInt(duracao_cronometros[i]) * 1000,
              stopAt: 0,
              milliseconds: false,
              format: convertValueToDuration
            }).on('runnerFinish', function(eventObject, info){
              playAudioNumVezes(audioAlertFinish, num_vezes_toca_audio);
            });
          }
          // ações de start e stop
          else if(status_cronometros[i] == 'stop'){
            $('#cronometro_' + ids[i] + '_Reset').show();
            $('#cronometro_' + ids[i]).runner('stop');
            $('#cronometro_' + ids[i] + '_Start').text('Iniciar');
          }
          else{
            $('#cronometro_' + ids[i] + '_Reset').hide();
            $('#cronometro_' + ids[i]).runner('start');
            $('#cronometro_' + ids[i] + '_Start').text('Parar');
          }
          cronometros_previous[i] = status_cronometros[i];
        }

        // Dispara aviso prévio se estiver configurado
        //if($('#cronometro_' + ids[i]).runner('info').formattedTime == tempo_disparo_antecedencia 
        //  && "{{ painel_config.disparo_cronometro }}" == "True" ){
        //  audioAlertFinish.play();
        //}
      }

    },
    complete: setTimeout(function() {poll()}, 500),
    timeout: 20000 // TODO: decrease
  });
  })();

});

</script>

{% endblock %}