SPDT
/
sapl
mirror of https://github.com/interlegis/sapl.git
5
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Merge 71309a9280 into c1614a76a8

pull/3814/merge
Heitor 2 weeks ago
committed by GitHub
parent
c1614a76a8 71309a9280
commit
efdc9aec41
No known key found for this signature in database GPG Key ID: B5690EEEBB952194
3 changed files with 684 additions and 537 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 196
      frontend/src/__apps/painel/scss/painel.scss
  2. 18
      sapl/painel/views.py
  3. 545
      sapl/templates/painel/index.html

196
frontend/src/__apps/painel/scss/painel.scss
View File

@ -1,43 +1,159 @@
:root {
--bg-dark: #121212;
--bg-panel: #1e1e1e;
--text-main: #e0e0e0;
--text-highlight: #4fa64d;
}
.painel-principal { body {
background: #1c1b1b; background-color: var(--bg-dark);
font-family: Verdana; color: var(--text-main);
font-size: x-large; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
.text-title { margin-bottom: 0;
color: #4fa64d; }
margin: 0.5rem;
font-weight: bold; .separador-vertical {
} border-right: 1px solid #333;
.text-subtitle { min-height: 100vh;
color: #459170; margin: 0;
font-weight: bold; }
}
.data-hora { .text-title {
font-size: 180%; color: var(--text-highlight);
} letter-spacing: 1px;
}
.text-value {
color: white; .text-subtitle {
} color: #81c784;
font-weight: 600;
.logo-painel { }
max-width: 100%;
} .parlamentares-grid {
.painels { display: grid;
flex-wrap: wrap; grid-template-columns: repeat(auto-fill, 190px);
} width: 100%;
.painel{ }
margin-top: 1rem;
table { .parlamentar-card {
width: 150px;
border-radius: 3px;
overflow: hidden;
position: relative;
}
.foto-container {
border-radius: 3px;
overflow: hidden;
height: 150px;
}
.parlamentar-card img {
width: 100%; width: 100%;
} height: 150px;
h2 { display: block;
margin-bottom: 0.5rem; object-fit: fill;
} }
#votacao, #oradores_list {
text-align: left; .parlamentar-card .nome {
display: inline-block; font-weight: bold;
margin-bottom: 1rem; font-size: 0.95rem;
} color: #fff;
} line-height: 1.1;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
margin-bottom: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.parlamentar-card .partido {
font-size: 0.8rem;
color: #ddd;
font-weight: 600;
text-transform: uppercase;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.voto-faixa {
position: absolute;
width: 90px;
height: 90px;
top: -45px;
right: -45px;
transform: rotate(45deg);
display: flex;
align-items: flex-end;
justify-content: center;
color: #fff;
font-weight: 700;
box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 10;
line-height: 1;
}
.voto-faixa p {
transform: rotate(-45deg);
font-size: 2rem;
text-transform: uppercase;
}
.voto-sim .voto-faixa {
background-color: #27ae60;
}
.voto-nao .voto-faixa {
background-color: #c0392b;
}
.voto-abstencao .voto-faixa {
background-color: #f39c12;
}
.voto-informado .voto-faixa {
background-color: #d35400;
}
.voto-ausente .voto-faixa {
background-color: #7f8c8d;
}
.table-custom {
color: #ddd;
}
.table-custom tbody td {
padding: 8px;
font-size: 1.1rem;
}
.table-sim {
color: #27ae60;
}
.table-nao {
color: #c0392b;
}
.table-abstencao {
color: #f39c12;
}
.table-total {
color: #194BFA;
}
.logo-painel {
max-height: 150px;
width: auto;
}
#oradores_list tr td {
font-size: 1.2rem;
padding: 5px;
text-align: start;
}
.hora-brasao {
border-top: 1px solid #333;
} }

18
sapl/painel/views.py
View File

@ -23,6 +23,7 @@ from sapl.sessao.models import (ExpedienteMateria, OradorExpediente, OrdemDia,
SessaoPlenaria, SessaoPlenariaPresenca, SessaoPlenaria, SessaoPlenariaPresenca,
VotoParlamentar, RegistroLeitura) VotoParlamentar, RegistroLeitura)
from sapl.utils import filiacao_data, get_client_ip, sort_lista_chave from sapl.utils import filiacao_data, get_client_ip, sort_lista_chave
from image_cropping.utils import get_backend
from .models import Cronometro from .models import Cronometro
@ -382,6 +383,7 @@ def get_presentes(pk, response, materia):
}) })
presentes_list = [] presentes_list = []
for p in presentes: for p in presentes:
legislatura = sessao.legislatura legislatura = sessao.legislatura
# Recupera os mandatos daquele parlamentar # Recupera os mandatos daquele parlamentar
@ -394,10 +396,24 @@ def get_presentes(pk, response, materia):
else: else:
partido = filiacao partido = filiacao
if p.parlamentar.fotografia:
thumbnail_url = get_backend().get_thumbnail_url(
p.parlamentar.fotografia,
{
'size': (128, 128),
'box': p.parlamentar.cropping,
'crop': True,
'detail': True,
}
)
else:
thumbnail_url = False
presentes_list.append( presentes_list.append(
{'id': p.id, {'id': p.id,
'parlamentar_id': p.parlamentar.id, 'parlamentar_id': p.parlamentar.id,
'nome': p.parlamentar.nome_parlamentar, 'nome': p.parlamentar.nome_parlamentar,
'fotografia':thumbnail_url,
'partido': partido, 'partido': partido,
'voto': '' 'voto': ''
}) })
@ -476,7 +492,7 @@ def get_votos(response, materia, mostrar_voto):
'numero_abstencoes': 0, 'numero_abstencoes': 0,
'registro': None, 'registro': None,
'total_votos': 0, 'total_votos': 0,
'tipo_resultado': 'Ainda não foi votada.', 'tipo_resultado': 'Em votação.',
}) })
if materia.tipo_votacao == 2: if materia.tipo_votacao == 2:

