mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-17 14:26:35 +00:00
Add supported_features to cover component (#215)
* Add supported_features to cover component * Fix linting
This commit is contained in:
parent
fe5fcc6db3
commit
a9265b3a69
@ -4,6 +4,8 @@
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
|
||||
|
||||
<link rel='import' href='../util/cover-model.html'>
|
||||
|
||||
<dom-module id='more-info-cover'>
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex"></style>
|
||||
@ -16,6 +18,10 @@
|
||||
.has-current_tilt_position .current_tilt_position {
|
||||
max-height: 90px;
|
||||
}
|
||||
|
||||
[invisible] {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class$='[[computeClassNames(stateObj)]]'>
|
||||
@ -26,6 +32,7 @@
|
||||
min='0' max='100'
|
||||
value='{{coverPositionSliderValue}}'
|
||||
step='1' pin
|
||||
disabled='[[!entityObj.supportsSetPosition]]'
|
||||
on-change='coverPositionSliderChanged'></paper-slider>
|
||||
</div>
|
||||
|
||||
@ -33,16 +40,20 @@
|
||||
<div>Tilt position</div>
|
||||
<paper-icon-button icon="mdi:arrow-top-right"
|
||||
on-tap='onOpenTiltTap' title='Open tilt'
|
||||
disabled='[[computeIsFullyOpenTilt(stateObj)]]'></paper-icon-button>
|
||||
invisible$='[[!entityObj.supportsOpenTilt]]'
|
||||
disabled='[[entityObj.isFullyOpenTilt]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:stop" on-tap='onStopTiltTap'
|
||||
title='Stop tilt'></paper-icon-button>
|
||||
invisible$='[[!entityObj.supportsStopTilt]]'
|
||||
title='Stop tilt'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:arrow-bottom-left"
|
||||
on-tap='onCloseTiltTap' title='Close tilt'
|
||||
disabled='[[computeIsFullyClosedTilt(stateObj)]]'></paper-icon-button>
|
||||
invisible$='[[!entityObj.supportsCloseTilt]]'
|
||||
disabled='[[entityObj.isFullyClosedTilt]]'></paper-icon-button>
|
||||
<paper-slider
|
||||
min='0' max='100'
|
||||
value='{{coverTiltPositionSliderValue}}'
|
||||
step='1' pin
|
||||
disabled='[[!entityObj.supportsSetTiltPosition]]'
|
||||
on-change='coverTiltPositionSliderChanged'></paper-slider>
|
||||
</div>
|
||||
|
||||
@ -64,6 +75,11 @@ Polymer({
|
||||
observer: 'stateObjChanged',
|
||||
},
|
||||
|
||||
entityObj: {
|
||||
type: Object,
|
||||
computed: 'computeEntityObj(hass, stateObj)',
|
||||
},
|
||||
|
||||
coverPositionSliderValue: {
|
||||
type: Number,
|
||||
},
|
||||
@ -73,6 +89,10 @@ Polymer({
|
||||
},
|
||||
},
|
||||
|
||||
computeEntityObj: function (hass, stateObj) {
|
||||
return new window.CoverEntity(hass, stateObj);
|
||||
},
|
||||
|
||||
stateObjChanged: function (newVal) {
|
||||
this.coverPositionSliderValue = newVal.attributes.current_position;
|
||||
this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
|
||||
@ -84,40 +104,23 @@ Polymer({
|
||||
},
|
||||
|
||||
coverPositionSliderChanged: function (ev) {
|
||||
this.hass.callService('cover', 'set_cover_position', {
|
||||
entity_id: this.stateObj.entity_id,
|
||||
position: ev.target.value,
|
||||
});
|
||||
this.entityObj.setCoverPosition(ev.target.value);
|
||||
},
|
||||
|
||||
coverTiltPositionSliderChanged: function (ev) {
|
||||
this.hass.callService('cover', 'set_cover_tilt_position', {
|
||||
entity_id: this.stateObj.entity_id,
|
||||
tilt_position: ev.target.value,
|
||||
});
|
||||
},
|
||||
|
||||
computeIsFullyOpenTilt: function (stateObj) {
|
||||
return stateObj.attributes.current_tilt_position === 100;
|
||||
},
|
||||
|
||||
computeIsFullyClosedTilt: function (stateObj) {
|
||||
return stateObj.attributes.current_tilt_position === 0;
|
||||
this.entityObj.setCoverTiltPosition(ev.target.value);
|
||||
},
|
||||
|
||||
onOpenTiltTap: function () {
|
||||
this.hass.callService('cover', 'open_cover_tilt',
|
||||
{ entity_id: this.stateObj.entity_id });
|
||||
this.entityObj.openCoverTilt();
|
||||
},
|
||||
|
||||
onCloseTiltTap: function () {
|
||||
this.hass.callService('cover', 'close_cover_tilt',
|
||||
{ entity_id: this.stateObj.entity_id });
|
||||
this.entityObj.closeCoverTilt();
|
||||
},
|
||||
|
||||
onStopTiltTap: function () {
|
||||
this.hass.callService('cover', 'stop_cover_tilt',
|
||||
{ entity_id: this.stateObj.entity_id });
|
||||
this.entityObj.stopCoverTilt();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
@ -6,6 +6,8 @@
|
||||
|
||||
<link rel="import" href="../components/entity/state-info.html">
|
||||
|
||||
<link rel='import' href='../util/cover-model.html'>
|
||||
|
||||
<dom-module id="state-card-cover">
|
||||
<template>
|
||||
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
|
||||
@ -19,16 +21,23 @@
|
||||
white-space: nowrap;
|
||||
width: 127px;
|
||||
}
|
||||
|
||||
[invisible] {
|
||||
visibility: hidden !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class='horizontal justified layout'>
|
||||
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
|
||||
<div class='state'>
|
||||
<paper-icon-button icon="mdi:arrow-up" on-tap='onOpenTap'
|
||||
disabled='[[computeIsFullyOpen(stateObj)]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:stop" on-tap='onStopTap'></paper-icon-button>
|
||||
invisible$='[[!entityObj.supportsOpen]]'
|
||||
disabled='[[entityObj.isFullyOpen]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:stop" on-tap='onStopTap'
|
||||
invisible$='[[!entityObj.supportsStop]]'></paper-icon-button>
|
||||
<paper-icon-button icon="mdi:arrow-down" on-tap='onCloseTap'
|
||||
disabled='[[computeIsFullyClosed(stateObj)]]'></paper-icon-button>
|
||||
invisible$='[[!entityObj.supportsClose]]'
|
||||
disabled='[[entityObj.isFullyClosed]]'></paper-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -51,35 +60,27 @@ Polymer({
|
||||
stateObj: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
entityObj: {
|
||||
type: Object,
|
||||
computed: 'computeEntityObj(hass, stateObj)',
|
||||
},
|
||||
},
|
||||
|
||||
computeIsFullyOpen: function (stateObj) {
|
||||
if (stateObj.attributes.current_position !== undefined) {
|
||||
return stateObj.attributes.current_position === 100;
|
||||
}
|
||||
return stateObj.state === 'open';
|
||||
},
|
||||
|
||||
computeIsFullyClosed: function (stateObj) {
|
||||
if (stateObj.attributes.current_position !== undefined) {
|
||||
return stateObj.attributes.current_position === 0;
|
||||
}
|
||||
return stateObj.state === 'closed';
|
||||
computeEntityObj: function (hass, stateObj) {
|
||||
return new window.CoverEntity(hass, stateObj);
|
||||
},
|
||||
|
||||
onOpenTap: function () {
|
||||
this.hass.callService('cover', 'open_cover',
|
||||
{ entity_id: this.stateObj.entity_id });
|
||||
this.entityObj.openCover();
|
||||
},
|
||||
|
||||
onCloseTap: function () {
|
||||
this.hass.callService('cover', 'close_cover',
|
||||
{ entity_id: this.stateObj.entity_id });
|
||||
this.entityObj.closeCover();
|
||||
},
|
||||
|
||||
onStopTap: function () {
|
||||
this.hass.callService('cover', 'stop_cover',
|
||||
{ entity_id: this.stateObj.entity_id });
|
||||
this.entityObj.stopCover();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
113
src/util/cover-model.html
Normal file
113
src/util/cover-model.html
Normal file
@ -0,0 +1,113 @@
|
||||
<script>
|
||||
(function () {
|
||||
window.CoverEntity = function (hass, stateObj) {
|
||||
this.hass = hass;
|
||||
this.stateObj = stateObj;
|
||||
};
|
||||
|
||||
function addGetter(name, getter) {
|
||||
Object.defineProperty(window.CoverEntity.prototype, name,
|
||||
{ get: getter });
|
||||
}
|
||||
|
||||
addGetter('isFullyOpen', function () {
|
||||
if (this.stateObj.attributes.current_position !== undefined) {
|
||||
return this.stateObj.attributes.current_position === 100;
|
||||
}
|
||||
return this.stateObj.state === 'open';
|
||||
});
|
||||
|
||||
addGetter('isFullyClosed', function () {
|
||||
if (this.stateObj.attributes.current_position !== undefined) {
|
||||
return this.stateObj.attributes.current_position === 0;
|
||||
}
|
||||
return this.stateObj.state === 'closed';
|
||||
});
|
||||
|
||||
addGetter('isFullyOpenTilt', function () {
|
||||
return this.stateObj.attributes.current_tilt_position === 100;
|
||||
});
|
||||
|
||||
addGetter('isFullyClosedTilt', function () {
|
||||
return this.stateObj.attributes.current_tilt_position === 0;
|
||||
});
|
||||
|
||||
/* eslint-disable no-bitwise */
|
||||
|
||||
addGetter('supportsOpen', function () {
|
||||
return (this.stateObj.attributes.supported_features & 1) !== 0;
|
||||
});
|
||||
|
||||
addGetter('supportsClose', function () {
|
||||
return (this.stateObj.attributes.supported_features & 2) !== 0;
|
||||
});
|
||||
|
||||
addGetter('supportsSetPosition', function () {
|
||||
return (this.stateObj.attributes.supported_features & 4) !== 0;
|
||||
});
|
||||
|
||||
addGetter('supportsStop', function () {
|
||||
return (this.stateObj.attributes.supported_features & 8) !== 0;
|
||||
});
|
||||
|
||||
addGetter('supportsOpenTilt', function () {
|
||||
return (this.stateObj.attributes.supported_features & 16) !== 0;
|
||||
});
|
||||
|
||||
addGetter('supportsCloseTilt', function () {
|
||||
return (this.stateObj.attributes.supported_features & 32) !== 0;
|
||||
});
|
||||
|
||||
addGetter('supportsStopTilt', function () {
|
||||
return (this.stateObj.attributes.supported_features & 64) !== 0;
|
||||
});
|
||||
|
||||
addGetter('supportsSetTiltPosition', function () {
|
||||
return (this.stateObj.attributes.supported_features & 128) !== 0;
|
||||
});
|
||||
|
||||
/* eslint-enable no-bitwise */
|
||||
|
||||
Object.assign(window.CoverEntity.prototype, {
|
||||
openCover() {
|
||||
this.callService('open_cover');
|
||||
},
|
||||
|
||||
closeCover() {
|
||||
this.callService('close_cover');
|
||||
},
|
||||
|
||||
stopCover() {
|
||||
this.callService('stop_cover');
|
||||
},
|
||||
|
||||
openCoverTilt() {
|
||||
this.callService('open_cover_tilt');
|
||||
},
|
||||
|
||||
closeCoverTilt() {
|
||||
this.callService('close_cover_tilt');
|
||||
},
|
||||
|
||||
stopCoverTilt() {
|
||||
this.callService('stop_cover_tilt');
|
||||
},
|
||||
|
||||
setCoverPosition(position) {
|
||||
this.callService('set_cover_position', { position: position });
|
||||
},
|
||||
|
||||
setCoverTiltPosition(tiltPosition) {
|
||||
this.callService('set_cover_tilt_position', { tilt_position: tiltPosition });
|
||||
},
|
||||
|
||||
// helper method
|
||||
|
||||
callService(service, data) {
|
||||
var serviceData = data || {};
|
||||
serviceData.entity_id = this.stateObj.entity_id;
|
||||
this.hass.callService('cover', service, serviceData);
|
||||
},
|
||||
});
|
||||
}());
|
||||
</script>
|
Loading…
x
Reference in New Issue
Block a user