Merge bb1de80a88 into a15603feb0

frontend/src/__apps/painel/main.js

@@ -1 +1,267 @@
 import './scss/painel.scss'
+import Vue from 'vue'
+import axios from 'axios'
+
+axios.defaults.xsrfCookieName = 'csrftoken'
+axios.defaults.xsrfHeaderName = 'X-CSRFToken'
+
+//  Variaveis dos cronometros
+var crono = 0
+var time = null
+var timeEnd = null
+var audioAlertFinish = document.getElementById('audio')
+var cronometroStart = []
+
+const v = new Vue({ // eslint-disable-line
+  delimiters: ['[[', ']]'],
+  el: '#app-painel',
+  data () {
+    return {
+      message: 'Hello VueJUS', // TODO: remove when porting to VueJS is done
+      polling: null,
+      painel_aberto: true,
+      sessao_plenaria: '',
+      sessao_plenaria_data: '',
+      sessao_plenaria_hora_inicio: '',
+      brasao: '',
+      cronometro_discurso: '',
+      cronometro_aparte: '',
+      cronometro_ordem: '',
+      cronometro_consideracoes: '',
+      sessao_solene: false,
+      sessao_solene_tema: '',
+      presentes: [],
+      oradores: [],
+      numero_votos_sim: 0,
+      numero_votos_nao: 0,
+      numero_abstencoes: 0,
+      num_presentes: 0,
+      total_votos: 0,
+      sessao_finalizada: true,
+      materia_legislativa_texto: '',
+      materia_legislativa_ementa: '',
+      observacao_materia: '',
+      mat_em_votacao: '',
+      resultado_votacao_css: '',
+      tipo_resultado: '',
+      tipo_votacao: '',
+      running: 0
+    }
+  },
+  methods: {
+    msgMateria () {
+      if (this.tipo_resultado && this.painel_aberto) {
+        if (this.tipo_votacao !== 'Leitura' && !this.sessao_finalizada && !this.sessao_solene) {
+          this.resultado_votacao_css = 'color: #45919D'
+          this.mat_em_votacao = 'Matéria em Votação'
+        } else {
+          this.resultado_votacao_css = 'color: #45919D'
+          this.mat_em_votacao = 'Matéria em Leitura'
+        }
+
+        this.resultado_votacao = this.tipo_resultado
+
+        var resultado_votacao_upper = this.resultado_votacao.toUpperCase()
+
+        if (resultado_votacao_upper.search('APROV') !== -1) {
+          this.resultado_votacao_css = 'color: #7CFC00'
+          this.mat_em_votacao = 'Matéria Votada'
+        } else if (resultado_votacao_upper.search('REJEIT') !== -1) {
+          this.resultado_votacao_css = 'color: red'
+          this.mat_em_votacao = 'Matéria Votada'
+        } else if (resultado_votacao_upper.search('LIDA') !== -1) {
+          this.mat_em_votacao = 'Matéria Lida'
+        }
+      } else {
+        this.resultado_votacao = ''
+        if (this.tipo_votacao !== 'Leitura') {
+          this.mat_em_votacao = 'Matéria em Votação'
+        } else {
+          this.mat_em_votacao = 'Matéria em Leitura'
+        }
+      }
+    },
+    atribuiColor (parlamentar) {
+      var color = 'white'
+      if (parlamentar.voto === 'Voto Informado' || parlamentar.voto === '') {
+        color = 'yellow'
+      } else {
+        if (parlamentar.voto === 'Sim') {
+          color = 'green'
+        } else if (parlamentar.voto === 'Não') {
+          color = 'red'
+        }
+      }
+      parlamentar.color = color
+    },
+    capObservacao (texto) {
+      if (texto && texto.length > 151) {
+        return texto.substr(0, 145).concat('(...)')
+      }
+      return texto
+    },
+    converterUrl (url) {
+      url = url.slice(-(url.length - url.lastIndexOf('/')))
+      url = '/painel' + url + '/dados'
+      return url
+    },
+    fetchData () {
+      // TODO: how to get no hardcoded URL?
+      $.get(this.converterUrl(window.location.pathname), function (response) {
+        this.brasao = response.brasao
+        this.painel_aberto = response.status_painel
+        this.sessao_finalizada = response.sessao_finalizada
+        this.sessao_plenaria = response.sessao_plenaria
+        this.sessao_plenaria_data = 'Data Início: ' + response.sessao_plenaria_data
+        this.sessao_plenaria_hora_inicio = 'Hora Início: ' + response.sessao_plenaria_hora_inicio
+        this.sessao_solene = response.sessao_solene
+        this.sessao_solene_tema = response.sessao_solene_tema
+
+        this.presentes = response.presentes
+        this.presentes.forEach(parlamentar => {
+          this.atribuiColor(parlamentar)
+        })
+
+        this.oradores = response.oradores
+
+        this.materia_legislativa_texto = response.materia_legislativa_texto
+        this.numero_votos_sim = response.numero_votos_sim
+        this.numero_votos_nao = response.numero_votos_nao
+        this.numero_abstencoes = response.numero_abstencoes
+        this.num_presentes = response.num_presentes
+        this.total_votos = response.total_votos
+
+        this.materia_legislativa_texto = response.materia_legislativa_texto
+        this.materia_legislativa_ementa = response.materia_legislativa_ementa
+        this.observacao_materia = this.capObservacao(response.observacao_materia)
+
+        this.tipo_resultado = response.tipo_resultado
+        this.tipo_votacao = response.tipo_votacao
+        this.mat_em_votacao = this.msgMateria()
+
+        // Cronometros
+        cronometroStart[0] = response.cronometro_discurso
+        cronometroStart[1] = response.cronometro_aparte
+        cronometroStart[2] = response.cronometro_ordem
+        cronometroStart[3] = response.cronometro_consideracoes
+
+        if (time === null) {
+          // Pegar data atual
+          this.cronometro_discurso = new Date()
+          this.cronometro_aparte = this.cronometro_discurso
+          this.cronometro_ordem = this.cronometro_discurso
+          this.cronometro_consideracoes = this.cronometro_discurso
+
+          // Setar cada Cronometro
+          var temp = new Date()
+          temp.setSeconds(this.cronometro_discurso.getSeconds() + cronometroStart[0])
+          var res = new Date(temp - this.cronometro_discurso)
+          this.cronometro_discurso = this.formatTime(res)
+
+          temp = new Date()
+          temp.setSeconds(this.cronometro_aparte.getSeconds() + cronometroStart[1])
+          res = new Date(temp - this.cronometro_aparte)
+          this.cronometro_aparte = this.formatTime(res)
+
+          temp = new Date()
+          temp.setSeconds(this.cronometro_ordem.getSeconds() + cronometroStart[2])
+          res = new Date(temp - this.cronometro_ordem)
+          this.cronometro_ordem = this.formatTime(res)
+
+          temp = new Date()
+          temp.setSeconds(this.cronometro_consideracoes.getSeconds() + cronometroStart[3])
+          res = new Date(temp - this.cronometro_consideracoes)
+          this.cronometro_consideracoes = this.formatTime(res)
+        }
+      }.bind(this))
+    },
+    formatTime (time) {
+      var tempo = '00:' + time.getMinutes().toLocaleString('en-US', {
+        minimumIntegerDigits: 2,
+        useGrouping: false
+      }) + ':' + time.getSeconds().toLocaleString('en-US', {
+        minimumIntegerDigits: 2,
+        useGrouping: false
+      })
+      return tempo
+    },
+    stop: function stop (crono) {
+      if (crono === 5) {
+        audioAlertFinish.play()
+      }
+
+      this.running = 0
+      clearInterval(this.started)
+      this.stopped = setInterval(() => {
+        this.timeStopped()
+      }, 100)
+    },
+    timeStopped () {
+      timeEnd.setMilliseconds(timeEnd.getMilliseconds() + 100)
+    },
+    reset: function reset () {
+      this.running = 0
+      time = null
+      clearInterval(this.started)
+      clearInterval(this.stopped)
+    },
+    clockRunning (crono) {
+      var now = new Date()
+      time = new Date(timeEnd - now)
+
+      // Definir propriamento o tempo
+      time.setHours(timeEnd.getHours() - now.getHours())
+
+      if (timeEnd > now) {
+        if (crono === 1) {
+          this.cronometro_discurso = this.formatTime(time)
+        } else if (crono === 2) {
+          this.cronometro_aparte = this.formatTime(time)
+        } else if (crono === 3) {
+          this.cronometro_ordem = this.formatTime(time)
+        } else {
+          this.cronometro_consideracoes = this.formatTime(time)
+        }
+      } else {
+        audioAlertFinish.play()
+        this.alert = setTimeout(() => {
+          this.reset()
+        }, 5000)
+      }
+    },
+    start: function startStopWatch (temp_crono) {
+      if (this.running !== 0) return
+
+      crono = temp_crono
+      if (time === null) {
+        time = cronometroStart[crono - 1]
+        console.log(time)
+        timeEnd = new Date()
+        timeEnd.setSeconds(timeEnd.getSeconds() + time)
+      } else {
+        clearInterval(this.stopped)
+      }
+      this.running = crono
+
+      this.started = setInterval(() => {
+        this.clockRunning(crono)
+      }, 100)
+    },
+    pollData () {
+      this.fetchData()
+
+      this.polling = setInterval(() => {
+        console.info('Fetching data from backend')
+        this.fetchData()
+      }, 100)
+    }
+  },
+  beforeDestroy () {
+    console.info('Destroying polling.')
+    clearInterval(this.polling)
+  },
+  created () {
+    console.info('Start polling data...')
+    this.pollData()
+  }
+})