545
sapl/templates/painel/index.html
View File

@ -1,20 +1,18 @@
{% load i18n %} {% load i18n %}
{% load common_tags %} {% load common_tags %}
{% load render_bundle from webpack_loader %} {% load render_bundle from webpack_loader %}
{% load webpack_static from webpack_loader %} {% load webpack_static from webpack_loader %}
<!DOCTYPE HTML> <!DOCTYPE HTML>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="pt-br"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="pt-br"> <html lang="pt-br">
<!--<![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? -->
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
{% block webpack_loader_css %} {% block webpack_loader_css %}
{% render_chunk_vendors 'css' %} {% render_chunk_vendors 'css' %}
{% render_bundle 'global' 'css' %} {% render_bundle 'global' 'css' %}
@ -22,237 +20,189 @@
{% endblock webpack_loader_css %} {% endblock webpack_loader_css %}
<style type="text/css"> </head>
html, body {
max-width: 100%; <body class="min-vh-100 d-flex flex-column p-2">
overflow-x: hidden;
}
@media screen {
ul, li {
list-style-type: none;
}
}
</style>
</head>
<body class="painel-principal">
<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="container-fluid">
<h1 id="sessao_plenaria" class="title text-title"></h1> <div class="row g-3">
</div>
<div class="row "> <div class="col-md-9 separador-vertical pe-4">
<div class="col text-center"> <div class="painel p-3 h-100 d-flex flex-column">
<span id="sessao_plenaria_data" class="text-value"></span> <h1 id="sessao_plenaria" class="text-title fw-bold text-uppercase"></h1>
<div id="parlamentares">
</div> </div>
<div class="col text-center">
<span id="sessao_plenaria_hora_inicio" class="text-value"></span>
</div> </div>
</div> </div>
<div class="row justify-content-center"> <div class="col-md-3 d-flex flex-column gap-3">
<div class="col-1">
<img src="" id="logo-painel" class="logo-painel" alt=""/>
</div>
</div>
<div class="row justify-content-center"> <div class="painel p-3 d-flex flex-column" id="obs_materia_div">
<h2 class="text-danger"><span id="message"></span></h2> <div class="flex-grow-1">
</div> <h2 id="mat_em_votacao" class="text-subtitle text-center mb-3 pb-1">Matéria em Votação</h2>
<span id="materia_legislativa_texto" class="fs-4 text-white d-block mb-1"></span>
<span id="materia_legislativa_ementa" class="fs-6 fst-italic opacity-75 text-white"></span>
<div class="row"> <div class="mt-2 text-warning" style="font-size: 0.9rem;">
<div class="col text-center"><span class="text-value data-hora" id="date"></span></div> <span id="observacao_materia"></span>
<div class="col text-center"><span class="text-value data-hora" id="relogio"></span></div>
</div> </div>
<div id="resultado_votacao" class="text-title mt-auto text-center d-block fs-2"></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> </div>
<div class="d-flex col-md-8 painels">
<div class="col-md-6 text-center painel" id="aparecer_oradores"> <div class="text-center painel" id="aparecer_oradores">
<h2 class="text-subtitle">Oradores</h2> <h4 class="text-subtitle">Oradores</h4>
<span id="orador"></span> <div id="orador"></div>
</div> </div>
<div class="col-md-6 text-left painel"> <div class="painel d-flex flex-column">
<div class="d-flex align-items-left justify-content-left mb-2"> <div id="box_cronometros" class="w-100">
<h2 class="text-subtitle mb-0">Cronômetros</h2> <h4 class="text-center text-subtitle mb-3">Cronômetro</h4>
<button class="btn btn-sm btn-secondary ms-2" onclick="changeFontSize('box_cronometros', -1)"> <div class="d-flex align-items-center justify-content-center" style="height: 80px;">
A- <table class="table-custom w-100 mb-0">
</button> <tbody>
<button class="btn btn-sm btn-secondary ms-2" onclick="changeFontSize('box_cronometros', 1)"> <tr id="row_discurso">
A+ <td class="fs-3">Discurso</td>
</button> <td class="text-end"><span id="cronometro_discurso"
class="fw-bold font-monospace fs-1">00:00:00</span></td>
</tr>
<tr id="row_aparte" style="display: none;">
<td class="fs-3 text-warning">Aparte</td>
<td class="text-end"><span id="cronometro_aparte"
class="fw-bold font-monospace fs-1 text-warning">00:00:00</span></td>
</tr>
<tr id="row_ordem" style="display: none;">
<td class="fs-3 text-info">Questão de Ordem</td>
<td class="text-end"><span id="cronometro_ordem"
class="fw-bold font-monospace fs-1 text-info">00:00:00</span></td>
</tr>
<tr id="row_consideracoes" style="display: none;">
<td class="fs-3">Consid. Finais</td>
<td class="text-end"><span id="cronometro_consideracoes"
class="fw-bold font-monospace fs-1">00:00:00</span></td>
</tr>
</tbody>
</table>
</div> </div>
<div class="text-value" id="box_cronometros">
Discurso: <span id="cronometro_discurso"></span><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>
</div> </div>
</div> </div>
<div class="col-md-6 text-left painel" id="resultado_votacao_div"> <div class="painel p-3 d-flex flex-column" id="resultado_votacao_div">
<div class="d-flex align-items-left justify-content-left mb-2"> <div id="box_votacao" class="w-100">
<h2 class="text-subtitle mb-0">Resultado</h2> <table class="table-custom w-100 mb-0" id="tabela_resultados">
<button class="btn btn-sm btn-secondary ms-2" onclick="changeFontSize('box_votacao', -1)"> <tbody id="votacao"></tbody>
A- </table>
</button>
<button class="btn btn-sm btn-secondary ms-2" onclick="changeFontSize('box_votacao', 1)">
A+
</button>
</div>
<div id="box_votacao">
<span id="votacao" class="text-value"></span>
<span id="resultado_votacao" lass="text-title"></span>
</div> </div>
</div> </div>
<div class="col-md-6 text-center painel" id="obs_materia_div"> <div class="painel position-relative bottom-0 hora-brasao">
<h2 class="text-subtitle" id="mat_em_votacao">Matéria em Votação</h2> <div class="row justify-content-center align-items-center">
<span id="materia_legislativa_texto" class="text-value"></span> <div class="col-4 text-center" id="logo-container">
<br> <img src="" id="logo-painel" class="logo-painel" alt="Brasão" />
<span id="materia_legislativa_ementa" class="text-value"></span> </div>
<br> <div class="col-4 text-center" id="relogio-container">
<span id="observacao_materia" class="text-value"></span> <span class="fs-1 fw-bold" id="relogio"></span>
</div> </div>
<div class="col-md-6 text-center painel" id="tema_solene_div" style="display: none">
<h2 class="text-subtitle">Tema da Sessão Solene</h2>
<span id="sessao_solene_tema" class="text-value"></span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body>
{% block webpack_loader_js %}
{% render_chunk_vendors 'js' %} </body>
{% render_bundle 'global' 'js' %}
{% render_bundle 'painel' 'js' %} {% block webpack_loader_js %}
{% endblock webpack_loader_js %} {% render_chunk_vendors 'js' %}
{% render_bundle 'global' 'js' %}
{% block webpack_loader_chunks_js %} {% render_bundle 'painel' 'js' %}
{% endblock webpack_loader_chunks_js %} {% endblock webpack_loader_js %}
<script type="text/javascript"> {% block webpack_loader_chunks_js %}
{% endblock webpack_loader_chunks_js %}
$(document).ready(function() {
// As constantes decisões sobre a existência ou não do horário de verão, <script type="text/javascript">
// 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 $(document).ready(function () {
// 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")); $("#date").append(moment().format("DD/MM/YY"));
var offset = parseFloat({{ utc_offset }}); var offset = parseFloat({{ utc_offset }});
var isPolling = false;
var cronometroVisivel = '#row_discurso';
//TODO: replace by a fancy jQuery clock
function checkTime(i) { function checkTime(i) {
if (i<10) {i = "0" + i}; // add zero in front of numbers < 10 if (i < 10) { i = "0" + i };
return i; return i;
} }
function startTime() { function startTime() {
var today = moment.utc().utcOffset(offset).format("HH:mm:ss"); var today = moment.utc().utcOffset(offset).format("HH:mm:ss");
$("#relogio").text(today) $("#relogio").text(today)
var t = setTimeout(function(){ setTimeout(startTime, 500);
startTime()
}, 500);
} }
startTime(); startTime();
var audioAlertFinish = document.getElementById("audio"); var audioAlertFinish = document.getElementById("audio");
$('#cronometro_discurso').runner({ // Função para formatar o tempo do cronômetro
autostart: false, function formatCronometro(value) {
countdown: true, let h = Math.floor((value / 1000) / 3600);
startAt: {{ 'discurso'|cronometro_to_seconds }} * 1000,
stopAt: 0,
milliseconds: false,
format: function(value) {
let h = Math.floor((value/1000) / 3600);
h = checkTime(h); h = checkTime(h);
let m = Math.floor((value/1000) % 3600 / 60); let m = Math.floor((value / 1000) % 3600 / 60);
m = checkTime(m); m = checkTime(m);
let s = Math.floor((value/1000) % 3600 % 60); let s = Math.floor((value / 1000) % 3600 % 60);
s = checkTime(s); s = checkTime(s);
return h.toString() + ":" + m.toString() + ":" + s.toString(); return h.toString() + ":" + m.toString() + ":" + s.toString();
} }
}).on('runnerFinish', function(eventObject, info){
// Inicializar os cronômetros
$('#cronometro_discurso').runner({
autostart: false,
countdown: true,
startAt: {{ 'discurso'| cronometro_to_seconds }} * 1000,
stopAt: 0,
milliseconds: false,
format: formatCronometro
}).on('runnerFinish', function () {
audioAlertFinish.play(); audioAlertFinish.play();
}); });
$('#cronometro_aparte').runner({ $('#cronometro_aparte').runner({
autostart: false, autostart: false,
countdown: true, countdown: true,
startAt: {{ 'aparte'|cronometro_to_seconds }} * 1000, startAt: {{ 'aparte'| cronometro_to_seconds }} * 1000,
stopAt: 0, stopAt: 0,
milliseconds: false, milliseconds: false,
format: function(value) { format: formatCronometro
let h = Math.floor((value/1000) / 3600); }).on('runnerFinish', function () {
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(); audioAlertFinish.play();
}); });
$('#cronometro_ordem').runner({ $('#cronometro_ordem').runner({
autostart: false, autostart: false,
countdown: true, countdown: true,
startAt: {{ 'ordem'|cronometro_to_seconds }} * 1000, startAt: {{ 'ordem'| cronometro_to_seconds }} * 1000,
stopAt: 0, stopAt: 0,
milliseconds: false, milliseconds: false,
format: function(value) { format: formatCronometro
let h = Math.floor((value/1000) / 3600); }).on('runnerFinish', function () {
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(); audioAlertFinish.play();
}); });
$('#cronometro_consideracoes').runner({ $('#cronometro_consideracoes').runner({
autostart: false, autostart: false,
countdown: true, countdown: true,
startAt: {{ 'consideracoes'|cronometro_to_seconds }} * 1000, startAt: {{ 'consideracoes'| cronometro_to_seconds }} * 1000,
stopAt: 0, stopAt: 0,
milliseconds: false, milliseconds: false,
format: function(value) { format: formatCronometro
let h = Math.floor((value/1000) / 3600); }).on('runnerFinish', function () {
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(); audioAlertFinish.play();
}); });
@ -261,16 +211,16 @@
var aparte_previous; var aparte_previous;
var consideracoes_previous; var consideracoes_previous;
var counter = 1; function poll() {
(function poll() { // Evitar múltiplas chamadas simultâneas
if (isPolling) return;
isPolling = true;
$.ajax({ $.ajax({
url: "{% url 'sapl.painel:dados_painel' sessao_id %}", url: "{% url 'sapl.painel:dados_painel' sessao_id %}",
type: "GET", type: "GET",
success: function(data) { success: function (data) {
$("#sessao_plenaria").text(data["sessao_plenaria"]) $("#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) { if (data["status_painel"] == false) {
$("#message").text("PAINEL ENCONTRA-SE FECHADO"); $("#message").text("PAINEL ENCONTRA-SE FECHADO");
} }
@ -278,21 +228,30 @@
$("#message").text(""); $("#message").text("");
} }
if (data["sessao_solene"]){ if (data["sessao_solene"]) {
$("#resultado_votacao_div").hide(); $("#resultado_votacao_div").hide();
$("#obs_materia_div").hide(); $("#obs_materia_div").hide();
$('#tema_solene_div').show(); $('#tema_solene_div').show();
} }
if (data["brasao"] != null) if (data["brasao"] != null) {
$("#logo-painel").attr("src", data["brasao"]); $("#logo-painel").attr("src", data["brasao"]);
$("#logo-container").show();
$("#relogio-container")
.removeClass("col-12 mt-5")
.addClass("col-4");
} else {
$("#logo-container").hide();
$("#relogio-container")
.removeClass("col-4")
.addClass("col-12 mt-5");
}
var presentes = $("#parlamentares"); var presentes = $("#parlamentares");
var votacao = $("#votacao"); var votacao = $("#votacao");
var oradores = $("#orador") var oradores = $("#orador")
$("#votacao").text(''); $("#votacao").empty();
presentes.children().remove(); presentes.children().remove();
votacao.children().remove();
oradores.children().remove(); oradores.children().remove();
var oradores_list = data["oradores"]; var oradores_list = data["oradores"];
@ -300,31 +259,73 @@
if (data["status_painel"] == true) { if (data["status_painel"] == true) {
mostrar_voto = data["mostrar_voto"]; mostrar_voto = data["mostrar_voto"];
presentes.append('<table id="parlamentares_list">');
presentes.append('<div class="container-fluid" id="parlamentares_container">');
presentes.append('<div class="parlamentares-grid" id="parlamentares_row">');
var votoSim = 0;
var votoNao = 0;
var votoAbster = 0;
$.each(presentes_list, function (index, parlamentar) { $.each(presentes_list, function (index, parlamentar) {
var votoClass = '';
var votoText = '';
if (parlamentar.voto == 'Sim') {
votoClass = 'voto-sim';
votoText = 'S';
votoSim += 1;
} else if (parlamentar.voto == 'Não') {
votoClass = 'voto-nao';
votoText = 'N';
votoNao += 1
} else if (parlamentar.voto == 'Abstenção') {
votoClass = 'voto-abstencao';
votoText = 'A';
votoAbster += 1
} else if (parlamentar.voto == 'Voto Informado' && mostrar_voto == false) {
votoClass = 'voto-informado';
votoText = 'I';
} else if (parlamentar.voto) {
votoText = parlamentar.voto;
}
if (parlamentar.fotografia) {
fotografia = parlamentar.fotografia
} else {
fotografia = "{% webpack_static 'img/avatar.png' %}"
}
var cardHtml = `
<div class="parlamentar-card mt-3 ${votoClass}">
<div class="voto-faixa">
<p>
${votoText}
</p>
</div>
<div class="foto-container">
<img src="${fotografia}" alt="${parlamentar.nome}">
</div>
if (parlamentar.voto == 'Voto Informado' && mostrar_voto == false){ <div class="mt-2 text-center">
$('#parlamentares_list').append('<tr><td style="padding-right:20px; color:yellow" >' + <div class="nome">${parlamentar.nome}</div>
parlamentar.nome + <div class="partido">${parlamentar.partido}</div>
'</td> <td style="padding-right:20px; color:yellow">' + </div>
parlamentar.partido + '</td> <td style="padding-right:20px; color:yellow">' </div>
+ '</td></tr>') `;
}
else{
$('#parlamentares_list').append(show_voto(parlamentar))
}
$('#parlamentares_row').append(cardHtml);
}); });
presentes.append('</table>')
if (data["oradores"].length > 0){ presentes.append('</div>');
presentes.append('</div>');
if (data["oradores"].length > 0) {
$('#aparecer_oradores').show(); $('#aparecer_oradores').show();
oradores.append('<table id="oradores_list">'); oradores.append('<table id="oradores_list">');
$.each(oradores_list, function (index, orador) { $.each(oradores_list, function (index, orador) {
$('#oradores_list').append('<tr><td style="padding-right:20px; color:white" >' + $('#oradores_list').append('<tr><td style="padding-right:20px; color:white" >' +
orador.numero + 'º &nbsp' + orador.numero + 'º - ' +
orador.nome +'</td></tr>') orador.nome + '</td></tr>')
}); });
oradores.append('</table>'); oradores.append('</table>');
} }
@ -332,40 +333,40 @@
$('#aparecer_oradores').hide(); $('#aparecer_oradores').hide();
} }
} }
else{ else {
presentes.append('<span style="color:white" id="parlamentares_list">'); presentes.append('<span class="text-white" id="parlamentares_list">');
$('#parlamentares_list').append( $('#parlamentares_list').append(
'<center>A listagem de parlamentares só aparecerá quando o painel estiver aberto.</center>') '<center>A listagem de parlamentares só aparecerá quando o painel estiver aberto.</center>')
presentes.append('</span>'); presentes.append('</span>');
oradores.append('<span style="color:white" id="oradores_list">'); oradores.append('<span class="text-white" id="oradores_list">');
$('#oradores_list').append( $('#oradores_list').append(
'<center>A listagem de oradores só aparecerá quando o painel estiver aberto.</center>') '<center>A listagem de oradores só aparecerá quando o painel estiver aberto.</center>')
oradores.append('</span>'); oradores.append('</span>');
votacao.append('<span id="votacao">'); votacao.append('<tr><td colspan="2" class="text-center">A votação só aparecerá quando o painel estiver aberto</td></tr>');
$("#votacao").append('<center>A votação só aparecerá quando o painel estiver aberto</center>');
votacao.append('</span>');
} }
if(data["status_painel"]){ if (data["status_painel"]) {
if (data['materia_legislativa_texto']){ if (data['materia_legislativa_texto']) {
var votacao = $("#votacao"); var votacao = $("#votacao");
var total_votos = votoSim + votoNao + votoAbster
votacao.append("<li>Sim: " + data["numero_votos_sim"] + "</li>"); votacao.append("<tr><td>Presentes</td><td>" + data["num_presentes"] + "</td></tr>");
votacao.append("<li>Não: " + data["numero_votos_nao"] + "</li>"); votacao.append("<tr><td>Sim</td><td class='table-sim'>" + votoSim + "</td></tr>");
votacao.append("<li>Abstenções: " + data["numero_abstencoes"] + "</li>"); votacao.append("<tr><td>Não</td><td class='table-nao'>" + votoNao + "</td></tr>");
votacao.append("<li>Presentes: " + data["num_presentes"] + "</li>"); votacao.append("<tr><td>Abstenções</td><td class='table-abstencao'>" + votoAbster + "</td></tr>");
votacao.append("<li>Total votos: " + data["total_votos"] + "</li>"); votacao.append("<tr><td><strong>Total votos</strong></td><td class='table-total'><strong>" + total_votos + "</strong></td></tr>");
} }
else{ else {
$("#votacao").append('<center>Não há votação, pois não há nenhuma matéria aberta ou já votada.</center>'); votacao.append('<tr><td colspan="2" class="text-center">Não há votação, pois não há nenhuma matéria aberta ou já votada.</td></tr>');
} }
} }
// Gerenciar cronômetros
var discurso_current = data["cronometro_discurso"]; var discurso_current = data["cronometro_discurso"];
if (!discurso_previous){ if (!discurso_previous) {
discurso_previous = '' discurso_previous = '';
} }
if (discurso_current != discurso_previous) { if (discurso_current != discurso_previous) {
@ -374,8 +375,8 @@
} }
var aparte_current = data["cronometro_aparte"]; var aparte_current = data["cronometro_aparte"];
if (!aparte_previous){ if (!aparte_previous) {
aparte_previous = '' aparte_previous = '';
} }
if (aparte_current != aparte_previous) { if (aparte_current != aparte_previous) {
@ -384,8 +385,8 @@
} }
var ordem_current = data["cronometro_ordem"]; var ordem_current = data["cronometro_ordem"];
if (!ordem_previous){ if (!ordem_previous) {
ordem_previous = '' ordem_previous = '';
} }
if (ordem_current != ordem_previous) { if (ordem_current != ordem_previous) {
@ -394,8 +395,8 @@
} }
var consideracoes_current = data["cronometro_consideracoes"]; var consideracoes_current = data["cronometro_consideracoes"];
if (!consideracoes_previous){ if (!consideracoes_previous) {
consideracoes_previous = '' consideracoes_previous = '';
} }
if (consideracoes_current != consideracoes_previous) { if (consideracoes_current != consideracoes_previous) {
@ -403,120 +404,134 @@
consideracoes_previous = consideracoes_current; consideracoes_previous = consideracoes_current;
} }
if($('#cronometro_discurso').runner('info').formattedTime == "00:00:30") { var discursoRunning = $('#cronometro_discurso').runner('info').running;
var ordemRunning = $('#cronometro_ordem').runner('info').running;
var aparteRunning = $('#cronometro_aparte').runner('info').running;
var consideracoesRunning = $('#cronometro_consideracoes').runner('info').running;
if (ordemRunning) {
cronometroVisivel = '#row_ordem';
} else if (aparteRunning) {
cronometroVisivel = '#row_aparte';
} else if (consideracoesRunning) {
cronometroVisivel = '#row_consideracoes';
} else if (discursoRunning) {
cronometroVisivel = '#row_discurso';
}
var todosCronometros = ['#row_discurso', '#row_aparte', '#row_ordem', '#row_consideracoes'];
$.each(todosCronometros, function (index, id) {
if (id === cronometroVisivel) {
$(id).show();
} else {
$(id).hide();
}
});
if ($('#cronometro_discurso').runner('info').formattedTime == "00:00:30") {
audioAlertFinish.play(); audioAlertFinish.play();
} }
if($('#cronometro_aparte').runner('info').formattedTime == "00:00:30") { if ($('#cronometro_aparte').runner('info').formattedTime == "00:00:30") {
audioAlertFinish.play(); audioAlertFinish.play();
} }
if($('#cronometro_ordem').runner('info').formattedTime == "00:00:30") { if ($('#cronometro_ordem').runner('info').formattedTime == "00:00:30") {
audioAlertFinish.play(); audioAlertFinish.play();
} }
if($('#cronometro_consideracoes').runner('info').formattedTime == "00:00:30") { if ($('#cronometro_consideracoes').runner('info').formattedTime == "00:00:30") {
audioAlertFinish.play(); audioAlertFinish.play();
} }
if(data['sessao_finalizada']){ if (data['sessao_finalizada']) {
$("#obs_materia_div").hide(); $("#obs_materia_div").hide();
$("#resultado_votacao_div").hide(); $("#resultado_votacao_div").hide();
} }
else if (data['materia_legislativa_texto']){ else if (data['materia_legislativa_texto']) {
if (data["status_painel"] == true){ if (data["status_painel"] == true) {
$("#materia_legislativa_texto").text(data["materia_legislativa_texto"]); $("#materia_legislativa_texto").text(data["materia_legislativa_texto"]);
texto = data['materia_legislativa_ementa']
if (texto.length > 151) {
$("#materia_legislativa_ementa").text(texto.substr(0, 145).concat('...'));
}
else {
$("#materia_legislativa_ementa").text(data["materia_legislativa_ementa"]); $("#materia_legislativa_ementa").text(data["materia_legislativa_ementa"]);
} }
else{ }
else {
$("#materia_legislativa_texto").text('A Matéria em votação só aparecerá quando o painel estiver aberto'); $("#materia_legislativa_texto").text('A Matéria em votação só aparecerá quando o painel estiver aberto');
} }
} }
else{ else {
$("#materia_legislativa_texto").text('Não há nenhuma matéria votada ou para votação.'); $("#materia_legislativa_texto").text('Não há nenhuma matéria votada ou para votação.');
} }
if (data['observacao_materia'] && data["status_painel"] == true){ if (data['observacao_materia'] && data["status_painel"] == true) {
var texto = data['observacao_materia']; var texto = data['observacao_materia'];
if(texto.length > 151) { if (texto.length > 151) {
$("#observacao_materia").text(texto.substr(0, 145).concat('(...)')); $("#observacao_materia").text(texto.substr(0, 145).concat('(...)'));
} }
else{ else {
$("#observacao_materia").text(texto); $("#observacao_materia").text(texto);
} }
} }
else{ else {
$("#observacao_materia").text(''); $("#observacao_materia").text('');
} }
if (data['tipo_resultado'] && data['status_painel'] == true){ if (data['tipo_resultado'] && data['status_painel'] == true) {
if(data['tipo_votacao'] != 'Leitura' && !data['sessao_finalizada'] && !data["sessao_solene"]){ if (data['tipo_votacao'] != 'Leitura' && !data['sessao_finalizada'] && !data["sessao_solene"]) {
$("#resultado_votacao").css("color", "#45919D"); $("#resultado_votacao").css("color", "#45919D");
$("#mat_em_votacao").text("Matéria em Votação"); $("#mat_em_votacao").text("Matéria em Votação");
$("#resultado_votacao_div").show(); $("#resultado_votacao_div").show();
} }
else{ else {
$("#resultado_votacao_div").hide(); $("#resultado_votacao_div").hide();
$("#mat_em_votacao").text("Matéria em Leitura"); $("#mat_em_votacao").text("Matéria em Leitura");
} }
console.log(data["tipo_resultado"], data['tipo_votacao']);
$("#resultado_votacao").text(data["tipo_resultado"]); $("#resultado_votacao").text(data["tipo_resultado"]);
var resultado_votacao_upper = $("#resultado_votacao").text().toUpperCase(); var resultado_votacao_upper = $("#resultado_votacao").text().toUpperCase();
console.log(resultado_votacao_upper, data['tipo_resultado']); if (resultado_votacao_upper.search("APROV") != -1) {
if (resultado_votacao_upper.search("APROV") != -1){
$("#resultado_votacao").css("color", "#7CFC00"); $("#resultado_votacao").css("color", "#7CFC00");
$("#mat_em_votacao").text("Matéria Votada"); $("#mat_em_votacao").text("Matéria Votada");
} }
else if (resultado_votacao_upper.search("REJEIT") != -1){ else if (resultado_votacao_upper.search("REJEIT") != -1) {
$("#resultado_votacao").css("color", "red"); $("#resultado_votacao").css("color", "red");
$("#mat_em_votacao").text("Matéria Votada"); $("#mat_em_votacao").text("Matéria Votada");
} }
else if (resultado_votacao_upper.search("LIDA") != -1){ else if (resultado_votacao_upper.search("LIDA") != -1) {
$("#mat_em_votacao").text("Matéria Lida"); $("#mat_em_votacao").text("Matéria Lida");
} }
} }
else{ else {
$("#resultado_votacao").text(''); $("#resultado_votacao").text('');
if(data['tipo_votacao'] != 'Leitura') if (data['tipo_votacao'] != 'Leitura')
$("#mat_em_votacao").text("Matéria em Votação"); $("#mat_em_votacao").text("Matéria em Votação");
else{ else {
$("#mat_em_votacao").text("Matéria em Leitura"); $("#mat_em_votacao").text("Matéria em Leitura");
} }
} }
},
error: function (xhr, status, error) {
console.error("Erro no polling:", error);
}, },
error: function(err) { complete: function () {
console.error(err); isPolling = false;
setTimeout(poll, 500);
}, },
dataType: "json", timeout: 20000
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">' + // Iniciar polling
`<font color="`+color+`">${parlamentar.nome}</font> </td> <td style="padding-right:20px">` + poll();
`<font color="`+color+`">${parlamentar.partido}</font> </td> <td style="padding-right:20px">` +
`<font color="`+color+`">${parlamentar.voto}</font> </td></tr>`)
}
function changeFontSize(elementId, increment) { });
let element = document.getElementById(elementId);
if (element) {
let currentSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size'));
element.style.fontSize = (currentSize + increment) + 'px';
}
}
</script> </script>
</html>
</html>
Write Preview
Loading…
Cancel
Save