Vulture/VApp/src/components/MQTTColorPublisher.vue

<template>
  <v-container class="v-container-style">   
    <v-card tile outlined width="500">     
      <v-card-title class="card__title primary centered-title">       
        <v-icon left class="pr-5 pl-2" size="30">mdi-send</v-icon>       
        Publier une couleur    
      </v-card-title>     

      <div class="input-style">       
        <v-select
          label="Topic"
          v-model="selectedTopic"
          :items="topics"
          prepend-icon="mdi-target"
        ></v-select>   
      </div> 

      <v-row>
        <v-col cols="6" class="color-picker-style">
          <div>
            <v-color-picker
              mode="hex"
              v-model="selectedColor"
              border="md"
              width="250"
            ></v-color-picker>
            <v-btn
              class="v-btn-style-validate"
              height="35"
              @click="publishCustomColor"
            >
              Publier
            </v-btn>  
          </div>
        </v-col>

        <v-col cols="4" class="button-container-2">
          <v-btn color="#D42828" class="team-button" @click="publishButtonColor('#D42828')">Team Rouge</v-btn>
          <v-btn color="#00FF1F" class="team-button" @click="publishButtonColor('#00FF1F')">Team Verte</v-btn>
          <v-btn color="#007AFF" class="team-button" @click="publishButtonColor('#007AFF')">Team Bleue</v-btn>
          <v-btn color="#FFFC00" class="team-button" @click="publishButtonColor('#FFFC00')">Team Jaune</v-btn>
        </v-col>
      </v-row>
      
    </v-card> 
  </v-container>
</template>

<script setup>
import { ref } from 'vue';
import { publishMessage } from '@/services/mqttService';

const selectedTopic = ref('Selectionnez un topic');
const selectedColor = ref('#FF0000');
const topics = ref([
  '/wled/all',
  '/wled/1',
  '/wled/2',
  '/wled/3',
  '/wled/4',
  '/wled/5',
]);

const publishCustomColor = () => {
  if (selectedTopic.value && selectedColor.value) {
    publishMessage(selectedTopic.value, selectedColor.value);
  } else {
    console.warn('Topic ou couleur non sélectionné !');
  }
};

const publishButtonColor = (color) => {
  if (selectedTopic.value) {
    publishMessage(selectedTopic.value, color);
  } else {
    console.warn('Topic non sélectionné !');
  }
};
</script>

<style scoped>
.v-container-style { 
  align-items: center; 
  justify-content: center;
}
.input-style { 
  margin: 20px;
}
.v-btn-style-validate { 
  align-items: center; 
  justify-content: center; 
  width: 100%; 
  background-color: rgba(var(--v-theme-primary)); 
  border-top-right-radius: 0%; 
  border-top-left-radius: 0%;
}
.centered-title { 
  text-align: center;
}
.color-picker-style {
  margin-left: 5%;
  margin-bottom: 5%;
  display: flex;
}
.button-container-2 {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 27px;
  margin-left: 15px;
  margin-right: 13px;
}
.team-button {
  width: 140px;
  display: block;
  margin: 12% auto 0;
  background-color: rgba(var(--v-theme-primary));
}
</style>