BrainBlast/ui/src/views/SettingsView.vue

<template>

    <h1 class="title mb-4 ml-5 mt-5">Paramètres</h1>
    <v-divider :thickness="2" class="border-opacity-100" color="primary"/>
    <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-15" 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-15" color="primary"/>
    <v-divider />
    <h2 class="title ml-10 mb-5 mt-5">Affichage</h2>
    <v-switch label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15" color="primary"/>
    <v-divider />
    <h2 class="title ml-10 mb-5 mt-5">MQTT</h2>
    <div style="display: flex; align-items: center;">
      <v-icon v-model="MQTTBrokerState" class="ml-15 mb-5" color="error" icon="record">mdi-record</v-icon>
      <v-label class="ml-2 mb-10 mt-5">Etat du serveur MQTT</v-label>
    </div>
    <v-divider />
</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.
  const MQTTBrokerState = ref(false);  // Définition d'une référence pour la case à cocher. Initialement décochée.
  const SattelitesDisplay = ref(false);

  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
      } 
      if (localStorage.getItem('SattelitesDisplay')) {
        SattelitesDisplay.value = localStorage.getItem('SattelitesDisplay') === 'true';  // Added a default value for this switch
      } 
  });
  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.
      }  
  });
  watch(SattelitesDisplay, (SattelitesDisplaynewValue) => {
    if (SattelitesDisplaynewValue !== null) {
        localStorage.setItem('SattelitesDisplay', SattelitesDisplaynewValue);  // Added a default value for this switch
    } 
});
 
</script>