BrainBlast/ui/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="publisCustomColor">Publier</v-btn>  
        </div>
        </v-col>
        <v-col cols="5.5" class="button-container">
          <v-btn color="#D42828" class="team-button" @click="publisButtonColor('#D42828')">Team Rouge</v-btn>
          <v-btn color="#FF7518" class="team-button" @click="publisButtonColor('#FF7518')">Team Orange</v-btn>
          <v-btn color="#00FF1F" class="team-button" @click="publisButtonColor('#00FF1F')">Team Verte</v-btn>
          <v-btn color="#007AFF" class="team-button" @click="publisButtonColor('#007AFF')">Team Bleue</v-btn>
          <v-btn color="#FFFC00" class="team-button" @click="publisButtonColor('#FFFC00')">Team Jaune</v-btn>
        </v-col>
      </v-row>
    </v-card> 
  </v-container>

</template>

<script>
import { publishMessage } from '@/services/mqttService'

export default {
  data() { 
    return {   
      message: '', // Initialiser la variable message   
      selectedTopic: 'Selectionnez un topic',   
      selectedColor: "#FF0000",   
      topics: [     
        '/wled/all',
        '/wled/1',
        '/wled/2',
        '/wled/3',
        '/wled/4',
        '/wled/5'
      ]
    }
},
  methods: { 
    publisCustomColor() {   
      publishMessage(this.selectedTopic, this.selectedColor)
    },
    publisButtonColor(param) {   
      publishMessage(this.selectedTopic, param)
    },
    
  }
}
</script>

<style>
  .v-container-style { 
    align-items: center; 
    justify-content: center;
  }
  .input-style{ 
    margin: 20px;
  }
  .v-btn-style-validate{ 
    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 {
  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; /* 5% de marge en bas pour espacer les boutons */
    background-color: #d42828;
  }
</style>