Merge pull request #281 from home-assistant/hassio-panel-on-demand

Hassio panel on demand

panels/hassio/ha-panel-hassio.html

@@ -1,69 +1,19 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="./dashboard/hassio-dashboard.html">
-<link rel="import" href="./addon-view/hassio-addon-view.html">
-<link rel="import" href="./addon-store/hassio-addon-store.html">
-<link rel="import" href="./supervisor/hassio-supervisor.html">
-<link rel="import" href="./hassio-loading.html">
-<link rel="import" href="./hassio-data.html">
+<link rel="import" href="./hassio-main.html">
 
 <dom-module id="ha-panel-hassio">
   <template>
     <style>
-      iron-pages {
-        height: 100%;
+      [hidden] {
+        display: none !important;
       }
     </style>
-    <hassio-data
-      id='data'
+
+    <hassio-main
       hass='[[hass]]'
-      supervisor='{{supervisorInfo}}'
-      homeassistant='{{hassInfo}}'
-      host='{{hostInfo}}'
-    ></hassio-data>
-
-    <template is='dom-if' if='[[dashboardSelected(currentPage)]]'>
-      <template is='dom-if' if='[[!loaded]]'>
-        <hassio-loading
-          narrow='[[narrow]]'
-          hass='[[hass]]'
-          show-menu='[[showMenu]]'
-        ></hassio-loading>
-      </template>
-      <template is='dom-if' if='[[loaded]]'>
-        <hassio-dashboard
-          hass='[[hass]]'
-          narrow='[[narrow]]'
-          show-menu='[[showMenu]]'
-          supervisor-info='[[supervisorInfo]]'
-          host-info='[[hostInfo]]'
-          hass-info='[[hassInfo]]'
-        ></hassio-dashboard>
-      </template>
-    </template>
-
-    <template is='dom-if' if='[[addonViewSelected(currentPage)]]' restamp>
-      <hassio-addon-view
-        hass='[[hass]]'
-        supervisor-info='[[supervisorInfo]]'
-        host-info='[[hostInfo]]'
-        addon='[[addon]]'
-      ></hassio-addon-view>
-    </template>
-
-    <template is='dom-if' if='[[addonStoreSelected(currentPage)]]'>
-      <hassio-addon-store
-        hass='[[hass]]'
-        supervisor-info='[[supervisorInfo]]'
-      ></hassio-addon-store>
-    </template>
-
-    <template is='dom-if' if='[[supervisorSelected(currentPage)]]'>
-      <hassio-supervisor
-        hass='[[hass]]'
-        supervisor-info='[[supervisorInfo]]'
-      ></hassio-supervisor>
-    </template>
+      narrow='[[narrow]]'
+      show-menu='[[showMenu]]'
+    ></hassio-main>
   </template>
 </dom-module>
 
@@ -85,114 +35,19 @@ Polymer({
       value: false,
     },
 
-    addon: {
-      type: String,
-      value: '',
-    },
-
-    supervisorInfo: {
-      type: Object,
-      value: null,
-    },
-
-    hostInfo: {
-      type: Object,
-      value: null,
-    },
-
-    hassInfo: {
-      type: Object,
-      value: null,
-    },
-
-    forceLoading: {
+    loaded: {
       type: Boolean,
       value: false,
     },
-
-    loaded: {
-      type: Boolean,
-      computed: 'computeIsLoaded(supervisorInfo, hostInfo, hassInfo, forceLoading)',
-    },
-
-    currentPage: {
-      type: String,
-      value: 'dashboard',
-    },
-
-    lastPage: {
-      type: String,
-      value: 'dashboard',
-    },
   },
 
-  listeners: {
-    'hassio-select-addon': 'addonSelected',
-    'hassio-show-page': 'showPage',
-    'hass-api-called': 'apiCalled',
-  },
-
-  apiCalled: function (ev) {
-    if (ev.detail.success) {
-      var tries = 1;
-
-      var tryUpdate = function () {
-        this.$.data.refresh().catch(function () {
-          tries += 1;
-          setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
-        });
-      }.bind(this);
-
-      tryUpdate();
+  attached: function () {
+    if (!window.HASS_DEV) {
+      this.importHref('/api/hassio/panel', null, function () {
+        // eslint-disable-next-line
+        alert('Failed to load the Hass.io panel from supervisor.');
+      });
     }
   },
-
-  computeIsLoaded: function (supervisorInfo, hostInfo, hassInfo, forceLoading) {
-    return (supervisorInfo !== null &&
-            hostInfo !== null &&
-            hassInfo !== null &&
-            !forceLoading);
-  },
-
-  addonSelected: function (ev) {
-    var addon = ev.detail.addon;
-
-    if (this.currentPage === this.lastPage) {
-      this.lastPage = 'dashboard';
-    }
-
-    if (addon) {
-      this.lastPage = this.currentPage;
-      this.currentPage = 'addon-view';
-      this.addon = addon;
-    } else {
-      this.currentPage = this.lastPage;
-      // Give time to cleanup the addon-view panel or it crashes
-      setTimeout(function () {
-        this.addon = addon;
-      }.bind(this), 0);
-    }
-  },
-
-  showPage: function (ev) {
-    this.currentPage = ev.detail.page;
-  },
-
-  dashboardSelected: function (currentPage) {
-    return currentPage === 'dashboard';
-  },
-
-  addonStoreSelected: function (currentPage) {
-    return currentPage === 'addon-store';
-  },
-
-  addonViewSelected: function (currentPage) {
-    return currentPage === 'addon-view';
-  },
-
-  supervisorSelected: function (currentPage) {
-    return currentPage === 'supervisor';
-  },
-
 });
 </script>

panels/hassio/hassio-main.html

@@ -0,0 +1,193 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../../src/layouts/hass-loading-screen.html">
+
+<link rel="import" href="./dashboard/hassio-dashboard.html">
+<link rel="import" href="./addon-view/hassio-addon-view.html">
+<link rel="import" href="./addon-store/hassio-addon-store.html">
+<link rel="import" href="./supervisor/hassio-supervisor.html">
+<link rel="import" href="./hassio-data.html">
+
+<dom-module id="hassio-main">
+  <template>
+    <hassio-data
+      id='data'
+      hass='[[hass]]'
+      supervisor='{{supervisorInfo}}'
+      homeassistant='{{hassInfo}}'
+      host='{{hostInfo}}'
+    ></hassio-data>
+
+    <template is='dom-if' if='[[dashboardSelected(currentPage)]]'>
+      <template is='dom-if' if='[[!loaded]]'>
+        <hass-loading-screen
+          narrow='[[narrow]]'
+          show-menu='[[showMenu]]'
+        ></hass-loading-screen>
+      </template>
+      <template is='dom-if' if='[[loaded]]'>
+        <hassio-dashboard
+          hass='[[hass]]'
+          narrow='[[narrow]]'
+          show-menu='[[showMenu]]'
+          supervisor-info='[[supervisorInfo]]'
+          host-info='[[hostInfo]]'
+          hass-info='[[hassInfo]]'
+        ></hassio-dashboard>
+      </template>
+    </template>
+
+    <template is='dom-if' if='[[addonViewSelected(currentPage)]]' restamp>
+      <hassio-addon-view
+        hass='[[hass]]'
+        supervisor-info='[[supervisorInfo]]'
+        host-info='[[hostInfo]]'
+        addon='[[addon]]'
+      ></hassio-addon-view>
+    </template>
+
+    <template is='dom-if' if='[[addonStoreSelected(currentPage)]]'>
+      <hassio-addon-store
+        hass='[[hass]]'
+        supervisor-info='[[supervisorInfo]]'
+      ></hassio-addon-store>
+    </template>
+
+    <template is='dom-if' if='[[supervisorSelected(currentPage)]]'>
+      <hassio-supervisor
+        hass='[[hass]]'
+        supervisor-info='[[supervisorInfo]]'
+      ></hassio-supervisor>
+    </template>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'hassio-main',
+
+  properties: {
+    hass: {
+      type: Object,
+    },
+
+    narrow: {
+      type: Boolean,
+    },
+
+    showMenu: {
+      type: Boolean,
+      value: false,
+    },
+
+    addon: {
+      type: String,
+      value: '',
+    },
+
+    supervisorInfo: {
+      type: Object,
+      value: null,
+    },
+
+    hostInfo: {
+      type: Object,
+      value: null,
+    },
+
+    hassInfo: {
+      type: Object,
+      value: null,
+    },
+
+    forceLoading: {
+      type: Boolean,
+      value: false,
+    },
+
+    loaded: {
+      type: Boolean,
+      computed: 'computeIsLoaded(supervisorInfo, hostInfo, hassInfo, forceLoading)',
+    },
+
+    currentPage: {
+      type: String,
+      value: 'dashboard',
+    },
+
+    lastPage: {
+      type: String,
+      value: 'dashboard',
+    },
+  },
+
+  listeners: {
+    'hassio-select-addon': 'addonSelected',
+    'hassio-show-page': 'showPage',
+    'hass-api-called': 'apiCalled',
+  },
+
+  apiCalled: function (ev) {
+    if (ev.detail.success) {
+      var tries = 1;
+
+      var tryUpdate = function () {
+        this.$.data.refresh().catch(function () {
+          tries += 1;
+          setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
+        });
+      }.bind(this);
+
+      tryUpdate();
+    }
+  },
+
+  computeIsLoaded: function (supervisorInfo, hostInfo, hassInfo, forceLoading) {
+    return (supervisorInfo !== null &&
+            hostInfo !== null &&
+            hassInfo !== null &&
+            !forceLoading);
+  },
+
+  addonSelected: function (ev) {
+    var addon = ev.detail.addon;
+
+    if (this.currentPage === this.lastPage) {
+      this.lastPage = 'dashboard';
+    }
+
+    if (addon) {
+      this.lastPage = this.currentPage;
+      this.currentPage = 'addon-view';
+      this.addon = addon;
+    } else {
+      this.currentPage = this.lastPage;
+      // Give time to cleanup the addon-view panel or it crashes
+      setTimeout(function () {
+        this.addon = addon;
+      }.bind(this), 0);
+    }
+  },
+
+  showPage: function (ev) {
+    this.currentPage = ev.detail.page;
+  },
+
+  dashboardSelected: function (currentPage) {
+    return currentPage === 'dashboard';
+  },
+
+  addonStoreSelected: function (currentPage) {
+    return currentPage === 'addon-store';
+  },
+
+  addonViewSelected: function (currentPage) {
+    return currentPage === 'addon-view';
+  },
+
+  supervisorSelected: function (currentPage) {
+    return currentPage === 'supervisor';
+  },
+
+});
+</script>

