Reord Z-Wave config (#217)

This commit is contained in:
Paulus Schoutsen 2017-02-20 00:20:25 -08:00 committed by GitHub
parent 2f640d9075
commit ecb5c58262
9 changed files with 414 additions and 281 deletions

View File

@ -27,7 +27,7 @@
"no-param-reassign": 0,
"no-multi-assign": 0
},
plugins: [
"plugins": [
"html"
]
}

View File

@ -1,19 +1,19 @@
<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/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="../../../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/resources/ha-style.html">
<link rel="import" href="../../../src/components/ha-menu-button.html">
<link rel="import" href="../../../src/resources/ha-style.html">
<link rel="import" href="./ha-config-section.html">
<link rel="import" href="./ha-call-service-button.html">
<link rel="import" href="../ha-config-section.html">
<link rel="import" href="../ha-call-service-button.html">
<dom-module id="ha-config-section-core">
<template>

View File

@ -1,251 +0,0 @@
<link rel="import" href="../../bower_components/polymer/polymer.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/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../bower_components/paper-item/paper-item.html'>
<link rel="import" href="../../src/resources/ha-style.html">
<link rel="import" href="./ha-config-section.html">
<dom-module id="ha-config-section-zwave">
<template>
<style include="iron-flex ha-style">
.device-picker {
@apply(--layout-horizontal);
padding-bottom: 32px;
}
.form-placeholder {
@apply(--layout-vertical);
@apply(--layout-center-center);
height: 96px;
}
.form-group {
@apply(--layout-horizontal);
@apply(--layout-center);
padding: 4px 16px;
}
.form-group label {
@apply(--layout-flex-2);
}
.form-group .form-control {
@apply(--layout-flex-1);
}
</style>
<ha-config-section is-wide='[[isWide]]'>
<span slot='header'>Z-Wave</span>
<span slot='introduction'>
Z-Wave devices contain a lot of options. These controls will allow you to get into the nitty gritty details.
</span>
<paper-card>
<div class='card-content'>
<div class='device-picker'>
<paper-dropdown-menu
label='Device'
class='flex'
disabled='[[!entities.length]]'
>
<paper-listbox
class="dropdown-content"
selected='{{selectedEntity}}'
>
<template is='dom-repeat' items='[[entities]]' as='state'>
<paper-item>[[computeSelectCaption(state)]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
<div class='form-container'>
<template is='dom-if' if='[[computeShowPlaceholder(formState)]]'>
<div class='form-placeholder'>
<template is='dom-if' if='[[computeShowNoDevices(formState)]]'>
No Z-Wave devices found! :-(
</template>
<template is='dom-if' if='[[computeShowSpinner(formState)]]'>
<paper-spinner active alt='[[formState]]'></paper-spinner>
[[formState]]
</template>
</div>
</template>
<template is='dom-if' if='[[computeShowForm(formState)]]'>
<div class='form-group'>
<paper-checkbox
checked='{{entityIgnored}}'
class='form-control'
>
Exclude from Home Assistant
</paper-checkbox>
</div>
<div class='form-group'>
<paper-dropdown-menu
class='form-control flex'
label='Polling intensity'
disabled='[[entityIgnored]]'
>
<paper-listbox
class="dropdown-content"
selected='{{entityPollingIntensity}}'
>
<paper-item>Do not poll (0)</paper-item>
<paper-item>Poll every time (1)</paper-item>
<paper-item>Poll every other time (2)</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</template>
</div>
</div>
<div class='card-actions'>
<paper-button
on-tap='saveEntity'
disabled='[[computeShowPlaceholder(formState)]]'
>SAVE</paper-button>
</div>
</paper-card>
</ha-config-section>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-config-section-zwave',
properties: {
hass: {
type: Object,
},
isWide: {
type: Boolean,
value: false,
},
entities: {
type: Array,
computed: 'computeEntities(hass)',
observer: 'entitiesChanged',
},
selectedEntity: {
type: Number,
value: -1,
observer: 'entityChanged',
},
entityIgnored: {
type: Boolean,
},
entityPollingIntensity: {
type: Number,
},
formState: {
type: String,
// no-devices, loading, saving, editing
value: 'no-devices',
},
},
computeEntities: function (hass) {
return Object.keys(hass.states).map(function (key) { return hass.states[key]; })
.filter(function (el) {
return (!el.attributes.hidden &&
'node_id' in el.attributes);
})
.sort(function (entityA, entityB) {
if (entityA.entity_id < entityB.entity_id) {
return -1;
}
if (entityA.entity_id > entityB.entity_id) {
return 1;
}
return 0;
});
},
computeSelectCaption: function (stateObj) {
return window.hassUtil.computeStateName(stateObj) +
' (' + window.hassUtil.computeDomain(stateObj) + ')';
},
computeShowNoDevices: function (formState) {
return formState === 'no-devices';
},
computeShowSpinner: function (formState) {
return formState === 'loading' || formState === 'saving';
},
computeShowPlaceholder: function (formState) {
return formState !== 'editing';
},
computeShowForm: function (formState) {
return formState === 'editing';
},
entitiesChanged: function (entities, oldEntities) {
if (entities.length === 0) {
this.formState = 'no-devices';
return;
} else if (!oldEntities) {
this.selectedEntity = 0;
return;
}
var oldEntityId = oldEntities[this.selectedEntity].entity_id;
var newIndex = entities.findIndex(function (ent) {
return ent.entity_id === oldEntityId;
});
if (newIndex === -1) {
this.selectedEntity = 0;
} else if (newIndex !== this.selectedEntity) {
// Entity moved index
this.selectedEntity = newIndex;
}
},
entityChanged: function (index) {
if (!this.entities) return;
var entity = this.entities[index];
this.formState = 'loading';
var el = this;
this.hass.callApi('GET', 'config/zwave/device_config/' + entity.entity_id)
.then(function (data) {
el.entityIgnored = data.ignored || false;
el.entityPollingIntensity = data.polling_intensity || 0;
el.formState = 'editing';
});
},
saveEntity: function () {
var entity = this.entities[this.selectedEntity];
var data = {
ignored: this.entityIgnored,
polling_intensity: this.entityPollingIntensity,
};
this.formState = 'saving';
var el = this;
this.hass.callApi('POST', 'config/zwave/device_config/' + entity.entity_id, data)
.then(function () {
el.formState = 'editing';
});
},
});
</script>

