Polymer 3 modulize (#1154)

* Version bump to 20180510.1 * Fix hass util * Fix translations * Bye paper-time-input * Add webpack config * Add webpack to package.json * Fix translation import * Disable web animations polyfill bad import * Disable importHref import * Update webpack config to build authorize.js * Build translations json * Build frontend correctly * Run eslint --fix * Load markdown JS on demand (#1155) * Add HTML imports (#1160) * Fix localize (#1161) * Fix Roboto in build (#1162) * Load web animations polyfill (#1163) * P3: Fix chart js (#1164) * P3: Fix Chart JS * Update timeline package * P3: panel resolver (#1165) * WIP * Initial importing of panels * Fix panel resolver * Fix automation and script editor (#1166) * Expose Polymer and Polymer.Element on window (#1167) * Remove unused import * eslint --fix * Es5 build (#1168) * Build for ES5 * Fix build_frontend * Remove stale comment * Migrate to use paper-material-styles (#1170) * Send parsed date to history/logbook (#1171) * Fork app storage behavior (#1172) * Add paper input with type time (#1173) * Fix authorize * Lint * Sort imports * Lint * Remove eslint-html * Do not lint authorize.html * Fix polymer lint * Try chrome 62 for wct * P3: Add patched iconset (#1175) * Add patched iconset * Lint * Test with latest Chrome again * Use less window.hassUtil * Teporarily use my fecha fork * Import correct intl.messageFormat * Update wct-browser-legacy to 1.0.0 * Include polyfill in right place * Fix IntlMessageFormat * Fix test not having a global scope * Rollup <_< * Fork app-localize-behavior * Disable wct tests * Lint
2025-11-10 19:40:25 +00:00 · 2018-05-15 13:31:47 -04:00
parent 205d6a8347
commit a4afc2e37a
274 changed files with 12972 additions and 10037 deletions
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -0,0 +1,150 @@
+import '@polymer/paper-icon-button/paper-icon-button.js';
+import '@polymer/paper-toggle-button/paper-toggle-button.js';
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+class HaEntityToggle extends PolymerElement {
+  static get template() {
+    return html`
+    <style>
+      :host {
+        white-space: nowrap;
+        min-width: 38px;
+      }
+      paper-icon-button {
+        color: var(--paper-icon-button-inactive-color, var(--primary-text-color));
+        transition: color .5s;
+      }
+      paper-icon-button[state-active] {
+        color: var(--paper-icon-button-active-color, var(--primary-color));
+      }
+      paper-toggle-button {
+        cursor: pointer;
+        --paper-toggle-button-label-spacing: 0;
+        padding: 13px 5px;
+        margin: -4px -5px;
+      }
+    </style>
+
+    <template is="dom-if" if="[[stateObj.attributes.assumed_state]]">
+      <paper-icon-button icon="mdi:flash-off" on-click="turnOff" state-active\$="[[!isOn]]"></paper-icon-button>
+      <paper-icon-button icon="mdi:flash" on-click="turnOn" state-active\$="[[isOn]]"></paper-icon-button>
+    </template>
+    <template is="dom-if" if="[[!stateObj.attributes.assumed_state]]">
+      <paper-toggle-button checked="[[toggleChecked]]" on-change="toggleChanged"></paper-toggle-button>
+    </template>
+`;
+  }
+
+  static get is() { return 'ha-entity-toggle'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: {
+        type: Object,
+        observer: 'stateObjObserver'
+      },
+
+      toggleChecked: {
+        type: Boolean,
+        value: false,
+      },
+
+      isOn: {
+        type: Boolean,
+        computed: 'computeIsOn(stateObj)',
+        observer: 'isOnChanged',
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    this.addEventListener('click', ev => this.onTap(ev));
+    this.forceStateChange();
+  }
+
+  onTap(ev) {
+    ev.stopPropagation();
+  }
+
+  toggleChanged(ev) {
+    const newVal = ev.target.checked;
+
+    if (newVal && !this.isOn) {
+      this.callService(true);
+    } else if (!newVal && this.isOn) {
+      this.callService(false);
+    }
+  }
+
+  isOnChanged(newVal) {
+    this.toggleChecked = newVal;
+  }
+
+  forceStateChange() {
+    if (this.toggleChecked === this.isOn) {
+      this.toggleChecked = !this.toggleChecked;
+    }
+    this.toggleChecked = this.isOn;
+  }
+
+  turnOn() {
+    this.callService(true);
+  }
+
+  turnOff() {
+    this.callService(false);
+  }
+
+  computeIsOn(stateObj) {
+    return stateObj && !window.hassUtil.OFF_STATES.includes(stateObj.state);
+  }
+
+  stateObjObserver(newVal, oldVal) {
+    if (!oldVal || !newVal) return;
+    if (this.computeIsOn(newVal) === this.computeIsOn(oldVal)) {
+      // stateObj changed but isOn is the same. Make sure toggle is in the right position.
+      this.forceStateChange();
+    }
+  }
+
+  // We call updateToggle after a successful call to re-sync the toggle
+  // with the state. It will be out of sync if our service call did not
+  // result in the entity to be turned on. Since the state is not changing,
+  // the resync is not called automatic.
+  callService(turnOn) {
+    const stateDomain = window.hassUtil.computeDomain(this.stateObj);
+    let serviceDomain;
+    let service;
+
+    if (stateDomain === 'lock') {
+      serviceDomain = 'lock';
+      service = turnOn ? 'lock' : 'unlock';
+    } else if (stateDomain === 'cover') {
+      serviceDomain = 'cover';
+      service = turnOn ? 'open' : 'close';
+    } else {
+      serviceDomain = 'homeassistant';
+      service = turnOn ? 'turn_on' : 'turn_off';
+    }
+
+    const currentState = this.stateObj;
+    this.hass.callService(
+      serviceDomain, service,
+      { entity_id: this.stateObj.entity_id }
+    )
+      .then(() => {
+        setTimeout(() => {
+          // If after 2 seconds we have not received a state update
+          // reset the switch to it's original state.
+          if (this.stateObj === currentState) {
+            this.forceStateChange();
+          }
+        }, 2000);
+      });
+  }
+}
+
+customElements.define(HaEntityToggle.is, HaEntityToggle);