asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

V1 de la page avec une zone 'son' qui permet d'activer et régler le son intégré et d'activer le son MQTT

Browse Source
This commit is contained in:
Jérémy CHOMAZ
2024-03-17 12:34:59 +01:00
parent 4c42f15dc6
commit 340fbd3812
6 changed files with 307 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
ui/src/views/SettingsView.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<v-container class="ml-5">
<h1 class="title mb-4">Paramètres</h1>
<h2 class="title ml-10 mb-5">Son</h2>
<div style="display: flex; align-items: center;">
<v-checkbox label="Activer le son intégré" v-model="EmbeddedSound" class="ml-10"/>
<div style="width: 250px; margin-left: 16px;">
<v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume"/>
</div>
</div>
<v-checkbox label="Activer le son MQTT" v-model="MQTTSound" class="ml-10"/>
</v-container>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
const EmbeddedSound = ref(false); // Définition d'une référence pour la case à cocher. Initialement décochée.
const EmbeddedSoundVolume = ref(50); // Définition d'une référence pour la case à cocher. Initialement décochée.
const MQTTSound = ref(false); // Définition d'une référence pour la case à cocher. Initialement décochée.
onMounted(() => {
if (localStorage.getItem('EmbeddedSound')) {
EmbeddedSound.value = localStorage.getItem('EmbeddedSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('MQTTSound')) {
MQTTSound.value = localStorage.getItem('MQTTSound') === 'true'; // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
if (localStorage.getItem('EmbeddedSoundVolume')) {
EmbeddedSoundVolume.value = localStorage.getItem('EmbeddedSoundVolume'); // Si l'état de la case à cocher est stocké, le mettre dans la référence
}
});
watch(EmbeddedSound, (EmbeddedSoundNewValue) => {
if (EmbeddedSoundNewValue !== null) {
localStorage.setItem('EmbeddedSound', EmbeddedSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(EmbeddedSoundVolume, (EmbeddedSoundVolumeNewValue) => {
if (EmbeddedSoundVolumeNewValue !== null) {
localStorage.setItem('EmbeddedSoundVolume', EmbeddedSoundVolumeNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
watch(MQTTSound, (MQTTSoundNewValue) => {
if (MQTTSoundNewValue !== null) {
localStorage.setItem('MQTTSound', MQTTSoundNewValue); // Mettre à jour l'état de la case à cocher dans le LocalStorage chaque fois qu'il change.
}
});
</script>