Add a more info card for the fan component (#177)

* Add a more info card for fan and make the fan icon spin

* Add direction support to fan more info

* Fix ESLint errors

* Fix ESLint errors

* Remove spinning fan icon :(

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

@@ -1,19 +1,20 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
 
+<link rel='import' href='more-info-alarm_control_panel.html'>
 <link rel='import' href='more-info-automation.html'>
+<link rel='import' href='more-info-camera.html'>
 <link rel='import' href='more-info-climate.html'>
+<link rel='import' href='more-info-configurator.html'>
 <link rel='import' href='more-info-cover.html'>
 <link rel='import' href='more-info-default.html'>
+<link rel='import' href='more-info-fan.html'>
 <link rel='import' href='more-info-group.html'>
-<link rel='import' href='more-info-sun.html'>
-<link rel='import' href='more-info-configurator.html'>
-<link rel='import' href='more-info-script.html'>
 <link rel='import' href='more-info-light.html'>
-<link rel='import' href='more-info-media_player.html'>
-<link rel='import' href='more-info-camera.html'>
-<link rel='import' href='more-info-updater.html'>
-<link rel='import' href='more-info-alarm_control_panel.html'>
 <link rel='import' href='more-info-lock.html'>
+<link rel='import' href='more-info-media_player.html'>
+<link rel='import' href='more-info-script.html'>
+<link rel='import' href='more-info-sun.html'>
+<link rel='import' href='more-info-updater.html'>
 
 <script>
 Polymer({

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

@@ -0,0 +1,162 @@
+<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-dropdown-menu/paper-dropdown-menu.html'>
+<link rel='import' href='../../bower_components/paper-menu/paper-menu.html'>
+<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>
+<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
+
+<dom-module id='more-info-fan'>
+  <template>
+    <style is='custom-style' include='iron-flex'></style>
+    <style>
+      .container-speed_list,
+      .container-direction {
+        display: none;
+      }
+
+      .has-speed_list .container-speed_list,
+      .has-direction .container-direction {
+        display: block;
+      }
+    </style>
+
+    <div class$='[[computeClassNames(stateObj)]]'>
+
+      <div class="container-speed_list">
+        <paper-dropdown-menu label-float label='Speed'>
+          <paper-menu class='dropdown-content' selected='{{speedIndex}}'>
+            <template is='dom-repeat'
+                      items='[[stateObj.attributes.speed_list]]'>
+              <paper-item>[[item]]</paper-item>
+            </template>
+          </paper-menu>
+        </paper-dropdown-menu>
+      </div>
+
+      <div class='container-oscillating' hidden$='[[computeHideOscillation(stateObj)]]'>
+        <div class='center horizontal layout single-row'>
+          <div class='flex'>Oscillate</div>
+          <paper-toggle-button
+            checked='[[oscillationToggleChecked]]'
+            on-change='oscillationToggleChanged'>
+          </paper-toggle-button>
+        </div>
+      </div>
+
+      <div class='container-direction'>
+        <div class='direction'>
+          <div>Direction</div>
+          <paper-icon-button icon='mdi:rotate-left'
+            on-tap='onDirectionLeft' title='Left'
+            disabled='[[computeIsRotatingLeft(stateObj)]]'></paper-icon-button>
+          <paper-icon-button icon='mdi:rotate-right'
+            on-tap='onDirectionRight' title='Right'
+            disabled='[[computeIsRotatingRight(stateObj)]]'></paper-icon-button>
+        </div>
+      </div>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'more-info-fan',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    stateObj: {
+      type: Object,
+      observer: 'stateObjChanged',
+    },
+
+    speedIndex: {
+      type: Number,
+      value: -1,
+      observer: 'speedChanged',
+    },
+
+    oscillationToggleChecked: {
+      type: Boolean,
+    },
+  },
+
+  stateObjChanged: function (newVal) {
+    this.oscillationToggleChecked = newVal.attributes.oscillating;
+
+    if (newVal.attributes.speed_list) {
+      this.speedIndex = newVal.attributes.speed_list.indexOf(
+        newVal.attributes.speed);
+    } else {
+      this.speedIndex = -1;
+    }
+
+    this.async(function () {
+      this.fire('iron-resize');
+    }.bind(this), 500);
+  },
+
+  computeClassNames: function (stateObj) {
+    return 'more-info-fan ' + window.hassUtil.attributeClassNames(
+      stateObj, ['oscillating', 'speed_list', 'direction']
+    );
+  },
+
+  speedChanged: function (speedIndex) {
+    var speedInput;
+    // Selected Option will transition to '' before transitioning to new value
+    if (speedIndex === '' || speedIndex === -1) return;
+
+    speedInput = this.stateObj.attributes.speed_list[speedIndex];
+    if (speedInput === this.stateObj.attributes.speed) return;
+
+    this.hass.serviceActions.callService('fan', 'turn_on', {
+      entity_id: this.stateObj.entityId,
+      speed: speedInput,
+    });
+  },
+
+  oscillationToggleChanged: function (ev) {
+    var oldVal = this.stateObj.attributes.oscillating;
+    var newVal = ev.target.checked;
+
+    if (oldVal === newVal) return;
+
+    this.hass.serviceActions.callService('fan', 'oscillate', {
+      entity_id: this.stateObj.entityId,
+      oscillating: newVal,
+    });
+  },
+
+  onDirectionLeft: function () {
+    this.hass.serviceActions.callService('fan', 'set_direction', {
+      entity_id: this.stateObj.entityId,
+      direction: 'left'
+    });
+  },
+
+  onDirectionRight: function () {
+    this.hass.serviceActions.callService('fan', 'set_direction', {
+      entity_id: this.stateObj.entityId,
+      direction: 'right'
+    });
+  },
+
+  computeIsRotatingLeft: function (stateObj) {
+    return stateObj.attributes.direction === 'left';
+  },
+
+  computeIsRotatingRight: function (stateObj) {
+    return stateObj.attributes.direction === 'right';
+  },
+
+  computeHideOscillation: function (stateObj) {
+    return stateObj.attributes.direction;
+  },
+
+});
+</script>

src/util/hass-util.html

@@ -23,9 +23,9 @@ window.hassUtil.DOMAINS_WITH_CARD = [
 ];
 
 window.hassUtil.DOMAINS_WITH_MORE_INFO = [
-  'light', 'group', 'sun', 'climate', 'configurator', 'cover',
+  'alarm_control_panel', 'automation', 'camera', 'climate', 'configurator',
-  'script', 'media_player', 'camera', 'updater', 'alarm_control_panel',
+  'cover', 'fan', 'group', 'light', 'lock', 'media_player', 'script',
-  'lock', 'automation',
+  'sun', 'updater',
 ];
 
 window.hassUtil.DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];