Improvements for zwave group config (#398)

* Improvements for zwave group config

* Apply ha-config-section
This commit is contained in:
Andrey 2017-08-26 19:58:50 +03:00 committed by Paulus Schoutsen
parent 60791ee03d
commit b211894a31
5 changed files with 278 additions and 218 deletions

View File

@ -13,6 +13,9 @@
<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="../ha-config-section.html">
<link rel="import" href="./zwave-log.html">
<link rel="import" href="./zwave-network.html">
<link rel="import" href="./zwave-node-information.html">
@ -84,21 +87,28 @@
hass='[[hass]]'
></zwave-node-options>
<div class='content'>
<zwave-network
id='zwave-network'
hass='[[hass]]'
></zwave-network>
</div>
<!--Node card-->
<div class='content'>
<paper-card heading='Z-Wave Node Management'>
<zwave-network
id='zwave-network'
is-wide='[[isWide]]'
hass='[[hass]]'
></zwave-network>
<!--Node card-->
<ha-config-section is-wide='[[isWide]]'>
<div style="position: relative" slot='header'>
<span>Z-Wave Node Management</span>
<paper-icon-button
class='toggle-help-icon'
class="toggle-help-icon"
on-tap='toggleHelp'
icon='mdi:help-circle'
></paper-icon-button>
</div>
<span slot='introduction'>
Run Z-Wave commands that affect a single node. Pick a node to see a list of available commands.
</span>
<paper-card class="content">
<div class='device-picker'>
<paper-dropdown-menu label="Nodes" class="flex">
<paper-listbox
@ -234,35 +244,32 @@
</template>
</template>
</paper-card>
</div>
<!--Node info card-->
<template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
<!--Node info card-->
<zwave-node-information
id='zwave-node-information'
nodes='[[nodes]]'
selected-node='[[selectedNode]]'
></zwave-node-information>
</template>
<!--Value card-->
<template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
<!--Value card-->
<zwave-values
hass='[[hass]]'
nodes='[[nodes]]'
selected-node='[[selectedNode]]'
values='[[values]]'
></zwave-values>
</template>
<!--Group card-->
<template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
<!--Group card-->
<zwave-groups
hass='[[hass]]'
nodes='[[nodes]]'
selected-node='[[selectedNode]]'
groups='[[groups]]'
></zwave-groups>
</template>
<!--Config card-->
<template is='dom-if' if='[[computeIsNodeSelected(selectedNode)]]'>
<!--Config card-->
<zwave-node-config
hass='[[hass]]'
nodes='[[nodes]]'
@ -270,23 +277,24 @@
config='[[config]]'
></zwave-node-config>
</template>
<!--User Codes-->
<template is='dom-if' if='{{hasNodeUserCodes}}'>
<zwave-usercodes
id='zwave-usercodes'
hass='[[hass]]'
nodes='[[nodes]]'
user-codes='[[userCodes]]'
selected-node='[[selectedNode]]'
></zwave-usercodes>
</template>
<!--Ozw log-->
<div class='content'>
<ozw-log
id='ozw-log'
hass='[[hass]]'
></ozw-log>
</div>
</ha-config-section>
<!--User Codes-->
<template is='dom-if' if='{{hasNodeUserCodes}}'>
<zwave-usercodes
id='zwave-usercodes'
hass='[[hass]]'
nodes='[[nodes]]'
user-codes='[[userCodes]]'
selected-node='[[selectedNode]]'
></zwave-usercodes>
</template>
<!--Ozw log-->
<ozw-log
is-wide='[[isWide]]'
hass='[[hass]]'
></ozw-log>
</app-header-layout>
</template>
@ -406,28 +414,28 @@ Polymer({
this.selectedGroup = -1;
this.hass.callApi('GET', 'zwave/config/' + this.nodes[selectedNode].attributes.node_id).then(
function (configs) {
(configs) => {
this.config = this._objToArray(configs);
}.bind(this));
});
this.hass.callApi('GET', 'zwave/values/' + this.nodes[selectedNode].attributes.node_id).then(
function (values) {
(values) => {
this.values = this._objToArray(values);
}.bind(this));
});
this.hass.callApi('GET', 'zwave/groups/' + this.nodes[selectedNode].attributes.node_id).then(
function (groups) {
(groups) => {
this.groups = this._objToArray(groups);
}.bind(this));
});
this.hasNodeUserCodes = false;
this.notifyPath('hasNodeUserCodes');
this.hass.callApi('GET', 'zwave/usercodes/' + this.nodes[selectedNode].attributes.node_id).then(
function (usercodes) {
(usercodes) => {
this.userCodes = this._objToArray(usercodes);
this.hasNodeUserCodes = this.userCodes.length > 0;
this.notifyPath('hasNodeUserCodes');
}.bind(this));
});
},
computeSelectedEntityAttrs: function (selectedEntity) {

View File

@ -30,65 +30,68 @@
.help-text {
padding-left: 24px;
padding-right: 24px;
padding-bottom: 12px;
}
</style>
<div class='content'>
<paper-card heading='Node group associations'>
<div class='device-picker'>
<paper-card class="content" heading='Node group associations'>
<!--TODO make api for getting groups and members-->
<div class='device-picker'>
<paper-dropdown-menu label="Group" class='flex'>
<paper-listbox
slot="dropdown-content"
selected='{{selectedGroup}}'>
<template is='dom-repeat' items='[[groups]]' as='state'>
<paper-item>[[computeSelectCaptionGroup(state)]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
<template is='dom-if' if='[[computeIsGroupSelected(selectedGroup)]]'>
<div class='device-picker'>
<paper-dropdown-menu label="Node to control" class='flex'>
<paper-listbox
slot="dropdown-content"
selected='{{selectedTargetNode}}'>
<template is='dom-repeat' items='[[nodes]]' as='state'>
slot="dropdown-content"
selected='{{selectedTargetNode}}'>
<template is='dom-repeat' items='[[nodes]]' as='state'>
<paper-item>[[computeSelectCaption(state)]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
<template is='dom-if' if='[[!computeIsTargetNodeSelected(selectedTargetNode)]]'>
<!--TODO make api for getting groups and members-->
<div class='device-picker'>
<paper-dropdown-menu label="Group" class='flex'>
<paper-listbox
slot="dropdown-content"
selected='{{selectedGroup}}'>
<template is='dom-repeat' items='[[groups]]' as='state'>
<paper-item>[[computeSelectCaptionGroup(state)]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</div>
</template>
<template is='dom-if' if='[[!computeIsGroupSelected(selectedGroup)]]'>
<div class='help-text'>
<span>Other Nodes in this group:</span>
<template is='dom-repeat' items='[[otherGroupNodes]]' as='state'>
<span>[[state]]</span>
</template>
</div>
<div class='help-text'>
<span>Max Associations:</span>
<span>[[maxAssociations]]</span>
</div>
<div class='card-actions'>
<template is='dom-if' if='[[!noAssociationsLeft]]'>
<ha-call-service-button
</div>
<div class='help-text'>
<span>Other Nodes in this group:</span>
<template is='dom-repeat' items='[[otherGroupNodes]]' as='state'>
<div>[[state]]</div>
</template>
</div>
<div class='help-text'>
<span>Max Associations:</span>
<span>[[maxAssociations]]</span>
</div>
</template>
<template is='dom-if' if='[[computeIsTargetNodeSelected(selectedTargetNode)]]'>
<div class='card-actions'>
<template is='dom-if' if='[[!noAssociationsLeft]]'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='change_association'
service-data='[[computeAssocServiceData(selectedGroup, "add")]]'
>Add To Group</ha-call-service-button>
</template>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='change_association'
service-data='[[computeAssocServiceData(selectedGroup, "remove")]]'
>Remove From Group</ha-call-service-button>
>Add To Group</ha-call-service-button>
</template>
<template is='dom-if' if='[[computeTargetInGroup(selectedGroup, selectedTargetNode)]]'>
<ha-call-service-button
hass='[[hass]]'
domain='zwave'
service='change_association'
service-data='[[computeAssocServiceData(selectedGroup, "remove")]]'
>Remove From Group</ha-call-service-button>
</template>
</div>
</template>
</paper-card>
</div>
</paper-card>
</template>
</dom-module>
@ -164,15 +167,37 @@ Polymer({
computeMaxAssociations: function (selectedGroup) {
if (selectedGroup === -1) return -1;
var maxAssociations = this.groups[selectedGroup].value.max_associations;
if (!maxAssociations) return ['None'];
if (!maxAssociations) return 'None';
return maxAssociations;
},
computeOtherGroupNodes: function (selectedGroup) {
if (selectedGroup === -1) return -1;
var associations = Object.values(this.groups[selectedGroup].value.associations);
var associations = Object.values(this.groups[selectedGroup].value.association_instances);
if (!associations.length) return ['None'];
return associations;
return associations.map((assoc) => {
if (!assoc.length || assoc.length !== 2) {
return 'Unknown Node: ' + assoc;
}
const id = assoc[0];
const instance = assoc[1];
const node = this.nodes.find(n => n.attributes.node_id === id);
if (!node) {
return 'Unknown Node (id: ' + (instance ? id + '.' + instance : id) + ')';
}
let caption = this.computeSelectCaption(node);
if (instance) {
caption += '/ Instance: ' + instance;
}
return caption;
});
},
computeTargetInGroup: function (selectedGroup, selectedTargetNode) {
if (selectedGroup === -1 || selectedTargetNode === -1) return false;
const associations = Object.values(this.groups[selectedGroup].value.associations);
if (!associations.length) return false;
return associations.indexOf(this.nodes[selectedTargetNode].attributes.node_id) !== -1;
},
computeSelectCaption: function (stateObj) {
@ -186,11 +211,11 @@ Polymer({
},
computeIsTargetNodeSelected: function (selectedTargetNode) {
return (!this.nodes || selectedTargetNode === -1);
return this.nodes && selectedTargetNode !== -1;
},
computeIsGroupSelected: function (selectedGroup) {
return (!this.nodes || this.selectedNode === -1 || selectedGroup === -1);
return this.nodes && this.selectedNode !== -1 && selectedGroup !== -1;
},
computeAssocServiceData: function (selectedGroup, type) {
@ -223,4 +248,3 @@ Polymer({
},
});
</script>

View File

@ -2,6 +2,8 @@
<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="../ha-config-section.html">
<dom-module id='ozw-log'>
<template>
<style include="iron-flex ha-style">
@ -15,14 +17,17 @@
max-width: 600px;
}
</style>
<paper-card heading='OZW Log'>
<div class='help-text'>
<pre>[[ozwLogs]]</pre>
</div>
<div class="card-actions">
<paper-button raised on-tap='refreshLog'>Refresh</paper-button>
</div>
</paper-card>
<ha-config-section is-wide='[[isWide]]'>
<span slot='header'>OZW Log</span>
<paper-card>
<div class='help-text'>
<pre>[[ozwLogs]]</pre>
</div>
<div class="card-actions">
<paper-button raised on-tap='refreshLog'>Refresh</paper-button>
</div>
</paper-card>
</ha-config-section>
</template>
</dom-module>
<script>
@ -35,18 +40,23 @@ Polymer({
type: Object,
},
isWide: {
type: Boolean,
value: false,
},
ozwLogs: {
type: String,
value: ''
value: 'Refresh to pull log'
},
},
refreshLog: function () {
this.ozwLogs = 'Loading ozw log...';
this.hass.callApi('GET', 'zwave/ozwlog')
.then(function (info) {
.then((info) => {
this.ozwLogs = info;
}.bind(this));
});
},
});
</script>

View File

@ -4,6 +4,8 @@
<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="../ha-config-section.html">
<dom-module id='zwave-network'>
<template>
<style include="iron-flex ha-style">
@ -23,7 +25,7 @@
.toggle-help-icon {
position: absolute;
top: 6px;
top: -6px;
right: 0;
color: var(--primary-color);
}
@ -37,121 +39,132 @@
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>
<ha-config-section is-wide='[[isWide]]'>
<div style="position: relative" slot='header'>
<span>Z-Wave Network Management</span>
<paper-icon-button
class="toggle-help-icon"
on-tap='helpTap'
icon='mdi:help-circle'
></paper-icon-button>
</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>
<span slot='introduction'>
Run commands that affect the Z-Wave network. You won't get feedback on whether the command succeeded, but you can look in the OZW Log to try to figure out.
</span>
</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>
<paper-card class="content">
<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='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='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='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='remove_node'
>Remove Node</ha-call-service-button>
<ha-service-description
hass='[[hass]]'
domain='zwave'
service='remove_node'
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>
<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>
</paper-card>
</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>
</ha-config-section>
</template>
</dom-module>
<script>
@ -164,6 +177,11 @@ Polymer({
type: Object,
},
isWide: {
type: Boolean,
value: false,
},
showDescription: {
type: Boolean,
value: false,

View File

@ -17,9 +17,9 @@
<dom-module id="zwave-node-options">
<template>
<ha-config-section is-wide='[[isWide]]'>
<span slot='header'>Z-Wave</span>
<span slot='header'>Z-Wave entities</span>
<span slot='introduction'>
Z-Wave devices contain a lot of options. These controls will allow you to get into the nitty gritty details.
Z-Wave entities contain a lot of options. These controls will allow you to get into the nitty gritty details.
</span>
<ha-entity-config