Consolidate config (#377)

* Move automation panel to config

* Hide Hass menu button from error screen

* No longer store undefined in local storage

* Move Z-Wave panel into config panel

* Move Z-Wave node options from core to Z-Wave config

* Remove panel entries in polymer.json

* Lint
This commit is contained in:
Paulus Schoutsen 2017-08-06 09:22:15 -07:00 committed by GitHub
parent f57e2334c8
commit b34c2a6f92
31 changed files with 865 additions and 504 deletions

View File

@ -1,141 +0,0 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.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-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<dom-module id="ha-automation-picker">
<template>
<style include="ha-style">
:host {
display: block;
}
paper-card {
display: block;
max-width: 600px;
margin: 0 auto;
}
.content {
padding: 16px;
}
paper-item {
cursor: pointer;
}
paper-fab {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 1;
}
paper-fab[is-wide] {
bottom: 24px;
right: 24px;
}
a {
color: var(--primary-color);
}
</style>
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>Automations Editor</div>
</app-toolbar>
</app-header>
<div class='content'>
<paper-card heading='Pick automation to edit'>
<div class='card-content'>
The automation editor allows you to create and edit automations.
Please read <a href='https://home-assistant.io/docs/automation/editor/' target='_blank'>the instructions</a>
to make sure that you have configured Home Assistant correctly.
<template is='dom-if' if='[[!automations.length]]'>
<p>We couldn't find any editable automations.</p>
</template>
</div>
<template is='dom-repeat' items='[[automations]]' as='automation'>
<paper-item>
<paper-item-body two-line on-tap='automationTapped'>
<div>[[computeName(automation)]]</div>
<div secondary>[[computeDescription(automation)]]</div>
</paper-item-body>
[[computeStatus(automation)]]
</paper-item>
</template>
</paper-card>
<paper-fab
is-wide$='[[isWide]]'
icon='mdi:plus'
title='Add Automation'
on-tap='addAutomation'
></paper-fab>
</div>
</app-header-layout>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-automation-picker',
properties: {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
automations: {
type: Array,
},
isWide: {
type: Boolean,
},
},
automationTapped: function (ev) {
history.pushState(
null, null, '/automation/edit/' + this.automations[ev.model.index].attributes.id);
this.fire('location-changed');
},
addAutomation: function () {
history.pushState(null, null, '/automation/new');
this.fire('location-changed');
},
computeName: function (automation) {
return window.hassUtil.computeStateName(automation);
},
// Still thinking of something to add here.
// eslint-disable-next-line
computeDescription: function (automation) {
return '';
},
computeStatus: function (automation) {
return automation.state;
},
});
</script>

View File

