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'; }
-    hass: Object,
-    isWide: Boolean,
-  },
 
-  computeClasses: function (isWide) {
+  static get properties() {
+    return {
+      hass: Object,
+      isWide: Boolean,
+    };
+  }
+
+  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,48 +129,51 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSectionCore extends Polymer.Element {
-  is: 'ha-config-section-core',
 
-  properties: {
+  static get is() { return 'ha-config-section-core'; }
-    hass: {
-      type: Object,
-    },
 
-    isWide: {
+  static get properties() {
-      type: Boolean,
+    return {
-      value: false,
+      hass: {
-    },
+        type: Object,
+      },
 
-    validating: {
+      isWide: {
-      type: Boolean,
+        type: Boolean,
-      value: false,
+        value: false,
-    },
+      },
 
-    validateResult: {
+      validating: {
-      type: String,
+        type: Boolean,
-      value: '',
+        value: false,
-    },
+      },
 
-    validateLog: {
+      validateResult: {
-      type: String,
+        type: String,
-      value: '',
+        value: '',
-    },
+      },
-  },
 
-  groupLoaded: function (hass) {
+      validateLog: {
+        type: String,
+        value: '',
+      },
+    };
+  }
+
+  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,37 +35,40 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSectionGroup extends Polymer.Element {
-  is: 'ha-config-section-group',
 
-  properties: {
+  static get is() { return 'ha-config-section-group'; }
-    hass: {
-      type: Object,
-    },
 
-    isWide: {
+  static get properties() {
-      type: Boolean,
+    return {
-      value: false,
+      hass: {
-    },
+        type: Object,
+      },
 
-    entities: {
+      isWide: {
-      type: Array,
+        type: Boolean,
-      computed: 'computeEntities(hass)',
+        value: false,
-    },
+      },
 
-    entityConfig: {
+      entities: {
-      type: Object,
+        type: Array,
-      value: {
+        computed: 'computeEntities(hass)',
-        component: 'ha-form-group',
+      },
-        computeSelectCaption: function (stateObj) {
+
-          return window.hassUtil.computeStateName(stateObj) +
+      entityConfig: {
-            (stateObj.attributes.view ? ' (view)' : '');
+        type: Object,
-        },
+        value: {
+          component: 'ha-form-group',
+          computeSelectCaption: function (stateObj) {
+            return window.hassUtil.computeStateName(stateObj) +
+              (stateObj.attributes.view ? ' (view)' : '');
+          },
+        }
       }
-    }
+    };
-  },
+  }
 
-  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,25 +65,28 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaConfigSectionHassbian extends Polymer.Element {
-  is: 'ha-config-section-hassbian',
 
-  properties: {
+  static get is() { return 'ha-config-section-hassbian'; }
-    hass: {
-      type: Object,
-    },
 
-    isWide: {
+  static get properties() {
-      type: Boolean,
+    return {
-    },
+      hass: {
+        type: Object,
+      },
 
-    suiteStatus: {
+      isWide: {
-      type: Object,
+        type: Boolean,
-      value: null,
+      },
-    },
-  },
 
-  updateStatus: function () {
+      suiteStatus: {
+        type: Object,
+        value: null,
+      },
+    };
+  }
+
+  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,46 +33,52 @@
 </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'; }
-    hass: {
-      type: Object,
-    },
 
-    isWide: {
+  static get properties() {
-      type: Boolean,
+    return {
-    },
+      hass: {
+        type: Object,
+      },
 
-    themes: {
+      isWide: {
-      type: Array,
+        type: Boolean,
-      computed: 'computeThemes(hass)',
+      },
-    },
 
-    selectedTheme: {
+      themes: {
-      type: Number,
+        type: Array,
-    },
+        computed: 'computeThemes(hass)',
-  },
+      },
 
-  ready: function () {
+      selectedTheme: {
+        type: Number,
+      },
+    };
+  }
+
+  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,41 +131,44 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaFormGroup extends Polymer.Element {
-  is: 'ha-form-group',
 
-  properties: {
+  static get is() { return 'ha-form-group'; }
-    hass: {
-      type: Object,
-    },
 
-    entity: {
+  static get properties() {
-      type: Object,
+    return {
-    },
+      hass: {
+        type: Object,
+      },
 
-    entityName: {
+      entity: {
-      type: String,
+        type: Object,
-      value: '',
+      },
-    },
 
-    entityType: {
+      entityName: {
-      type: String,
+        type: String,
-    },
+        value: '',
+      },
 
-    entityChildren: {
+      entityType: {
-      type: Object,
+        type: String,
-    },
+      },
-  },
 
-  handleRowChosen: function (ev) {
+      entityChildren: {
+        type: Object,
+      },
+    };
+  }
+
+  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>