asco.fablab/BrainBlast
11
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Ajout des boutons a cotés du color picker pour publier les couleurs d'équipe

Browse Source
This commit is contained in:
Jérémy CHOMAZ 2024-11-09 11:31:30 +01:00
parent 62bd29d752
commit 445a1b883f
1 changed files with 43 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
ui/src/components/MQTTColorPublisher.vue
View File

@ -8,9 +8,18 @@
<div class="input-style">
<v-select label="Topic" v-model="selectedTopic" :items="topics" prepend-icon="mdi-target"></v-select>
</div>
<div class="color-picker-style">
<v-color-picker mode="hex" v-model="selectedColor"></v-color-picker>
</div>
<v-row>
<v-col cols="6" class="color-picker-style">
<v-color-picker mode="hex" v-model="selectedColor" border="md" width="250"></v-color-picker>
</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-btn class="v-btn-style-validate" height="50" @click="publisCustomColor">Publier</v-btn>
</v-card>
</v-container>
@ -21,18 +30,28 @@
import { publishMessage } from '@/services/mqttService'
export default {
data() { return { message: '', // Initialiser la variable message
selectedTopic: 'Selectionnez un topic',
selectedColor: "#FF0000",
topics: [
'/wled/all'
] // Liste des topics
}
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)
},
}
}
@ -46,11 +65,6 @@ 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{
align-items: center;
justify-content: center;
@ -63,10 +77,20 @@ export default {
text-align: center;
}
.color-picker-style {
display: flex;
align-items: left; /* Centre verticalement */
height: 100%; /* Ajuste selon la hauteur désirée */
width: 100%; /* Ajuste selon la hauteur désirée */
padding-left: 5%;
padding-bottom: 5%;
}
.button-container {
text-align: center;
margin-top: 12px;
margin-bottom: 27px;
margin-left: 15px;
margin-right: 13px;
}
.team-button {
width: 140px;
display: block;
margin: 7% auto 0; /* 5% de marge en bas pour espacer les boutons */
background-color: #d42828;
}
</style>