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-6"><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-3"><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-3"><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 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);
}

$(document).ready(function(){
  let pk_sessao = {{root_pk}};
  let botao_abrir = $('#id_abrir_painel');
  let botao_fechar = $('#id_fechar_painel');

  $.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();
        }
    },
  });

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

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

    $('#cronometro_' + "{{cron.id}}").runner({
      autostart: false,
      countdown: true,
      startAt: {{cron.duracao_cronometro|duration_to_seconds}} * 1000,
      stopAt: 0,
      milliseconds: false
    }).on('runnerFinish', function(eventObject, info){
      $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'stop' } );
      audioAlertFinish.play();
      $('#cronometro_' + "{{cron.id}}" + '_Reset').show();
      $('#cronometro_' + "{{cron.id}}").runner('stop');
      $('#cronometro_' + "{{cron.id}}" + '_Start').text('Iniciar');
    })

    $('#cronometro_' + "{{cron.id}}" + '_Start').click(function() {
      if ($('#cronometro_' + "{{cron.id}}" + '_Start').text() == 'Iniciar'){
        $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'start' } );

        $('#cronometro_' + "{{cron.id}}" + '_Reset').hide();
        $('#cronometro_' + "{{cron.id}}").runner('start');
        $('#cronometro_' + "{{cron.id}}" + '_Start').text('Parar');
      } else{
        $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'stop' } );

        $('#cronometro_' + "{{cron.id}}" + '_Reset').show();
        $('#cronometro_' + "{{cron.id}}").runner('stop');
        $('#cronometro_' + "{{cron.id}}" + '_Start').text('Iniciar');
      }
    });

    $('#cronometro_' + "{{cron.id}}" + '_Reset').click(function() {

      $.get('/painel/cronometro', { tipo: 'cronometro_' + "{{cron.id}}", action: 'reset' } );

      $('#cronometro_' + "{{cron.id}}").runner('stop');
      $('#cronometro_' + "{{cron.id}}").runner('reset');
    });    
  {% endfor %}

});

</script>

{% endblock %}