Lučke custom presets

This commit is contained in:
Miha Frangež 2025-09-22 15:16:56 +02:00
parent 717340a3dd
commit b46ba4fe84
2 changed files with 50 additions and 5 deletions

View file

@ -86,6 +86,9 @@ function publishMQTTMsg(topic: string, msg: string) {
const publishPrefix = ref(props.room + '/')
// TODO: unhardcode
const showCustom = true;
// TODO: un-hard-code this
const lights = [
{
@ -129,24 +132,40 @@ const lights = [
<div class="page">
<div class="razsvetljava">
<div style="display: flex">
</div>
<div class="lightButtons" style="display: flex; flex-direction: column; align-items: stretch">
<div style="display: flex;">
<div class="row">
<button :class="{currentlyActive: (lastPreset == '4')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '4')">IZKLOP
</button>
<button :class="{currentlyActive: (lastPreset == '3')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '3')">PRIPRAVA
</button>
<div class="editablePreset">
<button :class="{currentlyActive: (lastPreset == '5')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '5')"
v-if="showCustom">
CUSTOM 5
</button>
<button class="saveButton" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/save', '5')">💾</button>
</div>
</div>
<div style="display: flex">
<div class="row">
<button :class="{currentlyActive: (lastPreset == '2')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '2')">PREDAVANJE
</button>
<button :class="{currentlyActive: (lastPreset == '1')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '1')">PROJEKCIJA
</button>
<div class="editablePreset">
<button :class="{currentlyActive: (lastPreset == '6')}"
@click="publishMQTTMsg(publishPrefix + 'lucke/preset/recall', '6')"
v-if="showCustom">
CUSTOM 6
</button>
<button class="saveButton" @click="publishMQTTMsg(publishPrefix + 'lucke/preset/save', '6')">💾</button>
</div>
</div>
</div>
</div>
@ -190,10 +209,18 @@ button {
margin: 0.3rem;
}
.lightButtons {
.row {
display: flex;
}
.row > * {
flex:1
}
.editablePreset {
display: flex
}
.lightButtons button {
width: fit-content;
flex: 1;
@ -201,5 +228,10 @@ button {
}
button.saveButton {
flex: 0;
padding: .5rem;
margin-left: -10px;
}
</style>