Add supported_features to cover component (#215)

* Add supported_features to cover component

* Fix linting
This commit is contained in:
Adam Mills 2017-02-18 21:11:08 -05:00 committed by Paulus Schoutsen
parent fe5fcc6db3
commit a9265b3a69
3 changed files with 163 additions and 46 deletions

View File

@ -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>

View File

@ -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
View 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>