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