@ -1,21 +1,21 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.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-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.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-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu-light.html">
<link rel="import" href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../../bower_components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/iron-autogrow-textarea/iron-autogrow-textarea.html">
<link rel="import" href="../config/ha-config-section.html">
<link rel="import" href="../ha-config-section.html">
<script src='../../build-temp/editor.js'></script>
<script src='../../../build-temp/editor.js'></script>
<dom-module id="ha-automation-editor">
<template>
@ -231,8 +231,7 @@ Polymer({
!confirm('You have unsaved changes. Are you sure you want to leave?')) {
return;
}
history.pushState(null, null, '/automation');
this.fire('location-changed');
history.back();
},
_updateComponent: function () {

View File

@ -0,0 +1,146 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.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-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../ha-config-section.html">
<dom-module id="ha-automation-picker">
<template>
<style include="ha-style">
:host {
display: block;
}
/* .content {
padding: 16px;
}
*/
paper-item {
cursor: pointer;
}
paper-fab {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 1;
}
paper-fab[is-wide] {
bottom: 24px;
right: 24px;
}
a {
color: var(--primary-color);
}
</style>
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<paper-icon-button
icon='mdi:arrow-left'
on-tap='_backTapped'
></paper-icon-button>
<div main-title>Automations</div>
</app-toolbar>
</app-header>
<ha-config-section
is-wide='[[isWide]]'
>
<div slot='header'>Automation editor</div>
<div slot='introduction'>
The automation editor allows you to create and edit automations.
Please read <a href='https://home-assistant.io/docs/automation/editor/' target='_blank'>the instructions</a> to make sure that you have configured Home Assistant correctly.
</div>
<paper-card heading='Pick automation to edit'>
<template is='dom-if' if='[[!automations.length]]'>
<div class='card-content'>
<p>We couldn't find any editable automations.</p>
</div>
</template>
<template is='dom-repeat' items='[[automations]]' as='automation'>
<paper-item>
<paper-item-body two-line on-tap='automationTapped'>
<div>[[computeName(automation)]]</div>
<div secondary>[[computeDescription(automation)]]</div>
</paper-item-body>
<iron-icon icon='mdi:chevron-right'></iron-icon>
</paper-item>
</template>
</paper-card>
</ha-config-section>
<paper-fab
is-wide$='[[isWide]]'
icon='mdi:plus'
title='Add Automation'
on-tap='addAutomation'
></paper-fab>
</app-header-layout>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-automation-picker',
properties: {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
automations: {
type: Array,
},
isWide: {
type: Boolean,
},
},
automationTapped: function (ev) {
history.pushState(
null, null, '/config/automation/edit/' + this.automations[ev.model.index].attributes.id);
this.fire('location-changed');
},
addAutomation: function () {
history.pushState(null, null, '/config/automation/new');
this.fire('location-changed');
},
computeName: function (automation) {
return window.hassUtil.computeStateName(automation);
},
// Still thinking of something to add here.
// eslint-disable-next-line
computeDescription: function (automation) {
return '';
},
_backTapped: function () {
history.back();
},
});
</script>

View File

@ -1,11 +1,10 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
<link rel='import' href='../../bower_components/app-route/app-route.html'>
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel='import' href='../../../bower_components/app-route/app-route.html'>
<link rel="import" href="./ha-automation-picker.html">
<link rel="import" href="./ha-automation-editor.html">
<dom-module id="ha-panel-automation">
<dom-module id="ha-config-automation">
<template>
<style>
ha-automation-picker,
@ -25,11 +24,6 @@
active="{{_creatingNew}}"
></app-route>
<iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
</iron-media-query>
<iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
</iron-media-query>
<template is='dom-if' if='[[!showEditor]]'>
<ha-automation-picker
narrow='[[narrow]]'
@ -52,13 +46,14 @@
<script>
Polymer({
is: 'ha-panel-automation',
is: 'ha-config-automation',
properties: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: Object,
isWide: Boolean,
_routeData: Object,
_routeMatches: Boolean,
_creatingNew: Boolean,
@ -74,24 +69,12 @@ Polymer({
computed: 'computeAutomation(automations, _edittingAddon, _routeData)',
},
wide: Boolean,
wideSidebar: Boolean,
isWide: {
type: Boolean,
computed: 'computeIsWide(showMenu, wideSidebar, wide)'
},
showEditor: {
type: Boolean,
computed: 'computeShowEditor(_edittingAddon, _creatingNew)',
}
},
computeIsWide: function (showMenu, wideSidebar, wide) {
return showMenu ? wideSidebar : wide;
},
computeAutomation: function (automations, edittingAddon, routeData) {
if (!automations || !edittingAddon) {
return null;

View File

@ -0,0 +1,106 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.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="./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-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>
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<paper-icon-button
icon='mdi:arrow-left'
on-tap='_backTapped'
></paper-icon-button>
<div main-title>Core</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='[[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>
</app-header-layout>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-config-core',
properties: {
hass: Object,
isWide: Boolean,
},
computeClasses: function (isWide) {
return isWide ? 'content' : 'content narrow';
},
computeIsHassbianLoaded: function (hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
},
computeIsZwaveLoaded: function (hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
},
computeIsThemesLoaded: function (hass) {
return hass.themes && hass.themes.themes &&
Object.keys(hass.themes.themes).length;
},
_backTapped: function () {
history.back();
},
});
</script>

View File

@ -1,15 +1,9 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel='import' href='../../../bower_components/iron-media-query/iron-media-query.html'>
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.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="../../../src/components/ha-menu-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
<link rel="import" href="../../../src/resources/ha-style.html">

View File

@ -0,0 +1,81 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.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="../../../src/components/ha-menu-button.html">
<link rel="import" href="./ha-config-navigation.html">
<dom-module id="ha-config-dashboard">
<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>
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>Configuration</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-navigation
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-navigation>
<!-- <template is='dom-if' if='[[computeIsZwaveLoaded(hass)]]'>
<div class='border'></div>
<ha-config-section-zwave
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-section-zwave>
</template> -->
</div>
</app-header-layout>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-config-dashboard',
properties: {
hass: Object,
isWide: Boolean,
},
computeClasses: function (isWide) {
return isWide ? 'content' : 'content narrow';
},
computeIsThemesLoaded: function (hass) {
return hass.themes && hass.themes.themes &&
Object.keys(hass.themes.themes).length;
},
});
</script>