sapl/painel/views.py

@@ -352,6 +352,18 @@ def get_cronometro_status(request, name):
         cronometro = ''
     return cronometro
 
+def get_cronometro_value(request, name):
+    if name == 'discurso':
+        result = ConfiguracoesAplicacao.objects.first().cronometro_discurso
+    if name == 'aparte':
+        result = ConfiguracoesAplicacao.objects.first().cronometro_aparte
+    if name == 'ordem':
+        result = ConfiguracoesAplicacao.objects.first().cronometro_ordem
+    if name == 'consideracoes':
+        result = ConfiguracoesAplicacao.objects.first().cronometro_consideracoes
+
+    return result.total_seconds()
+
 
 def get_materia_aberta(pk):
     return OrdemDia.objects.filter(
@@ -558,10 +570,10 @@ def get_dados_painel(request, pk):
         'sessao_solene': sessao.tipo.nome == "Solene",
         'sessao_finalizada': sessao.finalizada,
         'tema_solene': sessao.tema_solene,
-        'cronometro_aparte': get_cronometro_status(request, 'aparte'),
+        'cronometro_aparte': get_cronometro_value(request, 'aparte'),
-        'cronometro_discurso': get_cronometro_status(request, 'discurso'),
+        'cronometro_discurso': get_cronometro_value(request, 'discurso'),
-        'cronometro_ordem': get_cronometro_status(request, 'ordem'),
+        'cronometro_ordem': get_cronometro_value(request, 'ordem'),
-        'cronometro_consideracoes': get_cronometro_status(request, 'consideracoes'),
+        'cronometro_consideracoes': get_cronometro_value(request, 'consideracoes'),
         'status_painel': sessao.painel_aberto,
         'brasao': brasao
     }

