More ES6->ES5 conversion

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

@@ -32,3 +32,109 @@
     </template>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'ha-entity-toggle',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    stateObj: {
+      type: Object,
+    },
+
+    toggleChecked: {
+      type: Boolean,
+      value: false,
+    },
+
+    isOn: {
+      type: Boolean,
+      computed: 'computeIsOn(stateObj)',
+      observer: 'isOnChanged',
+    },
+  },
+
+  listeners: {
+    tap: 'onTap',
+  },
+
+  onTap: function (ev) {
+    ev.stopPropagation();
+  },
+
+  ready: function () {
+    this.forceStateChange();
+  },
+
+  toggleChanged: function (ev) {
+    var newVal = ev.target.checked;
+
+    if (newVal && !this.isOn) {
+      this.callService(true);
+    } else if (!newVal && this.isOn) {
+      this.callService(false);
+    }
+  },
+
+  isOnChanged: function (newVal) {
+    this.toggleChecked = newVal;
+  },
+
+  forceStateChange: function () {
+    if (this.toggleChecked === this.isOn) {
+      this.toggleChecked = !this.toggleChecked;
+    }
+    this.toggleChecked = this.isOn;
+  },
+
+  turnOn: function () {
+    this.callService(true);
+  },
+
+  turnOff: function () {
+    this.callService(false);
+  },
+
+  computeIsOn: function (stateObj) {
+    return stateObj && window.hassUtil.OFF_STATES.indexOf(stateObj.state) === -1;
+  },
+
+  // 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: function (turnOn) {
+    var domain;
+    var service;
+    var currentState;
+
+    if (this.stateObj.domain === 'lock') {
+      domain = 'lock';
+      service = turnOn ? 'lock' : 'unlock';
+    } else if (this.stateObj.domain === 'garage_door') {
+      domain = 'garage_door';
+      service = turnOn ? 'open' : 'close';
+    } else {
+      domain = 'homeassistant';
+      service = turnOn ? 'turn_on' : 'turn_off';
+    }
+
+    currentState = this.stateObj;
+    this.hass.serviceActions.callService(domain, service,
+                                         { entity_id: this.stateObj.entityId })
+      .then(function () {
+        setTimeout(function () {
+          // 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();
+          }
+        }.bind(this), 2000);
+      }.bind(this));
+  },
+});
+</script>

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

@@ -1,104 +0,0 @@
-import Polymer from '../../polymer';
-
-import OFF_STATES from '../../util/off-states';
-
-export default new Polymer({
-  is: 'ha-entity-toggle',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
-    toggleChecked: {
-      type: Boolean,
-      value: false,
-    },
-
-    isOn: {
-      type: Boolean,
-      computed: 'computeIsOn(stateObj)',
-      observer: 'isOnChanged',
-    },
-  },
-
-  listeners: {
-    tap: 'onTap',
-  },
-
-  onTap(ev) {
-    ev.stopPropagation();
-  },
-
-  ready() {
-    this.forceStateChange();
-  },
-
-  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 && OFF_STATES.indexOf(stateObj.state) === -1;
-  },
-
-  // 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) {
-    let domain;
-    let service;
-
-    if (this.stateObj.domain === 'lock') {
-      domain = 'lock';
-      service = turnOn ? 'lock' : 'unlock';
-    } else if (this.stateObj.domain === 'garage_door') {
-      domain = 'garage_door';
-      service = turnOn ? 'open' : 'close';
-    } else {
-      domain = 'homeassistant';
-      service = turnOn ? 'turn_on' : 'turn_off';
-    }
-
-    const currentState = this.stateObj;
-    this.hass.serviceActions.callService(domain, service,
-                                         { entity_id: this.stateObj.entityId })
-      .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));
-  },
-});

src/components/entity/ha-state-icon.html

@@ -7,3 +7,19 @@
     <iron-icon icon="[[computeIcon(stateObj)]]"></iron-icon>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'ha-state-icon',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+  },
+
+  computeIcon: function (stateObj) {
+    return window.hassUtil.stateIcon(stateObj);
+  },
+});
+</script>

src/components/entity/ha-state-icon.js

