Merge branch 'theme'

ui/src/components/CardControl.vue

@@ -1,6 +1,6 @@
 <template>
   <v-card tile outlined class="card">
-    <v-card-title class="card__title primary">
+    <v-card-title class="card__title primary" color="primary">
       <v-icon left class="white--text pr-5 pl-2" size="50">mdi-camera-control</v-icon>
       Contrôles
     </v-card-title>

ui/src/plugins/vuetify.js

@@ -18,10 +18,10 @@ const CustomThemeDark = {
     primary: '#e91e1e',
     secondary: '#F44336',
     accent: '#FFC107',
-    error: '#FF5722',
+    error: '#e91e1e',
     warning: '#FFC107',
     info: '#607D8B',
-    success: '#4CAF50'
+    success: '#e91e1e'
   }
 }
 const CustomThemeLight = {
@@ -31,7 +31,7 @@ const CustomThemeLight = {
     primary: '#e91e1e',
     secondary: '#F44336',
     accent: '#FFC107',
-    error: '#FF5722',
+    error: '#e91e1e',
     warning: '#FFC107',
     info: '#607D8B',
     success: '#4CAF50'

ui/src/views/SettingsView.vue

@@ -1,16 +1,25 @@
 <template>
 
     <h1 class="title mb-4 ml-5 mt-5">Paramètres</h1>
-    <hr/>
+    <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-10" color="primary"/>
+      <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-10" color="primary"/>
+    <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" color="error" icon="record">mdi-record</v-icon>
+      <v-label class="ml-2 mb-5 mt-5">Etat du serveur MQTT</v-label>
+    </div>
+    <v-divider />
 </template>
 
   
@@ -20,6 +29,8 @@
   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')) {
@@ -31,6 +42,9 @@
       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) {
@@ -48,4 +62,10 @@
           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>