fabaff/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added input box for <Dimmer> entities

Browse source
This commit is contained in:
Fabio Manganiello 2022-11-27 00:56:01 +01:00
parent bd59a5eefd
commit e8d6717fcb
Signed by untrusted user: 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

38
platypush/backend/http/webapp/src/components/panels/Entities/Dimmer.vue
View file

@ -18,17 +18,27 @@
: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">
<Slider :range="[value.min, value.max]" with-range
:value="value.value" @input="setValue" /> :value="value.value" @input="setValue" />
</div> </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> </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%;
}
}
} }
} }
} }