first go at cover frontend (#94)

* first go at cover frontend

* missing import

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

@@ -1,6 +1,7 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
 
 <link rel='import' href='more-info-climate.html'>
+<link rel='import' href='more-info-cover.html'>
 <link rel='import' href='more-info-default.html'>
 <link rel='import' href='more-info-group.html'>
 <link rel='import' href='more-info-sun.html'>

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

@@ -0,0 +1,123 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
+
+<dom-module id='more-info-cover'>
+  <template>
+    <style is="custom-style" include="iron-flex"></style>
+    <style>
+      .current_position, .current_tilt_position {
+        max-height: 0px;
+        overflow: hidden;
+      }
+      .has-current_position .current_position,
+      .has-current_tilt_position .current_tilt_position {
+        max-height: 90px;
+      }
+    </style>
+
+    <div class$='[[computeClassNames(stateObj)]]'>
+
+      <div class='current_position'>
+        <div>Position</div>
+        <paper-slider
+          min='0' max='100'
+          value='{{coverPositionSliderValue}}'
+          step='1' pin
+          on-change='coverPositionSliderChanged'></paper-slider>
+      </div>
+
+      <div class='current_tilt_position'>
+        <div>Tilt position</div>
+        <paper-icon-button icon="mdi:arrow-top-right" 
+          on-tap='onOpenTiltTap' title='Open tilt'
+          disabled='[[computeIsFullyOpenTilt(stateObj)]]'></paper-icon-button>
+        <paper-icon-button icon="mdi:stop" on-tap='onStopTiltTap'
+           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>
+        <paper-slider
+          min='0' max='100'
+          value='{{coverTiltPositionSliderValue}}'
+          step='1' pin
+          on-change='coverTiltPositionSliderChanged'></paper-slider>
+      </div>
+
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'more-info-cover',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    stateObj: {
+      type: Object,
+      observer: 'stateObjChanged',
+    },
+
+    coverPositionSliderValue: {
+      type: Number,
+    },
+
+    coverTiltPositionSliderValue: {
+      type: Number,
+    },
+  },
+
+  stateObjChanged: function (newVal) {
+    this.coverPositionSliderValue = newVal.attributes.current_position;
+    this.coverTiltPositionSliderValue = newVal.attributes.current_tilt_position;
+  },
+
+  computeClassNames: function (stateObj) {
+    return window.hassUtil.attributeClassNames(
+      stateObj, ['current_position', 'current_tilt_position']);
+  },
+
+  coverPositionSliderChanged: function (ev) {
+    this.hass.serviceActions.callService('cover', 'set_cover_position', {
+      entity_id: this.stateObj.entityId,
+      position: ev.target.value,
+    });
+  },
+
+  coverTiltPositionSliderChanged: function (ev) {
+    this.hass.serviceActions.callService('cover', 'set_cover_tilt_position', {
+      entity_id: this.stateObj.entityId,
+      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;
+  },
+
+  onOpenTiltTap: function () {
+    this.hass.serviceActions.callService('cover', 'open_cover_tilt',
+                                         { entity_id: this.stateObj.entityId });
+  },
+
+  onCloseTiltTap: function () {
+    this.hass.serviceActions.callService('cover', 'close_cover_tilt',
+                                         { entity_id: this.stateObj.entityId });
+  },
+
+  onStopTiltTap: function () {
+    this.hass.serviceActions.callService('cover', 'stop_cover',
+                                         { entity_id: this.stateObj.entityId });
+  },
+});
+</script>

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

@@ -2,6 +2,7 @@
 
 <link rel="import" href="state-card-climate.html">
 <link rel="import" href="state-card-configurator.html">
+<link rel="import" href="state-card-cover.html">
 <link rel="import" href="state-card-display.html">
 <link rel="import" href="state-card-hvac.html">
 <link rel="import" href="state-card-input_select.html">

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

@@ -0,0 +1,79 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+
+<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="../components/entity/state-info.html">
+
+<dom-module id="state-card-cover">
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      :host {
+        line-height: 1.5;
+      }
+
+      .state {
+        text-align: right;
+        white-space: nowrap;
+        width: 127px;
+      }
+    </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>
+        <paper-icon-button icon="mdi:arrow-down" on-tap='onCloseTap'
+          disabled='[[computeIsFullyClosed(stateObj)]]'></paper-icon-button>
+      </div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'state-card-cover',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  computeIsFullyOpen: function (stateObj) {
+    return stateObj.attributes.current_position === 100;
+  },
+
+  computeIsFullyClosed: function (stateObj) {
+    return stateObj.attributes.current_position === 0;
+  },
+
+  onOpenTap: function () {
+    this.hass.serviceActions.callService('cover', 'open_cover',
+                                         { entity_id: this.stateObj.entityId });
+  },
+
+  onCloseTap: function () {
+    this.hass.serviceActions.callService('cover', 'close_cover',
+                                         { entity_id: this.stateObj.entityId });
+  },
+
+  onStopTap: function () {
+    this.hass.serviceActions.callService('cover', 'stop_cover',
+                                         { entity_id: this.stateObj.entityId });
+  },
+});
+</script>

src/util/hass-util.html

@@ -12,6 +12,7 @@ window.hassUtil.OFF_STATES = ['off', 'closed', 'unlocked'];
 
 window.hassUtil.DOMAINS_WITH_CARD = [
   'climate',
+  'cover',
   'configurator',
   'hvac',
   'input_select',
@@ -25,9 +26,9 @@ window.hassUtil.DOMAINS_WITH_CARD = [
 ];
 
 window.hassUtil.DOMAINS_WITH_MORE_INFO = [
-  'light', 'group', 'sun', 'climate', 'configurator', 'thermostat', 'script',
-  'media_player', 'camera', 'updater', 'alarm_control_panel', 'lock',
-  'hvac',
+  'light', 'group', 'sun', 'climate', 'configurator', 'cover', 'thermostat',
+  'script', 'media_player', 'camera', 'updater', 'alarm_control_panel',
+  'lock', 'hvac',
 ];
 
 window.hassUtil.DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];
@@ -210,6 +211,9 @@ window.hassUtil.domainIcon = function (domain, state) {
     case 'conversation':
       return 'mdi:text-to-speech';
 
+    case 'cover':
+      return state && state === 'open' ? 'mdi:window-open' : 'mdi:window-closed';
+
     case 'device_tracker':
       return 'mdi:account';