sapl/templates/painel/index.html

@@ -1,495 +1,231 @@
 {% load i18n %}
 {% load common_tags %}
+{% load staticfiles %}
 
 {% load render_bundle from webpack_loader %}
 {% load webpack_static from webpack_loader %}
-
-<!DOCTYPE HTML>
 <!--[if IE 8]> <html class="no-js lt-ie9" lang="pt-br"> <![endif]-->
 <!--[if gt IE 8]><!-->
 <html lang="pt-br">
-<!--<![endif]-->
+    <!--<![endif]-->
-  <head>
+    <head>
-    <meta charset="UTF-8">
+        <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- TODO: does it need this head_title here? -->
+        <!-- TODO: does it need this head_title here? -->
-    <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
+        <title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
-    
+           
-      {% block webpack_loader_css %}
+        {% block webpack_loader_css %}
-        {% render_chunk_vendors 'css' %}
+            {% render_chunk_vendors 'css' %}
-        {% render_bundle  'global' 'css' %}
+            {% render_bundle  'global' 'css' %}
-        {% render_bundle  'painel' 'css' %}
+            {% render_bundle  'painel' 'css' %}
-      {% endblock webpack_loader_css %}
+        {% endblock webpack_loader_css %}
-
+        
-
+        <style type="text/css">
-    <style type="text/css">
+            html, body {
-        html, body {
+                max-width: 100%;
-            max-width: 100%;
+                overflow-x: hidden;
-            overflow-x: hidden;
+            }
-        }
+            @media screen {
-      @media screen {
+                ul, li {
-        ul, li {
+                    list-style-type: none;
-          list-style-type: none;
+                }
-        }
+            }
-      }
+        </style>
-    </style>
+    </head>
-  </head>
+    <body class="painel-principal">
-  <body class="painel-principal">
+      <div id="app-painel"> <!-- app painel -->
-      <audio type="hidden" id="audio" src="{% webpack_static 'audio/ring.mp3' %}"></audio>
+        <audio type="hidden" id="audio" src="{% webpack_static 'audio/ring.mp3' %}"></audio>
-
+
-      <div class="d-flex justify-content-center">
+        <div class="row justify-content-center">
-        <h1 id="sessao_plenaria" class="title text-title"></h1>
+          <img src="{{ MEDIA_URL }}{{ logotipo }}"
-      </div>
+            alt="Logo" class="img-responsive" style="height: 15vh"/>
-      <div class="row ">
-        <div class="col text-center">
-          <span id="sessao_plenaria_data" class="text-value"></span>
-        </div> 
-        <div class="col text-center">
-          <span id="sessao_plenaria_hora_inicio" class="text-value"></span>
         </div>
