forked from platypush/platypush
Completed ZWave web panel (see #123)
This commit is contained in:
parent
a9dbda455f
commit
424077fdbc
7 changed files with 302 additions and 132 deletions
|
@ -243,7 +243,7 @@
|
|||
color: $error-color;
|
||||
}
|
||||
|
||||
.node {
|
||||
.node, .scene {
|
||||
.actions {
|
||||
.row {
|
||||
cursor: pointer;
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,16 +146,27 @@
|
|||
<div class="empty" v-else>No nodes found on the network</div>
|
||||
</div>
|
||||
|
||||
<zwave-value
|
||||
v-for="node, nodeId in nodes"
|
||||
<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"
|
||||
: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)"
|
||||
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"
|
||||
:selected="selected.nodeId == nodeId"
|
||||
:bus="bus">
|
||||
</zwave-value>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dropdown ref="addToSceneDropdown" :items="addToSceneDropdownItems"></dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1,13 +1,5 @@
|
|||
<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="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="section value">
|
||||
<div class="header">
|
||||
<div class="title">
|
||||
<button class="btn btn-default btn-value-name-edit" title="Edit value name"
|
||||
|
@ -76,6 +68,22 @@
|
|||
</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>
|
||||
|
@ -102,8 +110,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/zwave/value.js') }}"></script>
|
||||
|
|
|
@ -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()
|
||||
|
||||
|
|
Loading…
Reference in a new issue