View File

@ -0,0 +1,99 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">
<link rel="import" href="../../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../../src/resources/ha-style.html">
<link rel="import" href="../ha-config-section.html">
<dom-module id="ha-config-navigation">
<template>
<style include="iron-flex ha-style">
paper-item {
cursor: pointer;
}
</style>
<ha-config-section
is-wide='[[isWide]]'
>
<span slot='header'>Configure Home Assistant</span>
<span slot='introduction'>
Here it is possible to configure your components and Home Assistant. Not everything is possible to configure from the UI yet, but we're working on it.
</span>
<paper-card>
<template is='dom-repeat' items='[[pages]]'>
<template is='dom-if' if='[[_computeLoaded(hass, item)]]'>
<paper-item on-tap='_navigate'>
<paper-item-body two-line>
[[_computeCaption(item)]]
<div secondary>[[_computeDescription(item)]]</div>
</paper-item-body>
<iron-icon icon='mdi:chevron-right'></iron-icon>
</paper-item>
</template>
</template>
</paper-card>
</ha-config-section>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-config-navigation',
properties: {
hass: {
type: Object,
},
isWide: {
type: Boolean,
value: false,
},
pages: {
type: Array,
value: [
{
domain: 'automation',
caption: 'Automation',
description: 'Create and edit automations.',
},
{
domain: 'core',
caption: 'Configuration.yaml',
description: 'Manage your configuration file and the server.',
loaded: true,
},
{
domain: 'zwave',
caption: 'Z-Wave',
description: 'Manage your Z-Wave network.',
}
],
}
},
_computeLoaded: function (hass, component) {
return component.loaded || window.hassUtil.isComponentLoaded(
hass, component.domain);
},
_computeCaption: function (component) {
return component.caption;
},
_computeDescription: function (component) {
return component.description;
},
_navigate: function (ev) {
history.pushState(
null, null, '/config/' + ev.model.item.domain);
this.fire('location-changed');
},
});
</script>

View File

@ -186,6 +186,7 @@ Polymer({
entityChanged: function (index) {
if (!this.entities || !this.formEl) return;
var entity = this.entities[index];
if (!entity) return;
this.formState = 'loading';
var el = this;

View File

@ -1,84 +1,71 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.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="../../src/components/ha-menu-button.html">
<link rel='import' href='../../bower_components/iron-media-query/iron-media-query.html'>
<link rel="import" href="./core/ha-config-section-core.html">
<!-- <link rel="import" href="./group/ha-config-section-group.html"> -->
<link rel="import" href="./hassbian/ha-config-section-hassbian.html">
<link rel="import" href="./z-wave/ha-config-section-zwave.html">
<link rel="import" href="themes/ha-config-section-themes.html">
<link rel='import' href='../../bower_components/app-route/app-route.html'>
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../src/layouts/hass-error-screen.html">
<link rel="import" href="./dashboard/ha-config-dashboard.html">
<link rel="import" href="./core/ha-config-core.html">
<link rel="import" href="./automation/ha-config-automation.html">
<link rel="import" href="./zwave/ha-config-zwave.html">
<dom-module id="ha-panel-config">
<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>
iron-pages {
height: 100%;
}
</style>
<app-route
route='[[route]]'
pattern='/:page'
data="{{_routeData}}"
tail="{{_routeTail}}"
></app-route>
<iron-media-query query="(min-width: 1040px)" query-matches="{{wide}}">
</iron-media-query>
<iron-media-query query="(min-width: 1296px)" query-matches="{{wideSidebar}}">
</iron-media-query>
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>Configuration</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>
-->
<iron-pages
selected='[[_routeData.page]]'
attr-for-selected='page-name'
fallback-selection='not-found'
selected-attribute='visible'
>
<ha-config-dashboard
page-name='dashboard'
hass='[[hass]]'
is-wide='[[isWide]]'
></ha-config-dashboard>
<ha-config-section-core
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-section-core>
<ha-config-automation
page-name='automation'
route='[[_routeTail]]'
hass='[[hass]]'
is-wide='[[isWide]]'
></ha-config-automation>
<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>
<ha-config-zwave
page-name='zwave'
hass='[[hass]]'
is-wide='[[isWide]]'
></ha-config-zwave>
<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>
<ha-config-core
page-name='core'
hass='[[hass]]'
is-wide='[[isWide]]'
></ha-config-core>
<template is='dom-if' if='[[computeIsZwaveLoaded(hass)]]'>
<div class='border'></div>
<ha-config-section-zwave
is-wide='[[isWide]]'
hass='[[hass]]'
></ha-config-section-zwave>
</template>
</div>
</app-header-layout>
<hass-error-screen
page-name='not-found'
error='Page not found.'
title='Configuration'
></hass-error-screen>
</iron-pages>
</template>
</dom-module>
@ -87,26 +74,20 @@ Polymer({
is: 'ha-panel-config',
properties: {
hass: {
hass: Object,
narrow: Boolean,
showMenu: Boolean,
route: {
type: Object,
observer: '_routeChanged',
},
narrow: {
type: Boolean,
},
_routeData: Object,
_routeTail: Object,
showMenu: {
type: Boolean,
value: false,
},
wide: {
type: Boolean,
},
wideSidebar: {
type: Boolean,
},
wide: Boolean,
wideSidebar: Boolean,
isWide: {
type: Boolean,
@ -118,21 +99,11 @@ Polymer({
return showMenu ? wideSidebar : wide;
},
computeClasses: function (isWide) {
return isWide ? 'content' : 'content narrow';
},
computeIsHassbianLoaded: function (hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.hassbian');
},
computeIsZwaveLoaded: function (hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
},
computeIsThemesLoaded: function (hass) {
return hass.themes && hass.themes.themes &&
Object.keys(hass.themes.themes).length;
},
_routeChanged: function (route) {
if (route.path === '' && route.prefix === '/config') {
history.replaceState(null, null, '/config/dashboard');
this.fire('location-changed');
}
}
});
</script>

View File

@ -1,17 +1,18 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../src/components/ha-menu-button.html">
<link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.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/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel='import' href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../src/components/ha-menu-button.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.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="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel='import' href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
<link rel="import" href="../../src/resources/ha-style.html">
<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
<link rel="import" href="../../../src/components/ha-service-description.html">
<link rel="import" href="../../../src/resources/ha-style.html">
<link rel="import" href="./zwave-log.html">
<link rel="import" href="./zwave-network.html">
<link rel="import" href="./zwave-node-information.html">
@ -19,8 +20,9 @@
<link rel="import" href="./zwave-groups.html">
<link rel="import" href="./zwave-node-config.html">
<link rel="import" href="./zwave-usercodes.html">
<link rel="import" href="./zwave-node-options.html">
<dom-module id="ha-panel-zwave">
<dom-module id="ha-config-zwave">
<template>
<style include="iron-flex ha-style">
.content {
@ -48,16 +50,40 @@
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px;
}
}
ha-service-description {
display: block;
color: grey;
}
[hidden] {
display: none;
}
.toggle-help-icon {
position: absolute;
top: 6px;
right: 0;
color: var(--primary-color);
}
</style>
<app-header-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<paper-icon-button
icon='mdi:arrow-left'
on-tap='_backTapped'
></paper-icon-button>
<div main-title>Z-Wave Manager</div>
</app-toolbar>
</app-header>
<zwave-node-options
is-wide='[[isWide]]'
hass='[[hass]]'
></zwave-node-options>
<div class='content'>
<zwave-network
id='zwave-network'
@ -67,10 +93,12 @@
<!--Node card-->
<div class='content'>
<paper-card heading='Z-Wave Node Management'>
<iron-icon on-tap='toggleHelp' style='padding: 14px 0 14px 12px' icon='mdi:help-circle'></iron-icon>
<div style='display:inline-block' class='card-content'>
Z-Wave Node controls.
</div>
<paper-icon-button
class='toggle-help-icon'
on-tap='toggleHelp'
icon='mdi:help-circle'
></paper-icon-button>
<div class='device-picker'>
<paper-dropdown-menu label="Nodes" class="flex">
<paper-listbox
@ -91,33 +119,57 @@
<template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
<div class='card-actions'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='refresh_node'
service-data=[[computeNodeServiceData(selectedNode)]]
show-description=[[showHelp]]
>Refresh Node</ha-call-service-button>
hass='[[hass]]'
domain='zwave'
service='refresh_node'
service-data=[[computeNodeServiceData(selectedNode)]]
>Refresh Node</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='refresh_node'
hidden$='[[!showHelp]]'
></ha-service-description>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='remove_failed_node'
service-data=[[computeNodeServiceData(selectedNode)]]
show-description=[[showHelp]]
>Remove Failed Node</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='remove_failed_node'
hidden$='[[!showHelp]]'
></ha-service-description>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='replace_failed_node'
service-data=[[computeNodeServiceData(selectedNode)]]
show-description=[[showHelp]]
>Replace Failed Node</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='replace_failed_node'
hidden$='[[!showHelp]]'
></ha-service-description>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='print_node'
service-data=[[computeNodeServiceData(selectedNode)]]
show-description=[[showHelp]]
>Print Node</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='print_node'
hidden$='[[!showHelp]]'
></ha-service-description>
</div>
<div class='card-actions'>
<paper-input
@ -131,8 +183,13 @@
domain='zwave'
service='rename_node'
service-data=[[computeNodeNameServiceData(newNodeNameInput)]]
show-description=[[showHelp]]
>Rename Node</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='rename_node'
hidden$='[[!showHelp]]'
></ha-service-description>
</div>
<div class='device-picker'>
@ -153,8 +210,13 @@
domain='zwave'
service='refresh_entity'
service-data=[[computeRefreshEntityServiceData(selectedEntity)]]
show-description=[[showHelp]]
>Refresh Entity</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='refresh_entity'
hidden$='[[!showHelp]]'
></ha-service-description>
</div>
<div class='content'>
<div class='card-actions'>
@ -232,21 +294,11 @@
<script>
Polymer({
is: 'ha-panel-zwave',
is: 'ha-config-zwave',
properties: {
hass: {
type: Object,
},
narrow: {
type: Boolean,
},
showMenu: {
type: Boolean,
value: false,
},
hass: Object,
isWide: Boolean,
nodes: {
type: Array,
@ -441,5 +493,9 @@ Polymer({
});
return array;
},
_backTapped: function () {
history.back();
},
});
</script>

View File

@ -1,10 +1,10 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
<dom-module id='zwave-groups'>
<template>

View File

@ -1,6 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<dom-module id='ozw-log'>
<template>

View File

@ -0,0 +1,177 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
<link rel="import" href="../../../src/components/ha-service-description.html">
<dom-module id='zwave-network'>
<template>
<style include="iron-flex ha-style">
.content {
margin-top: 24px;
}
paper-card {
display: block;
margin: 0 auto;
max-width: 600px;
}
.card-actions.warning ha-call-service-button {
color: var(--google-red-500);
}
.toggle-help-icon {
position: absolute;
top: 6px;
right: 0;
color: var(--primary-color);
}
ha-service-description {
display: block;
color: grey;
}
[hidden] {
display: none;
}
</style>
<paper-card heading='Z-Wave Network Management'>
<paper-icon-button
class="toggle-help-icon"
on-tap='helpTap'
icon='mdi:help-circle'
></paper-icon-button>
<div class='card-actions'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='add_node_secure'
>Add Node Secure</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='add_node_secure'
hidden$='[[!showDescription]]'
></ha-service-description>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='add_node'
>Add Node</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='add_node'
hidden$='[[!showDescription]]'
></ha-service-description>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='remove_node'
>Remove Node</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='remove_node'
hidden$='[[!showDescription]]'
></ha-service-description>
</div>
<div class='card-actions warning'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='cancel_command'
>Cancel Command</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='cancel_command'
hidden$='[[!showDescription]]'
></ha-service-description>
</div>
<div class='card-actions'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='heal_network'
>Heal Network</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='start_network'
>Start Network</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='start_network'
hidden$='[[!showDescription]]'
></ha-service-description>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='stop_network'
>Stop Network</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='stop_network'
hidden$='[[!showDescription]]'
></ha-service-description>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='soft_reset'
>Soft Reset</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='soft_reset'
hidden$='[[!showDescription]]'
></ha-service-description>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='test_network'
>Test Network</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='test_network'
hidden$='[[!showDescription]]'
></ha-service-description>
</div>
</paper-card>
</template>
</dom-module>
<script>
Polymer({
is: 'zwave-network',
properties: {
hass: {
type: Object,
},
showDescription: {
type: Boolean,
value: false,
},
},
helpTap: function () {
this.showDescription = !this.showDescription;
}
});
</script>

View File

@ -1,11 +1,11 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel='import' href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel='import' href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
<dom-module id='zwave-node-config'>
<template>

View File

@ -1,5 +1,5 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<dom-module id='zwave-node-information'>
<template>

View File

@ -14,7 +14,7 @@
<link rel="import" href="../ha-entity-config.html">
<link rel="import" href="./ha-form-zwave-device.html">
<dom-module id="ha-config-section-zwave">
<dom-module id="zwave-node-options">
<template>
<ha-config-section is-wide='[[isWide]]'>
<span slot='header'>Z-Wave</span>
@ -33,7 +33,7 @@
<script>
Polymer({
is: 'ha-config-section-zwave',
is: 'zwave-node-options',
properties: {
hass: {

View File

@ -1,11 +1,11 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel='import' href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel='import' href="../../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
<dom-module id='zwave-usercodes'>
<template>

View File

@ -1,10 +1,10 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<link rel='import' href="../../../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
<link rel="import" href="../../../src/components/buttons/ha-call-service-button.html">
<dom-module id='zwave-values'>
<template>

View File

@ -1,111 +0,0 @@
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-card/paper-card.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../src/components/buttons/ha-call-service-button.html">
<dom-module id='zwave-network'>
<template>
<style include="iron-flex ha-style">
.content {
margin-top: 24px;
}
paper-card {
display: block;
margin: 0 auto;
max-width: 600px;
}
.card-actions.warning ha-call-service-button {
color: var(--google-red-500);
}
</style>
<paper-card heading='Z-Wave Network Management'>
<iron-icon on-tap='helpTap' style='padding: 14px 0 14px 12px' icon='mdi:help-circle'></iron-icon>
<div style='display:inline-block' class='card-content'>
Z-Wave Network controls.
</div>
<div class='card-actions'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='add_node_secure'
show-description=[[showDescription]]
>Add Node Secure</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='add_node'
show-description=[[showDescription]]
>Add Node</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='remove_node'
show-description=[[showDescription]]
>Remove Node</ha-call-service-button>
</div>
<div class='card-actions warning'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='cancel_command'
show-description=[[showDescription]]
>Cancel Command</ha-call-service-button>
</div>
<div class='card-actions'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='heal_network'
show-description=[[showDescription]]
>Heal Network</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='start_network'
show-description=[[showDescription]]
>Start Network</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='stop_network'
show-description=[[showDescription]]
>Stop Network</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='soft_reset'
show-description=[[showDescription]]
>Soft Reset</ha-call-service-button>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='test_network'
show-description=[[showDescription]]
>Test Network</ha-call-service-button>
</div>
</paper-card>
</template>
</dom-module>
<script>
Polymer({
is: 'zwave-network',
properties: {
hass: {
type: Object,
},
showDescription: {
type: Boolean,
value: false,
},
},
helpTap: function () {
this.showDescription = !this.showDescription;
}
});
</script>

View File

@ -2,7 +2,6 @@
"entrypoint": "src/entrypoint.html",
"shell": "src/home-assistant.html",
"fragments": [
"panels/automation/ha-panel-automation.html",
"panels/config/ha-panel-config.html",
"panels/dev-event/ha-panel-dev-event.html",
"panels/dev-info/ha-panel-dev-info.html",
@ -16,8 +15,7 @@
"panels/kiosk/ha-panel-kiosk.html",
"panels/logbook/ha-panel-logbook.html",
"panels/map/ha-panel-map.html",
"panels/shopping-list/ha-panel-shopping-list.html",
"panels/zwave/ha-panel-zwave.html"
"panels/shopping-list/ha-panel-shopping-list.html"
],
"sources": [
"src/**/*",

View File

@ -8,9 +8,6 @@
progress='[[progress]]'
on-tap='buttonTapped'
><slot></slot></ha-progress-button>
<template is='dom-if' if='[[showDescription]]'>
<div style="color: grey">[[getDescription(hass, domain, service)]]</div>
</template>
</template>
</dom-module>
@ -40,11 +37,6 @@ Polymer({
type: Object,
value: {},
},
showDescription: {
type: Boolean,
value: false,
},
},
buttonTapped: function () {
@ -69,13 +61,5 @@ Polymer({
el.fire('hass-service-called', eventData);
});
},
getDescription: function (hass, domain, service) {
var domainServices = hass.config.services[domain];
if (!domainServices) return '';
var serviceObject = domainServices[service];
if (!serviceObject) return '';
return serviceObject.description;
},
});
</script>

View File

@ -0,0 +1,27 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<dom-module id='ha-service-description'>
<template>
[[_getDescription(hass, domain, service)]]
</template>
</dom-module>
<script>
Polymer({
is: 'ha-service-description',
properties: {
hass: Object,
domain: String,
service: String,
},
_getDescription: function (hass, domain, service) {
var domainServices = hass.config.services[domain];
if (!domainServices) return '';
var serviceObject = domainServices[service];
if (!serviceObject) return '';
return serviceObject.description;
},
});
</script>

View File

@ -23,7 +23,6 @@
<div class='placeholder'>
<app-toolbar>
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>[[title]]</div>
</app-toolbar>
<div class='layout vertical center-center'>
@ -39,16 +38,6 @@ Polymer({
is: 'hass-error-screen',
properties: {
narrow: {
type: Boolean,
value: false,
},
showMenu: {
type: Boolean,
value: false,
},
title: {
type: String,
value: 'Home Assistant',

View File

@ -94,7 +94,8 @@
color: white;
}
app-toolbar ha-menu-button + [main-title] {
app-toolbar ha-menu-button + [main-title],
app-toolbar paper-icon-button + [main-title] {
margin-left: 24px;
}

View File

@ -25,7 +25,8 @@
try {
for (var i = 0; i < STORED_STATE.length; i++) {
var key = STORED_STATE[i];
this.storage[key] = JSON.stringify(this.hass[key]);
var value = this.hass[key];
this.storage[key] = JSON.stringify(value === undefined ? null : value);
}
} catch (err) {
// Safari throws exception in private mode