From 462bcc064e3ba1fce6de2748abe3d8240ccfcea1 Mon Sep 17 00:00:00 2001
From: Cesar Carvalho <cesaraugc@gmail.com>
Date: Fri, 13 Dec 2019 11:59:32 -0300
Subject: [PATCH] =?UTF-8?q?Fix=20indenta=C3=A7=C3=A3o=20da=20tela=20de=20p?=
 =?UTF-8?q?ainel?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sapl/templates/painel/index.html | 475 ++++++++++++++++---------------
 1 file changed, 238 insertions(+), 237 deletions(-)

diff --git a/sapl/templates/painel/index.html b/sapl/templates/painel/index.html
index 5f04ac359..bff482801 100644
--- a/sapl/templates/painel/index.html
+++ b/sapl/templates/painel/index.html
@@ -124,62 +124,42 @@
   {% endblock webpack_loader_chunks_js %}
 
   <script type="text/javascript">
-      $(document).ready(function() {
-
-         // As constantes decisões sobre a existência ou não do horário de verão,
-         // assim como que data de início e termino do mesmo, fizeram com que fosse necessário
-         // substituir a chamada a Date() por um esquema mais elaborado, onde se
-         // recupera o offset do UTC (-3 GMT, no caso de Brasília) e seta-se
-         // manualmente. Esta informação vem do servidor, desta forma não ficamos
-         // na dependência da atualização de browser, pois tanto o Date() em JS
-         // quanto as libs python (django.utils.timezone, datetime, pytz, etc)
-         // lêem do tzdata, que precisa ser atualizado toda vez que o governo
-         // brasileiro modifica alguma coisa relacionada ao horário de verão.
-         // Recuperando essa informação do servidor só teremos que atualizar as
-         // libs tzdata (Linux) e pytz (Python) uma vez. Além disso, o uso da
-         // biblioteca moment.js é recomendada, pois ela trata data e hora
-         // melhor que o Date() do JS.
-
-         $("#date").append(moment().format("DD/MM/YY"));
-
-         var offset = parseFloat({{ utc_offset }});
-
-         //TODO: replace by a fancy jQuery clock
-         function checkTime(i) {
-             if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
-                return i;
-         }
-
-         function startTime() {
-             var today = moment.utc().utcOffset(offset).format("HH:mm:ss");
-             $("#relogio").text(today)
-             var t = setTimeout(function(){
-                 startTime()
-             }, 500);
-         }
-         startTime();
-
-        function show_voto(voto) {
-            if (voto == "Sim"){
-                return '<font color="green"> Sim </font>'
-            }
-            else if (voto == "Não"){
-                return '<font color="red"> Não </font>'
-            }
-            return voto
-        }
+    //TODO: replace by a fancy jQuery clock
+    function checkTime(i) {
+      if (i<10) {i = "0" + i};  // add zero in front of numbers < 10
+        return i;
+    }
+
+    function startTime(offset) {
+      var today = moment.utc().utcOffset(offset).format("HH:mm:ss");
+      $("#relogio").text(today)
+      var t = setTimeout(function(){
+          startTime()
+      }, 500);
+    }
+
+    function show_voto(voto) {
+      if (voto == "Sim"){
+          return '<font color="green"> Sim </font>'
+      }
+      else if (voto == "Não"){
+          return '<font color="red"> Não </font>'
+      }
+      return voto
+    }
+
     function playAudioNumVezes(audio, times, ended) {
       if (times <= 0) {
-          return;
+        return;
       }
       let played = 0;
       audio.addEventListener("ended", function() {
-          played++;
-          if (played < times) {            
-              audio.play();
-          } else if (ended) {
-              ended();
-          }
+        played++;
+        if (played < times) {            
+          audio.play();
+        } else if (ended) {
+          ended();
+        }
       });
       audio.play();
     }
@@ -195,8 +175,26 @@
     }
 
     $(document).ready(function() {
-      //TODO: replace by a fancy jQuery clock
-      startTime();
+
+      // As constantes decisões sobre a existência ou não do horário de verão,
+      // assim como que data de início e termino do mesmo, fizeram com que fosse necessário
+      // substituir a chamada a Date() por um esquema mais elaborado, onde se
+      // recupera o offset do UTC (-3 GMT, no caso de Brasília) e seta-se
+      // manualmente. Esta informação vem do servidor, desta forma não ficamos
+      // na dependência da atualização de browser, pois tanto o Date() em JS
+      // quanto as libs python (django.utils.timezone, datetime, pytz, etc)
+      // lêem do tzdata, que precisa ser atualizado toda vez que o governo
+      // brasileiro modifica alguma coisa relacionada ao horário de verão.
+      // Recuperando essa informação do servidor só teremos que atualizar as
+      // libs tzdata (Linux) e pytz (Python) uma vez. Além disso, o uso da
+      // biblioteca moment.js é recomendada, pois ela trata data e hora
+      // melhor que o Date() do JS.
+
+      $("#date").append(moment().format("DD/MM/YY"));
+
+      var offset = parseFloat({{ utc_offset }});
+
+      startTime(offset);
 
       var audioAlertFinish = document.getElementById("audio");
 
@@ -238,203 +236,107 @@
 
       (function poll() {
         $.ajax({
-           url: "{% url 'sapl.painel:dados_painel' sessao_id %}",
-           type: "GET",
-           success: function(data) {
-              $("#sessao_plenaria").text(data["sessao_plenaria"])
-              $("#sessao_plenaria_data").text("Data Início: " + data["sessao_plenaria_data"])
-              $("#sessao_plenaria_hora_inicio").text("Hora Início: " + data["sessao_plenaria_hora_inicio"])
-              $("#sessao_solene_tema").text(data["tema_solene"])
-              if (data["status_painel"] == false) {
-                $("#message").text("PAINEL ENCONTRA-SE FECHADO");
-              } else {
-                $("#message").text("");
-              }
+          url: "{% url 'sapl.painel:dados_painel' sessao_id %}",
+          type: "GET",
+          success: function(data) {
+            $("#sessao_plenaria").text(data["sessao_plenaria"])
+            $("#sessao_plenaria_data").text("Data Início: " + data["sessao_plenaria_data"])
+            $("#sessao_plenaria_hora_inicio").text("Hora Início: " + data["sessao_plenaria_hora_inicio"])
+            $("#sessao_solene_tema").text(data["tema_solene"])
+            if (data["status_painel"] == false) {
+              $("#message").text("PAINEL ENCONTRA-SE FECHADO");
+            } else {
+              $("#message").text("");
+            }
 
-              if (data["sessao_solene"]){
-                $("#resultado_votacao_div").hide();
-                $("#obs_materia_div").hide();
-                $('#tema_solene_div').show();
-              }
+            if (data["sessao_solene"]){
+              $("#resultado_votacao_div").hide();
+              $("#obs_materia_div").hide();
+              $('#tema_solene_div').show();
+            }
 
-              if (data["brasao"] != null)
-                $("#logo-painel").attr("src", data["brasao"]);
-
-              var presentes = $("#parlamentares");
-              var votacao = $("#votacao");
-              var oradores = $("#orador")
-              $("#votacao").text('');
-              presentes.children().remove();
-              votacao.children().remove();
-              oradores.children().remove();
-
-              var oradores_list = data["oradores"];
-              var presentes_list = data["presentes"];
-
-              // Se painel está aberto
-              if (data["status_painel"]) {
-                presentes.append('<table id="parlamentares_list">');
-                $.each(presentes_list, function (index, parlamentar) {
-                  // Parlamentar já votou?
-                  if (parlamentar.voto){
-                    // Se a votação já foi finalizada, mostra todos os votos
-                    if (data['tipo_resultado'] && data['tipo_resultado'] != "Ainda não foi votada."){
-                      $('#parlamentares_list').append('<tr><td style="padding-right:20px; color:white" >' +
+            if (data["brasao"] != null)
+              $("#logo-painel").attr("src", data["brasao"]);
+
+            var presentes = $("#parlamentares");
+            var votacao = $("#votacao");
+            var oradores = $("#orador")
+            $("#votacao").text('');
+            presentes.children().remove();
+            votacao.children().remove();
+            oradores.children().remove();
+
+            var oradores_list = data["oradores"];
+            var presentes_list = data["presentes"];
+
+            // Se painel está aberto
+            if (data["status_painel"]) {
+              presentes.append('<table id="parlamentares_list">');
+              $.each(presentes_list, function (index, parlamentar) {
+                // Parlamentar já votou?
+                if (parlamentar.voto){
+                  // Se a votação já foi finalizada, mostra todos os votos
+                  if (data['tipo_resultado'] && data['tipo_resultado'] != "Ainda não foi votada."){
+                    $('#parlamentares_list').append('<tr><td style="padding-right:20px; color:white" >' +
+                        parlamentar.nome +
+                        '</td> <td style="padding-right:20px; color:white">' +
+                        parlamentar.partido + '</td> <td style="padding-right:20px; color:white">'
+                        + show_voto(parlamentar.voto) + '</td></tr>');
+                  }
+                  // Senão verifica a configuração desejada
+                  else{
+                    {% if painel_config.mostrar_votos_antecedencia %} 
+                      $('#parlamentares_list').append('<tr><td style="padding-right:20px; color:yellow" >' +
                           parlamentar.nome +
-                          '</td> <td style="padding-right:20px; color:white">' +
-                          parlamentar.partido + '</td> <td style="padding-right:20px; color:white">'
+                          '</td> <td style="padding-right:20px; color:yellow">' +
+                          parlamentar.partido + '</td> <td style="padding-right:20px; color:yellow">'
                           + show_voto(parlamentar.voto) + '</td></tr>');
-                    }
-                    // Senão verifica a configuração desejada
-                    else{
-                      {% if painel_config.mostrar_votos_antecedencia %} 
-                        $('#parlamentares_list').append('<tr><td style="padding-right:20px; color:yellow" >' +
-                            parlamentar.nome +
-                            '</td> <td style="padding-right:20px; color:yellow">' +
-                            parlamentar.partido + '</td> <td style="padding-right:20px; color:yellow">'
-                            + show_voto(parlamentar.voto) + '</td></tr>');
-                      {% else %}
-                        $('#parlamentares_list').append('<tr><td style="padding-right:20px; color:yellow" >' +
-                            parlamentar.nome +
-                            '</td> <td style="padding-right:20px; color:yellow">' +
-                            parlamentar.partido + '</td> <td style="padding-right:20px; color:yellow">'
-                            + '</td></tr>');
-                      {% endif %}
-                    }
-                  } else{
-                    $('#parlamentares_list').append('<tr> <td style="padding-right:20px">' +
-                        parlamentar.nome +
-                        '</td> <td style="padding-right:20px">' +
-                        parlamentar.partido + '</td> <td style="padding-right:20px">'
-                        + show_voto(parlamentar.voto) + '</td></tr>')
+                    {% else %}
+                      $('#parlamentares_list').append('<tr><td style="padding-right:20px; color:yellow" >' +
+                          parlamentar.nome +
+                          '</td> <td style="padding-right:20px; color:yellow">' +
+                          parlamentar.partido + '</td> <td style="padding-right:20px; color:yellow">'
+                          + '</td></tr>');
+                    {% endif %}
                   }
-                });
-
-                presentes.append('</table>')
-
-                if (data["oradores"].length > 0){
-                  $('#aparecer_oradores').show();
-                  oradores.append('<table id="oradores_list">');
-                  $.each(oradores_list, function (index, orador) {
-                    $('#oradores_list').append('<tr><td style="padding-right:20px; color:white" >' +
-                        orador.numero + 'º &nbsp' +
-                        orador.nome +'</td></tr>')
-                  });
-                  oradores.append('</table>');
-                } else {
-                  $('#aparecer_oradores').hide();
-                }
-              } else{
-                  presentes.append('<span style="color:white" id="parlamentares_list">');
-                  $('#parlamentares_list').append(
-                      '<center>A listagem de parlamentares só aparecerá quando o painel estiver aberto.</center>')
-                  presentes.append('</span>');
-
-                  oradores.append('<span style="color:white" id="oradores_list">');
-                  $('#oradores_list').append(
-                      '<center>A listagem de oradores só aparecerá quando o painel estiver aberto.</center>')
-                  oradores.append('</span>');
-
-                  votacao.append('<span id="votacao">');
-                  $("#votacao").append('<center>A votação só aparecerá quando o painel estiver aberto</center>');
-                  votacao.append('</span>');
-              }
-
-              if(data["status_painel"]){
-                if (data['materia_legislativa_texto']){
-                  var votacao = $("#votacao");
-
-                  votacao.append("<li>Sim: " + data["numero_votos_sim"] + "</li>");
-                  votacao.append("<li>Não: " + data["numero_votos_nao"] + "</li>");
-                  votacao.append("<li>Abstenções: " + data["numero_abstencoes"] + "</li>");
-                  votacao.append("<li>Presentes: " + data["num_presentes"] + "</li>");
-                  votacao.append("<li>Total votos: " + data["total_votos"] + "</li>");
-                }
+                } 
                 else{
-                    $("#votacao").append('<center>Não há votação, pois não há nenhuma matéria aberta ou já votada.</center>');
+                  $('#parlamentares_list').append('<tr> <td style="padding-right:20px">' +
+                      parlamentar.nome +
+                      '</td> <td style="padding-right:20px">' +
+                      parlamentar.partido + '</td> <td style="padding-right:20px">'
+                      + show_voto(parlamentar.voto) + '</td></tr>')
                 }
-              }
-
-
-              // 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] = ''
-                }
+              presentes.append('</table>')
 
-                // 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{
-                    $('#cronometro_' + ids[i]).runner(status_cronometros[i]);
-                  }
-                  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();
-                }
-                
+              if (data["oradores"].length > 0){
+                $('#aparecer_oradores').show();
+                oradores.append('<table id="oradores_list">');
+                $.each(oradores_list, function (index, orador) {
+                  $('#oradores_list').append('<tr><td style="padding-right:20px; color:white" >' +
+                      orador.numero + 'º &nbsp' +
+                      orador.nome +'</td></tr>')
+                });
+                oradores.append('</table>');
+              } else {
+                $('#aparecer_oradores').hide();
               }
 
-              if(data['sessao_finalizada']){
-                $("#obs_materia_div").hide();
-                $("#resultado_votacao_div").hide();
-              }
-              else if (data['materia_legislativa_texto']){
-                if (data["status_painel"] == true){
-                  $("#materia_legislativa_texto").text(data["materia_legislativa_texto"]);
-                } else{
-                  $("#materia_legislativa_texto").text('A Matéria em votação só aparecerá quando o painel estiver aberto');
-                }
+              if (data['materia_legislativa_texto']){
+                var votacao = $("#votacao");
+                votacao.append("<li>Sim: " + data["numero_votos_sim"] + "</li>");
+                votacao.append("<li>Não: " + data["numero_votos_nao"] + "</li>");
+                votacao.append("<li>Abstenções: " + data["numero_abstencoes"] + "</li>");
+                votacao.append("<li>Presentes: " + data["num_presentes"] + "</li>");
+                votacao.append("<li>Total votos: " + data["total_votos"] + "</li>");
               }
               else{
-                $("#materia_legislativa_texto").text('Não há nenhuma matéria votada ou para votação.');
+                  $("#votacao").append('<center>Não há votação, pois não há nenhuma matéria aberta ou já votada.</center>');
               }
 
-              if (data['observacao_materia'] && data["status_painel"] == true){
-                var texto = data['observacao_materia'];
-                if(texto.length > 151) {
-                  $("#observacao_materia").text(texto.substr(0, 145).concat('(...)'));
-                } else{
-                    $("#observacao_materia").text(texto);
-                }
-              } else{
-                $("#observacao_materia").text('');
-              }
-
-              if (data['tipo_resultado'] && data['status_painel'] == true){
+              if (data['tipo_resultado']){
                 if(data['tipo_votacao'] != 'Leitura' && !data['sessao_finalizada'] && !data["sessao_solene"]){
                   $("#resultado_votacao").css("color", "#45919D");
                   $("#mat_em_votacao").text("Matéria em Votação");
@@ -447,7 +349,6 @@
                 $("#resultado_votacao").text(data["tipo_resultado"]);
 
                 var resultado_votacao_upper = $("#resultado_votacao").text().toUpperCase();
-                console.log(resultado_votacao_upper, data['tipo_resultado']);
                 if (resultado_votacao_upper.search("APROV") != -1){
                   $("#resultado_votacao").css("color", "green");
                   $("#mat_em_votacao").text("Matéria Votada");
@@ -460,7 +361,25 @@
                   $("#mat_em_votacao").text("Matéria Lida");
                 }
               }
-              else{
+            } 
+            
+            // Painel fechado
+            else{
+              presentes.append('<span style="color:white" id="parlamentares_list">');
+              $('#parlamentares_list').append(
+                  '<center>A listagem de parlamentares só aparecerá quando o painel estiver aberto.</center>')
+              presentes.append('</span>');
+
+              oradores.append('<span style="color:white" id="oradores_list">');
+              $('#oradores_list').append(
+                  '<center>A listagem de oradores só aparecerá quando o painel estiver aberto.</center>')
+              oradores.append('</span>');
+
+              votacao.append('<span id="votacao">');
+              $("#votacao").append('<center>A votação só aparecerá quando o painel estiver aberto</center>');
+              votacao.append('</span>');
+
+              if(!data['tipo_resultado']){
                 $("#resultado_votacao").text('');
                 if(data['tipo_votacao'] != 'Leitura')
                   $("#mat_em_votacao").text("Matéria em Votação");
@@ -468,6 +387,88 @@
                   $("#mat_em_votacao").text("Matéria em Leitura");
                 }
               }
+            }
+
+
+            // 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{
+                  $('#cronometro_' + ids[i]).runner(status_cronometros[i]);
+                }
+                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();
+              }
+            }
+
+            if(data['sessao_finalizada']){
+              $("#obs_materia_div").hide();
+              $("#resultado_votacao_div").hide();
+            }
+            else if (data['materia_legislativa_texto']){
+              if (data["status_painel"] == true){
+                $("#materia_legislativa_texto").text(data["materia_legislativa_texto"]);
+              } 
+              else{
+                $("#materia_legislativa_texto").text('A Matéria em votação só aparecerá quando o painel estiver aberto');
+              }
+            }
+            else{
+              $("#materia_legislativa_texto").text('Não há nenhuma matéria votada ou para votação.');
+            }
+
+            if (data['observacao_materia'] && data["status_painel"] == true){
+              var texto = data['observacao_materia'];
+              if(texto.length > 151) {
+                $("#observacao_materia").text(texto.substr(0, 145).concat('(...)'));
+              } 
+              else{
+                $("#observacao_materia").text(texto);
+              }
+            } 
+            else{
+              $("#observacao_materia").text('');
+            }
           },
           error: function(err) {
             console.error(err);