51 lines
2.5 KiB
Vue
51 lines
2.5 KiB
Vue
|
<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>
|