lukmangrd
/
platypush
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Migration completed for the zigbee.mqtt web panel

This commit is contained in:
Fabio Manganiello 2021-02-11 23:53:05 +01:00
parent 3cf91a3f27
commit 2427cceb5e
5 changed files with 482 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Device.vue
View File

@ -1,6 +1,24 @@
<template>
<div class="item device" :class="{selected: selected}">
<Loading v-if="loading" />
<Modal class="groups-modal" ref="groupsModal" title="Device groups">
<Loading v-if="loading" />
<form class="content" @submit.prevent="manageGroups">
<div class="groups">
<label class="row group" v-for="(group, id) in groups" :key="id">
<input type="checkbox" :value="id" :checked="associatedGroups.has(parseInt(group.id))">
<span class="name" v-text="group.friendly_name?.length ? group.friendly_name : `[Group #${group.id}]`" />
</label>
</div>
<div class="footer buttons">
<button type="submit">Save</button>
</div>
</form>
</Modal>
<div class="row name header vertical-center" :class="{selected: selected}"
v-text="device.friendly_name || device.ieee_address" @click="$emit('select')" />
@ -159,17 +177,32 @@
</div>
<div class="body">
<div class="row" @click="$refs.groupsModal.show()">
<div class="param-name">Manage groups</div>
<div class="param-value">
<i class="fa fa-network-wired" />
</div>
</div>
<div class="row" @click="otaUpdatesAvailable ? installOtaUpdates() : checkOtaUpdates()">
<div class="param-name" v-if="!otaUpdatesAvailable">Check for updates</div>
<div class="param-name" v-else>Install updates</div>
<div class="param-value">
<i class="fa fa-sync-alt" />
</div>
</div>
<div class="row" @click="remove(false)">
<div class="param-name">Remove Device</div>
<div class="param-value">
<i class="fa fa-trash"></i>
<i class="fa fa-trash" />
</div>
</div>
<div class="row error" @click="remove(true)">
<div class="param-name">Force Remove Device</div>
<div class="param-value">
<i class="fa fa-trash"></i>
<i class="fa fa-trash" />
</div>
</div>
</div>
@ -184,12 +217,13 @@ import Slider from "@/components/elements/Slider";
import ToggleSwitch from "@/components/elements/ToggleSwitch";
import Utils from "@/Utils";
import {ColorConverter} from "@/components/panels/Light/color";
import Modal from "@/components/Modal";
export default {
name: "Device",
components: {ToggleSwitch, Slider, Loading},
components: {Modal, ToggleSwitch, Slider, Loading},
mixins: [Utils],
emits: ['select', 'rename', 'remove'],
emits: ['select', 'rename', 'remove', 'groups-edit'],
props: {
device: {
@ -197,6 +231,11 @@ export default {
required: true,
},
groups: {
type: Object,
default: () => {},
},
selected: {
type: Boolean,
default: false,
@ -208,6 +247,7 @@ export default {
editName: false,
loading: false,
status: {},
otaUpdatesAvailable: false,
}
},
@ -272,7 +312,10 @@ export default {
if (!this.displayedValues.color)
return
const color = this.displayedValues.color.value
const color = this.displayedValues.color?.value
if (!color)
return
if (color.x != null && color.y != null) {
const converter = new ColorConverter({
bri: [this.displayedValues.brightness?.value_min || 0, this.displayedValues.brightness?.value_max || 255],
@ -293,6 +336,13 @@ export default {
return null
},
associatedGroups() {
return new Set(Object.values(this.groups)
.filter((group) => new Set(
(group.members || []).map((member) => member.ieee_address)).has(this.device.ieee_address))
.map((group) => parseInt(group.id)))
},
},
methods: {
@ -423,18 +473,158 @@ export default {
this.loading = false
}
},
async manageGroups(event) {
const groups = [...event.target.querySelectorAll('input[type=checkbox]')].reduce((obj, element) => {
const groupId = parseInt(element.value)
if (element.checked && !this.associatedGroups.has(groupId))
obj.add.add(groupId)
else if (!element.checked && this.associatedGroups.has(groupId))
obj.remove.add(groupId)
return obj
}, {add: new Set(), remove: new Set()})
const editGroups = async (action) => {
await Promise.all([...groups[action]].map(async (groupId) => {
await this.request(`zigbee.mqtt.group_${action}_device`, {
group: this.groups[groupId].friendly_name,
device: this.device.friendly_name?.length ? this.device.friendly_name : this.device.ieee_address,
})
}))
}
this.loading = true
try {
await Promise.all(Object.keys(groups).map(editGroups))
this.$emit('groups-edit', groups)
} finally {
this.loading = false
}
},
async checkOtaUpdates() {
this.loading = true
try {
this.otaUpdatesAvailable = (await this.request('zigbee.mqtt.device_check_ota_updates', {
device: this.device.friendly_name?.length ? this.device.friendly_name : this.device.ieee_address,
})).update_available
if (this.otaUpdatesAvailable)
this.notify({
text: 'A firmware update is available for the device',
image: {
iconClass: 'fa fa-sync-alt',
}
})
else
this.notify({
text: 'The device is up to date',
image: {
iconClass: 'fa fa-check',
}
})
} finally {
this.loading = false
}
},
async installOtaUpdates() {
this.loading = true
try {
await this.request('zigbee.mqtt.device_install_ota_updates', {
device: this.device.friendly_name?.length ? this.device.friendly_name : this.device.ieee_address,
})
} finally {
this.loading = false
}
},
},
created() {
this.refresh()
mounted() {
this.$watch(() => this.selected, (newValue) => {
if (newValue)
this.refresh()
})
this.$watch(() => this.status.update_available, (newValue) => {
this.otaUpdatesAvailable = newValue
})
this.subscribe((event) => {
if (event.device !== this.device.friendly_name && event.device !== this.device.ieee_address)
return
this.status = {...this.status, ...event.properties}
}, `on-property-change-${this.device.ieee_address}`,
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDevicePropertySetEvent')
},
unmounted() {
this.unsubscribe(`on-property-change-${this.device.ieee_address}`)
}
}
</script>
<style lang="scss" scoped>
@import "common";
.groups-modal {
.content {
min-width: 20em;
margin: -2em;
padding: 0;
border: none;
box-shadow: none;
}
.group {
width: 100%;
display: flex;
align-items: center;
padding: .5em 1em !important;
input[type=checkbox] {
margin-right: 1em;
}
}
.groups {
width: 100%;
height: calc(100% - 3.5em);
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
.footer {
width: 100%;
height: 3.5em;
display: flex;
justify-content: right;
align-items: center;
padding: 0;
background: $default-bg-2;
border-top: $default-border-2;
}
}
@media screen and (max-width: $tablet) {
.section.actions {
.row {
flex-direction: row-reverse;
justify-content: left;
.param-name {
width: auto;
}
.param-value {
width: 1.5em;
margin-right: .5em;
}
}
}
}
</style>

117
platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Group.vue
View File

@ -5,48 +5,22 @@
v-text="group.friendly_name" @click="$emit('select')" />
<div class="params" v-if="selected">
<div class="section values">
<div class="section devices">
<div class="header">
<div class="title">Values</div>
<div class="title">Devices</div>
</div>
<div class="body">
<!-- <div class="row" v-for="(value, name) in properties" :key="name">-->
<!-- <div class="param-name" v-text="name"></div>-->
<!-- <div class="param-value">-->
<!-- <div v-if="name === 'state'">-->
<!-- <toggle-switch :value="value" @toggled="toggleState"></toggle-switch>-->
<!-- </div>-->
<!-- <div v-else>-->
<!-- <input type="text" :value="value" :data-name="name" @change="setValue">-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<form>
<label class="row" v-for="(device, id) in devices" :key="id">
<input type="checkbox" :checked="members.has(device.ieee_address)" :value="device.ieee_address"
@change="toggleDevice(device.ieee_address)" />
<span class="label" v-text="device.friendly_name?.length ? device.friendly_name : device.ieee_address" />
</label>
</form>
</div>
</div>
<!-- <div class="section devices">-->
<!-- <div class="header">-->
<!-- <div class="title col-10">Devices</div>-->
<!-- <div class="buttons col-2">-->
<!-- <button class="btn btn-default" title="Add Devices" @click="bus.$emit('openAddToGroupModal')">-->
<!-- <i class="fa fa-plus"></i>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="body">-->
<!-- <div class="row" v-for="device in group.devices">-->
<!-- <div class="col-10" v-text="device.friendly_name"></div>-->
<!-- <div class="buttons col-2">-->
<!-- <button class="btn btn-default" title="Remove from group" @click="removeFromGroup(device.friendly_name)">-->
<!-- <i class="fa fa-trash"></i>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<div class="section actions">
<div class="header">
<div class="title">Actions</div>
@ -74,14 +48,12 @@
<script>
import Loading from "@/components/Loading";
// import ToggleSwitch from "@/components/elements/ToggleSwitch";
import Utils from "@/Utils";
export default {
name: "Group",
emits: ['select', 'remove'],
emits: ['select', 'remove', 'edit'],
mixins: [Utils],
// components: {Loading, ToggleSwitch},
components: {Loading},
props: {
@ -90,6 +62,11 @@ export default {
required: true,
},
devices: {
type: Object,
default: () => { return {} },
},
selected: {
type: Boolean,
default: false,
@ -99,9 +76,24 @@ export default {
data() {
return {
loading: false,
values: {},
}
},
computed: {
devicesByAddress() {
return Object.entries(this.devices).reduce((obj, entry) => {
const device = entry[1]
obj[device.ieee_address] = device
return obj
}, {})
},
members() {
return new Set((this.group.members || []).map((member) => member.ieee_address))
},
},
methods: {
async remove() {
if (!confirm('Are you sure that you want to remove this group?'))
@ -117,10 +109,11 @@ export default {
},
async rename() {
const name = prompt('New group name', this.group.friendly_name).trim()
if (!name.length)
let name = prompt('New group name', this.group.friendly_name)
if (!name?.length)
return
name = name.trim()
this.loading = true
try {
@ -134,10 +127,52 @@ export default {
this.loading = false
}
},
}
async toggleDevice(ieeeAddress) {
const device = this.devicesByAddress[ieeeAddress]
const name = device.friendly_name?.length ? device.friendly_name : ieeeAddress
const method = this.members.has(ieeeAddress) ? 'remove' : 'add'
this.loading = true
try {
await this.request(`zigbee.mqtt.group_${method}_device`, {
group: this.group.friendly_name,
device: name,
})
this.$emit('edit', {device: name, method: method})
} finally {
this.loading = false
}
},
},
}
</script>
<style lang="scss" scoped>
@import "common";
.section {
padding-left: 1em !important;
}
form {
margin: 0;
padding: 0;
border: none;
box-shadow: none;
.row {
background: none !important;
&:hover {
background: $hover-bg !important;
}
.label {
margin-left: .75em;
font-weight: normal;
}
}
}
</style>

356
platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/Index.vue
View File

@ -2,7 +2,56 @@
<div class="zigbee-container">
<Loading v-if="loading" />
<!-- Include group modal -->
<Modal title="Network Info" ref="infoModal">
<div class="info-body" v-if="status.info">
<div class="row">
<div class="param-name">State</div>
<div class="param-value" v-text="status.state" />
</div>
<div class="row">
<div class="param-name">Permit Join</div>
<div class="param-value" v-text="status.info.permit_join" />
</div>
<div class="row" v-if="status.info.network">
<div class="param-name">Network Channel</div>
<div class="param-value" v-text="status.info.network.channel" />
</div>
<div class="row">
<div class="param-name">Zigbee2MQTT Version</div>
<div class="param-value" v-text="status.info.version" />
</div>
<div class="row" v-if="status.info.config?.mqtt">
<div class="param-name">MQTT Server</div>
<div class="param-value" v-text="status.info.config.mqtt.server" />
</div>
<div class="row" v-if="status.info.config?.serial">
<div class="param-name">Serial Port</div>
<div class="param-value" v-text="status.info.config.serial.port" />
</div>
<div class="row" v-if="status.info.coordinator?.type">
<div class="param-name">Firmware Type</div>
<div class="param-value" v-text="status.info.coordinator.type" />
</div>
<div class="row" v-if="status.info.coordinator?.meta">
<div class="param-name">Firmware Version</div>
<div class="param-value">
{{ status.info.coordinator.meta.maintrel }}.{{ status.info.coordinator.meta.majorrel }}.{{ status.info.coordinator.meta.minorrel }}
</div>
</div>
<div class="row" v-if="status.info.coordinator?.meta">
<div class="param-name">Firmware Revision</div>
<div class="param-value" v-text="status.info.coordinator.meta.revision" />
</div>
</div>
</Modal>
<div class="view-options">
<div class="view-selector col-s-8 col-m-9 col-l-10">
@ -23,7 +72,10 @@
</button>
<Dropdown ref="networkCommandsDropdown" icon-class="fa fa-cog" title="Network commands">
<DropdownItem text="Permit Join" :disabled="loading" @click="permitJoin(true)" />
<DropdownItem text="Network Info" :disabled="loading" @click="$refs.infoModal.show()" />
<DropdownItem text="Permit Join" :disabled="loading" @click="permitJoin(true)"
v-if="!status.info?.permit_join" />
<DropdownItem text="Disable Join" :disabled="loading" @click="permitJoin(false)" v-else/>
<DropdownItem text="Factory Reset" :disabled="loading" @click="factoryReset" />
</Dropdown>
@ -41,11 +93,9 @@
</div>
<Device v-for="(device, id) in devices" :key="id"
:device="device" :selected="selected.deviceId === id"
:device="device" :groups="groups" :selected="selected.deviceId === id"
@select="selected.deviceId = selected.deviceId === id ? null : id"
@rename="refreshDevices" @remove="refreshDevices" />
<!-- <dropdown ref="addToGroupDropdown" :items="addToGroupDropdownItems"></dropdown>-->
@rename="refreshDevices" @remove="refreshDevices" @groups-edit="refreshGroups" />
</div>
<div class="view groups" v-else-if="selected.view === 'groups'">
@ -54,10 +104,10 @@
<div class="empty" v-else>No groups available on the network</div>
</div>
<Group v-for="(group, id) in groups" :key="id" :group="group"
<Group v-for="(group, id) in groups" :key="id" :group="group" :devices="devices"
:selected="selected.groupId === id"
@select="selected.groupId = selected.groupId === id ? null : id"
@rename="refreshGroups" @remove="refreshGroups" />
@rename="refreshGroups" @remove="refreshGroups" @edit="refreshGroups" />
</div>
</div>
</div>
@ -71,17 +121,18 @@ import Utils from "@/Utils"
import Device from "@/components/panels/ZigbeeMqtt/Device";
import Group from "@/components/panels/ZigbeeMqtt/Group";
import Modal from "@/components/Modal";
export default {
name: "ZigbeeMqtt",
components: {Dropdown, DropdownItem, Loading, Device, Group},
components: {Modal, Dropdown, DropdownItem, Loading, Device, Group},
mixins: [Utils],
data() {
return {
status: {},
devices: {},
groups: {},
status: {},
loading: false,
selected: {
view: 'devices',
@ -100,34 +151,6 @@ export default {
}
},
computed: {
// addToGroupDropdownItems: function() {
// const self = this
// return Object.values(this.groups).filter((group) => {
// return !group.values || !group.values.length || !(this.selected.valueId in this.scene.values)
// }).map((group) => {
// return {
// text: group.name,
// disabled: this.loading,
// click: async function () {
// if (!self.selected.valueId) {
// return
// }
//
// self.loading = true
// await this.request('zwave.scene_add_value', {
// id_on_network: self.selected.valueId,
// scene_id: group.scene_id,
// })
//
// self.loading = false
// self.refresh()
// },
// }
// })
// },
},
methods: {
async refreshDevices() {
this.loading = true
@ -151,17 +174,29 @@ export default {
async refreshGroups() {
this.loading = true
this.groups = (await this.request('zigbee.mqtt.groups')).reduce((groups, group) => {
groups[group.id] = group
return groups
}, {})
try {
this.groups = (await this.request('zigbee.mqtt.groups')).reduce((groups, group) => {
groups[group.id] = group
return groups
}, {})
} finally {
this.loading = false
}
},
this.loading = false
async refreshInfo() {
this.loading = true
try {
this.status = await this.request('zigbee.mqtt.info')
} finally {
this.loading = false
}
},
refresh() {
this.refreshDevices()
this.refreshGroups()
this.refreshInfo()
},
updateProperties(device, props) {
@ -184,31 +219,17 @@ export default {
await this.refreshGroups()
},
async startNetwork() {
this.loading = true
try {
await this.request('zigbee.mqtt.start_network')
} finally {
this.loading = false
}
},
async stopNetwork() {
this.loading = true
try {
await this.request('zigbee.mqtt.stop_network')
} finally {
this.loading = false
}
},
async permitJoin(permit) {
let seconds = prompt('Join allow period in seconds (0 or empty for no time limits)', '60')
seconds = seconds.length ? parseInt(seconds) : null
this.loading = true
const args = {permit: !!permit}
if (permit) {
let seconds = prompt('Join allow period in seconds (0 or empty for no time limits)', '60')
args.seconds = seconds.length ? parseInt(seconds) : null
}
this.loading = true
try {
await this.request('zigbee.mqtt.permit_join', {permit: !!permit, timeout: seconds || null})
await this.request('zigbee.mqtt.permit_join', args)
setTimeout(this.refreshInfo, 1000)
} finally {
this.loading = false
}
@ -228,11 +249,6 @@ export default {
}
},
// openAddToGroupDropdown(event) {
// this.selected.valueId = event.valueId
// openDropdown(this.$refs.addToGroupDropdown)
// },
async addToGroup(device, group) {
this.loading = true
await this.request('zigbee.mqtt.group_add_device', {
@ -248,103 +264,93 @@ export default {
self.refreshGroups()
}, 100)
},
async removeNodeFromGroup(event) {
if (!confirm('Are you sure that you want to remove this value from the group?')) {
return
}
this.loading = true
await this.request('zigbee.mqtt.group_remove_device', {
group: event.group,
device: event.device,
})
this.loading = false
},
},
created() {
// const self = this
// this.bus.$on('refresh', this.refresh)
// this.bus.$on('refreshDevices', this.refreshDevices)
// this.bus.$on('refreshGroups', this.refreshGroups)
// this.bus.$on('openAddToGroupModal', () => {self.modal.group.visible = true})
// this.bus.$on('openAddToGroupDropdown', this.openAddToGroupDropdown)
// this.bus.$on('removeFromGroup', this.removeNodeFromGroup)
//
// registerEventHandler(() => {
// createNotification({
// text: 'WARNING: The controller is now offline',
// error: true,
// })
// }, 'platypush.message.event.zigbee.mqtt.ZigbeeMqttOfflineEvent')
//
// registerEventHandler(() => {
// createNotification({
// text: 'The controller is now online',
// iconClass: 'fas fa-check',
// })
// }, 'platypush.message.event.zigbee.mqtt.ZigbeeMqttOfflineEvent')
//
// registerEventHandler(() => {
// createNotification({
// text: 'Failed to remove the device',
// error: true,
// })
// }, 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceRemovedFailedEvent')
//
// registerEventHandler(() => {
// createNotification({
// text: 'Failed to add the group',
// error: true,
// })
// }, 'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupAddedFailedEvent')
//
// registerEventHandler(() => {
// createNotification({
// text: 'Failed to remove the group',
// error: true,
// })
// }, 'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupRemovedFailedEvent')
//
// registerEventHandler(() => {
// createNotification({
// text: 'Failed to remove the devices from the group',
// error: true,
// })
// }, 'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupRemoveAllFailedEvent')
//
// registerEventHandler((event) => {
// createNotification({
// text: 'Unhandled Zigbee error: ' + (event.error || '[Unknown error]'),
// error: true,
// })
// }, 'platypush.message.event.zigbee.mqtt.ZigbeeMqttErrorEvent')
//
// registerEventHandler((event) => {
// self.updateProperties(event.device, event.properties)
// }, 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDevicePropertySetEvent')
//
// registerEventHandler(this.refresh,
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttOnlineEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDevicePairingEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceConnectedEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceBannedEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceRemovedEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceWhitelistedEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceRenamedEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceBindEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceUnbindEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupAddedEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupRemovedEvent',
// 'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupRemoveAllEvent',
// )
this.subscribe(() => {
this.notify({
text: 'WARNING: The controller is offline',
error: true,
})
}, 'on-zigbee-offline', 'platypush.message.event.zigbee.mqtt.ZigbeeMqttOfflineEvent')
this.subscribe(() => {
this.notify({
text: 'The controller is now online',
iconClass: 'fas fa-check',
})
}, 'on-zigbee-online', 'platypush.message.event.zigbee.mqtt.ZigbeeMqttOnlineEvent')
this.subscribe(() => {
this.notify({
text: 'Failed to remove the device',
error: true,
})
}, 'on-zigbee-device-remove-failed', 'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceRemovedFailedEvent')
this.subscribe(() => {
this.notify({
text: 'Failed to add the group',
error: true,
})
}, 'on-zigbee-group-add-failed', 'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupAddedFailedEvent')
this.subscribe(() => {
this.notify({
text: 'Failed to remove group',
error: true,
})
}, 'on-zigbee-group-remove-failed', 'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupRemovedFailedEvent')
this.subscribe(() => {
this.notify({
text: 'Failed to remove the devices from group',
error: true,
})
}, 'on-zigbee-remove-all-failed',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupRemoveAllFailedEvent')
this.subscribe((event) => {
this.notify({
text: event.error || '[Unknown error]',
error: true,
})
}, 'on-zigbee-error', 'platypush.message.event.zigbee.mqtt.ZigbeeMqttErrorEvent')
this.subscribe(this.refresh, 'on-zigbee-device-update',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttOnlineEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDevicePairingEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceConnectedEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceBannedEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceRemovedEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceWhitelistedEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceRenamedEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceBindEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttDeviceUnbindEvent',
)
this.subscribe(this.refreshGroups, 'on-zigbee-group-update',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupAddedEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupRemovedEvent',
'platypush.message.event.zigbee.mqtt.ZigbeeMqttGroupRemoveAllEvent',
)
},
mounted() {
this.refresh()
},
unmounted() {
this.unsubscribe('on-zigbee-error')
this.unsubscribe('on-zigbee-remove-all-failed')
this.unsubscribe('on-zigbee-group-remove-failed')
this.unsubscribe('on-zigbee-group-add-failed')
this.unsubscribe('on-zigbee-device-remove-failed')
this.unsubscribe('on-zigbee-online')
this.unsubscribe('on-zigbee-offline')
this.unsubscribe('on-zigbee-device-update')
this.unsubscribe('on-zigbee-group-update')
},
}
</script>
@ -515,5 +521,37 @@ export default {
}
}
}
.info-body {
margin: -2em;
padding: 0;
.row {
padding: 1em .5em;
.param-name {
font-weight: bold;
}
}
}
@media screen and (max-width: $tablet) {
.info-body {
width: 100vw;
}
}
@media screen and (min-width: $tablet) {
.info-body {
width: 80vw;
}
}
@media screen and (min-width: $desktop) {
.info-body {
width: 60vw;
max-width: 30em;
}
}
}
</style>

18
platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/common.scss
View File

@ -1,13 +1,8 @@
@import "vars";
.zigbee-container {
.view {
.params, .info-body {
.row {
display: flex;
align-items: center;
border-radius: 1em;
padding: .3em;
&:nth-child(even) {
background: $param-even-row-bg;
}
@ -15,6 +10,15 @@
&:nth-child(odd) {
background: $param-odd-row-bg;
}
}
}
.view, .info-body {
.row {
display: flex;
align-items: center;
border-radius: 1em;
padding: .3em;
&:hover {
background: $hover-bg;
@ -71,7 +75,7 @@
.params {
.section {
padding: 0;
padding: 1.5em 0 0 0;
}
}

2
platypush/backend/http/webapp/src/components/panels/ZigbeeMqtt/vars.scss
View File

@ -9,5 +9,5 @@ $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-bg: #f9fafa;
$header-height: 3.5em;