-
-
+
diff --git a/platypush/backend/http/webapp/src/components/elements/Slider.vue b/platypush/backend/http/webapp/src/components/elements/Slider.vue
index 286f89a7..6055687e 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 00000000..f19ba488
--- /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 00000000..38b85c46
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Index.vue
@@ -0,0 +1,521 @@
+
+
+
+
+
+
+ Name
+
+
+
+
+
+
+
+
+
+
+
+
+
+ IEEE Address
+
+
+
+
+ Network Address
+
+
+
+
+ Type
+
+
+
+
+ Vendor
+
+ {{ device.definition.vendor }}
+
+
+
+
+ Model
+
+ {{ device.definition.model }}
+
+
+
+
+ Model ID
+
+ {{ device.model_id }}
+
+
+
+
+ Description
+
+ {{ device.definition.description }}
+
+
+
+
+ Software Build ID
+
+ {{ device.software_build_id }}
+
+
+
+
+ Date Code
+
+ {{ device.definition.date_code }}
+
+
+
+
+ Power Source
+
+ {{ device.power_source }}
+
+
+
+
+
+
+
+ Values
+
+
+
+
+
+ {{ value.description }}
+ Color (XY coordinates)
+ Color (Hue/saturation)
+
+
+
+
+
+
+
+
+
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 00000000..8ec3759f
--- /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 00000000..5308a892
--- /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;
+
+
+
+
+
+
+
+ Loading devices...
+ No devices found on the network
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading groups...
+ No groups available on the network
+