2020-12-03 00:59:35 +01:00
|
|
|
<template>
|
|
|
|
<div class="light-group-container">
|
|
|
|
<MenuPanel>
|
2020-12-09 21:16:07 +01:00
|
|
|
<div class="panel-row header">
|
|
|
|
<div class="col-3" v-if="group">
|
|
|
|
<button class="back-btn" title="Back" @click="close">
|
|
|
|
<i class="fas fa-chevron-left" />
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="col-6 name" :class="{selected: selectedView === 'group'}"
|
|
|
|
v-text="groupName" @click="selectedView = selectedView === 'group' ? null : 'group'" />
|
|
|
|
|
|
|
|
<div class="col-3 pull-right" v-if="group">
|
|
|
|
<ToggleSwitch :value="group.state.any_on" @input="$emit('group-toggle', group)" />
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-12-03 00:59:35 +01:00
|
|
|
|
|
|
|
<div class="no-lights" v-if="!lights || !Object.keys(lights).length">
|
|
|
|
No lights found
|
|
|
|
</div>
|
|
|
|
|
2020-12-09 21:16:07 +01:00
|
|
|
<div class="lights-view" v-else>
|
|
|
|
<div class="row view-selector">
|
|
|
|
<button :class="{selected: selectedView === 'lights'}" title="Lights" @click="selectedView = 'lights'">
|
2020-12-14 02:13:55 +01:00
|
|
|
<i class="icon fas fa-lightbulb" />
|
2020-12-09 21:16:07 +01:00
|
|
|
</button>
|
|
|
|
<button :class="{selected: selectedView === 'scenes'}" title="Scenes" @click="selectedView = 'scenes'">
|
2020-12-14 02:13:55 +01:00
|
|
|
<i class="icon far fa-image" />
|
|
|
|
</button>
|
2020-12-15 00:01:28 +01:00
|
|
|
<button :class="{selected: selectedView === 'animate'}" title="Animate" @click="selectedView = 'animate'">
|
2020-12-14 02:13:55 +01:00
|
|
|
<i class="icon fas fa-video" />
|
2020-12-09 21:16:07 +01:00
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
2020-12-14 02:13:55 +01:00
|
|
|
<div class="view fade-in" v-if="selectedView === 'lights'">
|
2020-12-09 21:16:07 +01:00
|
|
|
<keep-alive>
|
|
|
|
<div class="panel-row row" :class="{expanded: light.id === selectedLight}"
|
|
|
|
v-for="(light, id) in lightsSorted" :key="id"
|
|
|
|
@click="selectedLight = selectedLight === light.id ? null : light.id">
|
|
|
|
<Light :light="light" :group="group" :collapsed="light.id !== selectedLight"
|
|
|
|
:color-converter="colorConverter" @toggle="$emit('light-toggle', light)"
|
|
|
|
@set-light="$emit('set-light', {light: light, value: $event})" />
|
|
|
|
</div>
|
|
|
|
</keep-alive>
|
|
|
|
</div>
|
|
|
|
|
2020-12-14 02:13:55 +01:00
|
|
|
<div class="view fade-in" v-else-if="selectedView === 'scenes'">
|
2020-12-09 21:16:07 +01:00
|
|
|
<keep-alive>
|
|
|
|
<div class="panel-row row" :class="{selected: scene.id === selectedScene}"
|
|
|
|
v-for="(scene, id) in scenesSorted" :key="id" @click="onSceneSelected(scene.id)">
|
|
|
|
<Scene :scene="scene" :group="group" />
|
|
|
|
</div>
|
|
|
|
</keep-alive>
|
|
|
|
</div>
|
|
|
|
|
2020-12-14 02:13:55 +01:00
|
|
|
<div class="view group-controls fade-in" v-else-if="selectedView === 'group'">
|
2020-12-09 21:16:07 +01:00
|
|
|
<keep-alive>
|
|
|
|
<Controls :group="group" :lights="lights" :color-converter="colorConverter"
|
|
|
|
@set-group="$emit('set-group', $event)" />
|
|
|
|
</keep-alive>
|
|
|
|
</div>
|
2020-12-14 02:13:55 +01:00
|
|
|
|
|
|
|
<div class="view group-controls fade-in" v-else-if="selectedView === 'animate'">
|
|
|
|
<keep-alive>
|
|
|
|
<Animate :group="group" :lights="lights" :color-converter="colorConverter" :running-animations="animations"
|
|
|
|
@start="$emit('start-animation', $event)" @stop="$emit('stop-animation', $event)" />
|
|
|
|
</keep-alive>
|
|
|
|
</div>
|
2020-12-09 21:16:07 +01:00
|
|
|
</div>
|
2020-12-03 00:59:35 +01:00
|
|
|
</MenuPanel>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Light from "@/components/Light/Light";
|
2020-12-09 21:16:07 +01:00
|
|
|
import Scene from "@/components/Light/Scene";
|
|
|
|
import Controls from "@/components/Light/Controls";
|
2020-12-03 00:59:35 +01:00
|
|
|
import MenuPanel from "@/components/MenuPanel";
|
2020-12-09 21:16:07 +01:00
|
|
|
import ToggleSwitch from "@/components/elements/ToggleSwitch";
|
|
|
|
import {ColorConverter} from "@/components/panels/Light/color";
|
2020-12-14 02:13:55 +01:00
|
|
|
import Animate from "@/components/Light/Animate";
|
2020-12-03 00:59:35 +01:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "Group",
|
2020-12-14 02:13:55 +01:00
|
|
|
emits: ['close', 'group-toggle', 'light-toggle', 'set-light', 'select-scene', 'start-animation', 'stop-animation'],
|
|
|
|
components: {Animate, ToggleSwitch, MenuPanel, Light, Scene, Controls},
|
2020-12-03 00:59:35 +01:00
|
|
|
props: {
|
|
|
|
lights: {
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
|
|
|
|
group: {
|
|
|
|
type: Object,
|
|
|
|
},
|
2020-12-09 21:16:07 +01:00
|
|
|
|
|
|
|
scenes: {
|
|
|
|
type: Object,
|
|
|
|
},
|
|
|
|
|
2020-12-14 02:13:55 +01:00
|
|
|
animations: {
|
|
|
|
type: Object,
|
|
|
|
default: () => {},
|
|
|
|
},
|
|
|
|
|
2020-12-09 21:16:07 +01:00
|
|
|
colorConverter: {
|
|
|
|
type: Object,
|
|
|
|
default: () => new ColorConverter(),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
selectedLight: null,
|
|
|
|
selectedScene: null,
|
|
|
|
selectedView: 'lights',
|
|
|
|
}
|
2020-12-03 00:59:35 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
lightsSorted() {
|
|
|
|
if (!this.lights)
|
|
|
|
return []
|
|
|
|
|
|
|
|
return Object.entries(this.lights)
|
|
|
|
.sort((a, b) => a[1].name.localeCompare(b[1].name))
|
|
|
|
.map(([id, light]) => {
|
|
|
|
return {
|
|
|
|
...light,
|
|
|
|
id: id,
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
2020-12-09 21:16:07 +01:00
|
|
|
|
|
|
|
scenesSorted() {
|
|
|
|
if (!this.scenes)
|
|
|
|
return []
|
|
|
|
|
|
|
|
return Object.entries(this.scenes)
|
|
|
|
.sort((a, b) => a[1].name.localeCompare(b[1].name))
|
|
|
|
.map(([id, scene]) => {
|
|
|
|
return {
|
|
|
|
...scene,
|
|
|
|
id: id,
|
|
|
|
}
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
groupName() {
|
|
|
|
if (this.group?.name)
|
|
|
|
return this.group.name
|
|
|
|
if (this.group?.id != null)
|
|
|
|
return `[Group ${this.group.id}]`
|
|
|
|
return 'Lights'
|
|
|
|
},
|
2020-12-03 00:59:35 +01:00
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
|
|
close(event) {
|
|
|
|
event.stopPropagation()
|
|
|
|
this.$emit('close')
|
|
|
|
},
|
2020-12-09 21:16:07 +01:00
|
|
|
|
|
|
|
onSceneSelected(sceneId) {
|
|
|
|
this.selectedScene = sceneId
|
|
|
|
this.$emit('select-scene', sceneId)
|
|
|
|
},
|
2020-12-03 00:59:35 +01:00
|
|
|
},
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.light-group-container {
|
|
|
|
width: 100%;
|
2020-12-09 21:16:07 +01:00
|
|
|
min-height: 100%;
|
|
|
|
|
|
|
|
.row.panel-row {
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
&.expanded,
|
|
|
|
&.selected {
|
|
|
|
background: $selected-bg;
|
|
|
|
}
|
|
|
|
}
|
2020-12-03 00:59:35 +01:00
|
|
|
|
|
|
|
.header {
|
2020-12-09 21:16:07 +01:00
|
|
|
padding: 0.5em !important;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
|
2020-12-03 00:59:35 +01:00
|
|
|
.back-btn {
|
|
|
|
border: 0;
|
2020-12-09 21:16:07 +01:00
|
|
|
background: none;
|
2020-12-03 00:59:35 +01:00
|
|
|
|
|
|
|
&:hover {
|
|
|
|
border: 0;
|
|
|
|
color: $default-hover-fg;
|
|
|
|
}
|
|
|
|
}
|
2020-12-09 21:16:07 +01:00
|
|
|
|
|
|
|
.name {
|
|
|
|
text-align: center;
|
|
|
|
|
|
|
|
&.selected {
|
|
|
|
color: $selected-fg;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
color: $default-hover-fg;
|
|
|
|
}
|
|
|
|
}
|
2020-12-03 00:59:35 +01:00
|
|
|
}
|
|
|
|
|
2020-12-09 21:16:07 +01:00
|
|
|
.view-selector {
|
|
|
|
width: 100%;
|
|
|
|
border-radius: 0;
|
|
|
|
|
|
|
|
button {
|
2020-12-14 02:13:55 +01:00
|
|
|
width: 33.3%;
|
2020-12-09 21:16:07 +01:00
|
|
|
padding: 1.5em;
|
|
|
|
text-align: left;
|
|
|
|
opacity: 0.8;
|
|
|
|
box-shadow: $plugin-panel-entry-shadow;
|
2020-12-14 02:13:55 +01:00
|
|
|
border-right: 0;
|
2020-12-09 21:16:07 +01:00
|
|
|
|
|
|
|
&.selected {
|
|
|
|
background: $selected-bg;
|
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: $hover-bg;
|
|
|
|
}
|
|
|
|
}
|
2020-12-14 02:13:55 +01:00
|
|
|
|
2020-12-17 02:09:23 +01:00
|
|
|
.icon {
|
|
|
|
width: 100%;
|
|
|
|
text-align: center;
|
|
|
|
font-size: 1.2em;
|
2020-12-14 02:13:55 +01:00
|
|
|
}
|
2020-12-09 21:16:07 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.light-group-container {
|
|
|
|
.group-controls {
|
2020-12-14 02:13:55 +01:00
|
|
|
margin: 0;
|
|
|
|
padding: 1em;
|
|
|
|
background-color: $default-bg-6;
|
|
|
|
border-radius: 0 0 1em 1em;
|
2020-12-09 21:16:07 +01:00
|
|
|
|
|
|
|
.controls {
|
|
|
|
margin: 0;
|
|
|
|
padding: 1em;
|
2020-12-03 00:59:35 +01:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|