Convert card elements to ES6 classes (#465)

* Convert cards to ES6 classes

* Bonus bugfix debugging card functionality

* Properly scope UPDATE_INTERVAL

* Condense simple property declarations

src/cards/ha-badges-card.html

@@ -1,4 +1,4 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 
 <link rel='import' href='../components/entity/ha-state-label-badge.html'>
 
@@ -17,17 +17,14 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-badges-card',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    states: {
-      type: Array,
-    },
-  },
-});
+class HaBadgesCard extends Polymer.Element {
+  static get is() { return 'ha-badges-card'; }
+  static get properties() {
+    return {
+      hass: Object,
+      states: Array,
+    };
+  }
+}
+customElements.define(HaBadgesCard.is, HaBadgesCard);
 </script>

src/cards/ha-camera-card.html

@@ -1,6 +1,8 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 <link rel="import" href="../../bower_components/paper-material/paper-material.html">
 
+<link rel='import' href='../util/hass-mixins.html'>
+
 <dom-module id='ha-camera-card'>
   <template>
     <style include="paper-material">
@@ -49,76 +51,71 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-camera-card',
-  UPDATE_INTERVAL: 10000, // ms
+{
+  const UPDATE_INTERVAL = 10000; // ms
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  class HaCameraCard extends window.hassMixins.EventsMixin(Polymer.Element) {
+    static get is() { return 'ha-camera-card'; }
+    static get properties() {
+      return {
+        hass: Object,
+        stateObj: {
+          type: Object,
+          observer: 'updateCameraFeedSrc',
+        },
+        cameraFeedSrc: String,
+        imageLoaded: {
+          type: Boolean,
+          value: true,
+        },
+        /**
+         * The z-depth of the card, from 0-5.
+         */
+        elevation: {
+          type: Number,
+          value: 1,
+          reflectToAttribute: true,
+        },
+      };
+    }
 
-    stateObj: {
-      type: Object,
-      observer: 'updateCameraFeedSrc',
-    },
+    ready() {
+      super.ready();
+      this.addEventListener('tap', () => this.cardTapped());
+    }
 
-    cameraFeedSrc: {
-      type: String,
-    },
+    connectedCallback() {
+      super.connectedCallback();
+      this.timer = setInterval(() => this.updateCameraFeedSrc(), UPDATE_INTERVAL);
+    }
 
-    imageLoaded: {
-      type: Boolean,
-      value: true,
-    },
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      clearInterval(this.timer);
+    }
 
-    /**
-     * The z-depth of the card, from 0-5.
-     */
-    elevation: {
-      type: Number,
-      value: 1,
-      reflectToAttribute: true,
-    },
-  },
+    cardTapped() {
+      this.fire('hass-more-info', { entityId: this.stateObj.entity_id });
+    }
 
-  listeners: {
-    tap: 'cardTapped',
-  },
+    updateCameraFeedSrc() {
+      var attr = this.stateObj.attributes;
+      var time = (new Date()).getTime();
+      this.cameraFeedSrc = attr.entity_picture + '&time=' + time;
+    }
 
-  attached: function () {
-    this.timer = setInterval(
-      function () {
-        this.updateCameraFeedSrc(this.stateObj);
-      }.bind(this),
-      this.UPDATE_INTERVAL
-    );
-  },
+    imageLoadSuccess() {
+      this.imageLoaded = true;
+    }
 
-  detached: function () {
-    clearInterval(this.timer);
-  },
+    imageLoadFail() {
+      this.imageLoaded = false;
+    }
 
-  cardTapped: function () {
-    this.fire('hass-more-info', { entityId: this.stateObj.entity_id });
-  },
-
-  updateCameraFeedSrc: function (stateObj) {
-    var attr = stateObj.attributes;
-    var time = (new Date()).getTime();
-    this.cameraFeedSrc = attr.entity_picture + '&time=' + time;
-  },
-
-  imageLoadSuccess: function () {
-    this.imageLoaded = true;
-  },
-
-  imageLoadFail: function () {
-    this.imageLoaded = false;
-  },
-
-  computeStateName: function (stateObj) {
-    return window.hassUtil.computeStateName(stateObj);
-  },
-});
+    computeStateName(stateObj) {
+      return window.hassUtil.computeStateName(stateObj);
+    }
+  }
+  customElements.define(HaCameraCard.is, HaCameraCard);
+}
 </script>

src/cards/ha-card-chooser.html

@@ -1,4 +1,4 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 
 <link rel='import' href='./ha-camera-card.html'>
 <link rel='import' href='./ha-entities-card.html'>
@@ -9,23 +9,25 @@
 <link rel='import' href='./ha-persistent_notification-card.html'>
 
 <script>
