Vacuum: Added support for STATES (#1497)

* Changed vacuum state-card

* Stupid copy/paste error

* Added support for vacuum in lovelace

* Implement backwards compat.

* Remove lovelace changes

* Added new lovelace

* Updated lovelace code to reflect changes in entity

* Hopefully fix me being bad at git?

* even more fixes

* remove lovelace for now

* Fixed styling errors

* fix styling

* Fallback to toggle

* Fixed errors

* 🐫

* Updated ui

* fix lint error

* Added error to translation

* Added translations

* Removed a comma

* Added the last translations

* Support translation for actions

* Styling

* abcd, removed states from ui.card.vacuum, and moved actions to ui.card.vacuum.actions

* abcd and use this._interceptable

* Removed unused import

* _computeLabel(state, interceptable)

src/common/const.js

@@ -20,6 +20,7 @@ export const DOMAINS_WITH_CARD = [
   'scene',
   'script',
   'timer',
+  'vacuum',
   'weblink',
 ];
 

src/components/ha-vacuum-state.js

@@ -0,0 +1,89 @@
+import '@polymer/paper-button/paper-button.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import LocalizeMixin from '../mixins/localize-mixin.js';
+
+const STATES_INTERCEPTABLE = {
+  cleaning: {
+    action: 'return_to_base',
+    service: 'return_to_base'
+  },
+  docked: {
+    action: 'start_cleaning',
+    service: 'start_pause'
+  },
+  idle: {
+    action: 'start_cleaning',
+    service: 'start_pause'
+  },
+  off: {
+    action: 'turn_on',
+    service: 'turn_on'
+  },
+  on: {
+    action: 'turn_off',
+    service: 'turn_off'
+  },
+  paused: {
+    action: 'resume_cleaning',
+    service: 'start_pause'
+  },
+};
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HaVacuumState extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <style>
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          top: 3px;
+          height: 37px;
+          margin-right: -.57em;
+        }
+        paper-button[disabled] {
+          background-color: transparent;
+          color: var(--secondary-text-color);
+        }
+      </style>
+
+      <paper-button
+        on-click="_callService"
+        disabled="[[!_interceptable]]"
+      >[[_computeLabel(stateObj.state, _interceptable)]]</paper-button>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      _interceptable: {
+        type: Boolean,
+        computed: '_computeInterceptable(stateObj.state, stateObj.attributes.supported_features)'
+      }
+    };
+  }
+
+  _computeInterceptable(state, supportedFeatures) {
+    return state in STATES_INTERCEPTABLE && supportedFeatures !== 0;
+  }
+
+  _computeLabel(state, interceptable) {
+    return interceptable ?
+      this.localize(`ui.card.vacuum.actions.${STATES_INTERCEPTABLE[state].action}`)
+      : this.localize(`state.vacuum.${state}`);
+  }
+
+  _callService(ev) {
+    ev.stopPropagation();
+    const stateObj = this.stateObj;
+    const service = STATES_INTERCEPTABLE[stateObj.state].service;
+    this.hass.callService('vacuum', service, { entity_id: stateObj.entity_id });
+  }
+}
+customElements.define('ha-vacuum-state', HaVacuumState);

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

@@ -13,6 +13,7 @@ import './state-card-scene.js';
 import './state-card-script.js';
 import './state-card-timer.js';
 import './state-card-toggle.js';
+import './state-card-vacuum.js';
 import './state-card-weblink.js';
 
 import stateCardType from '../common/entity/state_card_type.js';

src/state-summary/state-card-vacuum.js

@@ -0,0 +1,41 @@
+import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../components/entity/state-info.js';
+import '../components/ha-vacuum-state.js';
+
+class StateCardVacuum extends PolymerElement {
+  static get template() {
+    return html`
+    <style include="iron-flex iron-flex-alignment"></style>
+
+    <div class="horizontal justified layout">
+      ${this.stateInfoTemplate}
+        <ha-vacuum-state hass="[[hass]]" state-obj="[[stateObj]]"></ha-vacuum-state>
+    </div>
+`;
+  }
+
+  static get stateInfoTemplate() {
+    return html`
+    <state-info
+      hass="[[hass]]"
+      state-obj="[[stateObj]]"
+      in-dialog="[[inDialog]]"
+    ></state-info>
+`;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      inDialog: {
+        type: Boolean,
+        value: false,
+      }
+    };
+  }
+}
+customElements.define('state-card-vacuum', StateCardVacuum);

src/translations/en.json

@@ -33,6 +33,7 @@
     "sun": "Sun",
     "switch": "Switch",
     "updater": "Updater",
+    "vacuum": "Vacuum",
     "weblink": "Weblink",
     "zwave": "Z-Wave"
   },
@@ -263,6 +264,16 @@
       "off": "[%key:state::default::off%]",
       "on": "[%key:state::default::on%]"
     },
+    "vacuum": {
+      "cleaning": "Cleaning",
+      "docked": "Docked",
+      "error": "Error",
+      "idle": "Idle",
+      "off": "[%key:state::default::off%]",
+      "on": "[%key:state::default::on%]",
+      "paused": "Paused",
+      "returning": "Returning to dock"
+    },
     "weather": {
       "clear-night": "Clear, night",
       "cloudy": "Cloudy",
@@ -375,6 +386,15 @@
       "script": {
         "execute": "Execute"
       },
+      "vacuum": {
+        "actions": {
+          "resume_cleaning": "Resume cleaning",
+          "return_to_base": "Return to dock",
+          "start_cleaning": "Start cleaning",
+          "turn_on": "Turn on",
+          "turn_off": "Turn off"
+        }
+      },
       "weather": {
         "attributes": {
           "air_pressure": "Air pressure",