-      </div>    
+        
-
+        <div class="d-flex justify-content-center">
-      <div class="row justify-content-center">
+          <h1 id="sessao_plenaria" class="title text-title">[[ sessao_plenaria ]]</h1>
-        <div class="col-1">
-          <img src="" id="logo-painel" class="logo-painel" alt=""/>
         </div>
-      </div>
+        
-
+        <div class="row">
-      <div class="row justify-content-center">
+          <div class="col-md-5 text-right">
-        <h2 class="text-danger"><span id="message"></span></h2>
+            <span id="sessao_plenaria_data" class="text-value">[[ sessao_plenaria_data ]]</span>
-      </div>
+          </div> 
-
+          <div class="col-md-7 text-center">
-      <div class="row">
+            <span id="sessao_plenaria_hora_inicio" class="text-value">[[ sessao_plenaria_hora_inicio ]]</span>
-        <div class="col text-center"><span class="text-value data-hora" id="date"></span></div>
-        <div class="col text-center"><span class="text-value data-hora" id="relogio"></span></div>
-      </div>
-
-
-      <div class="">
-        <div class="d-flex justify-content-start">
-          <div class="col-md-4">
-            <div class="text-center painel">   
-              <h2 class="text-subtitle">Parlamentares</h2>   
-              <span id="parlamentares" class="text-value text-center"></span>
-            </div>
           </div>
-          <div class="d-flex col-md-8 painels">
+        </div>
-            <div class="col-md-6 text-center painel" id="aparecer_oradores">  
+
-              <h2 class="text-subtitle">Oradores</h2>  
+        <div class="row justify-content-center" style="margin-bottom: 50px; margin-top: 50px;">
-              <span id="orador"></span>     
+          <h2 class="text-danger"><span v-if="!painel_aberto">PAINEL ENCONTRA-SE FECHADO</span></h2>
-            </div>
+        </div>
+        
+        <div class="row">
+          <div class="col-md-5 text-right"><span class="text-value data-hora" id="date"></span></div>
+          <div class="col-md-7 text-center" style="margin-top:10px"><span class="text-value data-hora" id="relogio"></span></div>
+        </div>
 
