72 lines
2.0 KiB
Vue
72 lines
2.0 KiB
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>
|
||
|
|
<div class="color-picker-style">
|
||
|
|
<v-color-picker mode="hex" v-model="selectedColor"></v-color-picker>
|
||
|
|
</div>
|
||
|
|
<v-btn class="v-btn-style-validate" height="50" @click="publisCustomColor">Publier</v-btn>
|
||
|
|
</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'
|
||
|
|
] // Liste des topics
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
publisCustomColor() {
|
||
|
|
publishMessage(this.selectedTopic, this.selectedColor)
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.v-container-style {
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.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%;
|
||
|
|
}
|
||
|
|
</style>
|