mirror of https://github.com/interlegis/sapl.git
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.
230 lines
12 KiB
230 lines
12 KiB
{% load i18n %}
|
|
{% load common_tags %}
|
|
{% load staticfiles %}
|
|
|
|
{% load render_bundle from webpack_loader %}
|
|
{% load webpack_static from webpack_loader %}
|
|
<!--[if IE 8]> <html class="no-js lt-ie9" lang="pt-br"> <![endif]-->
|
|
<!--[if gt IE 8]><!-->
|
|
<html lang="pt-br">
|
|
<!--<![endif]-->
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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>
|
|
|
|
{% block webpack_loader_css %}
|
|
{% render_chunk_vendors 'css' %}
|
|
{% render_bundle 'global' 'css' %}
|
|
{% render_bundle 'painel' 'css' %}
|
|
{% endblock webpack_loader_css %}
|
|
|
|
<style type="text/css">
|
|
html, body {
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
@media screen {
|
|
ul, li {
|
|
list-style-type: none;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="painel-principal" style="margin: 0;">
|
|
<div id="app-painel"> <!-- app painel -->
|
|
<div style="color: white;" v-on:click="fontSize -= 1"><h3>-</h3></div>
|
|
<div style="color: white;"><h3>[[fontSize]]</h3></div>
|
|
<div style="color: white;" v-on:click="fontSize += 1"><h3>+</h3></div>
|
|
<audio type="hidden" id="audio" src="{% webpack_static 'audio/ring.mp3' %}"></audio>
|
|
|
|
<div class="row justify-content-center">
|
|
<img src="{{ MEDIA_URL }}{{ logotipo }}"
|
|
alt="Logo" class="img-responsive" style="height: 10vh"/>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-center">
|
|
<h1 id="sessao_plenaria" class="title text-title">[[ sessao_plenaria ]]</h1>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-5 text-right">
|
|
<span id="sessao_plenaria_data" class="text-value">[[ sessao_plenaria_data ]]</span>
|
|
</div>
|
|
<div class="col-md-7 text-center">
|
|
<span id="sessao_plenaria_hora_inicio" class="text-value">[[ sessao_plenaria_hora_inicio ]]</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="!painel_aberto" class="row justify-content-center" style="margin-bottom: 50px; margin-top: 50px;">
|
|
<h2 class="text-danger"><span>PAINEL ENCONTRA-SE FECHADO</span></h2>
|
|
</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">[[ relogio ]]</span></div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 50px;"> <!-- outer div -->
|
|
<div class="d-flex justify-content-start">
|
|
<div class="col-md-1"></div>
|
|
<div class="col-md-4 text-center"> <!-- Lista parlamentares -->
|
|
<div class="text-center painel">
|
|
<h2 class="text-subtitle">Parlamentares</h2>
|
|
<div v-if="painel_aberto"> <!-- v-if -->
|
|
<table v-bind:style="{fontSize: fontSize +5+'px'}">
|
|
<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]]<span v-if="p.presidente == true" style="color: lightgreen;"> - P </span>
|
|
</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="col-md-6 painels">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<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 v-bind:style="{fontSize: fontSize +'px'}">
|
|
<tbody v-for="o in oradores">
|
|
<tr class="d-flex justify-content-center">
|
|
<td style="padding-right: 20px; color: white;">
|
|
[[ o.numero]]º  [[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 class="col-md-6 text-center painel">
|
|
<h2 class="text-subtitle">Cronômetros</h2>
|
|
<div class="text-value" v-bind:style="{fontSize: fontSize +'px'}">
|
|
Discurso:<span id='discurso' style="margin-right: 20px;">[[ cronometro_discurso ]]</span><span v-if="painel_aberto">
|
|
</span><br>
|
|
|
|
Aparte:<span id='discurso' style="margin-right: 20px;">[[ cronometro_aparte ]]</span><span v-if="painel_aberto">
|
|
</span><br>
|
|
|
|
Questão de Ordem: <span id='discurso' style="margin-right: 20px;">[[ cronometro_ordem ]]</span><span v-if="painel_aberto">
|
|
</span><br>
|
|
|
|
Considerações Finais: <span id='discurso' style="margin-right: 20px;">[[ cronometro_consideracoes ]]</span><span v-if="painel_aberto">
|
|
</span><br>
|
|
|
|
Personalizado: <span id='personalizado' style="margin-right: 20px;">[[ cronometro_personalizado ]]</span><span v-if="painel_aberto">
|
|
</span><br>
|
|
</div>
|
|
</div>
|
|
<div v-if="sessao_solene">
|
|
<div class="col-md-4 text-center painel" id="tema_solene_div">
|
|
<h2 class="text-subtitle">Tema da Sessão Solene</h2>
|
|
<span id="sessao_solene_tema" class="text-value" v-bind:style="{fontSize: fontSize +'px'}">[[ sessao_solene_tema ]]</span>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="painel_aberto" class="row" style="margin-top: 50px;">
|
|
<div v-if="!sessao_finalizada" class="col-md-6 text-center painel" id="resultado_votacao_div">
|
|
<h2 class="text-subtitle">Resultado</h2>
|
|
<div v-if="materia_legislativa_texto" v-bind:style="{fontSize: fontSize +'px'}">
|
|
<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" class="col-md-6">
|
|
<div v-if="!sessao_finalizada" class="text-center painel" id="obs_materia_div">
|
|
<h2 class="text-subtitle">[[ mat_em_votacao ]]</h2>
|
|
<div v-if="materia_legislativa_texto !== ''" v-bind:style="{fontSize: fontSize +'px'}">
|
|
<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" v-bind:style="{fontSize: fontSize +'px'}">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" v-bind:style="{fontSize: fontSize +'px'}">
|
|
<h1>A votação só aparecerá quando o painel estiver aberto</h1>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- outer div -->
|
|
</div> <!-- app painel -->
|
|
</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 %}
|
|
{% 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,
|
|
// 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
|
|
// 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"));
|
|
|
|
})
|
|
</script>
|
|
</html>
|