BrainBlast/ui/src/components/MQTTDebugPublish.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 un message
        </v-card-title>
        <div class="input-style">
          <v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>
          <v-text-field label="Message" v-model="message" prepend-icon="mdi-text-box"></v-text-field>
        </div>
          <v-btn class="v-btn-style" height="50" @click="publishMessage">Publier</v-btn>
      </v-card>
    </v-container>

</template>

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

export default {
  data() {
    return {
      message: '', // Initialiser la variable message
      selectedTopic: 'topic1',
      topics: [
        '/display/control',
        '/sound/playsound',
        'topic3',
        'topic4',
        'topic5',
        'topic6',
        'topic7',
        'topic8',
        'topic9',
        'topic10'
      ] // Liste des topics
    }
  },
  methods: {
    publishMessage() {
      publishMessage(this.selectedTopic, this.message)
    }
  }
}
</script>

<style>
  .v-container-style {
    align-items: center;
    justify-content: center;
  }
  .input-style{
    margin: 20px;
  }
  .v-btn-style{
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #d42828; /* Changez la couleur en fonction de votre thème */
    border-top-right-radius: 0%;
    border-top-left-radius: 0%;
  }
  .centered-title {
    text-align: center;
  }
</style>