-Polymer({
-  is: 'ha-card-chooser',
+class HaCardChooser extends Polymer.Element {
+  static get is() { return 'ha-card-chooser'; }
+  static get properties() {
+    return {
+      cardData: {
+        type: Object,
+        observer: 'cardDataChanged',
+      },
+    };
+  }
 
-  properties: {
-    cardData: {
-      type: Object,
-      observer: 'cardDataChanged',
-    },
-  },
-
-  cardDataChanged: function (newData) {
+  cardDataChanged(newData) {
     if (!newData) return;
 
     window.hassUtil.dynamicContentUpdater(
       this, 'HA-' + newData.cardType.toUpperCase() + '-CARD',
       newData
     );
-  },
-});
+  }
+}
+customElements.define(HaCardChooser.is, HaCardChooser);
 </script>

src/cards/ha-entities-card.html

@@ -1,10 +1,11 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
 <link rel='import' href='../components/ha-card.html'>
 <link rel='import' href='../components/entity/ha-entity-toggle.html'>
 <link rel='import' href='../state-summary/state-card-content.html'>
+<link rel='import' href='../util/hass-mixins.html'>
 
 <dom-module id='ha-entities-card'>
   <template>
@@ -64,30 +65,23 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-entities-card',
+class HaEntitiesCard extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'ha-entities-card'; }
+  static get properties() {
+    return {
+      hass: Object,
+      states: Array,
+      groupEntity: Object,
+    };
+  }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    states: {
-      type: Array,
-    },
-
-    groupEntity: {
-      type: Object,
-    },
-  },
-
-  computeTitle: function (states, groupEntity) {
+  computeTitle(states, groupEntity) {
     return groupEntity ?
       window.hassUtil.computeStateName(groupEntity) :
       window.hassUtil.computeDomain(states[0]).replace(/_/g, ' ');
-  },
+  }
 
-  computeTitleClass: function (groupEntity) {
+  computeTitleClass(groupEntity) {
     var classes = 'header horizontal layout center ';
     if (groupEntity) {
       classes += 'header-more-info';
@@ -95,9 +89,9 @@ Polymer({
       classes += 'domain';
     }
     return classes;
-  },
+  }
 
-  entityTapped: function (ev) {
+  entityTapped(ev) {
     var entityId;
     if (ev.target.nodeName === 'STATE-CARD-INPUT_TEXT' ||
         (!ev.model && !this.groupEntity)) {
@@ -111,9 +105,9 @@ Polymer({
       entityId = this.groupEntity.entity_id;
     }
     this.fire('hass-more-info', { entityId: entityId });
-  },
+  }
 
-  showGroupToggle: function (groupEntity, states) {
+  showGroupToggle(groupEntity, states) {
     if (!groupEntity || !states || groupEntity.attributes.control === 'hidden' ||
         (groupEntity.state !== 'on' && groupEntity.state !== 'off')) {
       return false;
@@ -134,6 +128,7 @@ Polymer({
     }
 
     return canToggleCount > 1;
-  },
-});
+  }
+}
+customElements.define(HaEntitiesCard.is, HaEntitiesCard);
 </script>

src/cards/ha-introduction-card.html

@@ -1,4 +1,4 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 
 <link rel='import' href='../components/ha-card.html'>
 
@@ -67,18 +67,17 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-introduction-card',
-
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    showHideInstruction: {
-      type: Boolean,
-      value: true,
-    },
-  },
-});
+class HaIntroductionCard extends Polymer.Element {
+  static get is() { return 'ha-introduction-card'; }
+  static get properties() {
+    return {
+      hass: Object,
+      showHideInstruction: {
+        type: Boolean,
+        value: true,
+      },
+    };
+  }
+}
+customElements.define(HaIntroductionCard.is, HaIntroductionCard);
 </script>

src/cards/ha-media_player-card.html

@@ -1,4 +1,4 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
 
@@ -7,6 +7,7 @@
 <link rel='import' href='../../bower_components/paper-progress/paper-progress.html'>
 
 <link rel='import' href='../util/media-player-model.html'>
+<link rel='import' href='../util/hass-mixins.html'>
 
 <dom-module id='ha-media_player-card'>
   <template>
