Compare commits
No commits in common. "b83aee3a6fbe6f5520cca60c82e0412c451057e2" and "1a5b00e5d20952f802b8d23412a1da9b65406956" have entirely different histories.
b83aee3a6f
...
1a5b00e5d2
@ -1,95 +0,0 @@
|
||||
<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>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-container class="v-container-style-console">
|
||||
<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="40">mdi-console-line</v-icon>
|
||||
@ -32,10 +32,10 @@
|
||||
});
|
||||
|
||||
// Ajouter le message avec l'horodatage à la liste des messages
|
||||
this.messageLogs.push({ timestamp, message: `Topic : ${topic} - Message : ${message}` });
|
||||
this.messageLogs.push({ timestamp, message: `Topic: ${topic}, Message: ${message}` });
|
||||
|
||||
// Limiter la liste à 10 messages
|
||||
if (this.messageLogs.length > 26) {
|
||||
if (this.messageLogs.length > 10) {
|
||||
this.messageLogs.shift(); // Supprimer le premier élément (le plus ancien)
|
||||
} }) // S'abonner à tous les topics MQTT
|
||||
}
|
||||
@ -43,11 +43,9 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.v-container-style-console {
|
||||
.v-container-style {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
top: 50px; /* Distance depuis le haut de la fenêtre avant de "coller" */
|
||||
}
|
||||
.centered-title {
|
||||
text-align: center;
|
||||
|
||||
@ -8,9 +8,7 @@
|
||||
<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-standalone" height="40" @click="publishBuzzerUnblock">Déblocage<br>Buzzer</v-btn>
|
||||
<v-btn class="v-btn-style-validate" height="50" @click="publisCustomMessage">Publier</v-btn>
|
||||
</div> <v-btn class="v-btn-style" height="50" @click="publishMessage">Publier</v-btn>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
@ -21,22 +19,13 @@ import { publishMessage } from '@/services/mqttService'
|
||||
|
||||
export default {
|
||||
data() { return { message: '', // Initialiser la variable message
|
||||
selectedTopic: 'Selectionnez un topic',
|
||||
topics: [
|
||||
'/wled/all',
|
||||
'/display/control',
|
||||
'/sound/playsound'
|
||||
] // Liste des topics
|
||||
selectedTopic: 'topic1',
|
||||
topics: [ '/display/control', '/sound/playsound', 'topic3', 'topic4', 'topic5', 'topic6', 'topic7', 'topic8', 'topic9', 'topic10' ] // Liste des topics
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
publisCustomMessage() {
|
||||
publishMessage(this.selectedTopic, this.message)
|
||||
},
|
||||
publishBuzzerUnblock() {
|
||||
publishMessage('brainblast/buzzer/unlock', "0")
|
||||
}
|
||||
|
||||
publishMessage() {
|
||||
publishMessage(this.selectedTopic, this.message) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -49,12 +38,7 @@ export default {
|
||||
.input-style{
|
||||
margin: 20px;
|
||||
}
|
||||
.v-btn-style-standalone{
|
||||
background-color: #d42828; /* Changez la couleur en fonction de votre thème */
|
||||
margin-bottom: 5%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
.v-btn-style-validate{
|
||||
.v-btn-style{
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
|
||||
@ -1,42 +1,15 @@
|
||||
<template>
|
||||
<v-row>
|
||||
|
||||
</v-row>
|
||||
<div> <!-- Zone pour publier sur MQTT -->
|
||||
<!-- Zone pour afficher la console MQTT -->
|
||||
<div> <!-- Zone pour publier sur MQTT --> <PublishMQTTComponent />
|
||||
<!-- Zone pour afficher la console MQTT --> <MQTTConsoleComponent />
|
||||
</div>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<!-- Colonne gauche avec les deux composants empilés -->
|
||||
<v-col cols="6">
|
||||
<!-- Composant 1 -->
|
||||
<v-row>
|
||||
<v-col>
|
||||
<PublishMQTTComponent />
|
||||
<MQTTColorPublisher />
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<!-- Colonne droite avec le composant unique -->
|
||||
<v-col cols="6">
|
||||
<MQTTConsoleComponent />
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PublishMQTTComponent from '@/components/MQTTDebugPublish.vue' // Importer le composant pour publier sur MQTT
|
||||
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour publier sur MQTT
|
||||
import MQTTColorPublisher from '@/components/MQTTColorPublisher.vue' // Importer le composant pour publier sur MQTT
|
||||
import MQTTConsoleComponent from '@/components/MQTTDebugConsole.vue' // Importer le composant pour la console MQTT
|
||||
|
||||
export default {
|
||||
components: {
|
||||
PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
|
||||
MQTTConsoleComponent, // Composant pour la console MQTT
|
||||
MQTTColorPublisher, // Composant pour publier une couleur custom dans un topic
|
||||
components: { PublishMQTTComponent, // Composant pour publier sur MQTT MQTTConsoleComponent // Composant pour la console MQTT
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user