Add support for assumed_state

src/components/entity/ha-entity-toggle.html

@@ -1,16 +1,29 @@
 <link rel="import" href="../../../bower_components/polymer/polymer.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="ha-entity-toggle">
   <style>
+    paper-icon-button {
+      transition: color .5s;
+    }
+    paper-icon-button[state-active] {
+      color: var(--default-primary-color);
+    }
     paper-toggle-button {
       cursor: pointer;
       --paper-toggle-button-label-spacing: 0;
     }
   </style>
   <template>
+    <template is='dom-if' if='[[stateObj.attributes.assumed_state]]'>
+      <paper-icon-button icon="mdi:flash-off" on-tap="turnOff" state-active$='[[!isOn]]'></paper-icon-button>
+      <paper-icon-button icon="mdi:flash" on-tap="turnOn" state-active$='[[isOn]]'></paper-icon-button>
+    </template>
+    <template is='dom-if' if='[[!stateObj.attributes.assumed_state]]'>
       <paper-toggle-button class='self-center'
         checked="[[toggleChecked]]"
         on-change="toggleChanged"></paper-toggle-button>
     </template>
+  </template>
 </dom-module>

src/components/entity/ha-entity-toggle.js

@@ -10,13 +10,18 @@ export default new Polymer({
   properties: {
     stateObj: {
       type: Object,
-      observer: 'stateObjChanged',
     },
 
     toggleChecked: {
       type: Boolean,
       value: false,
     },
+
+    isOn: {
+      type: Boolean,
+      computed: 'computeIsOn(stateObj)',
+      observer: 'isOnChanged',
+    },
   },
 
   ready() {
@@ -25,34 +30,34 @@ export default new Polymer({
 
   toggleChanged(ev) {
     const newVal = ev.target.checked;
-    const curVal = this._checkToggle(this.stateObj);
 
-    if (newVal && !curVal) {
+    if (newVal && !this.isOn) {
       this._call_service(true);
-    } else if (!newVal && curVal) {
+    } else if (!newVal && this.isOn) {
       this._call_service(false);
     }
   },
 
-  stateObjChanged(newVal) {
+  isOnChanged(newVal) {
-    if (newVal) {
+    this.toggleChecked = newVal;
-      this.updateToggle(newVal);
-    }
-  },
-
-  updateToggle(stateObj) {
-    this.toggleChecked = this._checkToggle(stateObj);
   },
 
   forceStateChange() {
-    const newState = this._checkToggle(this.stateObj);
+    if (this.toggleChecked === this.isOn) {
-    if (this.toggleChecked === newState) {
       this.toggleChecked = !this.toggleChecked;
     }
-    this.toggleChecked = newState;
+    this.toggleChecked = this.isOn;
   },
 
-  _checkToggle(stateObj) {
+  turnOn() {
+    this._call_service(true);
+  },
+
+  turnOff() {
+    this._call_service(false);
+  },
+
+  computeIsOn(stateObj) {
     return stateObj && stateObj.state !== 'off' &&
       stateObj.state !== 'unlocked' && stateObj.state !== 'closed';
   },
@@ -76,7 +81,11 @@ export default new Polymer({
       service = turnOn ? 'turn_on' : 'turn_off';
     }
 
-    serviceActions.callService(domain, service, { entity_id: this.stateObj.entityId })
+    const call = serviceActions.callService(domain, service,
-      .then(() => this.forceStateChange());
+                                            { entity_id: this.stateObj.entityId });
+
+    if (!this.stateObj.attributes.assumed_state) {
+      call.then(() => this.forceStateChange());
+    }
   },
 });

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

@@ -1,5 +1,4 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
 
 <link rel="import" href="../components/state-info.html">
 <link rel="import" href="../components/entity/ha-entity-toggle.html">

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

@@ -5,4 +5,10 @@ require('../components/entity/ha-entity-toggle');
 
 export default new Polymer({
   is: 'state-card-toggle',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
 });