ES6 class upgrade ha-sidebar and home-assistant (#409)

* ES6 class upgrade ha-sidebar and home-assistant

* Remove unused imports

* Fix linter errors

* Added event fire mixin

* By some miracle that still worked

* Ignore class-methods-use-this

* Add mixin annotation

.eslintrc

@@ -21,6 +21,7 @@
     "browser": true
   },
   "rules": {
+    "class-methods-use-this": 0,
     "new-cap": 0,
     "prefer-template": 0,
     "object-shorthand": 0,

src/components/ha-sidebar.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/iron-icon/iron-icon.html'>
 <link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
@@ -8,6 +8,8 @@
 
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
+<link rel='import' href='../util/hass-mixins.html'>
+
 <link rel='import' href='./ha-push-notifications-toggle.html'>
 
 <dom-module id='ha-sidebar'>
@@ -173,42 +175,45 @@
 </dom-module>
 
 <script>
-Polymer({
+class HaSidebar extends window.hassMixins.HaFireMixin(Polymer.Element) {
-  is: 'ha-sidebar',
 
-  properties: {
+  static get is() { return 'ha-sidebar'; }
-    hass: {
-      type: Object,
-    },
 
-    menuShown: {
+  static get properties() {
-      type: Boolean,
+    return {
-    },
+      hass: {
+        type: Object,
+      },
 
-    menuSelected: {
+      menuShown: {
-      type: String,
+        type: Boolean,
-    },
+      },
 
-    narrow: Boolean,
+      menuSelected: {
+        type: String,
+      },
 
-    route: Object,
+      narrow: Boolean,
 
-    panels: {
+      route: Object,
-      type: Array,
-      computed: 'computePanels(hass)',
-    },
 
-    pushSupported: {
+      panels: {
-      type: Boolean,
+        type: Array,
-      value: true,
+        computed: 'computePanels(hass)',
-    },
+      },
-  },
 
-  _mqttLoaded: function (hass) {
+      pushSupported: {
+        type: Boolean,
+        value: true,
+      },
+    };
+  }
+
+  _mqttLoaded(hass) {
     return hass.config.core.components.indexOf('mqtt') !== -1;
-  },
+  }
 
-  computePanels: function (hass) {
+  computePanels(hass) {
     var panels = hass.config.panels;
     var sortValue = {
       map: 1,
@@ -245,9 +250,9 @@ Polymer({
     });
 
     return result;
-  },
+  }
 
-  menuClicked: function (ev) {
+  menuClicked(ev) {
     var target = ev.target;
     var checks = 5;
     var attr = target.getAttribute('data-panel');
@@ -262,13 +267,13 @@ Polymer({
     if (checks) {
       this.selectPanel(attr);
     }
-  },
+  }
 
-  toggleMenu: function () {
+  toggleMenu() {
     this.fire('hass-close-menu');
-  },
+  }
 
-  selectPanel: function (newChoice) {
+  selectPanel(newChoice) {
     if (newChoice === 'logout') {
       this.handleLogOut();
       return;
@@ -279,10 +284,12 @@ Polymer({
     }
     history.pushState(null, null, path);
     this.fire('location-changed');
-  },
+  }
 
-  handleLogOut: function () {
+  handleLogOut() {
     this.fire('hass-logout');
-  },
+  }
-});
+}
+
+customElements.define(HaSidebar.is, HaSidebar);
 </script>

src/home-assistant.html

@@ -1,4 +1,4 @@
-<link rel='import' href='../bower_components/polymer/polymer.html'>
+<link rel="import" href='../bower_components/polymer/polymer-element.html'>
 <!-- imported as first element so we can render the placeholder -->
 <link rel='import' href='../bower_components/paper-spinner/paper-spinner.html'>
 <link rel='import' href='./util/roboto.html'>
@@ -50,70 +50,70 @@ window.removeInitMsg = function () {
   }
 };
 
-Polymer({
+class HomeAssistant extends Polymer.Element {
-  is: 'home-assistant',
 
-  hostAttributes: {
+  static get is() { return 'home-assistant'; }
-    icons: null,
-  },
 
-  properties: {
+  static get properties() {
-    connectionPromise: {
+    return {
-      type: Object,
+      connectionPromise: {
-      value: window.hassConnection || null,
+        type: Object,
-      observer: 'handleConnectionPromise',
+        value: window.hassConnection || null,
-    },
+        observer: 'handleConnectionPromise',
-    connection: {
+      },
-      type: Object,
+      connection: {
-      value: null,
+        type: Object,
-      observer: 'connectionChanged',
+        value: null,
-    },
+        observer: 'connectionChanged',
-    hass: {
+      },
-      type: Object,
+      hass: {
-      value: null,
+        type: Object,
-    },
+        value: null,
-    icons: {
+      },
-      type: String,
+      icons: {
-    },
+        type: String,
-    iconsLoaded: {
+      },
-      type: Boolean,
+      iconsLoaded: {
-      value: false,
+        type: Boolean,
-    },
+        value: false,
-    showMain: {
+      },
-      type: Boolean,
+      showMain: {
-      computed: 'computeShowMain(hass, iconsLoaded)',
+        type: Boolean,
-    },
+        computed: 'computeShowMain(hass, iconsLoaded)',
-  },
+      },
+    };
+  }
 
-  listeners: {
+  ready() {
-    settheme: 'setTheme',
+    super.ready();
-  },
+    this.addEventListener('settheme', e => this.setTheme(e));
+    this.loadIcons();
+  }
 
-  computeShowMain: function (hass, iconsLoaded) {
+  computeShowMain(hass, iconsLoaded) {
     return hass && hass.states && hass.config && iconsLoaded;
-  },
+  }
 
-  computeShowLoading: function (connectionPromise, hass, iconsLoaded) {
+  computeShowLoading(connectionPromise, hass, iconsLoaded) {
     // Show loading when connecting or when connected but not all pieces loaded yet
     return (connectionPromise != null ||
             (hass && (!hass.states || !hass.config || !iconsLoaded)));
-  },
+  }
 
-  loadIcons: function () {
+  loadIcons() {
     // If the import fails, we'll try to import again, must be a server glitch
     // Since HTML imports only resolve once, we import another url.
     const success = () => {
       this.iconsLoaded = true;
     };
 
-    this.importHref('/static/mdi-' + this.icons + '.html',
+    Polymer.importHref('/static/mdi-' + this.icons + '.html',
                     success,
-                    function () {
+                    () => Polymer.importHref('/static/mdi.html', success, success),
-                      this.importHref('/static/mdi.html', success, success);
+                    true /* true for async */);
-                    });
+  }
-  },
 
-  connectionChanged: function (conn, oldConn) {
+  connectionChanged(conn, oldConn) {
     if (oldConn) {
       this.unsubConnection();
       this.unsubConnection = null;
@@ -209,9 +209,9 @@ Polymer({
       unsubConfig();
       unsubThemes();
     };
-  },
+  }
 
-  handleConnectionPromise: function (prom) {
+  handleConnectionPromise(prom) {
     if (!prom) return;
 
     prom.then((conn) => {
@@ -219,25 +219,25 @@ Polymer({
     }, () => {
       this.connectionPromise = null;
     });
-  },
+  }
 
-  handleMoreInfo: function (ev) {
+  handleMoreInfo(ev) {
     ev.stopPropagation();
 
     this._updateHass({ moreInfoEntityId: ev.detail.entityId });
-  },
+  }
 
-  handleDockSidebar: function (ev) {
+  handleDockSidebar(ev) {
     ev.stopPropagation();
     this._updateHass({ dockedSidebar: ev.detail.dock });
     this.$.storage.storeState();
-  },
+  }
 
-  handleNotification: function (ev) {
+  handleNotification(ev) {
     this.$.notifications.showNotification(ev.detail.message);
-  },
+  }
 
-  handleLogout: function () {
+  handleLogout() {
     delete localStorage.authToken;
     var conn = this.connection;
     this.connectionPromise = null;
@@ -248,20 +248,18 @@ Polymer({
       // However, after it is done, home-assistant-main is removed from the DOM by this element.
     }
     conn.close();
-  },
+  }
 
-  ready: function () {
+  setTheme(event) {
-    this.loadIcons();
-  },
-
-  setTheme: function (event) {
     this._updateHass({ selectedTheme: event.detail });
     window.hassUtil.applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
     this.$.storage.storeState();
-  },
+  }
 
-  _updateHass: function (obj) {
+  _updateHass(obj) {
     this.hass = Object.assign({}, this.hass, obj);
-  },
+  }
-});
+}
+
+customElements.define(HomeAssistant.is, HomeAssistant);
 </script>

src/util/hass-mixins.html

@@ -0,0 +1,14 @@
+<script>
+window.hassMixins = window.hassMixins || {};
+
+/* @polymerMixin */
+window.hassMixins.HaFireMixin = function (superClass) {
+  return class extends superClass {
+
+    fire(eventName, data = {}) {
+      this.dispatchEvent(new CustomEvent(eventName,
+        Object.assign({}, data, { bubbles: true, composed: true })));
+    }
+  };
+};
+</script>