-            <div class="col-md-6 text-center painel">  
+        <div style="margin-bottom: 50px;"> <!-- outer div -->
-              <h2 class="text-subtitle">Cronômetros</h2>
+          <div class="d-flex justify-content-start">
-                <div class="text-value">
+            <div class="col-md-2"></div>
-                Discurso: <span id="cronometro_discurso"></span><br>
+            <div class="col-md-3"> <!-- Lista parlamentares -->
-                Aparte: <span id="cronometro_aparte"></span><br>
+              <div class="text center painel">
-                Questão de Ordem: <span id="cronometro_ordem"></span><br>
+                <h2 class="text-subtitle">Parlamentares</h2>
-                Considerações Finais: <span id="cronometro_consideracoes"></span>
+                <div v-if="painel_aberto"> <!-- v-if -->
+                  <table>
+                    <tbody v-for="p in presentes">
+                      <tr>
+                        <td style="padding-right: 20px;" class="d-flex justify-content-start" v-bind:style="{ color: p.color }">
+                          [[p.nome]]
+                        </td>
+                        <td style="padding-right: 20px;" v-bind:style="{ color: p.color }">
+                          [[p.partido]]
+                        </td>
+                        <td style="padding-right: 20px;" v-if="p.voto !== ''" v-bind:style="{ color: p.color }">
+                          [[p.voto]]
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div> <!-- v-if -->
+                <div v-else> <!-- v-else -->
+                  <span style="color:white">
+                    <center>A listagem de parlamentares só aparecerá quando o painel estiver aberto.</center>
+                  </span>
+                </div> <!-- v-if -->
+              </div>
+            </div> <!-- Lista parlamentares -->
+            <div class="d-flex col-md-7 painels justify-content-center">
+              <div v-if="oradores.length > 0" class="text-center painel" id="aparecer_oradores">
+                <h2 class="text-subtitle">Oradores</h2>
+                <div v-if="painel_aberto"> <!-- v-if Lista de oradores-->
+                  <table>
+                    <tbody v-for="o in oradores">
+                      <tr class="d-flex justify-content-center">
+                        <td style="padding-right: 20px; color: white; font-size: 20px;">
+                          [[ o.numero]]º &nbsp[[o.nome]]
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div> <!--v-if Lista de oradores-->
+                <div v-else>
+                  <span style="color:white">
+                      <center>A listagem de oradores só aparecerá quando o painel estiver aberto.</center>
+                  </span>
+                </div>
               </div>
             </div>
-            
+          </div>
-            <div class="col-md-6 text-center painel" id="resultado_votacao_div">      
+        </div> <!-- outer div -->
-              <h2 class="text-subtitle">Resultado</h2>   
+        <div class="row"> <!-- row -->
-              <span id="votacao" class="text-value"></span> 
+          <div class="col-md-2"></div>
-              <h2><span id="resultado_votacao" lass="text-title"></span>
+          <div class="col-md-4 text-left painel">
-            </div>
+            <h2 class="text-subtitle">Cronômetros</h2>
-
+            <div class="text-value">
-            <div class="col-md-6 text-center painel" id="obs_materia_div">      
+              Discurso:<span id='discurso' style="margin-right: 20px;">[[ cronometro_discurso ]]</span><span v-if="painel_aberto">
-              <h2 class="text-subtitle" id="mat_em_votacao">Matéria em Votação</h2>   
+                <span v-if='running != 1'><button class="btn btn-success" v-on:click="start (1)">Iniciar</button><button style="margin-left: 10px;" class="btn btn-success" v-on:click="reset">Reiniciar</button></span>
-              <span id="materia_legislativa_texto" class="text-value"></span>
+                <span v-else><button class="btn btn-danger" v-on:click="stop(1)">Parar</button></span>
-              <br>
+              </span><br>
-              <span id="materia_legislativa_ementa" class="text-value"></span>
+
-              <br>
+              Aparte:<span id='discurso' style="margin-right: 20px;">[[ cronometro_aparte ]]</span><span v-if="painel_aberto">
-              <span id="observacao_materia" class="text-value"></span>
+              <span v-if='running != 2'><button class="btn btn-success" v-on:click="start (2)">Iniciar</button><button style="margin-left: 10px;" class="btn btn-success" v-on:click="reset">Reiniciar</button></span>
+              <span v-else><button class="btn btn-danger" v-on:click="stop(2)">Parar</button></span>
+              </span><br>
+              
+              Questão de Ordem: <span id='discurso' style="margin-right: 20px;">[[ cronometro_ordem ]]</span><span v-if="painel_aberto">
+              <span v-if='running != 3'><button class="btn btn-success" v-on:click="start (3)">Iniciar</button><button style="margin-left: 10px;" class="btn btn-success" v-on:click="reset">Reiniciar</button></span>
+              <span v-else><button class="btn btn-danger" v-on:click="stop(3)">Parar</button></span>
+              </span><br>
+              
+              Considerações Finais: <span id='discurso' style="margin-right: 20px;">[[ cronometro_consideracoes ]]</span><span v-if="painel_aberto">
+              <span v-if='running != 4'><button class="btn btn-success" v-on:click="start (4)">Iniciar</button><button style="margin-left: 10px;" class="btn btn-success" v-on:click="reset">Reiniciar</button></span>
+              <span v-else><button class="btn btn-danger" v-on:click="stop(4)">Parar</button></span>
+              </span>
             </div>
