#Entities grouped by `Area`s? (`custom:auto-entities` card?)

1 messages · Page 1 of 1 (latest)

inner raptor
#

I've managed to display all my light entities like this:

type: custom:auto-entities
card:
  type: entities
  state_color: true
  show_header_toggle: true
filter:
  include:
    - domain: light
      options:
        secondary_info: last-changed
  exclude: []

Now, I'd like to group them by their Areas. How do I achieve that?

  • I was thinking about some kind of auto-entities inception, but apparently Areas are not entities, so I can't list Area entities and then the connected light-domain entities?
  • I don't want to create Area sections/cards manually –> it's a freakin automation software GDI. When an Area and a light in the Area is added, both: the new Area and the new lightbulb should appear automatically in the dashboard; not me having to remember to make a new Area card or sth.
  • Somehow programmatically create a dashboard? For loops?
inner raptor
inner raptor
#

DONE, it's working 😄

type: custom:config-template-card
entities:
  - light.bathroom_main_lights
card:
  type: vertical-stack
  cards: |-
    ${
      var cards = [];

      for (const [area_id, area] of Object.entries(this.hass.areas)) { 
        cards.push({
          'type': 'custom:auto-entities',
          'card': {
            'type': 'entities',
            'state_color': 'true',
            'show_header_toggle': 'true',
            'title': area.name
          },
          'filter': {
            'include': [
              {
                'domain': 'light',
                'area': area_id,
                'options': {
                  'secondary_info': 'last-changed'
                }
              },
            ],
            'exclude': []
          },
          'show_empty': false
        }); 
      }
      
      cards;
    }

EDIT: kinda working… I need to populate the top entities key properly now…

Screenshot_2024-10-03_at_16.54.34.png
inner raptor
inner raptor
#

It doesn't work -> I don't why.
It works -> I don't know why… 😄

Wrapped with card-templater… I was going to do entities_template, but no need… It's working o.O
Just put ANY existing entity (in my case: sun.sun) and the entities work as expected xDDD

# 
type: custom:card-templater
card:
  type: custom:config-template-card
  entities:
    - sun.sun
  card:
    type: vertical-stack
    cards: |-
      ${
        const hass = this.hass;

        function getEntityDomain(entity) {
          return entity.entity_id.split('.')[0];
        }

        function getEntityAreaIdWithDeviceInheritance(entity) {
          return entity.area_id || hass.devices[entity.device_id].area_id;
        }

        function getEntityAreaWithDeviceInheritance(entity) {
          const areaId = getEntityAreaIdWithDeviceInheritance(entity);

          if (undefined === areaId) {
            return undefined;
          }

          return hass.areas[areaId];
        }

        let areasWithLights = {};

        for (const [, entity] of Object.entries(hass.entities)) { 
          if ('light' === getEntityDomain(entity)) {
            const area = getEntityAreaWithDeviceInheritance(entity);
            
            if (area) {
              if (!areasWithLights[area.area_id]) {
                  areasWithLights[area.area_id] = {
                    'area': area,
                    'entities': [],
                  };
              }

              areasWithLights[area.area_id].entities.push(entity);
            }
          }
        }

        let cards = [];

        for (const [areaId, areaAndEntities] of Object.entries(areasWithLights)) {
          cards.push({
            'type': 'entities',
            'state_color': 'true',
            'show_header_toggle': 'true',
            'title': areaAndEntities.area.name,
            'entities': areaAndEntities.entities.map(entity => { 
              return { 
                'entity': entity.entity_id,
                'secondary_info': 'last-changed'
              };
            })
          });
        }

        cards = cards.sort((card1, card2) => new Intl.Collator().compare(card1.title, card2.title));

        cards;
      }
inner raptor
#

https://community.home-assistant.io/t/100-templatable-lovelace-configurations/105241/879?u=dvdnwk

Home Assistant Community
📝 100% Templatable Lovelace Configurations

I’ve discovered a funny thing… tl;dr Wrap config-template-card with card-templater and put sun.sun in the entities list → it will work like magic without manually listing entities xDDD The goal: a dynamic list of lights, grouped by their areas. I want a vertical-stack card containing multiple entities cards, each representing an area. And I wa...