From 553b37654eca499d346fcdef975e23c0d7445eb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9my=20CHOMAZ?= <jeremy.chomaz20@gmail.com>
Date: Sun, 17 Mar 2024 16:49:50 +0100
Subject: [PATCH] =?UTF-8?q?Modification=20du=20th=C3=A8me=20et=20ajout=20d?=
 =?UTF-8?q?e=20deux=20cat=C3=A9gorie=20dans=20les=20param=C3=A8tres?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/CardControl.vue |  2 +-
 ui/src/plugins/vuetify.js         |  6 +++---
 ui/src/views/SettingsView.vue     | 30 +++++++++++++++++++++++++-----
 3 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/CardControl.vue b/ui/src/components/CardControl.vue
index 17a8a61..235c841 100644
--- a/ui/src/components/CardControl.vue
+++ b/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>
diff --git a/ui/src/plugins/vuetify.js b/ui/src/plugins/vuetify.js
index 418eb2c..8e76497 100644
--- a/ui/src/plugins/vuetify.js
+++ b/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'
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index 5f7f720..be9bfd7 100644
--- a/ui/src/views/SettingsView.vue
+++ b/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,7 +29,9 @@
   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
@@ -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>
\ No newline at end of file