From 86e6ffd18db1163bca9f95270dff35496a7511c8 Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Mon, 8 Feb 2021 02:04:59 +0100 Subject: [PATCH] Zigbee web panel migration [WIP] --- .../backend/http/webapp/package-lock.json | 160 +++--- .../http/webapp/public/icons/z-wave.png | Bin 0 -> 4034 bytes .../http/webapp/public/icons/zigbee.svg | 5 + .../backend/http/webapp/src/assets/icons.json | 3 + .../http/webapp/src/components/Nav.vue | 1 + .../src/components/elements/DropdownItem.vue | 6 +- .../webapp/src/components/elements/Slider.vue | 22 +- .../components/panels/ZigbeeMqtt/Device.vue | 498 +++++++++++++++++ .../components/panels/ZigbeeMqtt/Index.vue | 521 ++++++++++++++++++ .../components/panels/ZigbeeMqtt/common.scss | 102 ++++ .../components/panels/ZigbeeMqtt/vars.scss | 13 + 11 files changed, 1243 insertions(+), 88 deletions(-) create mode 100644 platypush/backend/http/webapp/public/icons/z-wave.png create mode 100644 platypush/backend/http/webapp/public/icons/zigbee.svg create mode 100644 platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Device.vue create mode 100644 platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Index.vue create mode 100644 platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/common.scss create mode 100644 platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/vars.scss diff --git a/platypush/backend/http/webapp/package-lock.json b/platypush/backend/http/webapp/package-lock.json index a5bbf54930..74cb6386f0 100644 --- a/platypush/backend/http/webapp/package-lock.json +++ b/platypush/backend/http/webapp/package-lock.json @@ -1745,6 +1745,16 @@ "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==", "dev": true }, + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "optional": true, + "requires": { + "color-convert": "^2.0.1" + } + }, "cacache": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz", @@ -1771,6 +1781,34 @@ "unique-filename": "^1.1.1" } }, + "chalk": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", + "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "optional": true, + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, + "optional": true + }, "find-cache-dir": { "version": "3.3.1", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz", @@ -1792,6 +1830,25 @@ "path-exists": "^4.0.0" } }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, "locate-path": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", @@ -1856,6 +1913,16 @@ "minipass": "^3.1.1" } }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + }, "terser-webpack-plugin": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz", @@ -1872,6 +1939,18 @@ "terser": "^4.6.12", "webpack-sources": "^1.4.3" } + }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.1.2", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz", + "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + } } } }, @@ -11741,87 +11820,6 @@ } } }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.0.0-rc.1", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.1.tgz", - "integrity": "sha512-yR+BS90EOXTNieasf8ce9J3TFCpm2DGqoqdbtiwQ33hon3FyIznLX7sKavAq1VmfBnOeV6It0Htg4aniv8ph1g==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz", - "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "vue-router": { "version": "4.0.0-rc.3", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.0-rc.3.tgz", diff --git a/platypush/backend/http/webapp/public/icons/z-wave.png b/platypush/backend/http/webapp/public/icons/z-wave.png new file mode 100644 index 0000000000000000000000000000000000000000..df9c95505947f6c5ddf9963c8b0448402a65c8c6 GIT binary patch literal 4034 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 M$Yl$O`H6~u11&`Ok^lez literal 0 HcmV?d00001 diff --git a/platypush/backend/http/webapp/public/icons/zigbee.svg b/platypush/backend/http/webapp/public/icons/zigbee.svg new file mode 100644 index 0000000000..b7cf73a1b4 --- /dev/null +++ b/platypush/backend/http/webapp/public/icons/zigbee.svg @@ -0,0 +1,5 @@ + + + Zigbee icon + + diff --git a/platypush/backend/http/webapp/src/assets/icons.json b/platypush/backend/http/webapp/src/assets/icons.json index 058e1da5fa..d6a572e545 100644 --- a/platypush/backend/http/webapp/src/assets/icons.json +++ b/platypush/backend/http/webapp/src/assets/icons.json @@ -26,6 +26,9 @@ }, "rtorrent": { "class": "fa fa-magnet" + }, + "zigbee.mqtt": { + "imgUrl": "/icons/zigbee.svg" } } } diff --git a/platypush/backend/http/webapp/src/components/Nav.vue b/platypush/backend/http/webapp/src/components/Nav.vue index 14075851e2..045218baec 100644 --- a/platypush/backend/http/webapp/src/components/Nav.vue +++ b/platypush/backend/http/webapp/src/components/Nav.vue @@ -11,6 +11,7 @@ + name diff --git a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue index 659816a140..d33ffa126c 100644 --- a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue +++ b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue @@ -1,9 +1,9 @@ diff --git a/platypush/backend/http/webapp/src/components/elements/Slider.vue b/platypush/backend/http/webapp/src/components/elements/Slider.vue index 286f89a74e..6055687e7e 100644 --- a/platypush/backend/http/webapp/src/components/elements/Slider.vue +++ b/platypush/backend/http/webapp/src/components/elements/Slider.vue @@ -4,6 +4,8 @@ @change="$emit('input', $event)" @mouseup="$emit('mouseup', $event)" @input="$emit('input', $event)" @mousedown="$emit('mousedown', $event)" @touch="$emit('input', $event)" @touchstart="$emit('mousedown', $event)" @touchend="$emit('mouseup', $event)"> + + @@ -25,6 +27,11 @@ export default { type: Array, default: () => [0, 100], }, + + withLabel: { + type: Boolean, + default: false, + } }, } @@ -62,14 +69,21 @@ export default { &[disabled] { &::-webkit-progress-value, &::-moz-range-progress { - background: none; + opacity: .5; } &::-webkit-slider-thumb, &::-moz-range-thumb { - display: none; - width: 0; + opacity: .4; } } } - \ No newline at end of file + +label { + position: relative; + .label { + font-weight: normal; + text-align: center; + } +} + diff --git a/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Device.vue b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Device.vue new file mode 100644 index 0000000000..f19ba4888a --- /dev/null +++ b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Device.vue @@ -0,0 +1,498 @@ + + + + + diff --git a/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Index.vue b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Index.vue new file mode 100644 index 0000000000..38b85c46cf --- /dev/null +++ b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Index.vue @@ -0,0 +1,521 @@ + + + + + diff --git a/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/common.scss b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/common.scss new file mode 100644 index 0000000000..8ec3759fac --- /dev/null +++ b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/common.scss @@ -0,0 +1,102 @@ +@import "vars"; + +.zigbee-container { + .view { + .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; + } + } + } + + .row { + .param-name { + display: inline-flex; + width: 40%; + margin-left: 1%; + vertical-align: top; + letter-spacing: .04em; + } + + .param-value { + display: inline-flex; + width: 58%; + justify-content: right; + align-items: center; + + .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%; + } + + .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; + } + } + } + } + + select { + width: 100%; + } +} diff --git a/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/vars.scss b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/vars.scss new file mode 100644 index 0000000000..5308a89240 --- /dev/null +++ b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/vars.scss @@ -0,0 +1,13 @@ +$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: #f0f0f0; +$param-odd-row-bg: white; +$param-section-header-border: 1px solid #e8e8e8; +$selected-item-box-shadow: 0 2px 4px 0 #bbb; +$error-color: #aa0000; +$header-bg: #f8f8f8; +$header-height: 3.5em;