mirror of https://github.com/interlegis/sapl.git
Heitor
2 weeks ago
committed by
GitHub
GitHub
22 changed files with 1523 additions and 570 deletions
@ -1,43 +1,24 @@ |
|||||
|
: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; |
|
||||
} |
|
||||
.text-subtitle { |
|
||||
color: #459170; |
|
||||
font-weight: bold; |
|
||||
} |
|
||||
.data-hora { |
|
||||
font-size: 180%; |
|
||||
} |
|
||||
|
|
||||
.text-value { |
.separador-vertical { |
||||
color: white; |
border-right: 1px solid #333; |
||||
} |
min-height: 100vh; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
.logo-painel { |
.text-subtitle { |
||||
max-width: 100%; |
color: #81c784; |
||||
} |
font-weight: 600; |
||||
.painels { |
|
||||
flex-wrap: wrap; |
|
||||
} |
|
||||
.painel{ |
|
||||
margin-top: 1rem; |
|
||||
table { |
|
||||
width: 100%; |
|
||||
} |
|
||||
h2 { |
|
||||
margin-bottom: 0.5rem; |
|
||||
} |
|
||||
#votacao, #oradores_list { |
|
||||
text-align: left; |
|
||||
display: inline-block; |
|
||||
margin-bottom: 1rem; |
|
||||
} |
|
||||
} |
|
||||
} |
} |
||||
@ -1,238 +1,383 @@ |
|||||
import './scss/votacao.scss' |
import './scss/votacao.scss' |
||||
import Vue from 'vue' |
import Vue from 'vue' |
||||
import { FormSelectPlugin } from 'bootstrap-vue' |
import Vuex from 'vuex' |
||||
|
import { mapState, mapMutations } from 'vuex' |
||||
import axios from 'axios' |
import axios from 'axios' |
||||
|
|
||||
|
// Import components
|
||||
|
import VotacaoNominal from '../../components/votacao/VotacaoNominal.vue' |
||||
|
import VotacaoMateria from '../../components/votacao/VotacaoMateria.vue' |
||||
|
import VotacaoVotos from '../../components/votacao/VotacaoVotos.vue' |
||||
|
import VotacaoResultado from '../../components/votacao/VotacaoResultado.vue' |
||||
|
import VotacaoObservacoes from '../../components/votacao/VotacaoObservacoes.vue' |
||||
|
|
||||
|
// Register components globally
|
||||
|
Vue.component('votacao-nominal', VotacaoNominal) |
||||
|
Vue.component('votacao-materia', VotacaoMateria) |
||||
|
Vue.component('votacao-votos', VotacaoVotos) |
||||
|
Vue.component('votacao-resultado', VotacaoResultado) |
||||
|
Vue.component('votacao-observacoes', VotacaoObservacoes) |
||||
|
|
||||
axios.defaults.xsrfCookieName = 'csrftoken' |
axios.defaults.xsrfCookieName = 'csrftoken' |
||||
axios.defaults.xsrfHeaderName = 'X-CSRFToken' |
axios.defaults.xsrfHeaderName = 'X-CSRFToken' |
||||
|
|
||||
Vue.use(FormSelectPlugin) |
Vue.use(Vuex) |
||||
|
|
||||
console.log('votacao main.js carregado') |
console.log('votacao main.js carregado') |
||||
|
|
||||
|
// Vuex store
|
||||
|
const store = new Vuex.Store({ |
||||
|
state: { |
||||
|
sessao_aberta: false, |
||||
|
painel_aberto: false, |
||||
|
mostrar_voto: false, |
||||
|
sessao: {}, |
||||
|
parlamentares: [], |
||||
|
oradores: [], |
||||
|
materia: {}, |
||||
|
resultado: {}, |
||||
|
message: '', |
||||
|
tipos_resultado: [], |
||||
|
}, |
||||
|
mutations: { |
||||
|
sessaoStatus (state, value) { |
||||
|
state.sessao_aberta = value |
||||
|
}, |
||||
|
painelStatus (state, value) { |
||||
|
state.painel_aberto = value |
||||
|
}, |
||||
|
setParlamentares (state, parlamentares) { |
||||
|
state.parlamentares = parlamentares |
||||
|
}, |
||||
|
updateParlamentarVoto (state, { parlamentar_id, voto, voted }) { |
||||
|
const p = state.parlamentares.find(p => p.parlamentar_id === parlamentar_id) |
||||
|
if (p) { |
||||
|
Vue.set(p, 'voto', voto) |
||||
|
if (voted !== undefined) { |
||||
|
Vue.set(p, 'voted', voted) |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
setOradores (state, oradores) { |
||||
|
state.oradores = oradores |
||||
|
}, |
||||
|
setMateria (state, materia) { |
||||
|
state.materia = materia |
||||
|
}, |
||||
|
setResultado (state, resultado) { |
||||
|
state.resultado = resultado |
||||
|
}, |
||||
|
setMessage (state, message) { |
||||
|
state.message = message |
||||
|
}, |
||||
|
setMostrarVoto (state, mostrar_voto) { |
||||
|
state.mostrar_voto = mostrar_voto |
||||
|
}, |
||||
|
setSessao (state, sessao) { |
||||
|
state.sessao = sessao |
||||
|
}, |
||||
|
setTiposResultado (state, tipos) { |
||||
|
state.tipos_resultado = tipos |
||||
|
} |
||||
|
}, |
||||
|
getters: { |
||||
|
totalVotos (state) { |
||||
|
const totals = [ |
||||
|
{ tipo: 'Sim', total: 0 }, |
||||
|
{ tipo: 'Não', total: 0 }, |
||||
|
{ tipo: 'Abstenção', total: 0 }, |
||||
|
{ tipo: 'Não Votou', total: 0 } |
||||
|
] |
||||
|
state.parlamentares.forEach(p => { |
||||
|
if (p.voto) { |
||||
|
const entry = totals.find(t => t.tipo === p.voto) |
||||
|
if (entry) entry.total++ |
||||
|
} |
||||
|
}) |
||||
|
return totals |
||||
|
}, |
||||
|
numPresentes (state) { |
||||
|
return state.parlamentares.length |
||||
|
}, |
||||
|
totalVotados (state) { |
||||
|
return state.parlamentares.filter(p => p.voto && p.voto !== 'Não Votou').length |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
const BACKOFF = 500 |
||||
|
const PING_INTERVAL = 30000 |
||||
|
|
||||
const v = new Vue({ // eslint-disable-line
|
const v = new Vue({ // eslint-disable-line
|
||||
|
store, |
||||
delimiters: ['[[', ']]'], |
delimiters: ['[[', ']]'], |
||||
el: '#votacao', |
el: '#votacao', |
||||
data () { |
data () { |
||||
return { |
return { |
||||
votacao_aberta: true, |
controllerId: null, |
||||
edit_votes: true, |
ws: null, |
||||
disable_resultado: false, |
isOpen: false, |
||||
resultado_selected: "", |
error: null, |
||||
observacoes: "", |
pingTimer: null, |
||||
error_message: "", |
reconnectTimer: null, |
||||
tipo_votacao: 2, |
error_message: '', |
||||
tipo_votacao_descricao: "Votação Nominal", |
|
||||
materia: "Projeto de Lei Ordinária nº 3 de 2025", |
|
||||
ementa: "Institui no Município de Pato Branco o Projeto Chá de Fralda Social. ", |
|
||||
parlamentares: [ |
|
||||
{ |
|
||||
"parlamentar_id": 197, |
|
||||
"nome_parlamentar": "Alexandre Zoche", |
|
||||
"filiacao": "PRD" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 196, |
|
||||
"nome_parlamentar": "Anne Cristine Gomes da Silva Cavali", |
|
||||
"filiacao": "PSD" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 194, |
|
||||
"nome_parlamentar": "Diogo Domingos Grando", |
|
||||
"filiacao": "PRD" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 186, |
|
||||
"nome_parlamentar": "Eduardo Albani Dala Costa", |
|
||||
"filiacao": "Republicanos" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 3, |
|
||||
"nome_parlamentar": "Fabricio Preis de Mello", |
|
||||
"filiacao": "PL" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 6, |
|
||||
"nome_parlamentar": "Joecir Bernardi", |
|
||||
"filiacao": "PSD" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 187, |
|
||||
"nome_parlamentar": "Lindomar Rodrigo Brandão", |
|
||||
"filiacao": "PP" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 195, |
|
||||
"nome_parlamentar": "Rafael Foss", |
|
||||
"filiacao": "União" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 11, |
|
||||
"nome_parlamentar": "Rodrigo José Correia", |
|
||||
"filiacao": "União" |
|
||||
}, |
|
||||
{ |
|
||||
"parlamentar_id": 192, |
|
||||
"nome_parlamentar": "Thania Maria Caminski Gehlen", |
|
||||
"filiacao": "PP" |
|
||||
} |
|
||||
], |
|
||||
//TODO: check if votos_parlamentares is null
|
|
||||
votos_parlamentares: { |
|
||||
186: { |
|
||||
"voto": "Não", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 186, |
|
||||
"parlamentar_nome": "Eduardo Albani Dala Costa" |
|
||||
}, |
|
||||
195: { |
|
||||
"voto": "Não", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 195, |
|
||||
"parlamentar_nome": "Rafael Foss" |
|
||||
}, |
|
||||
196: { |
|
||||
"voto": "Não", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 196, |
|
||||
"parlamentar_nome": "Anne Cristine Gomes da Silva Cavali" |
|
||||
}, |
|
||||
3: { |
|
||||
"voto": "Sim", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 3, |
|
||||
"parlamentar_nome": "Fabricio Preis de Mello" |
|
||||
}, |
|
||||
11: { |
|
||||
"voto": "Não", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 11, |
|
||||
"parlamentar_nome": "Rodrigo José Correia" |
|
||||
}, |
|
||||
194: { |
|
||||
"voto": "Não", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 194, |
|
||||
"parlamentar_nome": "Diogo Domingos Grando" |
|
||||
}, |
|
||||
197: { |
|
||||
"voto": "Não", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 197, |
|
||||
"parlamentar_nome": "Alexandre Zoche" |
|
||||
}, |
|
||||
6: { |
|
||||
"voto": "Não", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 6, |
|
||||
"parlamentar_nome": "Joecir Bernardi" |
|
||||
}, |
|
||||
187: { |
|
||||
"voto": "Abstenção", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 187, |
|
||||
"parlamentar_nome": "Lindomar Rodrigo Brandão" |
|
||||
}, |
|
||||
192: { |
|
||||
"voto": "Sim", |
|
||||
"materia_id": 31919, |
|
||||
"parlamentar_id": 192, |
|
||||
"parlamentar_nome": "Thania Maria Caminski Gehlen" |
|
||||
} |
|
||||
}, |
|
||||
options: [ |
|
||||
{ text: 'Sim', value: 'voto_sim' }, |
|
||||
{ text: 'Não', value: 'voto_nao' }, |
|
||||
{ text: 'Abstenção', value: 'abstencao' }, |
|
||||
{ text: 'Não Votou', value: 'nao_votou' }, |
|
||||
], |
|
||||
tipos_resultados: [ |
|
||||
{ |
|
||||
"id": 13, |
|
||||
"nome": "Aprovada a retirada de pauta" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 10, |
|
||||
"nome": "Aprovada por dois terços" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 2, |
|
||||
"nome": "Aprovada por maioria absoluta" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 1, |
|
||||
"nome": "Aprovada por maioria simples - conforme o art. 37 do RI o presidente não vota" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 8, |
|
||||
"nome": "Aprovada por maioria simples - conforme o art. 37 do RI o presidente votou pelo desempate" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 15, |
|
||||
"nome": "Aprovada." |
|
||||
}, |
|
||||
{ |
|
||||
"id": 7, |
|
||||
"nome": "Empate - conforme o art. 37 do RI o presidente vota para desempate" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 16, |
|
||||
"nome": "IMPROCEDENTE" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 12, |
|
||||
"nome": "Leitura em Plenário" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 17, |
|
||||
"nome": "PROCEDENTE" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 11, |
|
||||
"nome": "Prejudicada" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 5, |
|
||||
"nome": "Rejeitada" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 14, |
|
||||
"nome": "Rejeitada a retirada de pauta" |
|
||||
}, |
|
||||
{ |
|
||||
"id": 9, |
|
||||
"nome": "Rejeitada por maioria simples - conforme o art. 37 do RI o presidente votou pelo desempate" |
|
||||
} |
|
||||
], |
|
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
watch: {}, |
|
||||
|
|
||||
computed: { |
computed: { |
||||
total_votos() { |
...mapState([ |
||||
// TODO: use number index instead of string ("sim", "não") as keys.
|
'sessao_aberta', 'painel_aberto', 'sessao', |
||||
var groupedVotes = Map.groupBy(Object.values(this.votos_parlamentares), ({ voto }) => voto ) |
'parlamentares', 'materia', 'resultado', 'message', 'mostrar_voto' |
||||
// initialize total_votos
|
]), |
||||
total_votos = [ |
}, |
||||
{"tipo": "Sim", "total": 0}, |
|
||||
{"tipo": "Não", "total": 0}, |
mounted () { |
||||
{"tipo": "Abstenção", "total": 0}, |
console.log('Votacao app mounted!') |
||||
{"tipo": "Não Votou", total: 0} |
const el = this.$el |
||||
] |
this.controllerId = el.dataset.controllerId || window.controllerId |
||||
for (const [key, value] of groupedVotes.entries()) { |
console.log(`Votacao ControllerId: ${this.controllerId}`) |
||||
const index = total_votos.findIndex(item => item.tipo === key); |
if (this.controllerId) { |
||||
total_votos[index].total = value.length |
this.connectWS() |
||||
} |
} else { |
||||
return total_votos |
this.error_message = 'Erro: controller_id não definido. Não é possível conectar ao WebSocket.' |
||||
|
console.error('No controllerId found — WebSocket will not connect.') |
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
created () {}, |
methods: { |
||||
|
...mapMutations([ |
||||
|
'sessaoStatus', 'painelStatus', 'setParlamentares', |
||||
|
'updateParlamentarVoto', 'setOradores', 'setMateria', |
||||
|
'setResultado', 'setMessage', 'setMostrarVoto', 'setSessao', |
||||
|
'setTiposResultado' |
||||
|
]), |
||||
|
|
||||
methods: {}, |
wsURL () { |
||||
|
const proto = location.protocol === 'https:' ? 'wss' : 'ws' |
||||
|
return `${proto}://${location.host}/ws/painel/${this.controllerId}/` |
||||
|
}, |
||||
|
|
||||
mounted () { |
voteURL () { |
||||
console.log("Votacao app mounted!") |
return `/v2/painel/controller/${this.controllerId}/vote` |
||||
|
}, |
||||
|
|
||||
|
castVote ({ parlamentar_id, voto }) { |
||||
|
console.log(`Casting vote: parlamentar=${parlamentar_id}, voto=${voto}`) |
||||
|
axios.post(this.voteURL(), { |
||||
|
parlamentar_id: parlamentar_id, |
||||
|
voto: voto |
||||
|
}, { |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
.then(response => { |
||||
|
console.log('Vote cast successfully:', response.data) |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error('Error casting vote:', error.response ? error.response.data : error) |
||||
|
this.error_message = 'Erro ao registrar voto. Tente novamente.' |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
cancelURL () { |
||||
|
return `/v2/painel/controller/${this.controllerId}/cancel` |
||||
|
}, |
||||
|
|
||||
|
closeURL () { |
||||
|
return `/v2/painel/controller/${this.controllerId}/close` |
||||
|
}, |
||||
|
|
||||
|
onCancelar () { |
||||
|
console.log('Votação cancelada') |
||||
|
axios.post(this.cancelURL(), {}, { |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
.then(response => { |
||||
|
console.log('Votação cancelada com sucesso:', response.data) |
||||
|
if (response.data.redirect_url) { |
||||
|
window.location.href = response.data.redirect_url |
||||
|
} |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error('Erro ao cancelar votação:', error.response ? error.response.data : error) |
||||
|
const msg = error.response && error.response.data && error.response.data.message |
||||
|
? error.response.data.message |
||||
|
: 'Erro ao cancelar votação. Tente novamente.' |
||||
|
this.error_message = msg |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
onFechar (data) { |
||||
|
console.log('Fechar votação:', data) |
||||
|
if (!data.resultado_selected) { |
||||
|
this.error_message = 'Não é possível finalizar a votação sem nenhum resultado da votação.' |
||||
|
return |
||||
|
} |
||||
|
axios.post(this.closeURL(), { |
||||
|
resultado_id: data.resultado_selected, |
||||
|
observacoes: data.observacoes || '' |
||||
|
}, { |
||||
|
headers: { 'Content-Type': 'application/json' } |
||||
|
}) |
||||
|
.then(response => { |
||||
|
console.log('Votação finalizada com sucesso:', response.data) |
||||
|
this.error_message = '' |
||||
|
if (response.data.redirect_url) { |
||||
|
window.location.href = response.data.redirect_url |
||||
|
} |
||||
|
}) |
||||
|
.catch(error => { |
||||
|
console.error('Erro ao fechar votação:', error.response ? error.response.data : error) |
||||
|
const msg = error.response && error.response.data && error.response.data.message |
||||
|
? error.response.data.message |
||||
|
: 'Erro ao fechar votação. Tente novamente.' |
||||
|
this.error_message = msg |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
updateState (data) { |
||||
|
try { |
||||
|
this.sessaoStatus(data.sessao_aberta) |
||||
|
this.painelStatus(data.painel_aberto) |
||||
|
this.setMostrarVoto(data.mostrar_voto) |
||||
|
|
||||
|
if (data.sessao) { |
||||
|
this.setSessao(data.sessao) |
||||
|
} |
||||
|
|
||||
|
if (data.parlamentares) { |
||||
|
data.parlamentares.forEach(p => { |
||||
|
p.voto = p.voto || '' |
||||
|
}) |
||||
|
this.setParlamentares(data.parlamentares) |
||||
|
} |
||||
|
|
||||
|
if (data.message) { |
||||
|
this.setMessage(data.message) |
||||
|
} |
||||
|
|
||||
|
if (data.oradores) { |
||||
|
this.setOradores(data.oradores) |
||||
|
} |
||||
|
|
||||
|
if (data.materia) { |
||||
|
this.setMateria(data.materia) |
||||
|
|
||||
|
if (data.materia.resultado) { |
||||
|
this.setResultado(data.materia.resultado) |
||||
|
|
||||
|
// If there are existing votes, apply them to parlamentares
|
||||
|
if (data.materia.resultado.votos_parlamentares) { |
||||
|
const votos = data.materia.resultado.votos_parlamentares |
||||
|
if (Array.isArray(votos)) { |
||||
|
// Array format: [{parlamentar_id: X, voto: "Sim"}, ...]
|
||||
|
votos.forEach(v => { |
||||
|
if (v && v.parlamentar_id && v.voto) { |
||||
|
this.updateParlamentarVoto({ |
||||
|
parlamentar_id: v.parlamentar_id, |
||||
|
voto: v.voto |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} else if (typeof votos === 'object') { |
||||
|
// Object format from DB view: {"5": {"voto": "Sim", "parlamentar_id": 5, ...}, ...}
|
||||
|
Object.keys(votos).forEach(key => { |
||||
|
const v = votos[key] |
||||
|
if (v && v.voto) { |
||||
|
this.updateParlamentarVoto({ |
||||
|
parlamentar_id: parseInt(key), |
||||
|
voto: v.voto |
||||
|
}) |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} else { |
||||
|
this.setResultado({}) |
||||
|
} |
||||
|
} else { |
||||
|
this.setMateria({}) |
||||
|
this.setResultado({}) |
||||
|
} |
||||
|
|
||||
|
if (data.tipos_resultado) { |
||||
|
this.setTiposResultado(data.tipos_resultado) |
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.error('Error updating state:', e) |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleVoteUpdate (data) { |
||||
|
console.log('Received vote update via WebSocket:', data) |
||||
|
this.updateParlamentarVoto({ |
||||
|
parlamentar_id: data.parlamentar_id, |
||||
|
voto: data.voto |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
connectWS () { |
||||
|
const url = this.wsURL() |
||||
|
this.ws = new WebSocket(url) |
||||
|
|
||||
|
this.ws.addEventListener('open', () => { |
||||
|
this.isOpen = true |
||||
|
this.error = null |
||||
|
this.error_message = '' |
||||
|
console.log(`✅ Votação WebSocket connected to ${url}`) |
||||
|
this.ws.send(JSON.stringify({ type: 'echo', message: 'Votacao client connected' })) |
||||
|
|
||||
|
this.pingTimer = setInterval(() => { |
||||
|
this.ws.send(JSON.stringify({ type: 'ping', ts: Date.now() })) |
||||
|
}, PING_INTERVAL) |
||||
|
}) |
||||
|
|
||||
|
this.ws.addEventListener('message', (message) => { |
||||
|
try { |
||||
|
const data = JSON.parse(message.data) |
||||
|
console.debug('Votacao WS message:', data) |
||||
|
|
||||
|
if (data.type === 'data') { |
||||
|
this.updateState(data) |
||||
|
} else if (data.type === 'vote.update') { |
||||
|
this.handleVoteUpdate(data) |
||||
|
} else if (data.type === 'echo') { |
||||
|
console.log('Votacao echo:', data) |
||||
|
} else if (data.type === 'ping') { |
||||
|
// ignore pings
|
||||
|
} |
||||
|
} catch (e) { |
||||
|
console.error('Votacao WS parse error:', e) |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
this.ws.addEventListener('close', (e) => { |
||||
|
console.log('❌ Votação WebSocket closed:', e) |
||||
|
this.isOpen = false |
||||
|
this.reconnectTimer = setTimeout(() => this.connectWS(), BACKOFF) |
||||
|
}) |
||||
|
|
||||
|
this.ws.addEventListener('error', (e) => { |
||||
|
this.error = e |
||||
|
console.error('❌ Votação WebSocket error:', e) |
||||
|
}) |
||||
|
}, |
||||
|
|
||||
|
closeWS () { |
||||
|
try { |
||||
|
this.ws && this.ws.close() |
||||
|
} catch (_) { |
||||
|
console.log('Error closing WS') |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
beforeDestroy () { |
||||
|
if (this.pingTimer) { |
||||
|
clearInterval(this.pingTimer) |
||||
|
} |
||||
|
if (this.reconnectTimer) { |
||||
|
clearTimeout(this.reconnectTimer) |
||||
|
} |
||||
|
this.closeWS() |
||||
|
} |
||||
} |
} |
||||
}) |
}) |
||||
|
|||||
@ -0,0 +1,62 @@ |
|||||
|
<template> |
||||
|
<div class="painel position-relative bottom-0 hora-brasao"> |
||||
|
<div class="row justify-content-center align-items-center"> |
||||
|
<div class="col-4 text-center" id="logo-container" v-if="brasao"> |
||||
|
<img :src="brasao" id="logo-painel" class="logo-painel" alt="Brasão" /> |
||||
|
</div> |
||||
|
<div :class="['text-center', brasao ? 'col-4' : 'col-12 mt-5']" id="relogio-container"> |
||||
|
<span class="fs-1 fw-bold" id="relogio">{{ relogio }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
name: 'PainelFooter', |
||||
|
props: { |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
brasao: "", |
||||
|
data_atual: "", |
||||
|
relogio: "", |
||||
|
currentDateTimeId: null, |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
startCurrentDateTime() { |
||||
|
this.data_atual = moment().utcOffset(-3).format("DD/MM/YY"); |
||||
|
this.currentDateTimeId = setInterval(() => { |
||||
|
this.relogio = moment.utc().utcOffset(-3).format("HH:mm:ss"); |
||||
|
}, 500); |
||||
|
}, |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
if (this.currentDateTimeId) { |
||||
|
clearInterval(this.currentDateTimeId); |
||||
|
console.log('currentDateTimeId Interval cleared.'); |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(["sessao_aberta", "painel_aberto"]) |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log('PainelFooter component mounted'); |
||||
|
this.startCurrentDateTime(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
.logo-painel { |
||||
|
max-height: 150px; |
||||
|
width: auto; |
||||
|
} |
||||
|
.hora-brasao { |
||||
|
border-top: 1px solid #333; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,25 @@ |
|||||
|
<template> |
||||
|
<div v-if="materia && materia.texto"> |
||||
|
<div> |
||||
|
Matéria: {{ materia.texto }} |
||||
|
<br /> |
||||
|
Ementa: {{ materia.ementa }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else class="alert alert-info"> |
||||
|
Nenhuma matéria aberta para votação. |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
name: 'VotacaoMateria', |
||||
|
computed: { |
||||
|
...mapState(['materia']) |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log('VotacaoMateria mounted'); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -1,11 +1,73 @@ |
|||||
<template> |
<template> |
||||
<div class="VotacaoNominal"> |
<fieldset> |
||||
<pre v-text="$attrs"/> |
<legend>Votação Nominal</legend> |
||||
</div> |
|
||||
|
<div v-if="error_message" class="alert alert-danger"> |
||||
|
{{ error_message }} |
||||
|
</div> |
||||
|
|
||||
|
<votacao-materia></votacao-materia> |
||||
|
<br /> |
||||
|
|
||||
|
<votacao-votos @cast-vote="onCastVote" ref="votos"></votacao-votos> |
||||
|
|
||||
|
<votacao-resultado ref="resultado"></votacao-resultado> |
||||
|
|
||||
|
<votacao-observacoes |
||||
|
:observacoes.sync="observacoes" |
||||
|
:resultado-selected.sync="resultado_selected" |
||||
|
:disabled="disable_resultado" |
||||
|
@cancelar="onCancelar" |
||||
|
@fechar="onFechar" |
||||
|
ref="observacoesComp"> |
||||
|
</votacao-observacoes> |
||||
|
</fieldset> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
import { mapState } from 'vuex'; |
||||
name: 'Votacaonominal' |
export default { |
||||
}; |
name: 'VotacaoNominal', |
||||
|
props: { |
||||
|
isOpen: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
errorMessage: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
edit_votes: true, |
||||
|
disable_resultado: false, |
||||
|
resultado_selected: '', |
||||
|
observacoes: '', |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['parlamentares', 'materia']), |
||||
|
error_message() { |
||||
|
return this.errorMessage; |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
onCastVote({ parlamentar_id, voto }) { |
||||
|
this.$emit('cast-vote', { parlamentar_id, voto }); |
||||
|
}, |
||||
|
onCancelar() { |
||||
|
this.$emit('cancelar'); |
||||
|
}, |
||||
|
onFechar() { |
||||
|
this.$emit('fechar', { |
||||
|
resultado_selected: this.resultado_selected, |
||||
|
observacoes: this.observacoes |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log('VotacaoNominal mounted'); |
||||
|
} |
||||
|
}; |
||||
</script> |
</script> |
||||
@ -0,0 +1,84 @@ |
|||||
|
<template> |
||||
|
<div v-if="parlamentares && parlamentares.length > 0"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
<label for="resultado_votacao"><strong>Resultado da Votação</strong></label> |
||||
|
<select v-model="resultadoSelecionado" id="resultado_votacao" class="select form-control" :disabled="disabled"> |
||||
|
<option value="">---------</option> |
||||
|
<option v-for="tipo in tipos_resultado" |
||||
|
:key="tipo.id" |
||||
|
:value="tipo.id"> |
||||
|
{{ tipo.nome }} |
||||
|
</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<br /> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
Observações<br/> |
||||
|
<textarea id="observacao" v-model="textoObservacoes" style="width:100%;" rows="7"></textarea> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<br /><br /> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12"> |
||||
|
<div class="form-group row justify-content-between"> |
||||
|
<input type="button" id="cancelar-votacao" value="Cancelar Votação" |
||||
|
class="btn btn-warning" @click="$emit('cancelar')" /> |
||||
|
<input type="button" id="salvar-votacao" value="Fechar Votação" |
||||
|
class="btn btn-primary" @click="$emit('fechar')" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
name: 'VotacaoObservacoes', |
||||
|
props: { |
||||
|
disabled: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
}, |
||||
|
observacoes: { |
||||
|
type: String, |
||||
|
default: '' |
||||
|
}, |
||||
|
resultadoSelected: { |
||||
|
type: [String, Number], |
||||
|
default: '' |
||||
|
} |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
textoObservacoes: this.observacoes, |
||||
|
resultadoSelecionado: this.resultadoSelected, |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
observacoes(val) { |
||||
|
this.textoObservacoes = val; |
||||
|
}, |
||||
|
textoObservacoes(val) { |
||||
|
this.$emit('update:observacoes', val); |
||||
|
}, |
||||
|
resultadoSelected(val) { |
||||
|
this.resultadoSelecionado = val; |
||||
|
}, |
||||
|
resultadoSelecionado(val) { |
||||
|
this.$emit('update:resultadoSelected', val); |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
...mapState(['parlamentares', 'tipos_resultado']) |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log('VotacaoObservacoes mounted'); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,49 @@ |
|||||
|
<template> |
||||
|
<div v-if="parlamentares && parlamentares.length > 0"> |
||||
|
<legend>Situação da Votação:</legend> |
||||
|
<div id="soma_votos"> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12">Sim: {{ votosSim }}</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12">Não: {{ votosNao }}</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12">Abstenções: {{ votosAbstencao }}</div> |
||||
|
</div> |
||||
|
<div class="row"> |
||||
|
<div class="col-md-12">Ainda não votaram: {{ naoVotou }}</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters, mapState } from 'vuex'; |
||||
|
export default { |
||||
|
name: 'VotacaoResultado', |
||||
|
computed: { |
||||
|
...mapState(['parlamentares']), |
||||
|
...mapGetters(['totalVotos']), |
||||
|
votosSim() { |
||||
|
const entry = this.totalVotos.find(t => t.tipo === 'Sim'); |
||||
|
return entry ? entry.total : 0; |
||||
|
}, |
||||
|
votosNao() { |
||||
|
const entry = this.totalVotos.find(t => t.tipo === 'Não'); |
||||
|
return entry ? entry.total : 0; |
||||
|
}, |
||||
|
votosAbstencao() { |
||||
|
const entry = this.totalVotos.find(t => t.tipo === 'Abstenção'); |
||||
|
return entry ? entry.total : 0; |
||||
|
}, |
||||
|
naoVotou() { |
||||
|
const entry = this.totalVotos.find(t => t.tipo === 'Não Votou'); |
||||
|
return entry ? entry.total : 0; |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log('VotacaoResultado mounted'); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
@ -0,0 +1,44 @@ |
|||||
|
<template> |
||||
|
<fieldset class="form-group" v-if="parlamentares && parlamentares.length > 0"> |
||||
|
<legend>Votos</legend> |
||||
|
<div class="row"> |
||||
|
<template v-for="p in parlamentares"> |
||||
|
<div class="col-md-4" id="styleparlamentar" :key="'nome_' + p.parlamentar_id"> |
||||
|
{{ p.nome_parlamentar }} |
||||
|
</div> |
||||
|
<div class="col-md-5" :key="'voto_' + p.parlamentar_id"> |
||||
|
<select class="form-control" |
||||
|
:name="'voto_parlamentar_' + p.parlamentar_id" |
||||
|
:value="p.voto || 'Não Votou'" |
||||
|
@change="onVoteChange(p.parlamentar_id, $event.target.value)"> |
||||
|
<option value="Não Votou">Não Votou</option> |
||||
|
<option value="Sim">Sim</option> |
||||
|
<option value="Não">Não</option> |
||||
|
<option value="Abstenção">Abstenção</option> |
||||
|
</select> |
||||
|
</div> |
||||
|
</template> |
||||
|
</div> |
||||
|
</fieldset> |
||||
|
<div class="alert alert-info alert-dismissible" role="alert" v-else> |
||||
|
<div>Não existe nenhum parlamentar presente para que a votação ocorra.</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapState } from 'vuex'; |
||||
|
export default { |
||||
|
name: 'VotacaoVotos', |
||||
|
computed: { |
||||
|
...mapState(['parlamentares']) |
||||
|
}, |
||||
|
methods: { |
||||
|
onVoteChange(parlamentar_id, voto) { |
||||
|
this.$emit('cast-vote', { parlamentar_id, voto }); |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log('VotacaoVotos mounted'); |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
Loading…
Reference in new issue