forked from jchomaz/Vulture
119 lines
2.9 KiB
Vue
119 lines
2.9 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>
|
|
|
|
<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="publishCustomColor"
|
|
>
|
|
Publier
|
|
</v-btn>
|
|
</div>
|
|
</v-col>
|
|
|
|
<v-col cols="4" class="button-container-2">
|
|
<v-btn color="#D42828" class="team-button" @click="publishButtonColor('#D42828')">Team Rouge</v-btn>
|
|
<v-btn color="#00FF1F" class="team-button" @click="publishButtonColor('#00FF1F')">Team Verte</v-btn>
|
|
<v-btn color="#007AFF" class="team-button" @click="publishButtonColor('#007AFF')">Team Bleue</v-btn>
|
|
<v-btn color="#FFFC00" class="team-button" @click="publishButtonColor('#FFFC00')">Team Jaune</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { publishMessage } from '@/services/mqttService';
|
|
|
|
const selectedTopic = ref('Selectionnez un topic');
|
|
const selectedColor = ref('#FF0000');
|
|
const topics = ref([
|
|
'/wled/all',
|
|
'/wled/1',
|
|
'/wled/2',
|
|
'/wled/3',
|
|
'/wled/4',
|
|
'/wled/5',
|
|
]);
|
|
|
|
const publishCustomColor = () => {
|
|
if (selectedTopic.value && selectedColor.value) {
|
|
publishMessage(selectedTopic.value, selectedColor.value);
|
|
} else {
|
|
console.warn('Topic ou couleur non sélectionné !');
|
|
}
|
|
};
|
|
|
|
const publishButtonColor = (color) => {
|
|
if (selectedTopic.value) {
|
|
publishMessage(selectedTopic.value, color);
|
|
} else {
|
|
console.warn('Topic non sélectionné !');
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-container-style {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.input-style {
|
|
margin: 20px;
|
|
}
|
|
.v-btn-style-validate {
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
background-color: rgba(var(--v-theme-primary));
|
|
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-2 {
|
|
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;
|
|
background-color: rgba(var(--v-theme-primary));
|
|
}
|
|
</style>
|