BrainBlast/ui/src/views/SettingsView.vue

<template>

    <h1 class="title mb-4 ml-5 mt-5">Paramètres</h1>
    <hr/>
    <h2 class="title ml-10 mb-5 mt-5">Son</h2>
    <div style="display: flex; align-items: center;">
      <v-switch label="Activer le son intégré" v-model="EmbeddedSound" class="ml-10" color="primary"/>
      <div style="width: 250px; margin-left: 16px;">
        <v-slider class="ml-15" :disabled="EmbeddedSound === false" v-model="EmbeddedSoundVolume" color="primary"/>
      </div>
    </div>
    <v-switch label="Activer le son MQTT" v-model="MQTTSound" class="ml-10" color="primary"/>

</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>