View File

@ -0,0 +1,181 @@
<dom-module id="ha-entity-config">
<template>
<style include="iron-flex ha-style">
paper-card {
display: block;
}
.device-picker {
@apply(--layout-horizontal);
padding-bottom: 32px;
}
.form-placeholder {
@apply(--layout-vertical);
@apply(--layout-center-center);
height: 96px;
}
[hidden]: {
display: none;
}
</style>
<paper-card>
<div class='card-content'>
<div class='device-picker'>
<paper-dropdown-menu
label='Device'
class='flex'
disabled='[[!entities.length]]'
>
<paper-listbox
class="dropdown-content"
selected='{{selectedEntity}}'
>
<template is='dom-repeat' items='[[entities]]' as='state'>
<paper-item>[[computeSelectCaption(state)]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
<div class='form-container'>
<template is='dom-if' if='[[computeShowPlaceholder(formState)]]'>
<div class='form-placeholder'>
<template is='dom-if' if='[[computeShowNoDevices(formState)]]'>
No entities found! :-(
</template>
<template is='dom-if' if='[[computeShowSpinner(formState)]]'>
<paper-spinner active alt='[[formState]]'></paper-spinner>
[[formState]]
</template>
</div>
</template>
<div hidden$='[[!computeShowForm(formState)]]' id='form'></div>
</div>
</div>
<div class='card-actions'>
<paper-button
on-tap='saveEntity'
disabled='[[computeShowPlaceholder(formState)]]'
>SAVE</paper-button>
</div>
</paper-card>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-entity-config',
properties: {
hass: {
type: Object,
observer: 'hassChanged',
},
entities: {
type: Array,
observer: 'entitiesChanged',
},
selectedEntity: {
type: Number,
value: -1,
observer: 'entityChanged',
},
formState: {
type: String,
// no-devices, loading, saving, editing
value: 'no-devices',
},
config: {
type: Object,
}
},
attached: function () {
this.formEl = document.createElement(this.config.component);
this.formEl.hass = this.hass;
this.$.form.appendChild(this.formEl);
this.entityChanged(this.selectedEntity);
},
computeSelectCaption: function (stateObj) {
return this.config.computeSelectCaption ?
this.config.computeSelectCaption(stateObj) :
window.hassUtil.computeStateName(stateObj);
},
computeShowNoDevices: function (formState) {
return formState === 'no-devices';
},
computeShowSpinner: function (formState) {
return formState === 'loading' || formState === 'saving';
},
computeShowPlaceholder: function (formState) {
return formState !== 'editing';
},
computeShowForm: function (formState) {
return formState === 'editing';
},
hassChanged: function (hass) {
if (this.formEl) {
this.formEl.hass = hass;
}
},
entitiesChanged: function (entities, oldEntities) {
if (entities.length === 0) {
this.formState = 'no-devices';
return;
} else if (!oldEntities) {
this.selectedEntity = 0;
return;
}
var oldEntityId = oldEntities[this.selectedEntity].entity_id;
var newIndex = entities.findIndex(function (ent) {
return ent.entity_id === oldEntityId;
});
if (newIndex === -1) {
this.selectedEntity = 0;
} else if (newIndex !== this.selectedEntity) {
// Entity moved index
this.selectedEntity = newIndex;
}
},
entityChanged: function (index) {
if (!this.entities || !this.formEl) return;
var entity = this.entities[index];
this.formState = 'loading';
var el = this;
this.formEl.loadEntity(entity)
.then(function () {
el.formState = 'editing';
});
},
saveEntity: function () {
this.formState = 'saving';
var el = this;
this.formEl.saveEntity()
.then(function () {
el.formState = 'editing';
});
},
});
</script>

