2020-11-30 20:57:00 +01:00
|
|
|
<template>
|
2020-12-03 00:59:35 +01:00
|
|
|
<Loading v-if="loading" />
|
|
|
|
<LightPlugin plugin-name="light.hue" :config="config" :lights="lights" :groups="groups" :scenes="scenes"
|
|
|
|
:animations="animations" :initial-group="initialGroup" :loading-groups="loadingGroups"
|
2020-12-15 21:32:39 +01:00
|
|
|
:color-converter="colorConverter" @group-toggle="toggleGroup" @light-changed="onLightChanged"
|
2020-12-14 02:13:55 +01:00
|
|
|
@light-toggle="toggleLight" @set-light="setLight" @set-group="setGroup" @select-scene="setScene"
|
2020-12-15 00:01:28 +01:00
|
|
|
@start-animation="startAnimation" @stop-animation="stopAnimation" @refresh="refresh(true)"/>
|
2020-11-30 20:57:00 +01:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-12-03 00:59:35 +01:00
|
|
|
import LightPlugin from "@/components/panels/Light/Index";
|
2020-12-09 21:16:07 +01:00
|
|
|
import LightUtils from "@/components/panels/Light/Utils";
|
|
|
|
import { ColorConverter } from "@/components/panels/Light/color"
|
2020-12-03 00:59:35 +01:00
|
|
|
import Utils from "@/Utils";
|
|
|
|
import Loading from "@/components/Loading";
|
2020-11-30 20:57:00 +01:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "LightHue",
|
2020-12-03 00:59:35 +01:00
|
|
|
components: {Loading, LightPlugin},
|
2020-12-09 21:16:07 +01:00
|
|
|
mixins: [Utils, LightUtils],
|
2020-12-03 00:59:35 +01:00
|
|
|
props: {
|
|
|
|
config: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
loading: false,
|
2020-12-09 21:16:07 +01:00
|
|
|
colorConverter: new ColorConverter({
|
|
|
|
hue: [0, 65535],
|
|
|
|
sat: [0, 255],
|
|
|
|
bri: [0, 255],
|
|
|
|
ct: [150, 500],
|
|
|
|
})
|
2020-12-03 00:59:35 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
initialGroup() {
|
|
|
|
if (!this.config.groups || !Object.keys(this.config.groups).length)
|
|
|
|
return null
|
|
|
|
|
|
|
|
const group = this.config.groups[0]
|
|
|
|
if (group in this.groups)
|
|
|
|
return this.groups[group].id
|
|
|
|
else if (group in this.groupsByName)
|
|
|
|
return this.groupsByName[group].id
|
|
|
|
return null
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
async getLights() {
|
|
|
|
return await this.request('light.hue.get_lights')
|
|
|
|
},
|
|
|
|
|
|
|
|
async getGroups() {
|
|
|
|
return Object.entries(await this.request('light.hue.get_groups'))
|
|
|
|
.filter((group) => !group[1].recycle && group[1].type.toLowerCase() === 'room')
|
|
|
|
.reduce((obj, [id, group]) => {
|
|
|
|
obj[id] = group
|
|
|
|
return obj
|
|
|
|
}, {})
|
|
|
|
},
|
|
|
|
|
|
|
|
async getScenes() {
|
2020-12-09 21:16:07 +01:00
|
|
|
return Object.entries(await this.request('light.hue.get_scenes'))
|
|
|
|
.filter((scene) => !scene[1].recycle && scene[1].type.toLowerCase() === 'lightscene')
|
|
|
|
.reduce((obj, [id, scene]) => {
|
|
|
|
obj[id] = scene
|
|
|
|
return obj
|
|
|
|
}, {})
|
2020-12-03 00:59:35 +01:00
|
|
|
},
|
|
|
|
|
2020-12-14 02:13:55 +01:00
|
|
|
async getAnimations() {
|
|
|
|
return await this.request('light.hue.get_animations')
|
|
|
|
},
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
async toggleGroup(group) {
|
2020-12-09 21:16:07 +01:00
|
|
|
let groups = Object.values(this.groups)
|
|
|
|
let args = {
|
|
|
|
groups: groups.map((group) => group.name)
|
|
|
|
}
|
2020-12-03 00:59:35 +01:00
|
|
|
|
2020-12-09 21:16:07 +01:00
|
|
|
if (group != null) {
|
|
|
|
groups = [group]
|
|
|
|
args = {
|
|
|
|
groups: [group.name],
|
|
|
|
}
|
|
|
|
}
|
2020-12-03 00:59:35 +01:00
|
|
|
|
2020-12-09 21:16:07 +01:00
|
|
|
await this.groupAction('light.hue.toggle', args, ...groups)
|
|
|
|
await this.refresh(true)
|
|
|
|
},
|
|
|
|
|
|
|
|
async toggleLight(light) {
|
|
|
|
const lights = [light]
|
|
|
|
const args = light != null ? {
|
|
|
|
lights: [light.name],
|
|
|
|
} : {}
|
|
|
|
|
|
|
|
await this.lightAction('light.hue.toggle', args, ...lights)
|
|
|
|
await this.refresh(true)
|
|
|
|
},
|
|
|
|
|
|
|
|
async setLight(event) {
|
|
|
|
let lights = Object.keys(this.lights)
|
|
|
|
const light = event.light
|
|
|
|
const args = {}
|
|
|
|
|
|
|
|
if (light) {
|
|
|
|
args.lights = [light.name]
|
|
|
|
lights = [light]
|
|
|
|
}
|
|
|
|
|
|
|
|
const self = this
|
|
|
|
const requests = Object.entries(event.value).map(([attr, value]) => {
|
|
|
|
let method = null;
|
|
|
|
args.value = value
|
|
|
|
|
|
|
|
switch (attr) {
|
|
|
|
case 'brightness':
|
|
|
|
method = 'light.hue.bri'
|
|
|
|
break
|
|
|
|
|
|
|
|
case 'temperature':
|
|
|
|
method = 'light.hue.ct'
|
|
|
|
break
|
|
|
|
|
|
|
|
case 'xy':
|
|
|
|
method = 'light.hue.xy'
|
|
|
|
break
|
|
|
|
}
|
|
|
|
|
|
|
|
if (method)
|
|
|
|
return self.lightAction(method, args, ...lights)
|
|
|
|
}).filter((req) => req != null)
|
|
|
|
|
|
|
|
await Promise.all(requests)
|
|
|
|
await this.refresh(true)
|
|
|
|
},
|
|
|
|
|
|
|
|
async setGroup(event) {
|
|
|
|
if (!event.groupId)
|
|
|
|
return this.setLight(event)
|
|
|
|
|
|
|
|
const group = this.groups[event.groupId]
|
|
|
|
const args = {
|
|
|
|
groups: [group.name],
|
2020-12-03 00:59:35 +01:00
|
|
|
}
|
2020-12-09 21:16:07 +01:00
|
|
|
|
|
|
|
const self = this
|
|
|
|
const requests = Object.entries(event.value).map(([attr, value]) => {
|
|
|
|
let method = null;
|
|
|
|
args.value = value
|
|
|
|
|
|
|
|
switch (attr) {
|
|
|
|
case 'brightness':
|
|
|
|
method = 'light.hue.bri'
|
|
|
|
break
|
|
|
|
|
|
|
|
case 'temperature':
|
|
|
|
method = 'light.hue.ct'
|
|
|
|
break
|
|
|
|
|
|
|
|
case 'xy':
|
|
|
|
method = 'light.hue.xy'
|
|
|
|
break
|
|
|
|
}
|
|
|
|
|
|
|
|
if (method)
|
2020-12-14 02:13:55 +01:00
|
|
|
return self.groupAction(method, args, group)
|
2020-12-09 21:16:07 +01:00
|
|
|
}).filter((req) => req != null)
|
|
|
|
|
|
|
|
await Promise.all(requests)
|
|
|
|
await this.refresh(true)
|
2020-12-03 00:59:35 +01:00
|
|
|
},
|
|
|
|
|
2020-12-09 21:16:07 +01:00
|
|
|
async setScene(event) {
|
|
|
|
await this.groupAction('light.hue.scene', {
|
|
|
|
name: this.scenes[event.sceneId].name,
|
|
|
|
groups: [this.groups[event.groupId].name],
|
|
|
|
}, this.groups[event.groupId])
|
|
|
|
|
|
|
|
await this.refresh(true)
|
|
|
|
},
|
|
|
|
|
|
|
|
async refresh(background) {
|
|
|
|
if (!background)
|
|
|
|
this.loading = true
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
try {
|
2020-12-14 02:13:55 +01:00
|
|
|
[this.lights, this.groups, this.scenes, this.animations] = await Promise.all([
|
2020-12-03 00:59:35 +01:00
|
|
|
this.getLights(),
|
|
|
|
this.getGroups(),
|
|
|
|
this.getScenes(),
|
2020-12-14 02:13:55 +01:00
|
|
|
this.getAnimations(),
|
2020-12-03 00:59:35 +01:00
|
|
|
])
|
|
|
|
} finally {
|
2020-12-09 21:16:07 +01:00
|
|
|
if (!background)
|
|
|
|
this.loading = false
|
2020-12-03 00:59:35 +01:00
|
|
|
}
|
|
|
|
},
|
2020-12-14 02:13:55 +01:00
|
|
|
|
|
|
|
async startAnimation(event) {
|
|
|
|
await this.request('light.hue.animate', {
|
|
|
|
lights: event.lights,
|
|
|
|
...event.animation,
|
|
|
|
})
|
|
|
|
|
|
|
|
await this.refresh(true)
|
|
|
|
},
|
|
|
|
|
|
|
|
async stopAnimation() {
|
|
|
|
await this.request('light.hue.stop_animation')
|
|
|
|
await this.refresh(true)
|
|
|
|
},
|
2020-12-15 21:32:39 +01:00
|
|
|
|
|
|
|
onLightChanged(event) {
|
|
|
|
this.lights[event.id].state = {
|
|
|
|
...this.lights[event.id].state,
|
|
|
|
...event.state,
|
|
|
|
}
|
|
|
|
},
|
2020-12-03 00:59:35 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
mounted() {
|
|
|
|
this.refresh()
|
|
|
|
},
|
2020-11-30 20:57:00 +01:00
|
|
|
}
|
|
|
|
</script>
|