Completed ZWave web panel (see #123)

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

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

platypush/backend/http/static/js/plugins/zwave/index.js

@@ -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');

platypush/backend/http/static/js/plugins/zwave/value.js

@@ -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);

platypush/backend/http/templates/plugins/zwave/index.html

@@ -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-->
+            <div class="item scene"
-            <!--                    v-for="scene, sceneId in scenes"-->
+                 :class="{selected: selected.sceneId === sceneId}"
-            <!--                    :key="sceneId"-->
+                 v-for="scene, sceneId in scenes"
-            <!--                    :name="scene.label"-->
+                 :key="sceneId">
-            <!--                    :bus="bus">-->
+                <div class="row name vertical-center" :class="{selected: selected.sceneId === sceneId}"
-            <!--            </zwave-scene>-->
+                     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
+            <div class="item node"
-                    v-for="node, nodeId in nodes"
+                 :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-if="selected.view === 'values' || Object.values(node.values).filter((value) => value.id_on_network in values[selected.view]).length > 0"
-                    :key="nodeId"
+                 v-for="node, nodeId in nodes"
-                    :values="Object.values(node.values).filter((value) => selected.view === 'values' || value.id_on_network in values[selected.view]).map((value) => value.id_on_network)"
+                 :key="nodeId">
-                    :node="node"
+                <div class="row name vertical-center" :class="{selected: selected.nodeId === nodeId}" v-text="node.name" @click="onNodeClicked({nodeId: nodeId})"></div>
-                    :selected="selected.nodeId == nodeId"
+
-                    :bus="bus">
+                <div class="params" v-if="selected.nodeId === nodeId">
-            </zwave-value>
+                    <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>

platypush/backend/http/templates/plugins/zwave/node.html

@@ -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>

platypush/backend/http/templates/plugins/zwave/value.html

@@ -1,107 +1,113 @@
 <script type="text/x-template" id="tmpl-zwave-value">
-    <div class="item node" :class="{selected: selected}">
+    <div class="section value">
-        <div class="row name vertical-center" :class="{selected: selected}"
+        <div class="header">
-             v-text="node.name" @click="onNodeClicked"></div>
+            <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="body">
-            <div class="section value"
+            <div class="row">
-                 v-for="value in node.values"
+                <div class="param-name">Value</div>
-                 v-if="values.indexOf(value.id_on_network) >= 0"
+                <div class="param-value">
-                 :key="value.id_on_network">
+                    <div class="value-view" v-if="value.is_read_only">
-                <div class="header">
+                        <div class="value-data" v-text="value.data" ></div>
-                    <div class="title">
+                        <div class="unit" v-text="value.units" v-if="value.units && value.units.length">
-                        <button class="btn btn-default btn-value-name-edit" title="Edit value name"
+                            &nbsp; {% raw %}{{ value.units }}{% endraw %}}
-                                :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>
                     </div>
 
-                    <div class="row" v-if="value.help && value.help.length">
+                    <div class="value-edit" v-else>
-                        <div class="param-name">Help</div>
+                        <div :class="['col-' + (value.units && value.units.length ? '11' : '12')]">
-                        <div class="param-value" v-text="value.help"></div>
+                            <div class="list" v-if="value.type === 'List'">
-                    </div>
+                                <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="numeric slider-container" v-else-if="['Byte', 'Decimal', 'Short'].indexOf(value.type) >= 0">
-                        <div class="param-name">Value ID</div>
+                                <div class="col-10">
-                        <div class="param-value" v-text="value.value_id"></div>
+                                    <div class="row">
-                    </div>
+                                        <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="boolean" v-else-if="['Bool', 'Button'].indexOf(value.type) >= 0">
-                        <div class="param-name">ID on Network</div>
+                                <toggle-switch :value="value.data" :data-id-on-network="value.id_on_network"
-                        <div class="param-value" v-text="value.id_on_network"></div>
+                                               @toggled="onValueChanged"></toggle-switch>
-                    </div>
+                            </div>
 
-                    <div class="row">
+                            <div class="value-data" v-text="value.data" v-else></div>
-                        <div class="param-name">Command Class</div>
+                        </div>
-                        <div class="param-value" v-text="value.command_class"></div>
-                    </div>
 
-                    <div class="row" v-if="value.last_update">
+                        <div class="col-1 unit" v-text="value.units" v-if="value.units && value.units.length">
-                        <div class="param-name">Last Update</div>
+                            &nbsp; {% raw %}{{ value.units }}{% endraw %}}
-                        <div class="param-value" v-text="value.last_update"></div>
+                        </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>

platypush/plugins/zwave/__init__.py

@@ -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()