Load Hass.io panel from supervisor in prod

This commit is contained in:
Paulus Schoutsen 2017-05-11 23:43:19 -07:00
parent 0754c007f2
commit 44e925a9ff
4 changed files with 226 additions and 163 deletions

View File

@ -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>

View File

@ -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>

View File

@ -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)),

View File

@ -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';