forked from platypush/platypush
Migration completed for the zigbee.mqtt web panel
This commit is contained in:
parent
3cf91a3f27
commit
2427cceb5e
5 changed files with 482 additions and 215 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue