ha-frontend-cdce8p/panels/config/core/ha-config-core.html
2018-02-25 19:44:03 -08:00

144 lines
4.2 KiB
HTML

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../src/resources/ha-style.html">
<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="./ha-config-section-core.html">
<!-- <link rel="import" href="./ha-config-section-group.html"> -->
<link rel="import" href="./ha-config-section-hassbian.html">
<link rel="import" href="./ha-config-section-push-notifications.html">
<link rel="import" href="./ha-config-section-translation.html">
<link rel="import" href="./ha-config-section-themes.html">
<dom-module id="ha-config-core">
<template>
<style include="iron-flex ha-style">
.content {
padding-bottom: 32px;
}
.border {
margin: 32px auto 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
max-width: 1040px;
}
.narrow .border {
max-width: 640px;
}
</style>
<ha-app-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<paper-icon-button
icon='mdi:arrow-left'
on-click='_backTapped'
></paper-icon-button>
<div main-title>[[localize('ui.panel.config.core.caption')]]</div>
</app-toolbar>
</app-header>
<div class$='[[computeClasses(isWide)]]'>
<!--
Sortable.js doesn't work in Polymer 2 making this panel useless.
Disabling for now.
<ha-config-section-group
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-section-group>
-->
<ha-config-section-core
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-section-core>
<template is='dom-if' if='[[pushSupported]]'>
<div class='border'></div>
<ha-config-section-push-notifications
is-wide='[[isWide]]'
hass='[[hass]]'
push-supported='{{pushSupported}}'
></ha-config-section-push-notifications>
</template>
<template is='dom-if' if='[[computeIsTranslationLoaded(hass)]]'>
<div class='border'></div>
<ha-config-section-translation
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-section-translation>
</template>
<template is='dom-if' if='[[computeIsThemesLoaded(hass)]]'>
<div class='border'></div>
<ha-config-section-themes
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-section-themes>
</template>
<template is='dom-if' if='[[computeIsHassbianLoaded(hass)]]'>
<div class='border'></div>
<ha-config-section-hassbian
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-section-hassbian>
</template>
</div>
</ha-app-layout>
</template>
</dom-module>
<script>
/*
* @appliesMixin window.hassMixins.LocalizeMixin
*/
class HaConfigCore extends window.hassMixins.LocalizeMixin(Polymer.Element) {
static get is() { return 'ha-config-core'; }
static get properties() {
return {
hass: Object,
isWide: Boolean,
pushSupported: {
type: Boolean,
value: true,
},
};
}
computeClasses(isWide) {
return isWide ? 'content' : 'content narrow';
}
computeIsHassbianLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
}
computeIsZwaveLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
}
computeIsTranslationLoaded(hass) {
return hass.translationMetadata &&
Object.keys(hass.translationMetadata.translations).length;
}
computeIsThemesLoaded(hass) {
return hass.themes && hass.themes.themes &&
Object.keys(hass.themes.themes).length;
}
_backTapped() {
history.back();
}
}
customElements.define(HaConfigCore.is, HaConfigCore);
</script>