-
+          </div>
-            <div class="col-md-6 text-center painel" id="tema_solene_div" style="display: none">      
+          <div v-if="sessao_solene">
-              <h2 class="text-subtitle">Tema da Sessão Solene</h2>   
+            <div class="col-md-4 text-center painel" id="tema_solene_div">
-                <span id="sessao_solene_tema" class="text-value"></span>
+                <h2 class="text-subtitle">Tema da Sessão Solene</h2>
+                <span id="sessao_solene_tema" class="text-value">[[ sessao_solene_tema ]]</span>
             </div>
           </div>
+          <div v-else class="col-md-5" style="margin-top: -45vh; margin-left: 51vw; position: absolute;">
+            <div v-if="painel_aberto">
+                <div v-if="!sessao_finalizada" class="text-center painel" id="resultado_votacao_div">
+                    <h2 class="text-subtitle" style="margin-left: -50px; margin-top: 50px;">Resultado</h2>
+                    <div v-if="materia_legislativa_texto">
+                        <span id="votacao" class="text-value">
+                            <li>Sim: [[ numero_votos_sim ]]</li>
+                            <li>Não: [[ numero_votos_nao ]]</li>
+                            <li>Abstenções: [[ numero_abstencoes ]]</li>
+                            <li>Presentes: [[ num_presentes ]]</li>
+                            <li>Total votos: [[ total_votos ]]</li>
+                        </span>
+                        <h2><span id="resultado_votacao" v-bind:style="resultado_votacao_css" lass="text-title">[[ tipo_resultado ]]</span></h2>
+                    </div>
+                    <div v-else>
+                        <center>Não há votação, pois não há nenhuma matéria aberta ou já votada.</center>
+                    </div>
+                </div>
+                <div v-if="painel_aberto">
+                    <div v-if="!sessao_finalizada" class="text-center painel" id="obs_materia_div">
+                        <h2 class="text-subtitle" id="mat_em_votacao">[[ mat_em_votacao ]]</h2>
+                        <div v-if="materia_legislativa_texto !== ''">
+                        <span id="materia_legislativa_texto" class="text-value">[[ materia_legislativa_texto ]] </span>
+                          <br>
+                          <span id="materia_legislativa_ementa" class="text-value">[[ materia_legislativa_ementa ]]</span>
+                          <br>
+                          <span id="observacao_materia" class="text-value"> [[ observacao_materia ]]</span>
+                        </div>
+                        <div v-else>
+                            <span class="text-value">Não há nenhuma matéria votada ou para votação.</span>
+                        </div>
+                    </div>
+                </div>
+                <div v-else>
+                    <span class="text-value">A Matéria em votação só aparecerá quando o painel estiver aberto</span>
+                </div>
+            </div>
+            <div v-else>
+                <div class="text-center painel">
+                    <h2 class="text-subtitle" style="margin-top: 50px;">Resultado</h2>
+                    <span style="color:white">
+                        <h1>A votação só aparecerá quando o painel estiver aberto</h1>
+                    </span>
+                    </div>
+              </div>
         </div>
