128 lines
2.8 KiB
HTML
128 lines
2.8 KiB
HTML
<link rel='import' href='../../bower_components/paper-spinner/paper-spinner.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">
|
|
|
|
<dom-module id='partial-panel-resolver'>
|
|
<template>
|
|
<style include='iron-flex ha-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>
|
|
|
|
<span id='panel' hidden$='[[!resolved]]'></span>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
Polymer({
|
|
is: 'partial-panel-resolver',
|
|
|
|
properties: {
|
|
hass: {
|
|
type: Object,
|
|
observer: 'updateAttributes',
|
|
},
|
|
|
|
narrow: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer: 'updateAttributes',
|
|
},
|
|
|
|
showMenu: {
|
|
type: Boolean,
|
|
value: false,
|
|
observer: 'updateAttributes',
|
|
},
|
|
|
|
resolved: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
errorLoading: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
panel: {
|
|
type: Object,
|
|
computed: 'computeCurrentPanel(hass)',
|
|
observer: 'panelChanged',
|
|
},
|
|
},
|
|
|
|
computeCurrentPanel: function (hass) {
|
|
return hass.config.panels[hass.currentPanel];
|
|
},
|
|
|
|
panelChanged: function (panel) {
|
|
if (!panel) {
|
|
if (this.$.panel.lastChild) {
|
|
this.$.panel.removeChild(this.$.panel.lastChild);
|
|
}
|
|
return;
|
|
}
|
|
|
|
this.resolved = false;
|
|
this.errorLoading = false;
|
|
|
|
this.importHref(
|
|
panel.url,
|
|
|
|
function success() {
|
|
window.hassUtil.dynamicContentUpdater(
|
|
this.$.panel, 'ha-panel-' + panel.component_name, {
|
|
hass: this.hass,
|
|
narrow: this.narrow,
|
|
showMenu: this.showMenu,
|
|
panel: panel,
|
|
});
|
|
this.resolved = true;
|
|
}.bind(this),
|
|
|
|
function error() {
|
|
this.errorLoading = true;
|
|
}.bind(this),
|
|
|
|
true /* async */);
|
|
},
|
|
|
|
updateAttributes: function () {
|
|
var customEl = Polymer.dom(this.$.panel).lastChild;
|
|
if (!customEl) return;
|
|
customEl.hass = this.hass;
|
|
customEl.narrow = this.narrow;
|
|
customEl.showMenu = this.showMenu;
|
|
},
|
|
});
|
|
</script>
|