119 lines
3.4 KiB
JavaScript
119 lines
3.4 KiB
JavaScript
Vue.component('light-hue-group', {
|
|
template: '#tmpl-light-hue-group',
|
|
props: ['id','name'],
|
|
});
|
|
|
|
Vue.component('light-hue-group-controller', {
|
|
template: '#tmpl-light-hue-group-controller',
|
|
props: ['id','groups','value','collapsed'],
|
|
computed: {
|
|
lights: function() {
|
|
return this.groups[this.id].lights;
|
|
},
|
|
|
|
name: function() {
|
|
return this.groups[this.id].name;
|
|
},
|
|
|
|
properties: function() {
|
|
var self = this;
|
|
var avg = function(values) {
|
|
if (values.length) {
|
|
return values.reduce((sum,value) => sum+value) / values.length;
|
|
} else {
|
|
return 0;
|
|
}
|
|
};
|
|
|
|
var getLightValues = function(attribute) {
|
|
return Object.values(self.lights).map(
|
|
light => attribute in light.state && light.state.on ? light.state[attribute] : undefined
|
|
).filter(value => value !== undefined);
|
|
};
|
|
|
|
return {
|
|
xy: [
|
|
avg(getLightValues('xy').map(_ => parseFloat(_[0]))),
|
|
avg(getLightValues('xy').map(_ => parseFloat(_[1])))
|
|
],
|
|
ct: avg(getLightValues('ct')),
|
|
bri: avg(getLightValues('bri')),
|
|
};
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
toggled: async function(event) {
|
|
await request(
|
|
'light.hue.' + (event.value ? 'on' : 'off'),
|
|
{ groups: [this.id] },
|
|
);
|
|
|
|
this.$emit('input', {
|
|
...this.value,
|
|
lights: this._updateLights('on', event.value),
|
|
});
|
|
|
|
this.$emit('input', {...this.value, state: {...this.value.state, any_on: event.value, all_on: event.value}});
|
|
},
|
|
|
|
propertiesCollapsedToggled: function() {
|
|
this.$emit('properties-collapsed-toggled', {
|
|
type: 'group',
|
|
id: this.id,
|
|
});
|
|
},
|
|
|
|
colorChanged: async function(event) {
|
|
await request(
|
|
'light.hue.xy',
|
|
{ value: event.xy, groups: [this.id] },
|
|
);
|
|
|
|
this.$emit('input', {
|
|
...this.value,
|
|
lights: this._updateLights('xy', event.xy),
|
|
});
|
|
},
|
|
|
|
briChanged: async function(event) {
|
|
await request(
|
|
'light.hue.bri',
|
|
{ value: event.bri, groups: [this.id] },
|
|
);
|
|
|
|
this.$emit('input', {
|
|
...this.value,
|
|
lights: this._updateLights('bri', event.bri),
|
|
});
|
|
},
|
|
|
|
ctChanged: async function(event) {
|
|
await request(
|
|
'light.hue.ct',
|
|
{ value: event.ct, groups: [this.id] },
|
|
);
|
|
|
|
this.$emit('input', {
|
|
...this.value,
|
|
lights: this._updateLights('ct', event.ct),
|
|
});
|
|
},
|
|
|
|
_updateLights: function(attr, value) {
|
|
var lights = [];
|
|
for (const light of Object.values(this.value.lights)) {
|
|
var state = light.state;
|
|
state[attr] = value;
|
|
lights.push({
|
|
...light,
|
|
state: state,
|
|
});
|
|
}
|
|
|
|
return lights;
|
|
},
|
|
},
|
|
});
|
|
|