platypush/platypush
platypush
/
platypush
2
2
Fork 4
Code Issues 44 Pull Requests 1 Packages Projects 4 Releases Wiki Activity

Added input box for <Dimmer> entities

This commit is contained in:
Fabio Manganiello 2022-11-27 00:56:01 +01:00
parent bd59a5eefd
commit e8d6717fcb
Signed by: blacklight
GPG Key ID: D90FBA7F76362774
1 changed files with 29 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue
View File

@ -18,16 +18,26 @@
:class="{'fa-angle-up': expanded, 'fa-angle-down': !expanded}" />
</button>
<span class="value-percent"
v-text="valuePercent.toFixed(0) + '%'"
v-if="valuePercent != null" />
v-text="parsedValue"
v-if="parsedValue != null" />
</div>
</div>
<div class="body" v-if="expanded" @click.stop="prevent">
<div class="row">
<div class="input">
<Slider :range="[value.min, value.max]"
:value="value.value" @input="setValue" />
<div class="input" v-if="value?.min != null && value?.max != null">
<div class="col-10">
<Slider :range="[value.min, value.max]" with-range
:value="value.value" @input="setValue" />
</div>
<div class="col-2 value">
<input type="number" :value="value.value" @change="setValue">
</div>
</div>
<div class="input" v-else>
<div class="col-12 value">
<input type="number" :value="value.value" @change="setValue">
</div>
</div>
</div>
</div>
@ -51,13 +61,11 @@ export default {
},
computed: {
valuePercent() {
parsedValue() {
if (this.value?.is_write_only || this.value?.value == null)
return null
const min = this.value.min || 0
const max = this.value.max || 100
return (100 * this.value.value) / (max - min)
return this.value.value
}
},
@ -68,8 +76,10 @@ export default {
},
async setValue(event) {
this.$emit('loading', true)
if (!event.target.value?.length)
return
this.$emit('loading', true)
try {
await this.request('entities.execute', {
id: this.value.id,
@ -112,11 +122,19 @@ export default {
}
.input {
width: calc(100% - 2em);
width: calc(100% - 1em);
display: flex;
align-items: center;
:deep(.slider) {
margin-top: 0.5em;
}
.value {
input {
width: 100%;
}
}
}
}
}