0ffb31999e
* Hass.io switch to tab navigation * Fixes * Changes based on feedback * Fix main * move header back to main * Remove space * Navigation as suggested, replaced iron-pages
133 lines
3.4 KiB
HTML
133 lines
3.4 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="../src/layouts/hass-loading-screen.html">
|
|
<link rel='import' href='../src/util/hass-util.html'>
|
|
|
|
<link rel='import' href='./hassio-data.html'>
|
|
<link rel='import' href='./hassio-pages-with-tabs.html'>
|
|
<link rel='import' href='./addon-view/hassio-addon-view.html'>
|
|
|
|
<dom-module id="hassio-main">
|
|
<template>
|
|
<app-route
|
|
route='[[route]]'
|
|
pattern='/:page'
|
|
data="{{routeData}}"
|
|
></app-route>
|
|
<hassio-data
|
|
id='data'
|
|
hass='[[hass]]'
|
|
supervisor='{{supervisorInfo}}'
|
|
homeassistant='{{hassInfo}}'
|
|
host='{{hostInfo}}'
|
|
></hassio-data>
|
|
|
|
<template is='dom-if' if='[[!loaded]]'>
|
|
<hass-loading-screen
|
|
narrow='[[narrow]]'
|
|
show-menu='[[showMenu]]'
|
|
></hass-loading-screen>
|
|
</template>
|
|
|
|
<template is='dom-if' if='[[loaded]]'>
|
|
<template is='dom-if' if='[[!equalsAddon(routeData.page)]]'>
|
|
<hassio-pages-with-tabs
|
|
hass='[[hass]]'
|
|
narrow='[[narrow]]'
|
|
show-menu='[[showMenu]]'
|
|
page='[[routeData.page]]'
|
|
supervisor-info='[[supervisorInfo]]'
|
|
hass-info='[[hassInfo]]'
|
|
host-info='[[hostInfo]]'
|
|
></hassio-pages-with-tabs>
|
|
</template>
|
|
<template is='dom-if' if='[[equalsAddon(routeData.page)]]'>
|
|
<hassio-addon-view
|
|
hass='[[hass]]'
|
|
narrow='[[narrow]]'
|
|
show-menu='[[showMenu]]'
|
|
route='[[route]]'
|
|
></hassio-addon-view>
|
|
</template>
|
|
</template>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
class HassioMain extends window.hassMixins.EventsMixin(Polymer.Element) {
|
|
static get is() { return 'hassio-main'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: Object,
|
|
narrow: Boolean,
|
|
showMenu: Boolean,
|
|
route: {
|
|
type: Object,
|
|
// Fake route object
|
|
value: {
|
|
prefix: '/hassio',
|
|
path: '/dashboard',
|
|
__queryParams: {}
|
|
},
|
|
observer: 'routeChanged',
|
|
},
|
|
routeData: Object,
|
|
supervisorInfo: Object,
|
|
hostInfo: Object,
|
|
hassInfo: Object,
|
|
loaded: {
|
|
type: Boolean,
|
|
computed: 'computeIsLoaded(supervisorInfo, hostInfo, hassInfo)',
|
|
},
|
|
};
|
|
}
|
|
|
|
ready() {
|
|
super.ready();
|
|
window.hassUtil.applyThemesOnElement(this, this.hass.themes, this.hass.selectedTheme, true);
|
|
this.addEventListener('hass-api-called', ev => this.apiCalled(ev));
|
|
}
|
|
|
|
connectedCallback() {
|
|
super.connectedCallback();
|
|
this.routeChanged(this.route);
|
|
}
|
|
|
|
apiCalled(ev) {
|
|
if (ev.detail.success) {
|
|
let tries = 1;
|
|
|
|
const tryUpdate = () => {
|
|
this.$.data.refresh().catch(function () {
|
|
tries += 1;
|
|
setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
|
|
});
|
|
};
|
|
|
|
tryUpdate();
|
|
}
|
|
}
|
|
|
|
computeIsLoaded(supervisorInfo, hostInfo, hassInfo) {
|
|
return (supervisorInfo !== null &&
|
|
hostInfo !== null &&
|
|
hassInfo !== null);
|
|
}
|
|
|
|
routeChanged(route) {
|
|
if (route.path === '' && route.prefix === '/hassio') {
|
|
history.replaceState(null, null, '/hassio/dashboard');
|
|
this.fire('location-changed');
|
|
}
|
|
}
|
|
|
|
equalsAddon(page) {
|
|
return page && page === 'addon';
|
|
}
|
|
}
|
|
|
|
customElements.define(HassioMain.is, HassioMain);
|
|
</script>
|