Sistema de Apoio ao Processo Legislativo
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

437 lines
16 KiB

{% load i18n %}
{% load staticfiles sass_tags %}
{% load common_tags %}
<!DOCTYPE HTML>
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<!-- TODO: does it need this head_title here? -->
<link rel="stylesheet" href="{% sass_src 'bootstrap-sass/assets/stylesheets/_bootstrap.scss' %}" type="text/css">
<title>{% block head_title %}{% trans 'SAPL - Sistema de Apoio ao Processo Legislativo' %}{% endblock %}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="{% static 'jquery/dist/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/jquery.runner.js' %}"></script>
<style type="text/css">
html, body {
max-width: 100%;
overflow-x: hidden;
}
@media screen {
body {
background: #1c1b1b;
}
ul, li {
list-style-type: none;
}
#date, #sessao_plenaria, #sessao_plenaria_data, #sessao_plenaria_hora_inicio, #message, #cronometro_discurso, #cronometro_aparte, #cronometro_ordem, #cronometro_consideracoes, #relogio, #parlamentares, #votacao, #materia_legislativa_texto, #observacao_materia, #resultado_votacao, #orador {
font-family: Verdana;
}
}
.center {
margin: auto;
width: 15%;
}
</style>
</head>
<body>
<audio type="hidden" id="audio" src="{% static 'audio/ring.mp3' %}"></audio>
<h1 id="title"></h1>
<input id="json_url" type="hidden" value="{% url 'sapl.painel:dados_painel' sessao_id %}">
<h1><b><font color="#4FA64D"><p align="center"><span id="sessao_plenaria"></span></p></font></b></h1>
<table style="width:90%">
<tr>
<td style="text-align:center"><font color="white" size="4"><span id="sessao_plenaria_data"></span></font></td>
<td style="text-align:center"><font color="white" size="4"><span id="sessao_plenaria_hora_inicio"></span></font></td>
</tr>
</table>
<div class="center">
<img src="" id="logo-painel" alt="" width="50%"/>
</div>
<h2><font color="red"><p align="center"><span id="message"></span></p></font></h2>
<table style="width:90%">
<tr>
<td style="text-align:center"><font color="white" size="6"><span id="date"></span></font></td>
<td style="text-align:center"><font color="white" size="6"><span id="relogio"></span></font></td>
</tr>
</table>
<div class="row container-detail clearfix">
<div class="row-fluid">
<div class="col-md-4">
<h2><font color="#459170"><p align="center" style="font-family:Verdana">Parlamentares</p></b></font></h2>
<table align="center">
<tr>
<td><h4><font color="white"><span id="parlamentares"></span></h4></font></td>
</tr>
</table>
</div>
</div>
<div class="row-fluid">
<div class="col-md-4" id="aparecer_oradores">
<h2><font color="#459170"><p align="center" style="font-family:Verdana">Oradores</p></b></font></h2>
<table align="center">
<tr>
<td><h4><font color="white"><span id="orador"></span></h4></font></td>
</tr>
</table>
</div>
</div>
<div class="col-md-4">
<h2><font color="#459170"><p align="center" style="font-family:Verdana">Cronômetros</p></font></h2>
<table align="center">
<tr>
<td style="font-family:Verdana; text-align:center;"><font size="5" color="white">Discurso: <span id="cronometro_discurso"></span></font></td>
</tr>
<tr>
<td style="font-family:Verdana; text-align:center;"><font size="5" color="white">Aparte: <span id="cronometro_aparte"></span></font></td>
</tr>
<tr>
<td style="font-family:Verdana; text-align:center;"><font size="5" color="white">Questão de Ordem: <span id="cronometro_ordem"></span></font></td>
</tr>
<tr>
<td style="font-family:Verdana; text-align:center;"><font size="5" color="white">Considerações Finais: <span id="cronometro_consideracoes"></span></font></td>
</tr>
</table>
</div>
<div class="row-fluid">
<div class="col-md-4">
<h2><font color="#459170"><p align="center" style="font-family:Verdana">Resultado</p></b></font></h2>
<table align="center">
<tr>
<td><h4><font color="white"><span id="votacao"></span></h4></font></td>
</tr>
</table>
<table align="center">
<tr>
<td style="text-align:center"><h2><font color="#45919D"><span id="resultado_votacao"></span></font></h2></td>
</tr>
</table>
</div>
</div>
</br>
<div class="col-md-4">
<h2><font color="#459170"><p align="center" style="font-family:Verdana">Matéria em Votação</p></font></h2>
<table style="width:75%; border:1px;" align="center">
<tr><td style="text-align:center"><h4><font color="white"><span id="materia_legislativa_texto"></span></font></h4></td></tr>
<tr><td style="text-align:center"><h4><font color="white"><span id="observacao_materia"></span></font></h4></td></tr>
</table>
</div>
</div>
</body>
<script type="text/javascript">
var d = new Date();
var n = d.toLocaleDateString();
document.getElementById("date").innerHTML = n;
$(document).ready(function() {
//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=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
$("#relogio").text(h+":"+m+":"+s)
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
}).on('runnerFinish', function(eventObject, info){
audioAlertFinish.play();
});
$('#cronometro_aparte').runner({
autostart: false,
countdown: true,
startAt: {{ 'aparte'|cronometro_to_seconds }} * 1000,
stopAt: 0,
milliseconds: false
}).on('runnerFinish', function(eventObject, info){
audioAlertFinish.play();
});
$('#cronometro_ordem').runner({
autostart: false,
countdown: true,
startAt: {{ 'ordem'|cronometro_to_seconds }} * 1000,
stopAt: 0,
milliseconds: false
}).on('runnerFinish', function(eventObject, info){
audioAlertFinish.play();
});
$('#cronometro_consideracoes').runner({
autostart: false,
countdown: true,
startAt: {{ 'consideracoes'|cronometro_to_seconds }} * 1000,
stopAt: 0,
milliseconds: false
}).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: $("#json_url").val(),
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"])
if (data["status_painel"] == false) {
$("#message").text("PAINEL ENCONTRA-SE FECHADO");
}
else {
$("#message").text("");
}
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">');
jQuery.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('<tr> <td style="padding-right:20px">' +
parlamentar.nome +
'</td> <td style="padding-right:20px">' +
parlamentar.partido + '</td> <td style="padding-right:20px">'
+ show_voto(parlamentar.voto) + '</td></tr>')
}
});
presentes.append('</table>')
if (data["oradores"].length > 0){
$('#aparecer_oradores').show();
oradores.append('<table id="oradores_list">');
jQuery.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 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 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['materia_legislativa_texto'] && data["status_painel"] == true){
var votacao = $("#votacao")
var num_presentes = data["num_presentes"];
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: " + 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 == 30) {
audioAlertFinish.play();
}
if($('#cronometro_aparte').runner('info').formattedTime == 30) {
audioAlertFinish.play();
}
if($('#cronometro_ordem').runner('info').formattedTime == 30) {
audioAlertFinish.play();
}
if($('#cronometro_consideracoes').runner('info').formattedTime == 30) {
audioAlertFinish.play();
}
if (data['materia_legislativa_texto']){
if (data["status_painel"] == true){
$("#materia_legislativa_texto").text(data["materia_legislativa_texto"]);
}
else{
$("#materia_legislativa_texto").text('A Matéria em votação só aparecerá quando o painel estiver aberto');
}
}
else{
$("#materia_legislativa_texto").text('Não há nehuma 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){
$("#resultado_votacao").text(data["tipo_resultado"]);
$("#resultado_votacao").css("color", "#45919D");
var resultado_votacao_upper = $("#resultado_votacao").text().toUpperCase();
if (resultado_votacao_upper.search("APROV") != -1){
$("#resultado_votacao").css("color", "green");
}
if (resultado_votacao_upper.search("REJEIT") != -1){
$("#resultado_votacao").css("color", "red");
}
}
else{
$("#resultado_votacao").text('');
}
},
error: function(err) {
console.error(err);
},
dataType: "json",
complete: setTimeout(function() {poll()}, 500),
timeout: 20000 // TODO: decrease
})
})();
});
function show_voto(voto) {
if (voto == "Sim"){
return '<font color="green"> Sim </font>'
}
else if (voto == "Não"){
return '<font color="red"> Não </font>'
}
return voto
}
</script>
</html>