Psion-fanatic/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Completed ZWave web panel (see #123)

Browse source
This commit is contained in:
Fabio Manganiello 2020-02-22 01:00:52 +01:00
parent a9dbda455f
commit 424077fdbc
7 changed files with 302 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
platypush/backend/http/static/css/source/webpanel/plugins/zwave/index.scss
View file

@ -243,7 +243,7 @@
color: $error-color;
}
.node {
.node, .scene {
.actions {
.row {
cursor: pointer;

104
platypush/backend/http/static/js/plugins/zwave/index.js
View file

@ -28,6 +28,7 @@ Vue.component('zwave', {
nodeId: undefined,
groupId: undefined,
sceneId: undefined,
valueId: undefined,
},
loading: {
status: false,
@ -47,6 +48,17 @@ Vue.component('zwave', {
},
computed: {
valuesMap: function() {
const values = {};
for (const node of Object.values(this.nodes)) {
for (const value of Object.values(node.values)) {
values[value.id_on_network] = value;
}
}
return values;
},
networkDropdownItems: function() {
const self = this;
return [
@ -192,6 +204,32 @@ Vue.component('zwave', {
},
]
},
addToSceneDropdownItems: function() {
const self = this;
return Object.values(this.scenes).filter((scene) => {
return !scene.values || !scene.values.length || !(this.selected.valueId in this.scene.values);
}).map((scene) => {
return {
text: scene.label,
disabled: this.commandRunning,
click: async function () {
if (!self.selected.valueId) {
return;
}
self.commandRunning = true;
await request('zwave.scene_add_value', {
id_on_network: self.selected.valueId,
scene_id: scene.scene_id,
});
self.commandRunning = false;
self.refresh();
},
};
});
},
},
methods: {
@ -274,6 +312,29 @@ Vue.component('zwave', {
this.refreshStatus();
},
addScene: async function() {
const name = prompt('Scene name');
if (!name) {
return;
}
this.commandRunning = true;
await request('zwave.create_scene', {label: name});
this.commandRunning = false;
this.refreshScenes();
},
removeScene: async function(sceneId) {
if (!confirm('Are you sure that you want to delete this scene?')) {
return;
}
this.commandRunning = true;
await request('zwave.remove_scene', {scene_id: sceneId});
this.commandRunning = false;
this.refreshScenes();
},
onNodeUpdate: function(event) {
Vue.set(this.nodes, event.node.node_id, event.node);
},
@ -290,6 +351,10 @@ Vue.component('zwave', {
Vue.set(this.selected, 'groupId', event.groupId === this.selected.groupId ? undefined : event.groupId);
},
onSceneClicked: function(event) {
Vue.set(this.selected, 'sceneId', event.sceneId === this.selected.sceneId ? undefined : event.sceneId);
},
onNetworkInfoModalOpen: function() {
this.refreshStatus();
this.modal.networkInfo.visible = true;
@ -308,6 +373,11 @@ Vue.component('zwave', {
openDropdown(this.$refs.networkCommandsDropdown);
},
openAddToSceneDropdown: function(event) {
this.selected.valueId = event.valueId;
openDropdown(this.$refs.addToSceneDropdown);
},
addNode: async function() {
this.commandRunning = true;
await request('zwave.add_node');
@ -330,6 +400,38 @@ Vue.component('zwave', {
await request('zwave.remove_node');
this.commandRunning = false;
},
removeNodeFromScene: async function(event) {
if (!confirm('Are you sure that you want to remove this value from the scene?')) {
return;
}
this.commandRunning = true;
await request('zwave.scene_remove_value', {
id_on_network: event.valueId,
scene_id: event.sceneId,
});
this.commandRunning = false;
},
renameScene: async function(sceneId) {
const scene = this.scenes[sceneId];
const name = prompt('New name', scene.label);
if (!name || !name.length || name === scene.label) {
return;
}
this.commandRunning = true;
await request('zwave.set_scene_label', {
new_label: name,
scene_id: sceneId,
});
this.commandRunning = false;
this.refreshScenes();
},
},
created: function() {
@ -339,6 +441,8 @@ Vue.component('zwave', {
this.bus.$on('nodeClicked', this.onNodeClicked);
this.bus.$on('groupClicked', this.onGroupClicked);
this.bus.$on('openAddToGroupModal', () => {self.modal.group.visible = true});
this.bus.$on('openAddToSceneDropdown', this.openAddToSceneDropdown);
this.bus.$on('removeFromScene', this.removeNodeFromScene);
registerEventHandler(this.refreshGroups, 'platypush.message.event.zwave.ZwaveNodeGroupEvent');
registerEventHandler(this.refreshScenes, 'platypush.message.event.zwave.ZwaveNodeSceneEvent');

22
platypush/backend/http/static/js/plugins/zwave/value.js
View file

@ -1,18 +1,11 @@
Vue.component('zwave-value', {
template: '#tmpl-zwave-value',
props: ['node','bus','selected','values'],
props: ['value','node','bus','selected','sceneId'],
data: function() {
return {
};
return {};
},
methods: {
onNodeClicked: function() {
this.bus.$emit('nodeClicked', {
nodeId: this.node.node_id,
});
},
disableForm: function(form) {
form.querySelector('input,button').readOnly = true;
},
@ -21,17 +14,6 @@ Vue.component('zwave-value', {
form.querySelector('input,button').readOnly = false;
},
onEditMode: function(mode) {
Vue.set(this.editMode, mode, true);
const form = this.$refs[mode + 'Form'];
const input = form.querySelector('input[type=text]');
setTimeout(() => {
input.focus();
input.select();
}, 10);
},
editName: function(event) {
const value = this.node.values[event.target.parentElement.dataset.idOnNetwork];
const name = prompt('New name', value.label);

87
platypush/backend/http/templates/plugins/zwave/index.html
View file

@ -31,7 +31,7 @@
</button>
<button class="btn btn-default" title="Add scene" v-if="selected.view === 'scenes'"
:disabled="commandRunning">
:disabled="commandRunning" @click="addScene">
<i class="fa fa-plus"></i>
</button>
@ -88,12 +88,56 @@
<div class="empty" v-else>No scenes configured on the network</div>
</div>
<!-- <zwave-scenes-->
<!-- v-for="scene, sceneId in scenes"-->
<!-- :key="sceneId"-->
<!-- :name="scene.label"-->
<!-- :bus="bus">-->
<!-- </zwave-scene>-->
<div class="item scene"
:class="{selected: selected.sceneId === sceneId}"
v-for="scene, sceneId in scenes"
:key="sceneId">
<div class="row name vertical-center" :class="{selected: selected.sceneId === sceneId}"
v-text="scene.label" @click="onSceneClicked({sceneId: sceneId})"></div>
<div class="params" v-if="selected.sceneId === sceneId">
<div class="row">
<div class="param-name">Activate</div>
<div class="param-value">
<toggle-switch :value="false" @toggled="activateScene(sceneId, true)"></toggle-switch>
</div>
</div>
<div class="section actions">
<div class="header">
<div class="title">Actions</div>
</div>
<div class="body">
<div class="row" @click="removeScene(sceneId)">
<div class="param-name">Remove Scene</div>
<div class="param-value">
<i class="fa fa-trash"></i>
</div>
</div>
<div class="row" @click="renameScene(sceneId)">
<div class="param-name">Rename Scene</div>
<div class="param-value">
<i class="fa fa-edit"></i>
</div>
</div>
</div>
</div>
<div class="section values" v-if="scene.values && scene.values.length">
<zwave-value
v-for="value, valueId in valuesMap"
v-if="value.id_on_network && value.id_on_network in scenes.values[sceneId]"
:key="valueId"
:value="value"
:node="node"
:sceneId="sceneId"
:bus="bus">
</zwave-value>
</div>
</div>
</div>
</div>
<div class="view values" v-else>
@ -102,15 +146,26 @@
<div class="empty" v-else>No nodes found on the network</div>
</div>
<zwave-value
v-for="node, nodeId in nodes"
v-if="selected.view === 'values' || Object.values(node.values).filter((value) => value.id_on_network in values[selected.view]).length > 0"
:key="nodeId"
:values="Object.values(node.values).filter((value) => selected.view === 'values' || value.id_on_network in values[selected.view]).map((value) => value.id_on_network)"
:node="node"
:selected="selected.nodeId == nodeId"
:bus="bus">
</zwave-value>
<div class="item node"
:class="{selected: selected.nodeId === nodeId}"
v-if="selected.view === 'values' || Object.values(node.values).filter((value) => value.id_on_network in values[selected.view]).length > 0"
v-for="node, nodeId in nodes"
:key="nodeId">
<div class="row name vertical-center" :class="{selected: selected.nodeId === nodeId}" v-text="node.name" @click="onNodeClicked({nodeId: nodeId})"></div>
<div class="params" v-if="selected.nodeId === nodeId">
<zwave-value
v-for="value, valueId in node.values"
v-if="value.id_on_network && (selected.view === 'values' || value.id_on_network in values[selected.view])"
:key="valueId"
:value="value"
:node="node"
:bus="bus">
</zwave-value>
</div>
</div>
<dropdown ref="addToSceneDropdown" :items="addToSceneDropdownItems"></dropdown>
</div>
</div>
</script>

7
platypush/backend/http/templates/plugins/zwave/node.html
View file

@ -54,6 +54,13 @@
<div class="param-value" v-text="node.node_id"></div>
</div>
<div class="row" v-if="node.neighbours.length">
<div class="param-name">Neighbours</div>
<div class="param-value">
<div class="row" v-for="neighbour in node.neighbours" v-text="neighbour"></div>
</div>
</div>
<div class="row">
<div class="param-name">Is Ready</div>
<div class="param-value" v-text="node.is_ready"></div>

190
platypush/backend/http/templates/plugins/zwave/value.html
View file

@ -1,107 +1,113 @@
<script type="text/x-template" id="tmpl-zwave-value">
<div class="item node" :class="{selected: selected}">
<div class="row name vertical-center" :class="{selected: selected}"
v-text="node.name" @click="onNodeClicked"></div>
<div class="section value">
<div class="header">
<div class="title">
<button class="btn btn-default btn-value-name-edit" title="Edit value name"
:data-id-on-network="value.id_on_network" @click="editName">
<i class="fa fa-edit"></i>
</button>
{% raw %}{{ value.label }}{% endraw %}
</div>
</div>
<div class="params" v-if="selected">
<div class="section value"
v-for="value in node.values"
v-if="values.indexOf(value.id_on_network) >= 0"
:key="value.id_on_network">
<div class="header">
<div class="title">
<button class="btn btn-default btn-value-name-edit" title="Edit value name"
:data-id-on-network="value.id_on_network" @click="editName">
<i class="fa fa-edit"></i>
</button>
{% raw %}{{ value.label }}{% endraw %}
</div>
</div>
<div class="body">
<div class="row">
<div class="param-name">Value</div>
<div class="param-value">
<div class="value-view" v-if="value.is_read_only">
<div class="value-data" v-text="value.data" ></div>
<div class="unit" v-text="value.units" v-if="value.units && value.units.length">
&nbsp; {% raw %}{{ value.units }}{% endraw %}}
</div>
</div>
<div class="value-edit" v-else>
<div :class="['col-' + (value.units && value.units.length ? '11' : '12')]">
<div class="list" v-if="value.type === 'List'">
<select @change="onValueChanged"
:data-id-on-network="value.id_on_network">
<option v-for="data, index in value.data_items"
v-text="data"
:key="index"
:selected="value.data == data"
:value="index">
</option>
</select>
</div>
<div class="numeric slider-container" v-else-if="['Byte', 'Decimal', 'Short'].indexOf(value.type) >= 0">
<div class="col-10">
<div class="row">
<span class="value-min" v-text="value.min"></span>
<span class="value-max" v-text="value.max"></span>
</div>
<div class="row">
<input class="slider" type="range" :min="value.min" :max="value.max"
:value="value.data" :data-id-on-network="value.id_on_network"
@change="onValueChanged">
</div>
</div>
<div class="col-2">
<input type="text" :data-id-on-network="value.id_on_network" :value="value.data"
@change="onValueChanged">
</div>
</div>
<div class="boolean" v-else-if="['Bool', 'Button'].indexOf(value.type) >= 0">
<toggle-switch :value="value.data" :data-id-on-network="value.id_on_network"
@toggled="onValueChanged"></toggle-switch>
</div>
<div class="value-data" v-text="value.data" v-else></div>
</div>
<div class="col-1 unit" v-text="value.units" v-if="value.units && value.units.length">
&nbsp; {% raw %}{{ value.units }}{% endraw %}}
</div>
</div>
<div class="body">
<div class="row">
<div class="param-name">Value</div>
<div class="param-value">
<div class="value-view" v-if="value.is_read_only">
<div class="value-data" v-text="value.data" ></div>
<div class="unit" v-text="value.units" v-if="value.units && value.units.length">
&nbsp; {% raw %}{{ value.units }}{% endraw %}}
</div>
</div>
<div class="row" v-if="value.help && value.help.length">
<div class="param-name">Help</div>
<div class="param-value" v-text="value.help"></div>
</div>
<div class="value-edit" v-else>
<div :class="['col-' + (value.units && value.units.length ? '11' : '12')]">
<div class="list" v-if="value.type === 'List'">
<select @change="onValueChanged"
:data-id-on-network="value.id_on_network">
<option v-for="data, index in value.data_items"
v-text="data"
:key="index"
:selected="value.data == data"
:value="index">
</option>
</select>
</div>
<div class="row">
<div class="param-name">Value ID</div>
<div class="param-value" v-text="value.value_id"></div>
</div>
<div class="numeric slider-container" v-else-if="['Byte', 'Decimal', 'Short'].indexOf(value.type) >= 0">
<div class="col-10">
<div class="row">
<span class="value-min" v-text="value.min"></span>
<span class="value-max" v-text="value.max"></span>
</div>
<div class="row">
<input class="slider" type="range" :min="value.min" :max="value.max"
:value="value.data" :data-id-on-network="value.id_on_network"
@change="onValueChanged">
</div>
</div>
<div class="col-2">
<input type="text" :data-id-on-network="value.id_on_network" :value="value.data"
@change="onValueChanged">
</div>
</div>
<div class="row">
<div class="param-name">ID on Network</div>
<div class="param-value" v-text="value.id_on_network"></div>
</div>
<div class="boolean" v-else-if="['Bool', 'Button'].indexOf(value.type) >= 0">
<toggle-switch :value="value.data" :data-id-on-network="value.id_on_network"
@toggled="onValueChanged"></toggle-switch>
</div>
<div class="row">
<div class="param-name">Command Class</div>
<div class="param-value" v-text="value.command_class"></div>
</div>
<div class="value-data" v-text="value.data" v-else></div>
</div>
<div class="row" v-if="value.last_update">
<div class="param-name">Last Update</div>
<div class="param-value" v-text="value.last_update"></div>
<div class="col-1 unit" v-text="value.units" v-if="value.units && value.units.length">
&nbsp; {% raw %}{{ value.units }}{% endraw %}}
</div>
</div>
</div>
</div>
<div class="row" v-if="sceneId" style="cursor: pointer"
@click="bus.$emit('removeFromScene', {valueId: value.id_on_network, sceneId: sceneId})">
<div class="param-name">Remove From Scene</div>
<div class="param-value">
<i class="fa fa-trash"></i>
</div>
</div>
<div class="row" style="cursor: pointer"
@click="bus.$emit('openAddToSceneDropdown', {valueId: value.id_on_network})">
<div class="param-name">Add To Scene</div>
<div class="param-value">
<i class="fa fa-plus"></i>
</div>
</div>
<div class="row" v-if="value.help && value.help.length">
<div class="param-name">Help</div>
<div class="param-value" v-text="value.help"></div>
</div>
<div class="row">
<div class="param-name">Value ID</div>
<div class="param-value" v-text="value.value_id"></div>
</div>
<div class="row">
<div class="param-name">ID on Network</div>
<div class="param-value" v-text="value.id_on_network"></div>
</div>
<div class="row">
<div class="param-name">Command Class</div>
<div class="param-value" v-text="value.command_class"></div>
</div>
<div class="row" v-if="value.last_update">
<div class="param-name">Last Update</div>
<div class="param-value" v-text="value.last_update"></div>
</div>
</div>
</div>
</script>

22
platypush/plugins/zwave/__init__.py
View file

@ -228,6 +228,7 @@ class ZwavePlugin(Plugin):
'manufacturer_id': node.manufacturer_id,
'manufacturer_name': node.manufacturer_name,
'max_baud_rate': node.max_baud_rate,
'neighbours': [node_id for node_id in node.neighbors],
'name': node.name,
'outdated': node.outdated,
'product_id': node.product_id,
@ -743,7 +744,11 @@ class ZwavePlugin(Plugin):
"""
Get the scenes configured on the network.
"""
return self._get_network().scenes_to_dict()
network = self._get_network()
if not network.get_scenes():
return {}
return network.scenes_to_dict()
@action
def create_scene(self, label: str):
@ -753,6 +758,7 @@ class ZwavePlugin(Plugin):
:param label: Scene label.
"""
self._get_network().create_scene(label)
self.write_config()
@action
def remove_scene(self, scene_id: Optional[int] = None, scene_label: Optional[str] = None):
@ -764,6 +770,7 @@ class ZwavePlugin(Plugin):
"""
scene = self._get_scene(scene_id=scene_id, scene_label=scene_label)
self._get_network().remove_scene(scene.scene_id)
self.write_config()
@action
def activate_scene(self, scene_id: Optional[int] = None, scene_label: Optional[str] = None):
@ -790,14 +797,19 @@ class ZwavePlugin(Plugin):
self.write_config()
@action
def scene_add_value(self, data, value_id: Optional[int] = None, id_on_network: Optional[str] = None,
def scene_add_value(self, data: Optional[Any] = None,
value_id: Optional[int] = None, id_on_network: Optional[str] = None,
value_label: Optional[str] = None, scene_id: Optional[int] = None,
scene_label: Optional[str] = None, node_id: Optional[int] = None,
node_name: Optional[str] = None):
"""
Add a value to a scene.
:param data: Data to set for the value.
WARNING: This method actually doesn't work, by own admission of the
:ref:`OpenZWave developer <https://github.com/OpenZWave/python-openzwave/blob/master/src-lib/libopenzwave/libopenzwave.pyx#L4730>`_
:param data: Data to set for the value (default: current value data).
:param value_id: Select value by value_id.
:param id_on_network: Select value by id_on_network.
:param value_label: Select value by [node_id/node_name, value_label]
@ -809,6 +821,10 @@ class ZwavePlugin(Plugin):
value = self._get_value(value_id=value_id, id_on_network=id_on_network, node_id=node_id, node_name=node_name,
value_label=value_label)
scene = self._get_scene(scene_id=scene_id, scene_label=scene_label)
data = data if data is not None else value.data
data = value.check_data(data)
assert data is not None, 'Invalid value passed to the property'
scene.add_value(value.value_id, data)
self.write_config()