View File

@ -0,0 +1,19 @@
<dom-module id='ha-form-style'>
<template>
<style>
.form-group {
@apply(--layout-horizontal);
@apply(--layout-center);
padding: 4px 16px;
}
.form-group label {
@apply(--layout-flex-2);
}
.form-group .form-control {
@apply(--layout-flex-1);
}
</style>
</template>
</dom-module>

View File

@ -4,9 +4,9 @@
<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="./ha-config-section-core.html">
<link rel="import" href="./ha-config-section-hassbian.html">
<link rel="import" href="./ha-config-section-zwave.html">
<link rel="import" href="./core/ha-config-section-core.html">
<link rel="import" href="./hassbian/ha-config-section-hassbian.html">
<link rel="import" href="./z-wave/ha-config-section-zwave.html">
<dom-module id="ha-panel-config">
<template>
@ -108,7 +108,7 @@ Polymer({
},
computeIsZwaveLoaded(hass) {
return window.hassUtil.isComponentLoaded(hass, 'config.zwave');
return true || window.hassUtil.isComponentLoaded(hass, 'config.zwave');
},
});
</script>

View File

@ -1,18 +1,18 @@
<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-icon-button/paper-icon-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/polymer/polymer.html">
<link rel='import' href='../../../bower_components/iron-media-query/iron-media-query.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-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="../../../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/resources/ha-style.html">
<link rel="import" href="../../../src/components/ha-menu-button.html">
<link rel="import" href="../../../src/resources/ha-style.html">
<link rel="import" href="./ha-config-section.html">
<link rel="import" href="../ha-config-section.html">
<dom-module id="ha-config-section-hassbian">
<template>

