2020-11-30 20:57:00 +01:00
|
|
|
<template>
|
2020-12-03 00:59:35 +01:00
|
|
|
<div class="plugin lights-plugin">
|
|
|
|
<div class="panel" v-if="selectedGroup == null && groups && Object.keys(groups).length">
|
2020-12-09 21:16:07 +01:00
|
|
|
<Groups :groups="groups" :loading-groups="loadingGroups" :color-converter="colorConverter"
|
|
|
|
@select="selectedGroup = $event" @toggle="$emit('group-toggle', $event)" />
|
2020-12-03 00:59:35 +01:00
|
|
|
</div>
|
|
|
|
<div class="panel" v-else>
|
2020-12-09 21:16:07 +01:00
|
|
|
<Group :group="groups[selectedGroup]" :lights="displayedLights" :scenes="scenesByGroup[selectedGroup]"
|
2020-12-14 02:13:55 +01:00
|
|
|
:color-converter="colorConverter" :animations="animationsByGroup[selectedGroup]" @close="closeGroup"
|
|
|
|
@light-toggle="$emit('light-toggle', $event)" @group-toggle="$emit('group-toggle', $event)"
|
|
|
|
@set-light="$emit('set-light', $event)"
|
2020-12-09 21:16:07 +01:00
|
|
|
@set-group="$emit('set-group', {groupId: selectedGroup, value: $event})"
|
2020-12-14 02:13:55 +01:00
|
|
|
@select-scene="$emit('select-scene', {groupId: selectedGroup, sceneId: $event})"
|
|
|
|
@start-animation="$emit('start-animation', $event)" @stop-animation="$emit('stop-animation', $event)" />
|
2020-12-03 00:59:35 +01:00
|
|
|
</div>
|
2020-11-30 20:57:00 +01:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Utils from "@/Utils";
|
|
|
|
import Panel from "@/components/panels/Panel";
|
2020-12-03 00:59:35 +01:00
|
|
|
import Groups from "@/components/Light/Groups";
|
|
|
|
import Group from "@/components/Light/Group";
|
2020-12-09 21:16:07 +01:00
|
|
|
import {ColorConverter} from "@/components/panels/Light/color";
|
2020-11-30 20:57:00 +01:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Generic component for light plugins panels.
|
|
|
|
*/
|
|
|
|
export default {
|
|
|
|
name: "Light",
|
2020-12-03 00:59:35 +01:00
|
|
|
components: {Group, Groups},
|
2020-11-30 20:57:00 +01:00
|
|
|
mixins: [Utils, Panel],
|
2020-12-14 02:13:55 +01:00
|
|
|
emits: ['group-toggle', 'light-toggle', 'set-light', 'set-group', 'select-scene', 'start-animation', 'stop-animation'],
|
2020-11-30 20:57:00 +01:00
|
|
|
|
|
|
|
props: {
|
2020-12-03 00:59:35 +01:00
|
|
|
lights: {
|
|
|
|
type: Object,
|
2020-11-30 20:57:00 +01:00
|
|
|
},
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
groups: {
|
|
|
|
type: Object,
|
2020-11-30 20:57:00 +01:00
|
|
|
},
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
scenes: {
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
|
|
|
|
animations: {
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
|
2020-12-09 21:16:07 +01:00
|
|
|
colorConverter: {
|
|
|
|
type: Object,
|
|
|
|
default: () => new ColorConverter(),
|
|
|
|
},
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
loadingLights: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {},
|
|
|
|
},
|
|
|
|
|
|
|
|
loadingGroups: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {},
|
|
|
|
},
|
|
|
|
|
|
|
|
pluginName: {
|
|
|
|
type: String,
|
|
|
|
},
|
|
|
|
|
|
|
|
initialGroup: {
|
|
|
|
type: [Number, String],
|
2020-11-30 20:57:00 +01:00
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
2020-12-03 00:59:35 +01:00
|
|
|
selectedGroup: null,
|
|
|
|
initialized: false,
|
2020-11-30 20:57:00 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
computed: {
|
|
|
|
displayedLights() {
|
|
|
|
const selectedGroup = this.selectedGroup || this.initialGroup
|
|
|
|
if (selectedGroup == null)
|
|
|
|
return this.lights
|
2020-11-30 20:57:00 +01:00
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
return this.groups[selectedGroup].lights.reduce((lights, lightId) => {
|
|
|
|
lights[lightId] = this.lights[lightId]
|
|
|
|
return lights
|
|
|
|
}, {})
|
|
|
|
},
|
2020-12-09 21:16:07 +01:00
|
|
|
|
|
|
|
groupsByLight() {
|
|
|
|
if (!this.groups)
|
|
|
|
return {}
|
|
|
|
|
|
|
|
return Object.entries(this.groups).reduce((obj, [groupId, group]) => {
|
|
|
|
group.lights.forEach((lightId) => {
|
|
|
|
if (!obj[lightId])
|
|
|
|
obj[lightId] = {}
|
|
|
|
obj[lightId][groupId] = group
|
|
|
|
})
|
|
|
|
|
|
|
|
return obj
|
|
|
|
}, {})
|
|
|
|
},
|
|
|
|
|
|
|
|
scenesByGroup() {
|
|
|
|
if (!this.scenes)
|
|
|
|
return {}
|
|
|
|
|
|
|
|
const self = this
|
|
|
|
return Object.entries(this.scenes).reduce((obj, [sceneId, scene]) => {
|
|
|
|
scene.lights.forEach((lightId) => {
|
|
|
|
Object.keys(self.groupsByLight[lightId]).forEach((groupId) => {
|
|
|
|
if (!obj[groupId])
|
|
|
|
obj[groupId] = {}
|
|
|
|
|
|
|
|
obj[groupId][sceneId] = scene
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
return obj
|
|
|
|
}, {})
|
|
|
|
},
|
2020-12-14 02:13:55 +01:00
|
|
|
|
|
|
|
animationsByGroup() {
|
|
|
|
const self = this
|
|
|
|
const animations = Object.entries(this.animations?.groups || {}).reduce((obj, [groupId, animation]) => {
|
|
|
|
obj[groupId] = {}
|
|
|
|
if (animation)
|
|
|
|
obj[groupId][null] = animation
|
|
|
|
|
|
|
|
return obj
|
|
|
|
}, {})
|
|
|
|
|
|
|
|
return {
|
|
|
|
...animations,
|
|
|
|
...Object.entries(this.animations?.lights || {}).reduce((obj, [lightId, animation]) => {
|
|
|
|
const group = Object.values(self.groupsByLight[lightId])?.[0]
|
|
|
|
if (group) {
|
|
|
|
if (animation && group.id != null) {
|
|
|
|
if (!obj[group.id])
|
|
|
|
obj[group.id] = {}
|
|
|
|
obj[group.id][lightId] = animation
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return obj
|
|
|
|
}, {})
|
|
|
|
}
|
|
|
|
}
|
2020-12-03 00:59:35 +01:00
|
|
|
},
|
2020-11-30 20:57:00 +01:00
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
methods: {
|
|
|
|
initSelectedGroup() {
|
|
|
|
const self = this
|
|
|
|
const unwatch = this.$watch(() => self.initialGroup, (newVal) => {
|
|
|
|
if (!self.initialized) {
|
|
|
|
self.initialized = true
|
|
|
|
unwatch()
|
|
|
|
if (self.selectedGroup == null && newVal != null) {
|
|
|
|
self.selectedGroup = self.initialGroup
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
2020-11-30 20:57:00 +01:00
|
|
|
},
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
closeGroup() {
|
|
|
|
this.selectedGroup = null
|
|
|
|
},
|
2020-11-30 20:57:00 +01:00
|
|
|
},
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
mounted() {
|
|
|
|
this.initSelectedGroup()
|
2020-11-30 20:57:00 +01:00
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
<style lang="scss" scoped>
|
|
|
|
.plugin {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
|
|
|
.panel {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
box-shadow: none;
|
|
|
|
overflow: auto;
|
|
|
|
}
|
2020-11-30 20:57:00 +01:00
|
|
|
</style>
|
2020-12-03 00:59:35 +01:00
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.lights-plugin {
|
|
|
|
.menu-panel {
|
|
|
|
ul {
|
|
|
|
li:not(.header) {
|
|
|
|
padding: 1.5em 1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|