From b49865181bdef34e51a14b63c28199070957e30f Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <info@fabiomanganiello.com>
Date: Sun, 14 Feb 2021 02:29:39 +0100
Subject: [PATCH] Z-Wave plugin UI migration [WIP]

---
 .../backend/http/webapp/src/assets/icons.json |   3 +
 .../src/components/panels/Zwave/Group.vue     | 102 +++
 .../src/components/panels/Zwave/Index.vue     | 723 ++++++++++++++++++
 .../src/components/panels/Zwave/Node.vue      | 373 +++++++++
 .../src/components/panels/Zwave/Value.vue     | 224 ++++++
 .../src/components/panels/Zwave/common.scss   | 225 ++++++
 .../src/components/panels/Zwave/vars.scss     |  12 +
 7 files changed, 1662 insertions(+)
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Zwave/Group.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Zwave/Index.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Zwave/Node.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Zwave/Value.vue
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Zwave/common.scss
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Zwave/vars.scss

diff --git a/platypush/backend/http/webapp/src/assets/icons.json b/platypush/backend/http/webapp/src/assets/icons.json
index d6a572e5..66088d51 100644
--- a/platypush/backend/http/webapp/src/assets/icons.json
+++ b/platypush/backend/http/webapp/src/assets/icons.json
@@ -29,6 +29,9 @@
     },
     "zigbee.mqtt": {
       "imgUrl": "/icons/zigbee.svg"
+    },
+    "zwave": {
+      "imgUrl": "/icons/z-wave.png"
     }
   }
 }
