Changed default entity grouping on the frontend.

Changed from `type` to `category`, which is basically the `name_plural`
attribute of the associated entity type metadata.

This allows us to define distinct entity metadata entries that we still
want to share the same grouping - for instance, `temperature_sensor`,
`humidity_sensor` and `battery` should all be grouped under `Sensors` on
the frontend.
This commit is contained in:
Fabio Manganiello 2022-11-02 16:33:12 +01:00
parent 68dd09e8ae
commit 3d1a08f7af
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -27,16 +27,14 @@
<div class="frame"> <div class="frame">
<div class="header"> <div class="header">
<span class="section left"> <span class="section left">
<Icon v-bind="entitiesMeta[group.name].icon || {}" <Icon v-bind="entitiesMeta[typesByCategory[group.name]].icon || {}"
v-if="selector.grouping === 'type' && entitiesMeta[group.name]" /> v-if="selector.grouping === 'category' && entitiesMeta[typesByCategory[group.name]]" />
<Icon :class="pluginIcons[group.name]?.class" :url="pluginIcons[group.name]?.imgUrl" <Icon :class="pluginIcons[group.name]?.class" :url="pluginIcons[group.name]?.imgUrl"
v-else-if="selector.grouping === 'plugin' && pluginIcons[group.name]" /> v-else-if="selector.grouping === 'plugin' && pluginIcons[group.name]" />
</span> </span>
<span class="section center"> <span class="section center">
<div class="title" v-text="entitiesMeta[group.name].name_plural" <div class="title" v-text="group.name" />
v-if="selector.grouping === 'type' && entitiesMeta[group.name]"/>
<div class="title" v-text="group.name" v-else-if="selector.grouping === 'plugin'"/>
</span> </span>
<span class="section right"> <span class="section right">
@ -99,7 +97,7 @@ export default {
modalEntityId: null, modalEntityId: null,
modalVisible: false, modalVisible: false,
selector: { selector: {
grouping: 'type', grouping: 'category',
selectedEntities: {}, selectedEntities: {},
}, },
} }
@ -114,13 +112,24 @@ export default {
return icons return icons
}, },
entityTypes() {
return this.groupEntities('type')
},
typesByCategory() {
return Object.entries(meta).reduce((obj, [type, meta]) => {
obj[meta.name_plural] = type
return obj
}, {})
},
entityGroups() { entityGroups() {
return { return {
'id': Object.entries(this.groupEntities('id')).reduce((obj, [id, entities]) => { 'id': Object.entries(this.groupEntities('id')).reduce((obj, [id, entities]) => {
obj[id] = entities[0] obj[id] = entities[0]
return obj return obj
}, {}), }, {}),
'type': this.groupEntities('type'), 'category': this.groupEntities('category'),
'plugin': this.groupEntities('plugin'), 'plugin': this.groupEntities('plugin'),
} }
}, },
@ -148,6 +157,7 @@ export default {
return Object.values(this.entities).reduce((obj, entity) => { return Object.values(this.entities).reduce((obj, entity) => {
const entities = obj[entity[attr]] || {} const entities = obj[entity[attr]] || {}
entities[entity.id] = entity entities[entity.id] = entity
obj[entity[attr]] = Object.values(entities).sort((a, b) => { obj[entity[attr]] = Object.values(entities).sort((a, b) => {
return a.name.localeCompare(b.name) return a.name.localeCompare(b.name)
}) })
@ -198,6 +208,7 @@ export default {
try { try {
this.entities = (await this.request('entities.get')).reduce((obj, entity) => { this.entities = (await this.request('entities.get')).reduce((obj, entity) => {
entity.name = entity?.meta?.name_override || entity.name entity.name = entity?.meta?.name_override || entity.name
entity.category = meta[entity.type].name_plural
entity.meta = { entity.meta = {
...(meta[entity.type] || {}), ...(meta[entity.type] || {}),
...(entity.meta || {}), ...(entity.meta || {}),
@ -225,6 +236,7 @@ export default {
}, },
onEntityInput(entity) { onEntityInput(entity) {
entity.category = meta[entity.type].name_plural
this.entities[entity.id] = entity this.entities[entity.id] = entity
this.clearEntityTimeouts(entity.id) this.clearEntityTimeouts(entity.id)
if (this.loadingEntities[entity.id]) if (this.loadingEntities[entity.id])
@ -247,6 +259,7 @@ export default {
else else
entity.name = event.entity?.name || this.entities[entityId]?.name entity.name = event.entity?.name || this.entities[entityId]?.name
entity.category = meta[entity.type].name_plural
entity.meta = { entity.meta = {
...(meta[event.entity.type] || {}), ...(meta[event.entity.type] || {}),
...(this.entities[entityId]?.meta || {}), ...(this.entities[entityId]?.meta || {}),