Cronometros do painel convertidos para VueJS

frontend/src/__apps/painel/main.js

@@ -6,9 +6,11 @@ axios.defaults.xsrfCookieName = 'csrftoken'
 axios.defaults.xsrfHeaderName = 'X-CSRFToken'
 
 //  Variaveis dos cronometros
-var timeBegan = null
-var running = false
-var timeExpected = null
+var crono = 0
+var time = null
+var timeEnd = null
+var audioAlertFinish = document.getElementById('audio')
+var cronometroStart = []
 
 const v = new Vue({ // eslint-disable-line
   delimiters: ['[[', ']]'],
@@ -22,7 +24,10 @@ const v = new Vue({ // eslint-disable-line
       sessao_plenaria_data: '',
       sessao_plenaria_hora_inicio: '',
       brasao: '',
-      cronometro: '00:10:00',
+      cronometro_discurso: '',
+      cronometro_aparte: '',
+      cronometro_ordem: '',
+      cronometro_consideracoes: '',
       sessao_solene: false,
       sessao_solene_tema: '',
       presentes: [],
@@ -39,7 +44,8 @@ const v = new Vue({ // eslint-disable-line
       mat_em_votacao: '',
       resultado_votacao_css: '',
       tipo_resultado: '',
-      tipo_votacao: ''
+      tipo_votacao: '',
+      running: 0
     }
   },
   methods: {
@@ -97,7 +103,6 @@ const v = new Vue({ // eslint-disable-line
     converterUrl (url) {
       url = url.slice(-(url.length - url.lastIndexOf('/')))
       url = '/painel' + url + '/dados'
-      console.log(url)
       return url
     },
     fetchData () {
@@ -133,46 +138,114 @@ const v = new Vue({ // eslint-disable-line
         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))
     },
-    stop: function stop () {
-      running = false
-      timeBegan = null
-      timeExpected = null
+    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()
+      }
 
-      clearInterval(this.clockRunning)
-      this.cronometro = '00:10:00'
+      this.running = 0
+      clearInterval(this.started)
+      this.stopped = setInterval(() => {
+        this.timeStopped()
+      }, 100)
+    },
+    timeStopped () {
+      timeEnd.setMilliseconds(timeEnd.getMilliseconds() + 100)
     },
-    clockRunning () {
-      if (running) {
-        var currentTime = new Date()
-        var timeRemaining = new Date(timeExpected - currentTime)
-
-        if (timeRemaining > 0) {
-          this.cronometro = '00:' + timeRemaining.getMinutes().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }) +
-           ':' + timeRemaining.getSeconds().toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false })
+    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.style.color = 'red'
-          this.stop()
+          this.cronometro_consideracoes = this.formatTime(time)
         }
       } else {
-        this.stop()
+        audioAlertFinish.play()
+        this.alert = setTimeout(() => {
+          this.reset()
+        }, 5000)
       }
     },
-    start: function startStopWatch (time) {
-      time *= 60
-      if (running) return
-
-      if (timeBegan === null) {
-        timeBegan = new Date()
-        timeExpected = timeBegan
-        timeExpected.setSeconds(timeExpected.getSeconds() + time)
+    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()
+        this.clockRunning(crono)
       }, 100)
-      running = true
     },
     pollData () {
       this.fetchData()
@@ -180,7 +253,7 @@ const v = new Vue({ // eslint-disable-line
       this.polling = setInterval(() => {
         console.info('Fetching data from backend')
         this.fetchData()
-      }, 5000)
+      }, 100)
     }
   },
   beforeDestroy () {

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_discurso': get_cronometro_status(request, 'discurso'),
-        'cronometro_ordem': get_cronometro_status(request, 'ordem'),
-        'cronometro_consideracoes': get_cronometro_status(request, 'consideracoes'),
+        'cronometro_aparte': get_cronometro_value(request, 'aparte'),
+        'cronometro_discurso': get_cronometro_value(request, 'discurso'),
+        'cronometro_ordem': get_cronometro_value(request, 'ordem'),
+        'cronometro_consideracoes': get_cronometro_value(request, 'consideracoes'),
         'status_painel': sessao.painel_aberto,
         'brasao': brasao
     }

sapl/templates/painel/index.html

@@ -1,5 +1,6 @@
 {% load i18n %}
 {% load common_tags %}
+{% load staticfiles %}
 
 {% load render_bundle from webpack_loader %}
 {% load webpack_static from webpack_loader %}
@@ -120,10 +121,25 @@
           <div class="col-md-4 text-left painel">
             <h2 class="text-subtitle">Cronômetros</h2>
             <div class="text-value">
-              Discurso: [[ cronometro ]]</span><button v-on:click="start ('0.05')">Iniciar</button><button v-on:click="stop">Parar</button><br>
-              Aparte: <span id="cronometro_aparte"></span><br>
-              Questão de Ordem: <span id="cronometro_ordem"></span><br>
-              Considerações Finais: <span id="cronometro_consideracoes"></span>
+              Discurso:<span id='discurso' style="margin-right: 20px;">[[ cronometro_discurso ]]</span><span v-if="painel_aberto">
+                <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 v-else><button class="btn btn-danger" v-on:click="stop(1)">Parar</button></span>
+              </span><br>
+
+              Aparte:<span id='discurso' style="margin-right: 20px;">[[ cronometro_aparte ]]</span><span v-if="painel_aberto">
+              <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 v-if="sessao_solene">
@@ -132,7 +148,7 @@
                 <span id="sessao_solene_tema" class="text-value">[[ sessao_solene_tema ]]</span>
             </div>
           </div>
-          <div v-else class="col-md-5" style="margin-top: -150px;">
+          <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>
@@ -210,177 +226,6 @@
 
       $("#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();
-
-      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) {
-
-          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();
-          }
-        },
-        error: function(err) {
-          console.error(err);
-        },
-        dataType: "json",
-        complete: null, // setTimeout(function() {poll()}, 500),
-        timeout: 20000 // TODO: decrease
       })
-      })();
-      });
     </script>
 </html>