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({
+class HaBadgesCard extends Polymer.Element {
-  is: 'ha-badges-card',
+  static get is() { return 'ha-badges-card'; }
-
+  static get properties() {
-  properties: {
+    return {
-    hass: {
+      hass: Object,
-      type: Object,
+      states: Array,
-    },
+    };
-
+  }
-    states: {
+}
-      type: 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,29 +51,23 @@
 </dom-module>
 
 <script>
-Polymer({
+{
-  is: 'ha-camera-card',
+  const UPDATE_INTERVAL = 10000; // ms
-  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,
-    cameraFeedSrc: {
-      type: String,
-    },
-
         imageLoaded: {
           type: Boolean,
           value: true,
         },
-
         /**
          * The z-depth of the card, from 0-5.
          */
@@ -80,45 +76,46 @@ Polymer({
           value: 1,
           reflectToAttribute: true,
         },
-  },
+      };
+    }
 
-  listeners: {
+    ready() {
-    tap: 'cardTapped',
+      super.ready();
-  },
+      this.addEventListener('tap', () => this.cardTapped());
+    }
 
-  attached: function () {
+    connectedCallback() {
-    this.timer = setInterval(
+      super.connectedCallback();
-      function () {
+      this.timer = setInterval(() => this.updateCameraFeedSrc(), UPDATE_INTERVAL);
-        this.updateCameraFeedSrc(this.stateObj);
+    }
-      }.bind(this),
-      this.UPDATE_INTERVAL
-    );
-  },
 
-  detached: function () {
+    disconnectedCallback() {
+      super.disconnectedCallback();
       clearInterval(this.timer);
-  },
+    }
 
-  cardTapped: function () {
+    cardTapped() {
       this.fire('hass-more-info', { entityId: this.stateObj.entity_id });
-  },
+    }
 
-  updateCameraFeedSrc: function (stateObj) {
+    updateCameraFeedSrc() {
-    var attr = stateObj.attributes;
+      var attr = this.stateObj.attributes;
       var time = (new Date()).getTime();
       this.cameraFeedSrc = attr.entity_picture + '&time=' + time;
-  },
+    }
 
-  imageLoadSuccess: function () {
+    imageLoadSuccess() {
       this.imageLoaded = true;
-  },
+    }
 
-  imageLoadFail: function () {
+    imageLoadFail() {
       this.imageLoaded = false;
-  },
+    }
 
-  computeStateName: function (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({
+class HaCardChooser extends Polymer.Element {
-  is: 'ha-card-chooser',
+  static get is() { return 'ha-card-chooser'; }
-
+  static get properties() {
-  properties: {
+    return {
       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({
+class HaEntitiesCard extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-entities-card',
+  static get is() { return 'ha-entities-card'; }
+  static get properties() {
+    return {
+      hass: Object,
+      states: Array,
+      groupEntity: Object,
+    };
+  }
 
-  properties: {
+  computeTitle(states, groupEntity) {
-    hass: {
-      type: Object,
-    },
-
-    states: {
-      type: Array,
-    },
-
-    groupEntity: {
-      type: Object,
-    },
-  },
-
-  computeTitle: function (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({
+class HaIntroductionCard extends Polymer.Element {
-  is: 'ha-introduction-card',
+  static get is() { return 'ha-introduction-card'; }
-
+  static get properties() {
-  properties: {
+    return {
-    hass: {
+      hass: Object,
-      type: 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,33 +206,22 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaMediaPlayerCard extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-media_player-card',
+  static get is() { return 'ha-media_player-card'; }
-
+  static get properties() {
-  properties: {
+    return {
-    hass: {
+      hass: Object,
-      type: Object,
+      stateObj: Object,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
       playerObj: {
         type: Object,
         computed: 'computePlayerObj(hass, stateObj)',
         observer: 'playerObjChanged',
       },
-
       playbackControlIcon: {
         type: String,
         computed: 'computePlaybackControlIcon(playerObj)',
       },
-
+      playbackPosition: Number,
-    playbackPosition: {
-      type: Number,
-    },
-
       /**
        * The z-depth of the card, from 0-5.
        */
@@ -240,13 +230,10 @@ Polymer({
         value: 1,
         reflectToAttribute: true,
       },
-  },
+    };
+  }
 
-  created: function () {
+  playerObjChanged(playerObj) {
-    this.updatePlaybackPosition = this.updatePlaybackPosition.bind(this);
-  },
-
-  playerObjChanged: function (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({
+class HaPersistentNotificationCard extends Polymer.Element {
-  is: 'ha-persistent_notification-card',
+  static get is() { return 'ha-persistent_notification-card'; }
-
+  static get properties() {
-  properties: {
+    return {
-    hass: {
+      hass: Object,
-      type: Object,
+      stateObj: Object,
-    },
-
-    stateObj: {
-      type: Object,
-    },
-
       scriptLoaded: {
         type: Boolean,
         value: false,
       },
-  },
+    };
+  }
 
-  observers: [
+  static get observers() {
+    return [
       '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({
+  class HaWeatherCard extends Polymer.Element {
-    is: 'ha-weather-card',
+    static get is() { return 'ha-weather-card'; }
-
+    static get properties() {
-    properties: {
+      return {
-      hass: {
+        hass: Object,
-        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) {