130 lines
2.7 KiB
HTML
130 lines
2.7 KiB
HTML
<link rel='import' href='../../bower_components/polymer/polymer-element.html'>
|
|
<link rel='import' href='../../bower_components/app-route/app-route.html'>
|
|
|
|
<link rel="import" href="./hass-loading-screen.html">
|
|
|
|
<dom-module id='partial-panel-resolver'>
|
|
<template>
|
|
<style>
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
</style>
|
|
<app-route
|
|
route="{{route}}"
|
|
pattern="/:panel"
|
|
data="{{routeData}}"
|
|
tail="{{routeTail}}"
|
|
></app-route>
|
|
|
|
<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>
|
|
</dom-module>
|
|
|
|
<script>
|
|
class PartialPanelResolver extends Polymer.Element {
|
|
static get is() { return 'partial-panel-resolver'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: {
|
|
type: Object,
|
|
observer: 'updateAttributes',
|
|
},
|
|
|
|
narrow: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer: 'updateAttributes',
|
|
},
|
|
|
|
showMenu: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer: 'updateAttributes',
|
|
},
|
|
|
|
route: Object,
|
|
|
|
routeData: Object,
|
|
|
|
routeTail: {
|
|
type: Object,
|
|
observer: 'updateAttributes',
|
|
},
|
|
|
|
resolved: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
errorLoading: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
panel: {
|
|
type: Object,
|
|
computed: 'computeCurrentPanel(hass, routeData)',
|
|
observer: 'panelChanged',
|
|
},
|
|
};
|
|
}
|
|
|
|
computeCurrentPanel(hass, routeData) {
|
|
return routeData ? hass.config.panels[routeData.panel] : null;
|
|
}
|
|
|
|
panelChanged(panel) {
|
|
if (!panel) {
|
|
if (this.$.panel.lastChild) {
|
|
this.$.panel.removeChild(this.$.panel.lastChild);
|
|
}
|
|
return;
|
|
}
|
|
|
|
this.resolved = false;
|
|
this.errorLoading = false;
|
|
|
|
Polymer.importHref(
|
|
panel.url,
|
|
|
|
() => {
|
|
window.hassUtil.dynamicContentUpdater(this.$.panel, 'ha-panel-' + panel.component_name, {
|
|
hass: this.hass,
|
|
narrow: this.narrow,
|
|
showMenu: this.showMenu,
|
|
route: this.routeTail,
|
|
panel: panel,
|
|
});
|
|
this.resolved = true;
|
|
},
|
|
|
|
() => {
|
|
this.errorLoading = true;
|
|
},
|
|
|
|
true /* async */
|
|
);
|
|
}
|
|
|
|
updateAttributes() {
|
|
var customEl = Polymer.dom(this.$.panel).lastChild;
|
|
if (!customEl) return;
|
|
customEl.hass = this.hass;
|
|
customEl.narrow = this.narrow;
|
|
customEl.showMenu = this.showMenu;
|
|
customEl.route = this.routeTail;
|
|
}
|
|
}
|
|
|
|
customElements.define(PartialPanelResolver.is, PartialPanelResolver);
|
|
</script>
|