@@ -1,17 +0,0 @@
-import Polymer from '../../polymer';
-
-import stateIcon from '../../util/state-icon';
-
-export default new Polymer({
-  is: 'ha-state-icon',
-
-  properties: {
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  computeIcon(stateObj) {
-    return stateIcon(stateObj);
-  },
-});

src/components/entity/ha-state-label-badge.html

@@ -34,3 +34,114 @@
     ></ha-label-badge>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'ha-state-label-badge',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    state: {
+      type: Object,
+      observer: 'stateChanged',
+    },
+  },
+
+  listeners: {
+    tap: 'badgeTap',
+  },
+
+  badgeTap: function (ev) {
+    ev.stopPropagation();
+    this.async(function () {
+      this.hass.moreInfoActions.selectEntity(this.state.entityId);
+    }, 1);
+  },
+
+  computeClasses: function (state) {
+    switch (state.domain) {
+      case 'binary_sensor':
+      case 'updater':
+        return 'blue';
+      default:
+        return '';
+    }
+  },
+
+  computeValue: function (state) {
+    switch (state.domain) {
+      case 'binary_sensor':
+      case 'device_tracker':
+      case 'updater':
+      case 'sun':
+      case 'alarm_control_panel':
+        return null;
+      case 'sensor':
+      default:
+        return state.state === 'unknown' ? '-' : state.state;
+    }
+  },
+
+  computeIcon: function (state) {
+    if (state.state === 'unavailable') {
+      return null;
+    }
+    switch (state.domain) {
+      case 'alarm_control_panel':
+        if (state.state === 'pending') {
+          return 'mdi:clock-fast';
+        } else if (state.state === 'armed_away') {
+          return 'mdi:nature';
+        } else if (state.state === 'armed_home') {
+          return 'mdi:home-variant';
+        }
+        // state == 'disarmed'
+        return window.hassUtil.domainIcon(state.domain, state.state);
+      case 'binary_sensor':
+      case 'device_tracker':
+      case 'updater':
+        return window.hassUtil.stateIcon(state);
+      case 'sun':
+        return state.state === 'above_horizon' ?
+        window.hassUtil.domainIcon(state.domain) : 'mdi:brightness-3';
+      default:
+        return null;
+    }
+  },
+
+  computeImage: function (state) {
+    return state.attributes.entity_picture || null;
+  },
+
+  computeLabel: function (state) {
+    if (state.state === 'unavailable') {
+      return 'unavai';
+    }
+    switch (state.domain) {
+      case 'device_tracker':
+        return state.state === 'not_home' ? 'Away' : state.state;
+      case 'alarm_control_panel':
+        if (state.state === 'pending') {
+          return 'pend';
+        } else if (state.state === 'armed_away' || state.state === 'armed_home') {
+          return 'armed';
+        }
+        // state == 'disarmed'
+        return 'disarm';
+      default:
+        return state.attributes.unit_of_measurement || null;
+    }
+  },
+
+  computeDescription: function (state) {
+    return state.entityDisplay;
+  },
+
+  stateChanged: function () {
+    this.updateStyles();
+  },
+});
+</script>

src/components/entity/ha-state-label-badge.js

