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