script/vulcanize.js

@@ -38,7 +38,9 @@ const panelVulcan = new Vulcanize({
   inlineCss: true,
   implicitStrip: true,
   stripComments: true,
-  stripExcludes: undefined,
+  stripExcludes: [
+    'panels/hassio/hassio-main.html'
+  ],
 });
 
 const baseExcludes = [
@@ -47,6 +49,7 @@ const baseExcludes = [
 ];
 
 const toProcess = [
+  // This is the main entry point
   {
     source: './src/home-assistant.html',
     output: './build/frontend.html',
@@ -54,9 +57,18 @@ const toProcess = [
       stripExcludes: baseExcludes,
     })),
   },
+  // This is the Hass.io configuration panel
+  // It's build standalone because it is embedded in the supervisor.
+  {
+    source: './panels/hassio/hassio-main.html',
+    output: './build-temp/hassio-main.html',
+    vulcan: new Vulcanize(Object.assign({}, baseVulcanOptions, {
+      stripExcludes: baseExcludes,
+    })),
+  },
 ];
 
-fs.readdirSync('./panels').forEach(panel => {
+fs.readdirSync('./panels').forEach((panel) => {
   toProcess.push({
     source: `./panels/${panel}/ha-panel-${panel}.html`,
     output: `./build/panels/ha-panel-${panel}.html`,
@@ -85,7 +97,9 @@ hyd.Analyzer.analyze('src/home-assistant.html')
     .then(function (analyzer) {
       return analyzer._getDependencies('src/home-assistant.html');
     })
-    .then(deps => { panelVulcan.stripExcludes = deps; })
+    .then((deps) => {
+      panelVulcan.stripExcludes = panelVulcan.stripExcludes.concat(deps);
+    })
     // Chain all vulcanizing work as promises
     .then(() => toProcess.reduce(
       (p, entry) => p.then(() => vulcanizeEntry(entry)),

src/app-core.js

@@ -2,6 +2,7 @@ import * as HAWS from 'home-assistant-js-websocket';
 
 window.HAWS = HAWS;
 window.HASS_DEMO = __DEMO__;
+window.HASS_DEV = __DEV__;
 
 const init = window.createHassConnection = function (password) {
   const proto = window.location.protocol === 'https:' ? 'wss' : 'ws';

src/layouts/hass-loading-screen.html

@@ -4,7 +4,7 @@
 
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
-<dom-module id='hassio-loading'>
+<dom-module id='hass-loading-screen'>
   <template>
     <style include='iron-flex ha-style'>
       [hidden] {
@@ -23,7 +23,7 @@
     <div class='placeholder'>
       <app-toolbar>
         <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-        <div main-title>Hass.io</div>
+        <div main-title>[[title]]</div>
       </app-toolbar>
       <div class='layout horizontal center-center'>
         <paper-spinner active></paper-spinner>
@@ -34,13 +34,9 @@
 
 <script>
 Polymer({
-  is: 'hassio-loading',
+  is: 'hass-loading-screen',
 
   properties: {
-    hass: {
-      type: Object,
-    },
-
     narrow: {
       type: Boolean,
       value: false,
@@ -50,6 +46,11 @@ Polymer({
       type: Boolean,
       value: false,
     },
+
+    title: {
+      type: String,
+      value: '',
+    },
   },
 });
 </script>

src/layouts/partial-panel-resolver.html

@@ -1,41 +1,21 @@
-<link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
 
-<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-
-<link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
-
-<link rel='import' href='../components/ha-menu-button.html'>
-<link rel="import" href="../resources/ha-style.html">
+<link rel="import" href="./hass-loading-screen.html">
 
 <dom-module id='partial-panel-resolver'>
   <template>
-    <style include='iron-flex ha-style'>
+    <style>
       [hidden] {
         display: none !important;
       }
-
-      .placeholder {
-        height: 100%;
-      }
-
-      .layout {
-        height: calc(100% - 64px);
-      }
     </style>
 
-    <div hidden$='[[resolved]]' class='placeholder'>
-      <app-toolbar>
-        <ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
-      </app-toolbar>
-      <div class='layout horizontal center-center'>
-        <template is='dom-if' if='[[!errorLoading]]'>
-          <paper-spinner active></paper-spinner>
-        </template>
-        <template is='dom-if' if='[[errorLoading]]'>
-          Error loading panel :(
-        </template>
-      </div>
-    </div>
+    <template is='dom-if' if='[[!resolved]]'>
+      <hass-loading-screen
+        narrow='[[narrow]]'
+        show-menu='[[showMenu]]'
+      ></hass-loading-screen>
+    </template>
 
     <span id='panel' hidden$='[[!resolved]]'></span>
   </template>