Added entities panel

This commit is contained in:
Fabio Manganiello 2022-04-10 13:07:36 +02:00
parent 8ec9c8f203
commit 58861afb1c
Signed by: blacklight
GPG key ID: D90FBA7F76362774
10 changed files with 621 additions and 4 deletions

View file

@ -6,7 +6,7 @@
</div>
<ul class="plugins">
<li v-for="name in Object.keys(panels).sort()" :key="name" class="entry" :class="{selected: name === selectedPanel}"
<li v-for="name in panelNames" :key="name" class="entry" :class="{selected: name === selectedPanel}"
:title="name" @click="onItemClick(name)">
<a :href="`/#${name}`">
<span class="icon">
@ -14,7 +14,7 @@
<img :src="icons[name].imgUrl" v-else-if="icons[name]?.imgUrl" alt="name"/>
<i class="fas fa-puzzle-piece" v-else />
</span>
<span class="name" v-if="!collapsed" v-text="name" />
<span class="name" v-if="!collapsed" v-text="name == 'entities' ? 'Home' : name" />
</a>
</li>
</ul>
@ -66,6 +66,16 @@ export default {
},
},
computed: {
panelNames() {
let panelNames = Object.keys(this.panels)
const homeIdx = panelNames.indexOf('entities')
if (homeIdx >= 0)
return ['entities'].concat((panelNames.slice(0, homeIdx).concat(panelNames.slice(homeIdx+1))).sort())
return panelNames.sort()
},
},
methods: {
onItemClick(name) {
this.$emit('select', name)

View file

@ -0,0 +1,74 @@
<template>
<div class="row item entity">
<Loading v-if="loading" />
<Icon v-bind="value.meta?.icon || {}" />
<div class="component-container">
<component :is="component" :value="value" @input="$emit('input', $event)" />
</div>
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
import Utils from "@/Utils"
import Loading from "@/components/Loading"
import Icon from "@/components/elements/Icon";
export default {
name: "Entity",
components: {Loading, Icon},
mixins: [Utils],
emits: ['input'],
props: {
loading: {
type: Boolean,
default: false,
},
value: {
type: Object,
required: true,
},
},
data() {
return {
component: null,
}
},
computed: {
type() {
let entityType = (this.value.type || '')
return entityType.charAt(0).toUpperCase() + entityType.slice(1)
},
},
mounted() {
if (this.type !== 'Entity')
this.component = defineAsyncComponent(
() => import(`@/components/panels/Entities/${this.type}`)
)
},
}
</script>
<style lang="scss">
@import "vars";
.entity {
width: 100%;
display: table;
.icon-container,
.component-container {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.component-container {
width: calc(100% - #{$icon-container-size});
}
}
</style>

View file

@ -0,0 +1,242 @@
<template>
<div class="row plugin entities-container">
<Loading v-if="loading" />
<div class="entity-selector-container">
<Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
</div>
<div class="groups-canvas">
<div class="groups-container">
<div class="group fade-in" v-for="group in displayGroups" :key="group.name">
<div class="frame">
<div class="header">
<span class="section left">
<Icon v-bind="entitiesMeta[group.name].icon || {}"
v-if="selector.grouping === 'type' && entitiesMeta[group.name]" />
<Icon :class="pluginIcons[group.name]?.class" :url="pluginIcons[group.name]?.imgUrl"
v-else-if="selector.grouping === 'plugin' && pluginIcons[group.name]" />
</span>
<span class="section center">
<div class="title" v-text="entitiesMeta[group.name].name_plural"
v-if="selector.grouping === 'type' && entitiesMeta[group.name]"/>
<div class="title" v-text="group.name" v-else-if="selector.grouping === 'plugin'"/>
</span>
<span class="section right" />
</div>
<div class="body">
<div class="entity-frame" v-for="entity in group.entities" :key="entity.id">
<Entity :value="entity" @input="entities[entity.id] = $event" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Utils from "@/Utils"
import Loading from "@/components/Loading";
import Icon from "@/components/elements/Icon";
import Entity from "./Entity.vue";
import Selector from "./Selector.vue";
import icons from '@/assets/icons.json'
import meta from './meta.json'
export default {
name: "Entities",
components: {Loading, Icon, Entity, Selector},
mixins: [Utils],
data() {
return {
loading: false,
entities: {},
selector: {
grouping: 'type',
selectedEntities: {},
},
}
},
computed: {
entitiesMeta() {
return meta
},
pluginIcons() {
return icons
},
entityGroups() {
return {
'id': Object.entries(this.groupEntities('id')).reduce((obj, [id, entities]) => {
obj[id] = entities[0]
return obj
}, {}),
'type': this.groupEntities('type'),
'plugin': this.groupEntities('plugin'),
}
},
displayGroups() {
return Object.entries(this.entityGroups[this.selector.grouping]).filter(
(entry) => entry[1].filter(
(e) => !!this.selector.selectedEntities[e.id]
).length > 0
).sort((a, b) => a[0].localeCompare(b[0])).map(
([grouping, entities]) => {
return {
name: grouping,
entities: entities,
}
}
)
},
},
methods: {
groupEntities(attr) {
return Object.values(this.entities).reduce((obj, entity) => {
const entities = obj[entity[attr]] || {}
entities[entity.id] = entity
obj[entity[attr]] = Object.values(entities).sort((a, b) => {
return a.name.localeCompare(b.name)
})
return obj
}, {})
},
async refresh() {
this.loading = true
try {
this.entities = (await this.request('entities.get')).reduce((obj, entity) => {
entity.meta = {
...(meta[entity.type] || {}),
...(entity.meta || {}),
}
obj[entity.id] = entity
return obj
}, {})
this.selector.selectedEntities = this.entityGroups.id
} finally {
this.loading = false
}
},
},
mounted() {
this.refresh()
},
}
</script>
<style lang="scss">
@import "vars";
@import "~@/style/items";
.entities-container {
--groups-per-row: 1;
@include from($desktop) {
--groups-per-row: 2;
}
@include from($fullhd) {
--groups-per-row: 3;
}
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
color: $default-fg-2;
font-weight: 400;
.entity-selector-container {
height: $selector-height;
}
.groups-canvas {
width: 100%;
height: calc(100% - #{$selector-height});
display: flex;
flex-direction: column;
}
.groups-container {
overflow: auto;
@include from($desktop) {
column-count: var(--groups-per-row);
}
}
.group {
width: 100%;
max-height: 100%;
position: relative;
padding: $main-margin 0;
display: flex;
break-inside: avoid;
@include from($tablet) {
padding: $main-margin;
}
.frame {
max-height: calc(100% - #{2 * $main-margin});
display: flex;
flex-direction: column;
flex-grow: 1;
position: relative;
box-shadow: $group-shadow;
border-radius: 1em;
}
.header {
width: 100%;
height: $header-height;
display: table;
background: $header-bg;
box-shadow: $header-shadow;
border-radius: 1em 1em 0 0;
.section {
height: 100%;
display: table-cell;
vertical-align: middle;
&.left, &.right {
width: 10%;
}
&.center {
width: 80%;
text-align: center;
}
}
}
.body {
background: $default-bg-2;
max-height: calc(100% - #{$header-height});
overflow: auto;
flex-grow: 1;
.entity-frame:last-child {
border-radius: 0 0 1em 1em;
}
}
}
}
</style>

View file

@ -0,0 +1,198 @@
<template>
<div class="entities-selectors-container">
<div class="selector">
<Dropdown title="Group by" icon-class="fas fa-layer-group"
:text="prettifyGroupingName(value.grouping)" ref="groupingSelector">
<DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
:item-class="{selected: value?.grouping === g}"
@click="onGroupingChanged(g)" />
</Dropdown>
</div>
<div class="selector" :class="{active: isGroupFilterActive}" v-if="value?.grouping">
<Dropdown title="Filter by" icon-class="fas fa-filter" ref="groupSelector"
keep-open-on-item-click>
<DropdownItem v-for="g in sortedGroups" :key="g" :text="g"
v-bind="iconForGroup(g)" :item-class="{selected: !!selectedGroups[g]}"
@click.stop="toggleGroup(g)" />
</Dropdown>
</div>
</div>
</template>
<script>
import Utils from '@/Utils'
import Dropdown from "@/components/elements/Dropdown";
import DropdownItem from "@/components/elements/DropdownItem";
import meta from './meta.json'
import pluginIcons from '@/assets/icons.json'
export default {
name: "Selector",
emits: ['input'],
mixins: [Utils],
components: {Dropdown, DropdownItem},
props: {
entityGroups: {
type: Object,
required: true,
},
value: {
type: Object,
required: true,
},
},
data() {
return {
selectedGroups: {},
}
},
computed: {
visibleGroupings() {
return Object.keys(this.entityGroups).filter(
(grouping) => grouping !== 'id'
)
},
sortedGroups() {
return Object.keys(this.entityGroups[this.value?.grouping] || {}).sort()
},
typesMeta() {
return meta
},
isGroupFilterActive() {
return Object.keys(this.selectedGroups).length !== this.sortedGroups.length
},
selectedEntities() {
return Object.values(this.entityGroups.id).filter((entity) =>
!!this.selectedGroups[entity[this.value?.grouping]]
).reduce((obj, entity) => {
obj[entity.id] = entity
return obj
}, {})
},
},
methods: {
prettifyGroupingName(name) {
return name ? this.prettify(name) + 's' : ''
},
iconForGroup(group) {
if (this.value.grouping === 'plugin' && pluginIcons[group]) {
const icon = pluginIcons[group]
return {
'icon-class': icon['class']?.length || !icon.imgUrl?.length ?
icon['class'] : 'fas fa-gears',
'icon-url': icon.imgUrl,
}
}
return {}
},
synchronizeSelectedEntities() {
const value = {...this.value}
value.selectedEntities = this.selectedEntities
this.$emit('input', value)
},
resetGroupFilter() {
this.selectedGroups = Object.keys(
this.entityGroups[this.value?.grouping] || {}
).reduce(
(obj, group) => {
obj[group] = true
return obj
}, {}
)
this.synchronizeSelectedEntities()
},
toggleGroup(group) {
if (this.selectedGroups[group])
delete this.selectedGroups[group]
else
this.selectedGroups[group] = true
this.synchronizeSelectedEntities()
},
onGroupingChanged(grouping) {
if (!this.entityGroups[grouping] || grouping === this.value?.grouping)
return false
const value = {...this.value}
value.grouping = grouping
this.$emit('input', value)
},
},
mounted() {
this.resetGroupFilter()
this.$watch(() => this.value?.grouping, this.resetGroupFilter)
this.$watch(() => this.entityGroups, this.resetGroupFilter)
},
}
</script>
<style lang="scss" scoped>
.entities-selectors-container {
width: 100%;
background: $default-bg-2;
display: flex;
align-items: center;
box-shadow: $border-shadow-bottom;
.selector {
height: 100%;
display: inline-flex;
&.active {
::v-deep(.dropdown-container) {
button {
color: $default-hover-fg;
}
}
}
}
::v-deep(.dropdown-container) {
height: 100%;
display: flex;
button {
height: 100%;
background: $default-bg-2;
border: 0;
padding: 0.5em;
&:hover {
color: $default-hover-fg;
}
}
.item {
padding: 0.5em 4em 0.5em 0.5em;
border: 0;
box-shadow: none;
&.selected {
font-weight: bold;
background: #ffffff00;
}
&:hover {
background: $hover-bg;
}
}
}
}
</style>

View file

@ -0,0 +1,53 @@
<template>
<div class="switch">
<div class="col-10 label">
<div class="name" v-text="value.name" />
</div>
<div class="col-2 switch pull-right">
<ToggleSwitch :value="value.state" @input="toggle" />
</div>
</div>
</template>
<script>
import ToggleSwitch from "@/components/elements/ToggleSwitch"
import Utils from "@/Utils"
export default {
name: 'Switch',
components: {ToggleSwitch},
emits: ['input'],
mixins: [Utils],
props: {
value: {
type: Object,
required: true,
},
},
data() {
return {
component: null,
}
},
methods: {
async toggle() {
const response = await this.request('entities.execute', {
id: this.value.id,
action: 'toggle',
})
this.$emit('input', {
...this.value,
state: response.on,
})
},
},
}
</script>
<style lang="scss">
@import "vars";
</style>

View file

@ -0,0 +1,33 @@
{
"entity": {
"name": "Entity",
"name_plural": "Entities",
"icon": {
"class": "fas fa-circle-question"
}
},
"device": {
"name": "Device",
"name_plural": "Devices",
"icon": {
"class": "fas fa-gear"
}
},
"switch": {
"name": "Switch",
"name_plural": "Switches",
"icon": {
"class": "fas fa-toggle-on"
}
},
"light": {
"name": "Light",
"name_plural": "Lights",
"icon": {
"class": "fas fa-lightbulb"
}
}
}

View file

@ -0,0 +1,2 @@
$main-margin: 1em;
$selector-height: 2.5em;

View file

@ -1,3 +1,5 @@
$header-height: 3.5em;
.item {
display: flex;
align-items: center;

View file

@ -10,6 +10,7 @@ $default-bg-7: #e4e4e4 !default;
$default-fg: black !default;
$default-fg-2: #23513a !default;
$default-fg-3: #195331b3 !default;
$header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
//// Notifications
$notification-bg: rgba(185, 255, 193, 0.9) !default;
@ -51,6 +52,8 @@ $border-shadow-bottom: 0 3px 2px -1px $default-shadow-color;
$border-shadow-left: -2.5px 0 4px 0 $default-shadow-color;
$border-shadow-right: 2.5px 0 4px 0 $default-shadow-color;
$border-shadow-bottom-right: 2.5px 2.5px 3px 0 $default-shadow-color;
$header-shadow: 0px 1px 3px 1px #bbb !default;
$group-shadow: 3px -2px 6px 1px #98b0a0;
//// Modals
$modal-header-bg: #e0e0e0 !default;
@ -141,5 +144,5 @@ $dropdown-shadow: 1px 1px 1px #bbb !default;
//// Scrollbars
$scrollbar-track-bg: $slider-bg !default;
$scrollbar-track-shadow: inset 1px 0px 3px 0 $slider-track-shadow !default;
$scrollbar-thumb-bg: #50ca80 !default;
$scrollbar-thumb-bg: #a5a2a2 !default;

View file

@ -90,7 +90,7 @@ export default {
initializeDefaultViews() {
this.plugins.execute = {}
this.plugins.switches = {}
this.plugins.entities = {}
},
},