-      </div>
+        </div> <!-- row -->
-      </div>
+      </div> <!-- app painel -->
-  </body>
+    </body>
-
-  {% block webpack_loader_js %}
-    {% render_chunk_vendors 'js' %}
-    {% render_bundle  'global' 'js' %}  
-    {% render_bundle  'painel' 'js' %}      
-  {% endblock webpack_loader_js %}
 
-  {% block webpack_loader_chunks_js %}
+    {% block webpack_loader_js %}
-  {% endblock webpack_loader_chunks_js %}
+      {% render_chunk_vendors 'js' %}
+      {% render_bundle  'global' 'js' %}  
+      {% render_bundle  'painel' 'js' %}      
+    {% endblock webpack_loader_js %}
 
-  <script type="text/javascript">
+    {% block webpack_loader_chunks_js %}
+    {% 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,
+      // 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
+      // 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
+      // 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
+      // 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
+      // 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
+      // na dependência da atualização de browser, pois tanto o Date() em JS
-         // quanto as libs python (django.utils.timezone, datetime, pytz, etc)
+      // quanto as libs python (django.utils.timezone, datetime, pytz, etc)
-         // lêem do tzdata, que precisa ser atualizado toda vez que o governo
+      // lêem do tzdata, que precisa ser atualizado toda vez que o governo
-         // brasileiro modifica alguma coisa relacionada ao horário de verão.
+      // brasileiro modifica alguma coisa relacionada ao horário de verão.
-         // Recuperando essa informação do servidor só teremos que atualizar as
+      // 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
+      // libs tzdata (Linux) e pytz (Python) uma vez. Além disso, o uso da
-         // biblioteca moment.js é recomendada, pois ela trata data e hora
+      // biblioteca moment.js é recomendada, pois ela trata data e hora
-         // melhor que o Date() do JS.
+      // melhor que o Date() do JS.
-
+
-         $("#date").append(moment().format("DD/MM/YY"));
+      $("#date").append(moment().format("DD/MM/YY"));
-
+
-         var offset = parseFloat({{ utc_offset }});
+      })
-
+    </script>
-         //TODO: replace by a fancy jQuery clock
+</html>
-         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();
-
-        var audioAlertFinish = document.getElementById("audio");
-
-        $('#cronometro_discurso').runner({
-          autostart: false,
-          countdown: true,
-          startAt: {{ 'discurso'|cronometro_to_seconds }} * 1000,
-          stopAt: 0,
-          milliseconds: false,
-          format: function(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();
-          }
-        }).on('runnerFinish', function(eventObject, info){
-          audioAlertFinish.play();
-        });
-
-        $('#cronometro_aparte').runner({
-          autostart: false,
-          countdown: true,
-          startAt:  {{ 'aparte'|cronometro_to_seconds }} * 1000,
-          stopAt: 0,
-          milliseconds: false,
-          format: function(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();
-          }
-        }).on('runnerFinish', function(eventObject, info){
-            audioAlertFinish.play();
-        });
-
-        $('#cronometro_ordem').runner({
-          autostart: false,
-          countdown: true,
-          startAt:  {{ 'ordem'|cronometro_to_seconds }} * 1000,
-          stopAt: 0,
-          milliseconds: false,
-          format: function(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();
-          }
-        }).on('runnerFinish', function(eventObject, info){
-          audioAlertFinish.play();
-        });
-
-        $('#cronometro_consideracoes').runner({
-          autostart: false,
-          countdown: true,
-          startAt:  {{ 'consideracoes'|cronometro_to_seconds }} * 1000,
-          stopAt: 0,
-          milliseconds: false,
-          format: function(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();
-          }
-        }).on('runnerFinish', function(eventObject, info){
-          audioAlertFinish.play();
-        });
-
-    var discurso_previous;
-    var ordem_previous;
-    var aparte_previous;
-    var consideracoes_previous;
-
-    var counter = 1;
-    (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("");
-              }
-
-              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"];
-
-              if (data["status_painel"] == true) {
-                  presentes.append('<table id="parlamentares_list">');
-                  $.each(presentes_list, function (index, parlamentar) {
-
-
-                    if (parlamentar.voto == 'Voto Informado'){
-                      $('#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>')
-                    }
-                    else{
-                      $('#parlamentares_list').append(show_voto(parlamentar))
-                    }
-
-                  });
-                  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>');
-                }
-              }
-
-              var discurso_current = data["cronometro_discurso"];
-              if (!discurso_previous){
-                discurso_previous = ''
-              }
-
-              if (discurso_current != discurso_previous) {
-                $('#cronometro_discurso').runner(discurso_current);
-                discurso_previous = discurso_current;
-              }
-
-              var aparte_current = data["cronometro_aparte"];
-              if (!aparte_previous){
-                aparte_previous = ''
-              }
-
-              if (aparte_current != aparte_previous) {
-                $('#cronometro_aparte').runner(aparte_current);
-                aparte_previous = aparte_current;
-              }
-
-              var ordem_current = data["cronometro_ordem"];
-              if (!ordem_previous){
-                ordem_previous = ''
-              }
-
-              if (ordem_current != ordem_previous) {
-                $('#cronometro_ordem').runner(ordem_current);
-                ordem_previous = ordem_current;
-              }
-
-              var consideracoes_current = data["cronometro_consideracoes"];
-              if (!consideracoes_previous){
-                consideracoes_previous = ''
-              }
-
-              if (consideracoes_current != consideracoes_previous) {
-                $('#cronometro_consideracoes').runner(consideracoes_current);
-                consideracoes_previous = consideracoes_current;
-              }
-
-              if($('#cronometro_discurso').runner('info').formattedTime == "00:00:30") {
-                  audioAlertFinish.play();
-              }
-
-              if($('#cronometro_aparte').runner('info').formattedTime == "00:00:30") {
-                  audioAlertFinish.play();
-              }
-
-              if($('#cronometro_ordem').runner('info').formattedTime == "00:00:30") {
-                  audioAlertFinish.play();
-              }
-
-              if($('#cronometro_consideracoes').runner('info').formattedTime == "00:00:30") {
-                  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"]);
-                  $("#materia_legislativa_ementa").text(data["materia_legislativa_ementa"]);
-                }
-                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('');
-              }
-              if (data['tipo_resultado'] && data['status_painel'] == true){
-                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");
-                  $("#resultado_votacao_div").show();
-                }
-                else{
-                  $("#resultado_votacao_div").hide();
-                  $("#mat_em_votacao").text("Matéria em Leitura");
-                }
-                console.log(data["tipo_resultado"], data['tipo_votacao']);
-                $("#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", "#7CFC00");
-                  $("#mat_em_votacao").text("Matéria Votada");
-                }
-                else if (resultado_votacao_upper.search("REJEIT") != -1){
-                  $("#resultado_votacao").css("color", "red");
-                  $("#mat_em_votacao").text("Matéria Votada");
-                }
-                else if (resultado_votacao_upper.search("LIDA") != -1){
-                  $("#mat_em_votacao").text("Matéria Lida");
-                }
-              }
-              else{
-                $("#resultado_votacao").text('');
-                if(data['tipo_votacao'] != 'Leitura')
-                  $("#mat_em_votacao").text("Matéria em Votação");
-                else{
-                  $("#mat_em_votacao").text("Matéria em Leitura");
-                }
-              }
-           },
-           error: function(err) {
-              console.error(err);
-           },
-           dataType: "json",
-           complete: setTimeout(function() {poll()}, 500),
-           timeout: 20000 // TODO: decrease
-        })
-      })();
-      });
-
-     function show_voto(parlamentar) {
-      color = 'white'
-      if (parlamentar.voto == "Sim"){
-          color = 'green'
-      }
-      else if (parlamentar.voto == "Não"){
-          color = 'red'
-      }
-
-      return ('<tr> <td style="padding-right:20px">' +
-                `<font color="`+color+`">${parlamentar.nome}</font> </td> <td style="padding-right:20px">` +
-                `<font color="`+color+`">${parlamentar.partido}</font> </td> <td style="padding-right:20px">` +
-                `<font color="`+color+`">${parlamentar.voto}</font> </td></tr>`)
-     }
-     
-  </script>
-</html>
-