BrainBlast/ui/src/views/SettingsView.vue

<template> 
	<v-label class="title-style-1">Paramètres</v-label> 
	<v-divider :thickness="2" class="border-opacity-100" color="primary"/> 
	<v-label class="title-style-2">Son</v-label> 
	<div class="mutltiple-per-line">   
		<v-switch hide-details label="Activer le son intégré" v-model="EmbeddedSound" class="ml-15" color="primary"/>   
		<div>     
	  		<v-slider hide-details class="v-slider-style 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 /> 
	<v-label class="title-style-2">Affichage</v-label>
	<div>   
		<v-switch hide-details label="Activer l'affichage des sattelites" v-model="SattelitesDisplay" class="ml-15 pb-3" color="primary"/> 
	</div>
	<v-divider /> 
	<v-label class="title-style-2">MQTT</v-label>  
	<div class="mutltiple-per-line">   
		<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>   
		<v-btn class="ml-10 mb-5" color="primary" @click="goToDebugRoute">Debugger</v-btn>
	</div> 
	<v-divider /> 
	<v-label class="title-style-2">Jeu</v-label>  
	<div class="mutltiple-per-line">   
		<v-switch hide-details label='Jouer le son de succès lorsque des points sont ajoutés' v-model="SuccessPlay" class="ml-15" color="primary"/>   
	</div>
	<v-switch hide-details label='Jouer le son de erreur lorsque des points sont enlevés' v-model="ErrorPlay" class="ml-15" color="primary"/>

</template>

  
<script setup>
  import { ref, onMounted, watch } from 'vue';
  import { useRouter } from 'vue-router';

  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);
  const SuccessPlay = ref(false);
  const ErrorPlay = ref(false);
  const router = useRouter();

  const goToDebugRoute = () => {   
	router.push({ 
	  name: 'Debugger MQTT' 
	}); // Redirige vers la route nommée 'debugger' 
  };

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

<style>
	.title-style-1{
		margin-top: 20px;
		margin-bottom: 16px;
		margin-left: 20px;
		font-size: 30px;
		opacity: 100%;
		font-weight: 500;
	}
	.title-style-2{
		margin-top: 20px;
		margin-bottom: 10px;
		margin-left: 40px;
		font-size: 25px;
		opacity: 100%;
		font-weight: 500;
	}
	.mutltiple-per-line{
		display: flex;
		align-items: center;
	}
	.v-slider-style{
		width: 250px; 
		margin-left: 16px;
		padding-top: px;
	}
</style>