mirror of https://github.com/interlegis/sapl.git
6 changed files with 252 additions and 49 deletions
@ -0,0 +1,71 @@ |
|||||
|
<template> |
||||
|
<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 text-center"> |
||||
|
<span id="sessao_plenaria_data" class="text-value"> Data Início: {{ sessao_plenaria_data }} </span> |
||||
|
</div> |
||||
|
<div class="col text-center"> |
||||
|
<span id="sessao_plenaria_hora_inicio" class="text-value"> Hora Início: {{ sessao_plenaria_hora_inicio }} </span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row justify-content-center"> |
||||
|
<div class="col-1"> |
||||
|
<img v-bind:src="brasao" id="logo-painel" class="logo-painel" alt=""/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="row justify-content-center"> |
||||
|
<h2 class="text-danger"><span id="message">{{ message }}</span></h2> |
||||
|
</div> |
||||
|
|
||||
|
<div class="row"> |
||||
|
<div class="col text-center"><span class="text-value data-hora" id="date">{{ data_atual }}</span></div> |
||||
|
<div class="col text-center"><span class="text-value data-hora" id="relogio">{{ relogio }}</span></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'PainelHeader', |
||||
|
|
||||
|
props: { |
||||
|
}, |
||||
|
|
||||
|
data() { |
||||
|
return { |
||||
|
sessao_plenaria: "Sessao Plenaria Teste", |
||||
|
sessao_plenaria_data: "22/10/2025", |
||||
|
sessao_plenaria_hora_inicio: "13:30", |
||||
|
brasao: "", |
||||
|
message: "painel fechado", |
||||
|
data_atual: "", |
||||
|
relogio: "", |
||||
|
currentDateTimeId: null, // stores the id returned by setInterval() |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
methods: { |
||||
|
startCurrentDateTime() { |
||||
|
this.data_atual = moment().utcOffset(-3).format("DD/MM/YY"); // RECOVER UTC OFFSET!!!! |
||||
|
this.currentDateTimeId = setInterval(() => { |
||||
|
this.relogio = moment.utc().utcOffset(-3).format("HH:mm:ss"); |
||||
|
}, 500); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
// Clear the interval before the component is destroyed |
||||
|
if (this.currentDateTimeId) { |
||||
|
clearInterval(this.currentDateTimeId); |
||||
|
console.log('currentDateTimeId Interval cleared.'); |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
mounted() { |
||||
|
console.log('PainelHeader component mounted'); |
||||
|
this.startCurrentDateTime(); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,36 @@ |
|||||
|
<template> |
||||
|
<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> |
||||
|
<table id="parlamentares_list"> |
||||
|
<tr v-for="p in parlamentares" :key="p.parlamentar_id" class="text-value text-center"> |
||||
|
<td style="padding-right:20px; color:yellow" > {{ p.nome_parlamentar }}</td> |
||||
|
<td style="padding-right:20px; color:yellow"> {{ p.filiacao }}</td> |
||||
|
<td style="padding-right:20px; color:yellow"></td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'PainelParlamentares', |
||||
|
data() { |
||||
|
return { |
||||
|
parlamentares: [], |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
console.log('PainelParlamentares mounted'); |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
|
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* Optional styling */ |
||||
|
</style> |
||||
@ -0,0 +1,117 @@ |
|||||
|
<template> |
||||
|
<div class="stopwatch-container"> |
||||
|
<div class="stopwatch-card"> |
||||
|
<h1>Stopwatch Timer</h1> |
||||
|
|
||||
|
<div class="time-input"> |
||||
|
<label>Set Time (seconds)</label> |
||||
|
<input |
||||
|
type="number" |
||||
|
v-model.number="initialTime" |
||||
|
:disabled="isRunning" |
||||
|
min="0" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
<div class="time-display" :class="{ 'time-up': time === 0 }"> |
||||
|
{{ formatTime(time) }} |
||||
|
</div> |
||||
|
|
||||
|
<div class="controls"> |
||||
|
<button @click="handleStartStop" :class="isRunning ? 'pause-btn' : 'start-btn'"> |
||||
|
{{ isRunning ? 'Pause' : 'Start' }} |
||||
|
</button> |
||||
|
|
||||
|
<button @click="handleReset" class="reset-btn"> |
||||
|
Reset |
||||
|
</button> |
||||
|
</div> |
||||
|
|
||||
|
<div v-if="time === 0" class="alert"> |
||||
|
<p>Time's up!</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Stopwatch', |
||||
|
data() { |
||||
|
return { |
||||
|
time: 300, |
||||
|
isRunning: false, |
||||
|
initialTime: 300, |
||||
|
intervalId: null |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleStartStop() { |
||||
|
this.isRunning = !this.isRunning; |
||||
|
|
||||
|
if (this.isRunning) { |
||||
|
this.intervalId = setInterval(() => { |
||||
|
if (this.time > 0) { |
||||
|
this.time--; |
||||
|
} else { |
||||
|
this.isRunning = false; |
||||
|
clearInterval(this.intervalId); |
||||
|
this.playSound(); |
||||
|
} |
||||
|
}, 1000); |
||||
|
} else { |
||||
|
clearInterval(this.intervalId); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
handleReset() { |
||||
|
this.isRunning = false; |
||||
|
clearInterval(this.intervalId); |
||||
|
this.time = this.initialTime; |
||||
|
}, |
||||
|
|
||||
|
playSound() { |
||||
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
||||
|
const oscillator = audioContext.createOscillator(); |
||||
|
const gainNode = audioContext.createGain(); |
||||
|
|
||||
|
oscillator.connect(gainNode); |
||||
|
gainNode.connect(audioContext.destination); |
||||
|
|
||||
|
oscillator.frequency.value = 800; |
||||
|
oscillator.type = 'sine'; |
||||
|
|
||||
|
gainNode.gain.setValueAtTime(0.3, audioContext.currentTime); |
||||
|
gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5); |
||||
|
|
||||
|
oscillator.start(audioContext.currentTime); |
||||
|
oscillator.stop(audioContext.currentTime + 0.5); |
||||
|
}, |
||||
|
|
||||
|
formatTime(seconds) { |
||||
|
const hrs = Math.floor(seconds / 3600); |
||||
|
const mins = Math.floor((seconds % 3600) / 60); |
||||
|
const secs = seconds % 60; |
||||
|
|
||||
|
if (hrs > 0) { |
||||
|
return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; |
||||
|
} |
||||
|
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`; |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
initialTime(newVal) { |
||||
|
if (!this.isRunning) { |
||||
|
this.time = newVal; |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
beforeDestroy() { |
||||
|
clearInterval(this.intervalId); |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/* Add your own styles here */ |
||||
|
</style> |
||||
Loading…
Reference in new issue