@@ -205,48 +206,34 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-media_player-card',
+class HaMediaPlayerCard extends window.hassMixins.EventsMixin(Polymer.Element) {
+  static get is() { return 'ha-media_player-card'; }
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      playerObj: {
+        type: Object,
+        computed: 'computePlayerObj(hass, stateObj)',
+        observer: 'playerObjChanged',
+      },
+      playbackControlIcon: {
+        type: String,
+        computed: 'computePlaybackControlIcon(playerObj)',
+      },
+      playbackPosition: Number,
+      /**
+       * The z-depth of the card, from 0-5.
+       */
+      elevation: {
+        type: Number,
+        value: 1,
+        reflectToAttribute: true,
+      },
+    };
+  }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
-    playerObj: {
-      type: Object,
-      computed: 'computePlayerObj(hass, stateObj)',
-      observer: 'playerObjChanged',
-    },
-
-    playbackControlIcon: {
-      type: String,
-      computed: 'computePlaybackControlIcon(playerObj)',
-    },
-
-    playbackPosition: {
-      type: Number,
-    },
-
-    /**
-     * The z-depth of the card, from 0-5.
-     */
-    elevation: {
-      type: Number,
-      value: 1,
-      reflectToAttribute: true,
-    },
-  },
-
-  created: function () {
-    this.updatePlaybackPosition = this.updatePlaybackPosition.bind(this);
-  },
-
-  playerObjChanged: function (playerObj) {
+  playerObjChanged(playerObj) {
     var picture = playerObj.stateObj.attributes.entity_picture;
     var dummy;
     if (picture) {
@@ -281,7 +268,7 @@ Polymer({
 
     if (playerObj.isPlaying && playerObj.showProgress) {
       if (!this._positionTracking) {
-        this._positionTracking = setInterval(this.updatePlaybackPosition, 1000);
+        this._positionTracking = setInterval(() => this.updatePlaybackPosition(), 1000);
       }
     } else if (this._positionTracking) {
       clearInterval(this._positionTracking);
@@ -290,13 +277,13 @@ Polymer({
     if (playerObj.showProgress) {
       this.updatePlaybackPosition();
     }
-  },
+  }
 
-  updatePlaybackPosition: function () {
+  updatePlaybackPosition() {
     this.playbackPosition = this.playerObj.currentProgress;
-  },
+  }
 
-  computeBannerClasses: function (playerObj) {
+  computeBannerClasses(playerObj) {
     var cls = 'banner';
 
     if (playerObj.isOff || playerObj.isIdle) {
@@ -308,56 +295,57 @@ Polymer({
     }
 
     return cls;
-  },
+  }
 
-  computeHideProgress: function (playerObj) {
+  computeHideProgress(playerObj) {
     return !playerObj.showProgress;
-  },
+  }
 
-  computeHidePowerButton: function (playerObj) {
+  computeHidePowerButton(playerObj) {
     return playerObj.isOff ? !playerObj.supportsTurnOn : !playerObj.supportsTurnOff;
-  },
+  }
 
-  computePlayerObj: function (hass, stateObj) {
+  computePlayerObj(hass, stateObj) {
     return new window.MediaPlayerEntity(hass, stateObj);
-  },
+  }
 
-  computePlaybackControlIcon: function (playerObj) {
+  computePlaybackControlIcon(playerObj) {
     if (playerObj.isPlaying) {
       return playerObj.supportsPause ? 'mdi:pause' : 'mdi:stop';
     } else if (playerObj.isPaused || playerObj.isOff || playerObj.isIdle) {
       return playerObj.supportsPlay ? 'mdi:play' : null;
     }
     return '';
-  },
+  }
 
-  computeStateName: function (stateObj) {
+  computeStateName(stateObj) {
     return window.hassUtil.computeStateName(stateObj);
-  },
+  }
 
-  handleNext: function (ev) {
+  handleNext(ev) {
     ev.stopPropagation();
     this.playerObj.nextTrack();
-  },
+  }
 
-  handleOpenMoreInfo: function (ev) {
+  handleOpenMoreInfo(ev) {
     ev.stopPropagation();
     this.fire('hass-more-info', { entityId: this.stateObj.entity_id });
-  },
+  }
 
-  handlePlaybackControl: function (ev) {
+  handlePlaybackControl(ev) {
     ev.stopPropagation();
     this.playerObj.mediaPlayPause();
-  },
+  }
 
-  handlePrevious: function (ev) {
+  handlePrevious(ev) {
     ev.stopPropagation();
     this.playerObj.previousTrack();
-  },
+  }
 
-  handleTogglePower: function (ev) {
+  handleTogglePower(ev) {
     ev.stopPropagation();
     this.playerObj.togglePower();
-  },
-});
+  }
+}
+customElements.define(HaMediaPlayerCard.is, HaMediaPlayerCard);
 </script>

src/cards/ha-persistent_notification-card.html

@@ -1,4 +1,4 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
 
 <link rel='import' href='../components/ha-card.html'>
@@ -29,34 +29,31 @@
 </dom-module>
 
 <script>
-Polymer({
-  is: 'ha-persistent_notification-card',
+class HaPersistentNotificationCard extends Polymer.Element {
+  static get is() { return 'ha-persistent_notification-card'; }
+  static get properties() {
+    return {
+      hass: Object,
+      stateObj: Object,
+      scriptLoaded: {
+        type: Boolean,
+        value: false,
+      },
+    };
+  }
 
-  properties: {
-    hass: {
-      type: Object,
-    },
+  static get observers() {
+    return [
+      'computeContent(stateObj, scriptLoaded)',
+    ];
+  }
 
-    stateObj: {
-      type: Object,
-    },
-
-    scriptLoaded: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  observers: [
-    'computeContent(stateObj, scriptLoaded)',
-  ],
-
-  computeTitle: function (stateObj) {
+  computeTitle(stateObj) {
     return (stateObj.attributes.title ||
             window.hassUtil.computeStateName(stateObj));
-  },
+  }
 
-  loadScript: function () {
+  loadScript() {
     var success = function () {
       this.scriptLoaded = true;
     }.bind(this);
@@ -71,9 +68,9 @@ Polymer({
       '/static/micromarkdown-js.html',
       success, error
     );
-  },
+  }
 
-  computeContent: function (stateObj, scriptLoaded) {
+  computeContent(stateObj, scriptLoaded) {
     var el = '';
     var message = '';
     if (scriptLoaded) {
@@ -81,16 +78,17 @@ Polymer({
       message = window.micromarkdown.parse(stateObj.state);
       el.innerHTML = message;
     }
-  },
+  }
 
-  ready: function () {
+  ready() {
     this.loadScript();
-  },
+  }
 
-  dismissTap: function (ev) {
+  dismissTap(ev) {
     ev.preventDefault();
 
     this.hass.callApi('DELETE', 'states/' + this.stateObj.entity_id);
-  },
-});
+  }
+}
+customElements.define(HaPersistentNotificationCard.is, HaPersistentNotificationCard);
 </script>

src/cards/ha-weather-card.html

@@ -1,4 +1,4 @@
-<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
 <link rel='import' href='../../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
 <link rel='import' href='../../bower_components/google-apis/google-legacy-loader.html'>
 <link rel='import' href='../components/ha-card.html'>
@@ -95,24 +95,22 @@
     'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'
   ];
 
-  Polymer({
-    is: 'ha-weather-card',
+  class HaWeatherCard extends Polymer.Element {
+    static get is() { return 'ha-weather-card'; }
+    static get properties() {
+      return {
+        hass: Object,
+        stateObj: {
+          type: Object,
+          observer: 'checkRequirements'
+        },
+      };
+    }
 
-    properties: {
-      hass: {
-        type: Object,
-      },
-
-      stateObj: {
-        type: Object,
-        observer: 'checkRequirements'
-      },
-    },
-
-    computeTitle: function (stateObj) {
+    computeTitle(stateObj) {
       return stateObj.attributes.friendly_name;
-    },
-    getDataArray: function () {
+    }
+    getDataArray() {
       var dataArray = [];
       var data = this.stateObj.attributes.forecast;
       var i;
@@ -132,9 +130,9 @@
       }
 
       return dataArray;
-    },
+    }
 
-    checkRequirements: function () {
+    checkRequirements() {
       if (!this.stateObj) {
         return;
       }
@@ -163,8 +161,8 @@
       this.data = this.getDataArray();
 
       this.drawChart();
-    },
-    drawChart: function () {
+    }
+    drawChart() {
       var dataGrid = new window.google.visualization.DataTable();
       var options = {
         legend: {
@@ -198,24 +196,25 @@
       dataGrid.addRows(dataArray);
 
       this.chartEngine.draw(dataGrid, options);
-    },
+    }
 
-    googleApiLoaded: function () {
+    googleApiLoaded() {
       window.google.load('visualization', '1', {
         packages: ['corechart'],
         callback: function () {
           this.checkRequirements();
         }.bind(this),
       });
-    },
+    }
 
-    windBearingToText: function (degree) {
+    windBearingToText(degree) {
       var degreenum = parseInt(degree);
       if (isFinite(degreenum)) {
         return _DEGREE_TEXT[(((degreenum + 11.25) / 22.5) | 0) % 16];
       }
       return '';
     }
-  });
+  }
+  customElements.define(HaWeatherCard.is, HaWeatherCard);
 }());
 </script>

src/components/ha-cards.html

@@ -245,7 +245,7 @@
         cards.columns[getIndex(5)].push({
           hass: hass,
           cardType: 'introduction',
-          showHideInstruction: states.size > 0 && !window.HASS_DEMO,
+          showHideInstruction: Object.keys(states).length > 0 && !window.HASS_DEMO,
         });
       }
 

src/layouts/partial-cards.html

@@ -298,7 +298,7 @@ Polymer({
   },
 
   computeShowIntroduction: function (currentView, introductionLoaded, states) {
-    return currentView === '' && (introductionLoaded || states.size === 0);
+    return currentView === '' && (introductionLoaded || Object.keys(states).length === 0);
   },
 
   computeStateName: function (stateObj) {