From bb1de80a88b1973c4898c148c74b971fb3962295 Mon Sep 17 00:00:00 2001 From: AlGouvea Date: Tue, 31 Aug 2021 13:02:16 -0300 Subject: [PATCH] Cronometros do painel convertidos para VueJS --- frontend/src/__apps/painel/main.js | 141 ++++++++++++++++----- sapl/painel/views.py | 20 ++- sapl/templates/painel/index.html | 197 +++-------------------------- 3 files changed, 144 insertions(+), 214 deletions(-) diff --git a/frontend/src/__apps/painel/main.js b/frontend/src/__apps/painel/main.js index ea6ed1dbf..2328573fa 100644 --- a/frontend/src/__apps/painel/main.js +++ b/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 () { diff --git a/sapl/painel/views.py b/sapl/painel/views.py index 75f5a1b97..6718683cd 100644 --- a/sapl/painel/views.py +++ b/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 } diff --git a/sapl/templates/painel/index.html b/sapl/templates/painel/index.html index fc4638709..35f8f3430 100644 --- a/sapl/templates/painel/index.html +++ b/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 @@

Cronômetros

- Discurso: [[ cronometro ]]
- Aparte:
- Questão de Ordem:
- Considerações Finais: + Discurso:[[ cronometro_discurso ]] + + +
+ + Aparte:[[ cronometro_aparte ]] + + +
+ + Questão de Ordem: [[ cronometro_ordem ]] + + +
+ + Considerações Finais: [[ cronometro_consideracoes ]] + + +
@@ -132,7 +148,7 @@ [[ sessao_solene_tema ]]
-
+

Resultado

@@ -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 }) - })(); - }); \ No newline at end of file