Add supported_features to cover component (#215)

* Add supported_features to cover component

* Fix linting

src/more-infos/more-info-cover.html

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

src/state-summary/state-card-cover.html

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

src/util/cover-model.html

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