@@ -1,110 +0,0 @@
-import Polymer from '../../polymer';
-import domainIcon from '../../util/domain-icon';
-import stateIcon from '../../util/state-icon';
-
-export default new Polymer({
-  is: 'ha-state-label-badge',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    state: {
-      type: Object,
-      observer: 'stateChanged',
-    },
-  },
-
-  listeners: {
-    tap: 'badgeTap',
-  },
-
-  badgeTap(ev) {
-    ev.stopPropagation();
-    this.async(() => this.hass.moreInfoActions.selectEntity(this.state.entityId), 1);
-  },
-
-  computeClasses(state) {
-    switch (state.domain) {
-      case 'binary_sensor':
-      case 'updater':
-        return 'blue';
-      default:
-        return '';
-    }
-  },
-
-  computeValue(state) {
-    switch (state.domain) {
-      case 'binary_sensor':
-      case 'device_tracker':
-      case 'updater':
-      case 'sun':
-      case 'alarm_control_panel':
-        return null;
-      case 'sensor':
-      default:
-        return state.state === 'unknown' ? '-' : state.state;
-    }
-  },
-
-  computeIcon(state) {
-    if (state.state === 'unavailable') {
-      return null;
-    }
-    switch (state.domain) {
-      case 'alarm_control_panel':
-        if (state.state === 'pending') {
-          return 'mdi:clock-fast';
-        } else if (state.state === 'armed_away') {
-          return 'mdi:nature';
-        } else if (state.state === 'armed_home') {
-          return 'mdi:home-variant';
-        }
-        // state == 'disarmed'
-        return domainIcon(state.domain, state.state);
-      case 'binary_sensor':
-      case 'device_tracker':
-      case 'updater':
-        return stateIcon(state);
-      case 'sun':
-        return state.state === 'above_horizon' ?
-        domainIcon(state.domain) : 'mdi:brightness-3';
-      default:
-        return null;
-    }
-  },
-
-  computeImage(state) {
-    return state.attributes.entity_picture || null;
-  },
-
-  computeLabel(state) {
-    if (state.state === 'unavailable') {
-      return 'unavai';
-    }
-    switch (state.domain) {
-      case 'device_tracker':
-        return state.state === 'not_home' ? 'Away' : state.state;
-      case 'alarm_control_panel':
-        if (state.state === 'pending') {
-          return 'pend';
-        } else if (state.state === 'armed_away' || state.state === 'armed_home') {
-          return 'armed';
-        }
-        // state == 'disarmed'
-        return 'disarm';
-      default:
-        return state.attributes.unit_of_measurement || null;
-    }
-  },
-
-  computeDescription(state) {
-    return state.entityDisplay;
-  },
-
-  stateChanged() {
-    this.updateStyles();
-  },
-});

src/components/entity/state-badge.html

@@ -40,3 +40,42 @@
     </ha-state-icon>
   </template>
 </dom-module>
+
+<script>
+Polymer({
+  is: 'state-badge',
+
+  properties: {
+    stateObj: {
+      type: Object,
+      observer: 'updateIconColor',
+    },
+  },
+
+  /**
+   * Called when an attribute changes that influences the color of the icon.
+   */
+  updateIconColor: function (newVal) {
+    // hide icon if we have entity picture
+    if (newVal.attributes.entity_picture) {
+      this.style.backgroundImage = 'url(' + newVal.attributes.entity_picture + ')';
+      this.$.icon.style.display = 'none';
+      return;
+    }
+
+    this.style.backgroundImage = '';
+    this.$.icon.style.display = 'inline';
+
+    // for domain light, set color of icon to light color if available and it is
+    // not very white (sum rgb colors < 730)
+    if (newVal.domain === 'light' && newVal.state === 'on' &&
+       newVal.attributes.rgb_color &&
+       newVal.attributes.rgb_color.reduce(function (cur, tot) { return cur + tot; }, 0) < 730) {
+      this.$.icon.style.color = 'rgb(' + newVal.attributes.rgb_color.join(',') + ')';
+    } else {
+      this.$.icon.style.color = null;
+    }
+  },
+
+});
+</script>

src/components/entity/state-badge.js

@@ -1,40 +0,0 @@
-import Polymer from '../../polymer';
-
-import './ha-state-icon';
-
-export default new Polymer({
-  is: 'state-badge',
-
-  properties: {
-    stateObj: {
-      type: Object,
-      observer: 'updateIconColor',
-    },
-  },
-
-  /**
-   * Called when an attribute changes that influences the color of the icon.
-   */
-  updateIconColor(newVal) {
-    // hide icon if we have entity picture
-    if (newVal.attributes.entity_picture) {
-      this.style.backgroundImage = `url(${newVal.attributes.entity_picture})`;
-      this.$.icon.style.display = 'none';
-      return;
-    }
-
-    this.style.backgroundImage = '';
-    this.$.icon.style.display = 'inline';
-
-    // for domain light, set color of icon to light color if available and it is
-    // not very white (sum rgb colors < 730)
-    if (newVal.domain === 'light' && newVal.state === 'on' &&
-       newVal.attributes.rgb_color &&
-       newVal.attributes.rgb_color.reduce((cur, tot) => cur + tot, 0) < 730) {
-      this.$.icon.style.color = `rgb(${newVal.attributes.rgb_color.join(',')})`;
-    } else {
-      this.$.icon.style.color = null;
-    }
-  },
-
-});