View File

@ -0,0 +1,82 @@
<link rel="import" href="../../../bower_components/polymer/polymer.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/paper-checkbox/paper-checkbox.html">
<link rel="import" href="../../../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel='import' href='../../../bower_components/paper-listbox/paper-listbox.html'>
<link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
<link rel="import" href="../../../src/resources/ha-style.html">
<link rel="import" href="../ha-config-section.html">
<link rel="import" href="../ha-entity-config.html">
<link rel="import" href="./ha-form-zwave-device.html">
<dom-module id="ha-config-section-zwave">
<template>
<ha-config-section is-wide='[[isWide]]'>
<span slot='header'>Z-Wave</span>
<span slot='introduction'>
Z-Wave devices contain a lot of options. These controls will allow you to get into the nitty gritty details.
</span>
<ha-entity-config
hass='[[hass]]'
entities='[[entities]]'
config='[[entityConfig]]'>
</ha-entity-config>
</ha-config-section>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-config-section-zwave',
properties: {
hass: {
type: Object,
},
isWide: {
type: Boolean,
value: false,
},
entities: {
type: Array,
computed: 'computeEntities(hass)',
},
entityConfig: {
type: Object,
value: {
component: 'ha-form-zwave-device',
computeSelectCaption: function (stateObj) {
return window.hassUtil.computeStateName(stateObj) +
' (' + window.hassUtil.computeDomain(stateObj) + ')';
},
}
}
},
computeEntities: function (hass) {
return Object.keys(hass.states)
.map(function (key) { return hass.states[key]; })
.filter(function (el) {
return (!el.attributes.hidden &&
'node_id' in el.attributes);
})
.sort(function (entityA, entityB) {
if (entityA.entity_id < entityB.entity_id) {
return -1;
}
if (entityA.entity_id > entityB.entity_id) {
return 1;
}
return 0;
});
},
});
</script>

View File

@ -0,0 +1,102 @@
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../ha-form-style.html">
<dom-module id="ha-form-zwave-device">
<template>
<style include="iron-flex ha-style ha-form-style">
.device-picker {
@apply(--layout-horizontal);
padding-bottom: 32px;
}
.form-placeholder {
@apply(--layout-vertical);
@apply(--layout-center-center);
height: 96px;
}
.form-group {
@apply(--layout-horizontal);
@apply(--layout-center);
padding: 4px 16px;
}
.form-group label {
@apply(--layout-flex-2);
}
.form-group .form-control {
@apply(--layout-flex-1);
}
</style>
<div class='form-group'>
<paper-checkbox
checked='{{entityIgnored}}'
class='form-control'
>
Exclude from Home Assistant
</paper-checkbox>
</div>
<div class='form-group'>
<paper-dropdown-menu
class='form-control flex'
label='Polling intensity'
disabled='[[entityIgnored]]'
>
<paper-listbox
class="dropdown-content"
selected='{{entityPollingIntensity}}'
>
<paper-item>Do not poll (0)</paper-item>
<paper-item>Poll every time (1)</paper-item>
<paper-item>Poll every other time (2)</paper-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'ha-form-zwave-device',
properties: {
hass: {
type: Object,
},
entity: {
type: Object,
},
entityIgnored: {
type: Boolean,
},
entityPollingIntensity: {
type: Number,
},
},
loadEntity: function (entity) {
this.entity = entity;
var el = this;
return this.hass.callApi('GET', 'config/zwave/device_config/' + entity.entity_id)
.then(function (data) {
el.entityIgnored = data.ignored || false;
el.entityPollingIntensity = data.polling_intensity || 0;
});
},
saveEntity: function () {
var data = {
ignored: this.entityIgnored,
polling_intensity: this.entityPollingIntensity,
};
return this.hass.callApi(
'POST', 'config/zwave/device_config/' + this.entity.entity_id, data);
},
});
</script>