forked from jchomaz/Vulture
142 lines
3.1 KiB
Vue
142 lines
3.1 KiB
Vue
<template>
|
|
<v-container class="v-container-style">
|
|
<v-card tile outlined width="600">
|
|
<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-text-field
|
|
label="Topic"
|
|
v-model="selectedTopic"
|
|
:items="topics"
|
|
prepend-icon="mdi-target"
|
|
></v-text-field>
|
|
|
|
<v-text-field
|
|
label="Message"
|
|
v-model="message"
|
|
prepend-icon="mdi-text-box"
|
|
></v-text-field>
|
|
</div>
|
|
|
|
<v-btn
|
|
rounded
|
|
class="v-btn-style-standalone"
|
|
height="40"
|
|
@click="publishBuzzerUnblock"
|
|
>
|
|
Déblocage<br>Buzzer
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
rounded
|
|
color="RedBuzzer"
|
|
class="v-btn-style-standalone"
|
|
height="40"
|
|
@click="publishBuzzer('#d42828')"
|
|
>
|
|
Buzzer
|
|
</v-btn>
|
|
<v-btn
|
|
rounded
|
|
color="BlueBuzzer"
|
|
class="v-btn-style-standalone"
|
|
height="40"
|
|
@click="publishBuzzer('#2867d4')"
|
|
>
|
|
Buzzer
|
|
</v-btn>
|
|
<v-btn
|
|
rounded
|
|
color="YellowBuzzer"
|
|
class="v-btn-style-standalone"
|
|
height="40"
|
|
@click="publishBuzzer('#D4D100')"
|
|
>
|
|
Buzzer
|
|
</v-btn>
|
|
<v-btn
|
|
rounded
|
|
color="GreenBuzzer"
|
|
class="v-btn-style-standalone"
|
|
height="40"
|
|
@click="publishBuzzer('#28d42e')"
|
|
>
|
|
Buzzer
|
|
</v-btn>
|
|
<v-btn
|
|
class="v-btn-style-validate"
|
|
height="50"
|
|
@click="publisCustomMessage"
|
|
>
|
|
Publier
|
|
</v-btn>
|
|
</v-card>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import { publishMessage } from '@/services/mqttService';
|
|
|
|
// Reactive data
|
|
const message = ref('');
|
|
const selectedTopic = ref('Selectionnez un topic');
|
|
const topics = [
|
|
'wled/all',
|
|
'display/control',
|
|
'sound/playsound',
|
|
'game/score/update',
|
|
'game/score',
|
|
'/display/media'
|
|
];
|
|
|
|
// Methods
|
|
const publisCustomMessage = () => {
|
|
publishMessage(selectedTopic.value, message.value);
|
|
};
|
|
|
|
const publishBuzzerUnblock = () => {
|
|
publishMessage('vulture/buzzer/unlock', "0");
|
|
};
|
|
const publishBuzzer = (inputColor) => {
|
|
publishMessage('vulture/buzzer/pressed/2',JSON.stringify({
|
|
buzzer_id: 1,
|
|
color: inputColor
|
|
}));
|
|
// Add a small delay before unlocking to ensure the score update is processed
|
|
setTimeout(() => {
|
|
publishMessage('/display/control', "pause");
|
|
}, 100);
|
|
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.v-container-style {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.input-style {
|
|
margin: 20px;
|
|
}
|
|
.v-btn-style-standalone {
|
|
background-color: rgba(var(--v-theme-primary));
|
|
margin-bottom: 5%;
|
|
margin-left: 5%;
|
|
}
|
|
.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;
|
|
}
|
|
</style>
|