state card for vacuum component with toolbar in more-info-card (#359)

* state card for vacuum component with toolbar in more-info-card

* Basic functionality:

- main switch for turn_on / turn_off.
- Show secondary line with optional status, fanspeed and battery status.
- Show toolbar with play_plause, stop, locate and return_home service calls in the more-info card.
- Use support flags for all extra services (not for turn_on/turn_off).
- Filter specific (vacuum) keys in the state attributes table.

* lint fix

* remove the more-info card, use speed steps with input select

- No need for `more-info-vacuum.html` (using `hidden$='{{inDialog}}'` to separate views).
- Added an input select for the `vacuum_fanspeed_list` property, to set fanspeeds within the more-info view.

This way the controls appear above the history chart, and any extra attribute attached in the platform shows in the normal table below.

* change `start_pause` service

* remove state-card and add more-info card

- No need to make a state-card, as no extra line is allowed in the state-card
- No need to add attrs keys to `LOGIC_STATE_ATTRIBUTES`, using the `extra-filters=` parameter.
- New more-info card with the vacuum controls and the extra state attrs table.

* change state attrs names

* one more change state attrs names

* fix justification

* fix vertical space

* fix hide fan_speed when not supported

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

@@ -15,6 +15,7 @@
 <link rel='import' href='more-info-script.html'>
 <link rel='import' href='more-info-sun.html'>
 <link rel='import' href='more-info-updater.html'>
+<link rel='import' href='more-info-vacuum.html'>
 
 <script>
 Polymer({

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

@@ -0,0 +1,186 @@
+<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/iron-icon/iron-icon.html'>
+
+<link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>
+<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
+<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
+<link rel='import' href='../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html'>
+
+<link rel="import" href="../components/ha-attributes.html">
+
+<dom-module id='more-info-vacuum'>
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      :host {
+        @apply(--paper-font-body1);
+        line-height: 1.5;
+      }
+
+      .status-subtitle {
+        color: var(--secondary-text-color);
+      }
+
+      paper-item {
+        cursor: pointer;
+      }
+
+    </style>
+
+    <div class='horizontal justified layout'>
+      <div hidden$='[[!supportsStatus(stateObj)]]'>
+        <span class="status-subtitle">Status: </span><span><strong>[[stateObj.attributes.status]]</strong></span>
+      </div>
+      <div hidden$='[[!supportsBattery(stateObj)]]'>
+        <span><iron-icon icon="[[stateObj.attributes.battery_icon]]"></iron-icon> [[stateObj.attributes.battery_level]] %</span>
+      </div>
+    </div>
+    <div hidden$='[[!supportsCommandBar(stateObj)]]'>
+      <p></p>
+      <div class="status-subtitle">Vacuum cleaner commands:</div>
+      <div class='horizontal justified layout'>
+        <div hidden$='[[!supportsPause(stateObj)]]'>
+          <paper-icon-button icon='mdi:play-pause'
+            on-tap='onPlayPause' title='Start/Pause'></paper-icon-button>
+        </div>
+        <div hidden$='[[!supportsStop(stateObj)]]'>
+          <paper-icon-button icon='mdi:stop'
+            on-tap='onStop' title='Stop'></paper-icon-button>
+        </div>
+        <div hidden$='[[!supportsLocate(stateObj)]]'>
+        <paper-icon-button icon='mdi:map-marker'
+            on-tap='onLocate' title='Locate'></paper-icon-button>
+        </div>
+        <div hidden$='[[!supportsReturnHome(stateObj)]]'>
+        <paper-icon-button icon='mdi:home-map-marker'
+            on-tap='onReturnHome' title='Return home'></paper-icon-button>
+        </div>
+      </div>
+    </div>
+
+    <div hidden$='[[!supportsFanSpeed(stateObj)]]'>
+      <div class='horizontal justified layout'>
+        <paper-dropdown-menu label-float label='Fan speed'>
+          <paper-listbox slot="dropdown-content" selected='{{fanSpeedIndex}}'>
+            <template is='dom-repeat'
+                      items='[[stateObj.attributes.fan_speed_list]]'>
+              <paper-item>[[item]]</paper-item>
+            </template>
+          </paper-listbox>
+        </paper-dropdown-menu>
+        <div style="justify-content: center; align-self: center; padding-top: 1.3em">
+          <span><iron-icon icon="mdi:fan"></iron-icon> [[stateObj.attributes.fan_speed]]</span>
+        </div>
+      </div>
+      <p></p>
+    </div>
+    <ha-attributes state-obj="[[stateObj]]" extra-filters="fan_speed,fan_speed_list,status,battery_level,battery_icon"></ha-attributes>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'more-info-vacuum',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+
+    fanSpeedIndex: {
+      type: Number,
+      value: -1,
+      observer: 'fanSpeedChanged',
+    },
+  },
+
+  /* eslint-disable no-bitwise */
+
+  supportsPause: function (stateObj) {
+    return (stateObj.attributes.supported_features & 4) !== 0;
+  },
+
+  supportsStop: function (stateObj) {
+    return (stateObj.attributes.supported_features & 8) !== 0;
+  },
+
+  supportsReturnHome: function (stateObj) {
+    return (stateObj.attributes.supported_features & 16) !== 0;
+  },
+
+  supportsFanSpeed: function (stateObj) {
+    return (stateObj.attributes.supported_features & 32) !== 0;
+  },
+
+  supportsBattery: function (stateObj) {
+    return (stateObj.attributes.supported_features & 64) !== 0;
+  },
+
+  supportsStatus: function (stateObj) {
+    return (stateObj.attributes.supported_features & 128) !== 0;
+  },
+
+  supportsLocate: function (stateObj) {
+    return (stateObj.attributes.supported_features & 512) !== 0;
+  },
+
+  supportsCommandBar: function (stateObj) {
+    return (((stateObj.attributes.supported_features & 4) !== 0)
+            | ((stateObj.attributes.supported_features & 8) !== 0)
+            | ((stateObj.attributes.supported_features & 8) !== 0)
+            | ((stateObj.attributes.supported_features & 512) !== 0));
+  },
+
+  /* eslint-enable no-bitwise */
+
+  fanSpeedChanged: function (fanSpeedIndex) {
+    var fanSpeedInput;
+    // Selected Option will transition to '' before transitioning to new value
+    if (fanSpeedIndex === '' || fanSpeedIndex === -1) return;
+
+    fanSpeedInput = this.stateObj.attributes.fan_speed_list[fanSpeedIndex];
+    if (fanSpeedInput === this.stateObj.attributes.fan_speed) return;
+
+    this.hass.callService('vacuum', 'set_fan_speed', {
+      entity_id: this.stateObj.entity_id,
+      fan_speed: fanSpeedInput,
+    });
+  },
+
+  onStop: function () {
+    this.hass.callService('vacuum', 'stop', {
+      entity_id: this.stateObj.entity_id
+    });
+  },
+
+  onPlayPause: function () {
+    this.hass.callService('vacuum', 'start_pause', {
+      entity_id: this.stateObj.entity_id
+    });
+  },
+
+  onLocate: function () {
+    this.hass.callService('vacuum', 'locate', {
+      entity_id: this.stateObj.entity_id
+    });
+  },
+
+  onReturnHome: function () {
+    this.hass.callService('vacuum', 'return_to_base', {
+      entity_id: this.stateObj.entity_id
+    });
+  },
+});
+</script>

src/util/hass-util.html

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