Lučke custom presets
This commit is contained in:
parent
717340a3dd
commit
b46ba4fe84
2 changed files with 50 additions and 5 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue