Upgrade core config panels to ES6 classes (#438)

panels/config/core/ha-config-core.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/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
 <link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
@@ -74,33 +74,38 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigCore extends Polymer.Element {
-  is: 'ha-config-core',
 
-  properties: {
+  static get is() { return 'ha-config-core'; }
+
+  static get properties() {
+    return {
       hass: Object,
       isWide: Boolean,
-  },
+    };
+  }
 
-  computeClasses: function (isWide) {
+  computeClasses(isWide) {
     return isWide ? 'content' : 'content narrow';
-  },
+  }
 
-  computeIsHassbianLoaded: function (hass) {
+  computeIsHassbianLoaded(hass) {
     return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
-  },
+  }
 
-  computeIsZwaveLoaded: function (hass) {
+  computeIsZwaveLoaded(hass) {
     return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
-  },
+  }
 
-  computeIsThemesLoaded: function (hass) {
+  computeIsThemesLoaded(hass) {
     return hass.themes && hass.themes.themes &&
       Object.keys(hass.themes.themes).length;
-  },
+  }
 
-  _backTapped: function () {
+  _backTapped() {
     history.back();
-  },
+  }
-});
+}
+
+customElements.define(HaConfigCore.is, HaConfigCore);
 </script>

panels/config/core/ha-config-section-core.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="../../../bower_components/paper-input/paper-input.html">
 <link rel="import" href="../../../bower_components/paper-button/paper-button.html">
@@ -129,10 +129,12 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSectionCore extends Polymer.Element {
-  is: 'ha-config-section-core',
 
-  properties: {
+  static get is() { return 'ha-config-section-core'; }
+
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -156,21 +158,22 @@ Polymer({
         type: String,
         value: '',
       },
-  },
+    };
+  }
 
-  groupLoaded: function (hass) {
+  groupLoaded(hass) {
     return window.hassUtil.isComponentLoaded(hass, 'group');
-  },
+  }
 
-  automationLoaded: function (hass) {
+  automationLoaded(hass) {
     return window.hassUtil.isComponentLoaded(hass, 'automation');
-  },
+  }
 
-  scriptLoaded: function (hass) {
+  scriptLoaded(hass) {
     return window.hassUtil.isComponentLoaded(hass, 'script');
-  },
+  }
 
-  validateConfig: function () {
+  validateConfig() {
     this.validating = true;
     this.validateLog = '';
     this.validateResult = '';
@@ -189,5 +192,7 @@ Polymer({
         }
       });
   }
-});
+}
+
+customElements.define(HaConfigSectionCore.is, HaConfigSectionCore);
 </script>

panels/config/core/ha-config-section-group.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="../../../bower_components/paper-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-checkbox/paper-checkbox.html">
@@ -35,10 +35,12 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSectionGroup extends Polymer.Element {
-  is: 'ha-config-section-group',
 
-  properties: {
+  static get is() { return 'ha-config-section-group'; }
+
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -63,9 +65,10 @@ Polymer({
           },
         }
       }
-  },
+    };
+  }
 
-  computeEntities: function (hass) {
+  computeEntities(hass) {
     return Object.keys(hass.states)
       .map(function (key) { return hass.states[key]; })
       .filter(function (entity) {
@@ -73,6 +76,8 @@ Polymer({
                 !entity.attributes.auto);
       })
       .sort(window.hassUtil.sortByName);
-  },
+  }
-});
+}
+
+customElements.define(HaConfigSectionGroup.is, HaConfigSectionGroup);
 </script>

panels/config/core/ha-config-section-hassbian.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-media-query/iron-media-query.html'>
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../bower_components/paper-input/paper-input.html">
@@ -65,10 +65,12 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSectionHassbian extends Polymer.Element {
-  is: 'ha-config-section-hassbian',
 
-  properties: {
+  static get is() { return 'ha-config-section-hassbian'; }
+
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -81,9 +83,10 @@ Polymer({
         type: Object,
         value: null,
       },
-  },
+    };
+  }
 
-  updateStatus: function () {
+  updateStatus() {
     // TODO tapping install while something is installing triggers a second
     //      update loop to start.
     this.hass.callApi('GET', 'config/hassbian/suites').then(function (suites) {
@@ -102,14 +105,14 @@ Polymer({
         this.async(this.updateStatus, 5000);
       }
     }.bind(this));
-  },
+  }
 
-  attached: function () {
+  attached() {
     this.updateStatus = this.updateStatus.bind(this);
     this.updateStatus();
-  },
+  }
 
-  computeSuiteKeys: function (suiteStatus) {
+  computeSuiteKeys(suiteStatus) {
     // Prioritize installing packages
     return Object.keys(suiteStatus).sort(function (keyA, keyB) {
       var installingA = suiteStatus[keyA].state === 'installing';
@@ -131,37 +134,39 @@ Polymer({
       }
       return 0;
     });
-  },
+  }
 
-  computeSuiteDescription: function (suiteStatus, suiteKey) {
+  computeSuiteDescription(suiteStatus, suiteKey) {
     return suiteStatus[suiteKey].description;
-  },
+  }
 
-  computeTitle: function (suiteKey) {
+  computeTitle(suiteKey) {
     return suiteKey.substr(0, 1).toUpperCase() + suiteKey.substr(1);
-  },
+  }
 
-  computeSuiteStatus: function (suiteStatus, suiteKey) {
+  computeSuiteStatus(suiteStatus, suiteKey) {
     var state = suiteStatus[suiteKey].state.replace(/_/, ' ');
     return state.substr(0, 1).toUpperCase() + state.substr(1);
-  },
+  }
 
-  computeShowStatus: function (suiteStatus, suiteKey) {
+  computeShowStatus(suiteStatus, suiteKey) {
     var state = suiteStatus[suiteKey].state;
     return state !== 'installing' && state !== 'not_installed';
-  },
+  }
 
-  computeShowInstall: function (suiteStatus, suiteKey) {
+  computeShowInstall(suiteStatus, suiteKey) {
     return suiteStatus[suiteKey].state === 'not_installed';
-  },
+  }
 
-  suiteMoreInfoTapped: function () {
+  suiteMoreInfoTapped() {
     // console.log('learn more', ev.model.item);
-  },
+  }
 
-  suiteActionTapped: function () {
+  suiteActionTapped() {
     // TODO install tapped suite
     this.hass.callApi('POST', 'config/hassbian/suites/openzwave/install').then(this.updateStatus);
-  },
+  }
-});
+}
+
+customElements.define(HaConfigSectionHassbian.is, HaConfigSectionHassbian);
 </script>

panels/config/core/ha-config-section-themes.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-card/paper-card.html">
 <link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
@@ -33,10 +33,12 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSectionThemes extends window.hassMixins.EventsMixin(Polymer.Element) {
-  is: 'ha-config-section-themes',
 
-  properties: {
+  static get is() { return 'ha-config-section-themes'; }
+
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -53,26 +55,30 @@ Polymer({
       selectedTheme: {
         type: Number,
       },
-  },
+    };
+  }
 
-  ready: function () {
+  static get observers() {
+    return [
+      'selectionChanged(hass, selectedTheme)',
+    ];
+  }
+
+  ready() {
+    super.ready();
     if (this.hass.selectedTheme && this.themes.indexOf(this.hass.selectedTheme) > 0) {
       this.selectedTheme = this.themes.indexOf(this.hass.selectedTheme);
     } else if (!this.hass.selectedTheme) {
       this.selectedTheme = 0;
     }
-  },
+  }
 
-  observers: [
+  computeThemes(hass) {
-    'selectionChanged(hass, selectedTheme)',
-  ],
-
-  computeThemes: function (hass) {
     if (!hass) return [];
     return ['Backend-selected', 'default'].concat(Object.keys(hass.themes.themes).sort());
-  },
+  }
 
-  selectionChanged: function (hass, selection) {
+  selectionChanged(hass, selection) {
     if (selection > 0 && selection < this.themes.length) {
       if (hass.selectedTheme !== this.themes[selection]) {
         this.fire('settheme', this.themes[selection]);
@@ -81,5 +87,7 @@ Polymer({
       this.fire('settheme', '');
     }
   }
-});
+}
+
+customElements.define(HaConfigSectionThemes.is, HaConfigSectionThemes);
 </script>

panels/config/core/ha-form-group.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-icon/iron-icon.html">
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
@@ -131,10 +131,12 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaFormGroup extends Polymer.Element {
-  is: 'ha-form-group',
 
-  properties: {
+  static get is() { return 'ha-form-group'; }
+
+  static get properties() {
+    return {
       hass: {
         type: Object,
       },
@@ -155,17 +157,18 @@ Polymer({
       entityChildren: {
         type: Object,
       },
-  },
+    };
+  }
 
-  handleRowChosen: function (ev) {
+  handleRowChosen(ev) {
     // Polymer element and sortablejs both fire the same events, filter one out
     if (!ev.detail || !window.navigator.vibrate) return;
 
     // Tell the user that moving his finger now will start dragging.
     window.navigator.vibrate(50);
-  },
+  }
 
-  loadEntity: function (entity) {
+  loadEntity(entity) {
     var states = this.hass.states;
     this.entity = entity;
     this.entityName = entity.attributes.friendly_name || '';
@@ -175,9 +178,9 @@ Polymer({
         return states[ent] || { state: false, entity_id: ent, attributes: {} };
       });
     return Promise.resolve();
-  },
+  }
 
-  saveEntity: function () {
+  saveEntity() {
     var data = {
       name: this.entityName,
       view: this.entityType === 'view',
@@ -186,10 +189,8 @@ Polymer({
 
     var objectId = this.entity.entity_id.split('.')[1];
     return this.hass.callApi('POST', 'config/group/config/' + objectId, data);
-  },
+  }
+}
 
-  // deleteEntity: function () {
+customElements.define(HaFormGroup.is, HaFormGroup);
-  //   return new Promise.resolve();
-  // }
-});
 </script>