diff --git a/platypush/backend/http/webapp/src/components/panels/Zwave/Group.vue b/platypush/backend/http/webapp/src/components/panels/Zwave/Group.vue
new file mode 100644
index 00000000..f0f213c9
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Zwave/Group.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="item group" :class="{selected: selected}">
+    <div class="row name vertical-center" :class="{selected: selected}" v-text="group.label"
+         @click="$emit('select', group.index)" />
+
+    <div class="params" v-if="selected">
+      <div class="section nodes">
+        <div class="header">
+          <div class="title col-10">Nodes</div>
+          <div class="buttons col-2">
+            <button class="btn btn-default" title="Add to group" @click="$emit('open-add-nodes-to-group', group.index)"
+                    v-if="!group.max_associations || Object.keys(nodes || {}).length < group.max_associations">
+              <i class="fa fa-plus" />
+            </button>
+          </div>
+        </div>
+
+        <div class="body">
+          <div class="row" v-for="(node, i) in nodes" :key="i">
+            <div class="col-10" v-text="node.name?.length ? node.name : `<Node ${node.node_id}>`" />
+            <div class="buttons col-2">
+              <button class="btn btn-default" title="Remove from group" :disabled="commandRunning"
+                      @click="removeFromGroup(node.node_id)">
+                <i class="fa fa-trash" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="section config">
+        <div class="header">
+          <div class="title">Parameters</div>
+        </div>
+
+        <div class="body">
+          <div class="row">
+            <div class="param-name">Index</div>
+            <div class="param-value" v-text="group.index"></div>
+          </div>
+
+          <div class="row">
+            <div class="param-name">Max associations</div>
+            <div class="param-value" v-text="group.max_associations"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Utils from "@/Utils";
+
+export default {
+  name: "Group",
+  emits: ['select', 'open-add-nodes-to-group'],
+  mixins: [Utils],
+
+  props: {
+    group: {
+      type: Object,
+      required: true,
+    },
+    nodes: {
+      type: Object,
+      default: () => { return {} },
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    }
+  },
+
+  data() {
+    return {
+      commandRunning: false,
+    }
+  },
+
+  methods: {
+    async removeFromGroup(nodeId) {
+      if (!confirm('Are you sure that you want to remove this node from ' + this.group.label + '?'))
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.remove_node_from_group', {
+          node_id: nodeId,
+          group_index: this.group.index,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Zwave/Index.vue b/platypush/backend/http/webapp/src/components/panels/Zwave/Index.vue
new file mode 100644
index 00000000..f1e7c8f8
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Zwave/Index.vue
@@ -0,0 +1,723 @@
+<template>
+  <div class="zwave-container">
+    <Modal title="Network info" ref="networkInfoModal">
+      <div class="network-info">
+        <Loading v-if="loading.status" />
+
+        <div class="params" v-else>
+          <div class="row">
+            <div class="param-name">State</div>
+            <div class="param-value" v-text="status.state"></div>
+          </div>
+
+          <div class="row">
+            <div class="param-name">Device</div>
+            <div class="param-value" v-text="status.device"></div>
+          </div>
+
+          <div class="section">
+            <div class="header">
+              <div class="title">Statistics</div>
+            </div>
+
+            <div class="body">
+              <div class="row"
+                   v-for="(value, name) in status.stats"
+                   :key="name">
+                <div class="param-name" v-text="name"></div>
+                <div class="param-value" v-text="value"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+
+    <Modal title="Add nodes to group" ref="addNodesToGroupModal">
+      <div class="group-add">
+        <div class="params">
+          <div class="section">
+            <div class="header">
+              <div class="title">Select nodes to add</div>
+            </div>
+
+            <div class="body">
+              <div class="row clickable" @click="addToGroup(node.node_id, selected.groupId)" :key="node.node_id"
+                   v-for="node in Object.values(nodes).filter((n) => groups[selected.groupId].associations.indexOf(n.node_id) < 0)">
+                <div class="param-name" v-text="node.name"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Modal>
+
+    <div class="view-options">
+      <div class="view-selector col-s-9 col-m-10 col-l-11">
+        <label>
+          <select @change="selected.view = $event.target.value">
+            <option v-for="(id, view) in views"
+                    v-text="(view[0].toUpperCase() + view.slice(1)).replace('_', ' ')"
+                    :key="id"
+                    :selected="view === selected.view"
+                    :value="view">
+            </option>
+          </select>
+        </label>
+      </div>
+
+      <div class="buttons">
+        <button class="btn btn-default" title="Add node" v-if="selected.view === 'nodes'" @click="addNode"
+                :disabled="commandRunning">
+          <i class="fa fa-plus" />
+        </button>
+
+        <button class="btn btn-default" title="Remove node" v-if="selected.view === 'nodes'" @click="removeNode"
+                :disabled="commandRunning">
+          <i class="fa fa-minus" />
+        </button>
+
+        <button class="btn btn-default" title="Add scene" v-if="selected.view === 'scenes'" @click="addScene"
+                :disabled="commandRunning">
+          <i class="fa fa-plus" />
+        </button>
+
+        <button class="btn btn-default" title="Network info" @click="networkInfoModalOpen">
+          <i class="fa fa-info" />
+        </button>
+
+        <Dropdown title="Network commands" icon-class="fa fa-cog">
+          <DropdownItem text="Start Network" :disabled="commandRunning" @click="startNetwork" />
+          <DropdownItem text="Stop Network" :disabled="commandRunning" @click="stopNetwork" />
+          <DropdownItem text="Switch All On" :disabled="commandRunning" @click="switchAll(true)" />
+          <DropdownItem text="Switch All Off" :disabled="commandRunning" @click="switchAll(false)" />
+          <DropdownItem text="Cancel Command" :disabled="commandRunning" @click="cancelCommand" />
+          <DropdownItem text="Kill Command" :disabled="commandRunning" @click="killCommand" />
+          <DropdownItem text="Receive Configuration" :disabled="commandRunning" @click="receiveConfiguration" />
+          <DropdownItem text="Create New Primary" :disabled="commandRunning" @click="createNewPrimary" />
+          <DropdownItem text="Transfer Primary Role" :disabled="commandRunning" @click="transferPrimaryRole" />
+          <DropdownItem text="Heal Network" :disabled="commandRunning" @click="healNetwork" />
+          <DropdownItem text="Soft Reset" :disabled="commandRunning" @click="softReset" />
+          <DropdownItem text="Hard Reset" :disabled="commandRunning" @click="hardReset" />
+        </Dropdown>
+
+        <button class="btn btn-default" title="Refresh network" @click="refresh">
+          <i class="fa fa-sync-alt" />
+        </button>
+      </div>
+    </div>
+
+    <div class="view nodes" v-if="selected.view === 'nodes'">
+      <Loading v-if="loading.nodes" />
+      <div class="no-items" v-else-if="!Object.keys(nodes || {}).length">
+        <div class="empty">No nodes available on the network</div>
+      </div>
+
+      <Node v-for="(node, nodeId) in nodes" :key="nodeId" :node="node" :selected="selected.nodeId === nodeId"
+            @select="onNodeClick(nodeId)" />
+    </div>
+
+    <div class="view groups" v-else-if="selected.view === 'groups'">
+      <Loading v-if="loading.groups" />
+      <div class="no-items" v-else-if="!Object.keys(groups || {}).length">
+        <div class="empty">No groups available on the network</div>
+      </div>
+
+      <Group v-for="(group, groupId) in groups" :key="groupId" :group="group" :selected="selected.groupId === groupId"
+             :nodes="groupId in groups ? groups[groupId].associations.map((node) => nodes[node]).
+                     reduce((nodes, node) => {nodes[node.node_id] = node; return nodes}, {}) : {}"
+             @select="selected.groupId = groupId === selected.groupId ? undefined : groupId"
+             @open-add-nodes-to-group="$refs.addNodesToGroupModal.show()" />
+    </div>
+
+    <div class="view scenes" v-else-if="selected.view === 'scenes'">
+      <Loading v-if="loading.scenes" />
+      <div class="no-items" v-else-if="!Object.keys(scenes || {}).length">
+        <div class="empty">No scenes configured on the network</div>
+      </div>
+
+      <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="selected.sceneId = sceneId === selected.sceneId ? undefined : sceneId" />
+
+        <div class="params" v-if="selected.sceneId === sceneId">
+          <div class="row">
+            <div class="param-name">Activate</div>
+            <div class="param-value">
+              <ToggleSwitch :value="false" @input="activateScene(sceneId)" />
+            </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?.length">
+            <div class="value-container"
+                 v-if="value.id_on_network && value.id_on_network in scenes.values[sceneId]" :scenes="scenes">
+              <Value v-for="(value, valueId) in valuesMap" :key="valueId" :value="value" :node="node" :sceneId="sceneId"
+                     @add-to-scene="addValueToScene" @remove-from-scene="removeValueFromScene" @refresh="refreshNodes" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="view values" v-else>
+      <Loading v-if="loading.nodes" />
+      <div class="no-items" v-else-if="!Object.keys(nodes || {}).length">
+        <div class="empty">No nodes found on the network</div>
+      </div>
+
+      <div class="node-container"
+           v-if="selected.view === 'values' || Object.values(node.values).filter((value) => value.id_on_network in values[selected.view]).length > 0">
+        <div class="item node"
+             :class="{selected: selected.nodeId === nodeId}"
+             v-for="(node, nodeId) in nodes"
+             :key="nodeId">
+          <div class="row name vertical-center" :class="{selected: selected.nodeId === nodeId}" v-text="node.name"
+               @click="onNodeClick(nodeId)"></div>
+
+          <div class="params" v-if="selected.nodeId === nodeId">
+            <div class="value-container"
+                 v-if="value.id_on_network && (selected.view === 'values' || value.id_on_network in values[selected.view])">
+              <Value v-for="(value, valueId) in node.values" :key="valueId" :value="value" :node="node" :scenes="scenes"
+                     @add-to-scene="addValueToScene" @remove-from-scene="removeValueFromScene" @refresh="refreshNodes" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Group from "@/components/panels/Zwave/Group";
+import Node from "@/components/panels/Zwave/Node";
+import Modal from "@/components/Modal";
+import Dropdown from "@/components/elements/Dropdown";
+import DropdownItem from "@/components/elements/DropdownItem";
+import Loading from "@/components/Loading";
+import ToggleSwitch from "@/components/elements/ToggleSwitch";
+import Value from "@/components/panels/Zwave/Value";
+import Utils from "@/Utils";
+
+export default {
+  name: "Zwave",
+  components: {Value, ToggleSwitch, Loading, DropdownItem, Dropdown, Modal, Group, Node},
+  mixins: [Utils],
+
+  data() {
+    return {
+      status: {},
+      views: {},
+      nodes: {},
+      groups: {},
+      scenes: {},
+      commandRunning: false,
+      values: {
+        switches: {},
+        dimmers: {},
+        sensors: {},
+        battery_levels: {},
+        power_levels: {},
+        bulbs: {},
+        doorlocks: {},
+        usercodes: {},
+        thermostats: {},
+        protections: {},
+      },
+      selected: {
+        view: 'nodes',
+        nodeId: undefined,
+        groupId: undefined,
+        sceneId: undefined,
+        valueId: undefined,
+      },
+      loading: {
+        status: false,
+        nodes: false,
+        groups: false,
+        scenes: false,
+      },
+    }
+  },
+
+  computed: {
+    valuesMap() {
+      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
+    },
+  },
+
+  methods: {
+    async refreshNodes() {
+      this.loading.nodes = true
+      try {
+        this.nodes = await this.request('zwave.get_nodes')
+      } finally {
+        this.loading.nodes = false
+      }
+
+      if (Object.keys(this.nodes || {}).length)
+        this.views.values = true
+    },
+
+    async refreshGroups() {
+      this.loading.groups = true
+
+      try {
+        this.groups = Object.values(await this.request('zwave.get_groups'))
+            .filter((group) => group.index)
+            .reduce((groups, group) => {
+              groups[group.index] = group
+              return groups
+            }, {})
+      } finally {
+        this.loading.groups = false
+      }
+
+      if (Object.keys(this.groups || {}).length)
+        this.views.groups = true
+    },
+
+    async refreshScenes() {
+      this.loading.scenes = true
+
+      try {
+        this.scenes = Object.values(await this.request('zwave.get_scenes'))
+            .filter((scene) => scene.scene_id)
+            .reduce((scenes, scene) => {
+              scenes[scene.scene_id] = scene
+              return scenes
+            }, {})
+      } finally {
+        this.loading.scenes = false
+      }
+
+      if (Object.keys(this.scenes || {}).length)
+        this.views.values = true
+    },
+
+    async refreshValues(type) {
+      this.loading.values = true
+
+      try {
+        this.values[type] = Object.values(await this.request('zwave.get_' + type))
+            .filter((item) => item.id_on_network)
+            .reduce((values, value) => {
+              values[value.id_on_network] = true
+              return values
+            }, {})
+      } finally {
+        this.loading.values = false
+      }
+
+      if (Object.keys(this.values[type]).length)
+        this.views[type] = true
+    },
+
+    async refreshStatus() {
+      this.loading.status = true
+      try {
+        this.status = await this.request('zwave.status')
+      } finally {
+        this.loading.status = false
+      }
+    },
+
+    refresh() {
+      this.views = {
+        nodes: true,
+        scenes: true,
+      }
+
+      this.refreshNodes()
+      this.refreshGroups()
+      this.refreshScenes()
+      this.refreshValues('switches')
+      this.refreshValues('dimmers')
+      this.refreshValues('sensors')
+      this.refreshValues('bulbs')
+      this.refreshValues('doorlocks')
+      this.refreshValues('usercodes')
+      this.refreshValues('thermostats')
+      this.refreshValues('protections')
+      this.refreshValues('battery_levels')
+      this.refreshValues('power_levels')
+      this.refreshValues('node_config')
+      this.refreshStatus()
+    },
+
+    async addScene() {
+      let name = prompt('Scene name')
+      if (name?.length)
+        name = name.trim()
+      if (!name?.length)
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.create_scene', {label: name})
+        await this.refreshScenes()
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async removeScene(sceneId) {
+      if (!confirm('Are you sure that you want to delete this scene?'))
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.remove_scene', {scene_id: sceneId})
+        await this.refreshScenes()
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    onNodeUpdate(event) {
+      this.nodes[event.node.node_id] = event.node
+    },
+
+    onNodeClick(nodeId) {
+      this.selected.nodeId = nodeId === this.selected.nodeId ? undefined : nodeId
+    },
+
+    networkInfoModalOpen() {
+      this.refreshStatus()
+      this.$refs.networkInfoModal.show()
+    },
+
+    onCommandEvent(event) {
+      if (event.error && event.error.length) {
+        this.notify({
+          text: event.state_description + ': ' + event.error_description,
+          error: true,
+        })
+      }
+    },
+
+    async addNode() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.add_node')
+      } finally {
+        this.commandRunning = false
+      }
+
+      await this.refreshNodes()
+    },
+
+    async addToGroup(nodeId, groupId) {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.add_node_to_group', {
+          node_id: nodeId,
+          group_index: groupId,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+
+      await this.refreshGroups()
+    },
+
+    async removeNode() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.remove_node')
+      } finally {
+        this.commandRunning = false
+      }
+
+      await this.refreshNodes()
+    },
+
+    async removeValueFromScene(event) {
+      if (!confirm('Are you sure that you want to remove this value from the scene?'))
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.scene_remove_value', {
+          id_on_network: event.valueId,
+          scene_id: event.sceneId,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+
+      await this.refreshScenes()
+    },
+
+    async renameScene(sceneId) {
+      const scene = this.scenes[sceneId]
+      let name = prompt('New name', scene.label)
+      if (name)
+        name = name.trim()
+      if (!name?.length || name === scene.label)
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.set_scene_label', {
+          new_label: name,
+          scene_id: sceneId,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+
+      await this.refreshScenes()
+    },
+
+    async startNetwork() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.start_network')
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async stopNetwork() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.stop_network')
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async switchAll(state) {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.switch_all', {state: state})
+        this.refresh()
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async cancelCommand() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.cancel_command')
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async killCommand() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.kill_command')
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async setControllerName() {
+      let name = prompt('Controller name')
+      if (name?.length)
+        name = name.trim()
+      if (!name?.length)
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.set_controller_name', {name: name})
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.refresh()
+    },
+
+    async receiveConfiguration() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.receive_configuration')
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.refresh()
+    },
+
+    async createNewPrimary() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.create_new_primary')
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.refresh()
+    },
+
+    async transferPrimaryRole() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.transfer_primary_role')
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.refresh()
+    },
+
+    async healNetwork() {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.heal')
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.refresh()
+    },
+
+    async softReset() {
+      if (!confirm("Are you sure that you want to do a device soft reset? This won't lose network information"))
+        return
+
+      await this.request('zwave.soft_reset')
+    },
+
+    async hardReset() {
+      if (!confirm("Are you sure that you want to do a device soft reset? All network information will be LOST!"))
+        return
+
+      await this.request('zwave.hard_reset')
+    },
+
+    async activateScene(sceneId) {
+      this.commandRunning = true
+      try {
+        await this.request('zwave.activate_scene', {scene_id: sceneId})
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async addValueToScene(event) {
+      if (!this.selected.valueId)
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.scene_add_value', {
+          id_on_network: event.valueId,
+          scene_id: event.sceneId,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.refresh()
+    },
+  },
+
+  mounted() {
+    this.refresh()
+
+    this.subscribe(this.refreshGroups, 'on-zwave-node-group-event',
+        'platypush.message.event.zwave.ZwaveNodeGroupEvent')
+
+    this.subscribe(this.refreshScenes, 'on-zwave-node-scene-event',
+        'platypush.message.event.zwave.ZwaveNodeSceneEvent')
+
+    this.subscribe(this.refreshNodes, 'on-zwave-node-removed-event',
+        'platypush.message.event.zwave.ZwaveNodeRemovedEvent')
+
+    this.subscribe(this.onCommandEvent, 'on-zwave-command-event',
+        'platypush.message.event.zwave.ZwaveCommandEvent')
+
+    this.subscribe(this.refreshStatus, 'on-zwave-network-event',
+        'platypush.message.event.zwave.ZwaveNetworkReadyEvent',
+        'platypush.message.event.zwave.ZwaveNetworkStoppedEvent',
+        'platypush.message.event.zwave.ZwaveNetworkErrorEvent',
+        'platypush.message.event.zwave.ZwaveNetworkResetEvent')
+
+    this.subscribe(this.onNodeUpdate, 'on-zwave-node-update-event',
+        'platypush.message.event.zwave.ZwaveNodeEvent',
+        'platypush.message.event.zwave.ZwaveNodeAddedEvent',
+        'platypush.message.event.zwave.ZwaveNodeRenamedEvent',
+        'platypush.message.event.zwave.ZwaveNodeReadyEvent',
+        'platypush.message.event.zwave.ZwaveValueAddedEvent',
+        'platypush.message.event.zwave.ZwaveValueChangedEvent',
+        'platypush.message.event.zwave.ZwaveValueRemovedEvent',
+        'platypush.message.event.zwave.ZwaveValueRefreshedEvent')
+  },
+
+  unmounted() {
+    [
+      'on-zwave-node-group-event', 'on-zwave-node-scene-event', 'on-zwave-node-removed-event', 'on-zwave-command-event',
+      'on-zwave-network-event', 'on-zwave-node-update-event'
+    ].forEach((eventType) => this.unsubscribe(eventType))
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.zwave-container {
+  height: 100%;
+  padding: 0 .5em;
+  background: $container-bg;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+
+  .view-options {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    padding: 1em 0;
+
+    .view-selector {
+      display: inline-flex;
+    }
+
+    .buttons {
+      display: inline-flex;
+    }
+
+    select {
+      width: 100%;
+      border-radius: 1em;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Zwave/Node.vue b/platypush/backend/http/webapp/src/components/panels/Zwave/Node.vue
new file mode 100644
index 00000000..7e96fe6f
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Zwave/Node.vue
@@ -0,0 +1,373 @@
+<template>
+  <div class="item node" :class="{selected: selected}">
+    <div class="row name vertical-center" :class="{selected: selected}"
+         v-text="node.name && node.name.length ? node.name : `<Node ${node.node_id}>`" @click="$emit('select')" />
+
+    <div class="params" v-if="selected">
+      <div class="row">
+        <div class="param-name">Name</div>
+        <div class="param-value">
+          <div :class="{hidden: !editMode.name}">
+            <form ref="nameForm" @submit.prevent="editName">
+              <label>
+                <input type="text" name="name" :value="node.name" :disabled="commandRunning">
+              </label>
+
+              <span class="buttons">
+                <button type="button" class="btn btn-default" @click="editMode.name = false">
+                  <i class="fas fa-times" />
+                </button>
+
+                <button type="submit" class="btn btn-default" :disabled="commandRunning">
+                  <i class="fa fa-check" />
+                </button>
+              </span>
+            </form>
+          </div>
+
+          <div :class="{hidden: editMode.name}">
+            <span v-text="node.name?.length ? node.name : `<Node ${node.node_id}>`" />
+            <span class="buttons">
+              <button type="button" class="btn btn-default" @click="onEditMode('name')" :disabled="commandRunning">
+                <i class="fa fa-edit"></i>
+              </button>
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div class="row" v-if="node.location && node.location.length">
+        <div class="param-name">Location</div>
+        <div class="param-value" v-text="node.location" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Type</div>
+        <div class="param-value" v-text="node.type" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Role</div>
+        <div class="param-value" v-text="node.role" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Node ID</div>
+        <div class="param-value" v-text="node.node_id" />
+      </div>
+
+      <div class="row" v-if="node.neighbours.length">
+        <div class="param-name">Neighbours</div>
+        <div class="param-value">
+          <div class="row pull-right" v-for="(neighbour, i) in node.neighbours" :key="i" v-text="neighbour" />
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="param-name">Is Ready</div>
+        <div class="param-value" v-text="node.is_ready" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Is Failed</div>
+        <div class="param-value" v-text="node.is_failed" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Product ID</div>
+        <div class="param-value" v-text="node.manufacturer_id" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Product Type</div>
+        <div class="param-value" v-text="node.product_type" />
+      </div>
+
+      <div class="row" v-if="node.product_name?.length">
+        <div class="param-name">Product Name</div>
+        <div class="param-value" v-text="node.product_name" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Manufacturer ID</div>
+        <div class="param-value" v-text="node.manufacturer_id" />
+      </div>
+
+      <div class="row" v-if="node.manufacturer_name?.length">
+        <div class="param-name">Manufacturer Name</div>
+        <div class="param-value" v-text="node.manufacturer_name" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Capabilities</div>
+        <div class="param-value" v-text="node.capabilities.join(', ')" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Command Classes</div>
+        <div class="param-value" v-text="node.command_classes.join(', ')" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Groups</div>
+        <div class="param-value" v-text="Object.values(node.groups).map((g) => g.label || '').join(', ')" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Home ID</div>
+        <div class="param-value" v-text="node.home_id.toString(16)" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Is Awake</div>
+        <div class="param-value" v-text="node.is_awake" />
+      </div>
+
+      <div class="row">
+        <div class="param-name">Is Locked</div>
+        <div class="param-value" v-text="node.is_locked" />
+      </div>
+
+      <div class="row" v-if="node.last_update">
+        <div class="param-name">Last Update</div>
+        <div class="param-value" v-text="node.last_update" />
+      </div>
+
+      <div class="row" v-if="node.last_update">
+        <div class="param-name">Max Baud Rate</div>
+        <div class="param-value" v-text="node.max_baud_rate" />
+      </div>
+
+      <div class="section actions">
+        <div class="header">
+          <div class="title">Actions</div>
+        </div>
+
+        <div class="body">
+          <div class="row error" v-if="node.is_failed" @click="removeFailedNode">
+            <div class="param-name">Remove Failed Node</div>
+            <div class="param-value">
+              <i class="fa fa-trash" />
+            </div>
+          </div>
+
+          <div class="row error" v-if="node.is_failed" @click="replaceFailedNode">
+            <div class="param-name">Replace Failed Node</div>
+            <div class="param-value">
+              <i class="fa fa-sync-alt" />
+            </div>
+          </div>
+
+          <div class="row" @click="heal">
+            <div class="param-name">Heal Node</div>
+            <div class="param-value">
+              <i class="fas fa-wrench" />
+            </div>
+          </div>
+
+          <div class="row" @click="replicationSend">
+            <div class="param-name">Replicate info to secondary controller</div>
+            <div class="param-value">
+              <i class="fa fa-clone" />
+            </div>
+          </div>
+
+          <div class="row" @click="requestNetworkUpdate">
+            <div class="param-name">Request network update</div>
+            <div class="param-value">
+              <i class="fas fa-wifi" />
+            </div>
+          </div>
+
+          <div class="row" @click="requestNeighbourUpdate">
+            <div class="param-name">Request neighbours update</div>
+            <div class="param-value">
+              <i class="fas fa-network-wired" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Utils from "@/Utils";
+
+export default {
+  name: "Node",
+  emits: ['select'],
+  mixins: [Utils],
+
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  data() {
+    return {
+      commandRunning: false,
+      editMode: {
+        name: false,
+      },
+    }
+  },
+
+  methods: {
+    async removeFailedNode() {
+      if (this.commandRunning) {
+        this.notify({
+          text: 'A command is already running'
+        })
+
+        return
+      }
+
+      if (!confirm('Are you sure that you want to remove this node?'))
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.remove_node', {
+          node_id: this.node.node_id,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async replaceFailedNode() {
+      if (this.commandRunning) {
+        this.notify({
+          text: 'A command is already running'
+        })
+
+        return
+      }
+
+      if (!confirm('Are you sure that you want to replace this node?'))
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.replace_node', {
+          node_id: this.node.node_id,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async replicationSend() {
+      if (this.commandRunning) {
+        this.notify({
+          text: 'A command is already running'
+        })
+
+        return
+      }
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.replication_send', {
+          node_id: this.node.node_id,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async requestNetworkUpdate() {
+      if (this.commandRunning) {
+        this.notify({
+          text: 'A command is already running'
+        })
+
+        return
+      }
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.request_network_update', {
+          node_id: this.node.node_id,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    async requestNeighbourUpdate() {
+      if (this.commandRunning) {
+        this.notify({
+          text: 'A command is already running'
+        })
+
+        return
+      }
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.request_node_neighbour_update', {
+          node_id: this.node.node_id,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+    },
+
+    onEditMode(mode) {
+      this.editMode[mode] = true
+      const form = this.$refs[mode + 'Form']
+      const input = form.querySelector('input[type=text]')
+
+      setTimeout(() => {
+        input.focus()
+        input.select()
+      }, 10)
+    },
+
+    async editName(event) {
+      const name = event.target.querySelector('input[name=name]').value
+      this.commandRunning = true
+
+      try {
+        await this.request('zwave.set_node_name', {
+          node_id: this.node.node_id,
+          new_name: name,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.editMode.name = false
+    },
+
+    async heal() {
+      if (this.commandRunning) {
+        console.log('A command is already running')
+        return
+      }
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.node_heal', {
+          node_id: this.node.node_id,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Zwave/Value.vue b/platypush/backend/http/webapp/src/components/panels/Zwave/Value.vue
new file mode 100644
index 00000000..5df9497d
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Zwave/Value.vue
@@ -0,0 +1,224 @@
+<template>
+  <div class="section value">
+    <div class="header">
+      <div class="title">
+        <button class="btn btn-default btn-value-name-edit" title="Edit value name" :disabled="commandRunning"
+                :data-id-on-network="value.id_on_network" @click="editName">
+          <i class="fa fa-edit" />
+        </button>
+        {{ value.label }}
+      </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?.length" />
+          </div>
+
+          <div class="value-edit" v-else>
+            <div :class="['col-' + (value.units?.length ? '11' : '12')]">
+              <div class="list" v-if="value.type === 'List'">
+                <label>
+                  <select @change="onValueChange"
+                          :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>
+                </label>
+              </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 class="value-max" v-text="value.max" />
+                  </div>
+                  <div class="row">
+                    <label>
+                      <input class="slider" type="range" :min="value.min" :max="value.max"
+                             :value="value.data" :data-id-on-network="value.id_on_network"
+                             @change="onValueChange">
+                    </label>
+                  </div>
+                </div>
+                <div class="col-2">
+                  <label>
+                    <input type="text" :data-id-on-network="value.id_on_network" :value="value.data"
+                           @change="onValueChange">
+                  </label>
+                </div>
+              </div>
+
+              <div class="boolean" v-else-if="['Bool', 'Button'].indexOf(value.type) >= 0">
+                <ToggleSwitch :value="value.data" :data-id-on-network="value.id_on_network" @input="onValueChange" />
+              </div>
+
+              <div class="value-data" v-text="value.data" v-else />
+            </div>
+
+            <div class="col-1 unit" v-text="value.units" v-if="value.units?.length" />
+          </div>
+        </div>
+      </div>
+
+      <div class="row" v-if="sceneId != null" style="cursor: pointer"
+           @click="$emit('remove-from-scene', {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" v-if="addValueToSceneItems?.length">
+        <div class="param-name">Add To Scene</div>
+        <div class="param-value">
+          <Dropdown title="Add to scene" icon-class="fa fa-plus">
+            <DropdownItem v-for="(scene, i) in addValueToSceneItems" :key="i"
+                          :text="scene.label" :disabled="commandRunning"
+                          @click="$emit('add-to-scene', {sceneId: scene.scene_id, valueId: value.id_on_network})" />
+          </Dropdown>
+        </div>
+      </div>
+
+      <div class="row" v-if="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>
+</template>
+
+<script>
+import Dropdown from "@/components/elements/Dropdown";
+import DropdownItem from "@/components/elements/DropdownItem";
+import ToggleSwitch from "@/components/elements/ToggleSwitch";
+import Utils from "@/Utils";
+
+export default {
+  name: "Value",
+  components: {Dropdown, DropdownItem, ToggleSwitch},
+  mixins: [Utils],
+  emits: ['remove-from-scene', 'add-to-scene', 'refresh'],
+
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+    node: {
+      type: Object,
+      required: true,
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+    sceneId: {
+      type: Number,
+    },
+    scenes: {
+      type: Object,
+      default: () => { return {} },
+    },
+  },
+
+  data() {
+    return {
+      commandRunning: false,
+    }
+  },
+
+  computed: {
+    addValueToSceneItems() {
+      return Object.values(this.scenes || {}).filter((scene) => {
+        return !(this.value.id_on_network in scene.values)
+      })
+    },
+  },
+
+  methods: {
+    async editName(event) {
+      const value = this.node.values[event.target.parentElement.dataset.idOnNetwork]
+      let name = prompt('New name', value.label)
+      if (name?.length)
+        name = name.trim()
+      if (!name?.length || name === value.label)
+        return
+
+      this.commandRunning = true
+      try {
+        await this.request('zwave.set_value_label', {
+          id_on_network: value.id_on_network,
+          new_label: name,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.$emit('refresh')
+      this.notify({
+        text: 'Value successfully renamed',
+        image: {
+          iconClass: 'fa fa-check'
+        }
+      })
+    },
+
+    async onValueChange(event) {
+      const target = event.target ? event.target : event.event.target.parentElement
+      const value = this.node.values[target.dataset.idOnNetwork]
+      const data = value.type === 'List' ? value.data_items[event.target.value] : (target.value || event.value)
+
+      this.commandRunning = true
+      try {
+        this.request('zwave.set_value', {
+          id_on_network: value.id_on_network,
+          data: data,
+        })
+      } finally {
+        this.commandRunning = false
+      }
+
+      this.$emit('refresh')
+      this.notify({
+        text: 'Value successfully modified',
+        image: {
+          iconClass: 'fa fa-check'
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Zwave/common.scss b/platypush/backend/http/webapp/src/components/panels/Zwave/common.scss
new file mode 100644
index 00000000..c5713946
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Zwave/common.scss
@@ -0,0 +1,225 @@
+@import "vars";
+
+.zwave-container {
+  .no-items {
+    padding: 2em;
+    font-size: 1.5em;
+    color: $no-items-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .node, .scene {
+    .actions {
+      .row {
+        cursor: pointer;
+      }
+    }
+
+    form {
+      margin-bottom: 0;
+    }
+  }
+
+  .params {
+    background: $params-bg;
+    padding-bottom: 1em;
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      padding: 0 1em;
+
+      &:not(:first-child) {
+        padding-top: 1em;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        font-weight: bold;
+        border-bottom: $param-section-header-border;
+      }
+    }
+
+    .row {
+      display: flex;
+      align-items: center;
+      border-radius: 1em;
+      padding: .3em;
+
+      &:nth-child(even) {
+        background: $param-even-row-bg;
+      }
+
+      &:nth-child(odd) {
+        background: $param-odd-row-bg;
+      }
+
+      &:hover {
+        background: $hover-bg;
+      }
+    }
+
+    .param-name {
+      display: inline-flex;
+      width: 40%;
+      margin-left: 1%;
+      vertical-align: top;
+      letter-spacing: .04em;
+    }
+
+    .param-value {
+      display: inline-block;
+      width: 58%;
+      text-align: right;
+
+      .value-edit {
+        display: flex;
+        align-items: center;
+      }
+
+      .value-data {
+        display: inline-block;
+        font-weight: bold;
+      }
+
+      .slider-container {
+        display: flex;
+        align-items: center;
+      }
+
+      .unit {
+        font-size: .8em;
+        margin-left: 1em;
+        display: inline;
+      }
+
+      select {
+        width: 100%;
+        border-radius: 2em;
+      }
+
+      .numeric {
+        input.slider {
+          text-align: left;
+        }
+
+        input[type=text] {
+          text-align: right;
+          width: 100%;
+        }
+
+        .row {
+          background: none;
+          &:hover {
+            background: none;
+          }
+        }
+
+        .value-min, .value-max {
+          width: 50%;
+          font-size: .85em;
+          opacity: .75;
+        }
+
+        .value-min {
+          text-align: left;
+        }
+
+        .value-max {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .btn-default {
+    border: 0;
+    padding: 0 1em;
+
+    &:hover {
+      border: $default-border-2;
+      border-radius: 1em;
+    }
+  }
+
+  .buttons {
+    text-align: right;
+  }
+
+  .view {
+    min-width: 400pt;
+    max-width: 750pt;
+    background: $view-bg;
+    border: $view-border;
+    border-radius: 1.5em;
+    box-shadow: $view-box-shadow;
+  }
+
+  .item {
+    &.selected {
+      box-shadow: $selected-item-box-shadow;
+    }
+
+    .name {
+      padding: 1em;
+      cursor: pointer;
+      text-transform: uppercase;
+      letter-spacing: .06em;
+
+      &.selected {
+        border-radius: 1.5em;
+      }
+    }
+
+    &:hover {
+      background: $hover-bg;
+    }
+
+    &:not(:last-child) {
+      border-bottom: $item-border;
+    }
+
+    &:first-child {
+      border-radius: 1.5em 1.5em 0 0;
+    }
+
+    &:last-child {
+      border-radius: 0 0 1.5em 1.5em;
+    }
+  }
+
+  .btn-value-name-edit {
+    padding: 0;
+  }
+
+  .modal {
+    .section {
+      .header {
+        background: none;
+        padding: .5em 0;
+      }
+
+      .body {
+        padding: 0;
+      }
+    }
+
+    .network-info {
+      min-width: 600pt;
+    }
+  }
+
+  .error {
+    color: $error-color;
+  }
+
+  form {
+    border: none;
+    box-shadow: none;
+    padding: 0;
+    margin: 0;
+  }
+}
diff --git a/platypush/backend/http/webapp/src/components/panels/Zwave/vars.scss b/platypush/backend/http/webapp/src/components/panels/Zwave/vars.scss
new file mode 100644
index 00000000..592fa886
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Zwave/vars.scss
@@ -0,0 +1,12 @@
+$container-bg: #f1f1f1;
+$view-bg: white;
+$view-border: 1px solid #d8d8d8;
+$view-box-shadow: 1px 2px 2px #ccc;
+$item-border: 1px solid #dddddd;
+$no-items-color: #555555;
+$params-bg: white;
+$param-even-row-bg: #ededed;
+$param-odd-row-bg: white;
+$param-section-header-border: 1px solid #e8e8e8;
+$selected-item-box-shadow: 0 2px 4px 0 #bbb;
+$error-color: #aa0000;