Convert jinja template into javascript template for custom button-card

Configuration Frontend
1

Hi,

I have two button-cards which i use to display the number of switches and devices in a certain area in a button card custom field.
The area is a var declared on the main button card.
I have a jinja template to get the values, but i’m having trouble converting them to javascript templates.
Can someone help me out?

{{ states | selectattr('domain', 'eq', 'switch')  | 
              map(attribute='entity_id') | map('area_id') | select('eq', '[[[ return variables.var_area ]]]') | list | count }} switches

AND

              {{ area_devices('[[[ return variables.var_area ]]]')|count }}
              devices
2

those will be extremely complex JS templates if you try to convert them. The second one isn’t even possible to convert because JS doesn’t have access to Jinja methods, i.e. you can’t use the area_devices function.

I recommend you create template sensors with this information and then use those in the JS templates.

EDIT: The first one isn’t possible either because you’re using mapping to area_id. So, you can’t convert either of them.

3

Ah… i was afraid of that. I wanted to avoid having to create a sensor for each area.

Any ideas on making the sensors dynamic?

4

You can create dynamic groups with an automation. Then use those in your JS templates. That’s about it.

alias: update switch area groups
trigger:
- platform: time_pattern
  minutes: '/1'
variables:
  areas: "{{ states | map(attribute='entity_id') | map('area_name') | unique | reject('none') | list }}"
action:
- repeat:
    for_each: "{{ areas }}"
    sequence:
    - service: group.set
      data:
        object_id: "{{ repeat.item | slugify }}"
        entities: "{{ repeat.item | area_entities | select('search', '^switch.') | list }}"

I guess you could add a name to this as well, then pair it with a single template sensor that holds counts… then use that in the JS template.

automation

alias: update switch area groups
trigger:
- platform: time_pattern
  minutes: '/1'
variables:
  areas: "{{ states | map(attribute='entity_id') | map('area_name') | unique | reject('none') | list }}"
action:
- repeat:
    for_each: "{{ areas }}"
    sequence:
    - service: group.set
      data:
        object_id: "switch_group_{{ repeat.item | slugify }}"
        name: "{{ repeat.item }}"
        entities: "{{ repeat.item | area_entities | select('search', '^switch.') | list }}"

template sensor

template:
- sensor:
  - name: Switch Group Counts
    state: >
      {{ states.group | selectattr('object_id', 'search', '^switch_group_') | list | count }}
    attributes:
      counts: >
        {% set ns = namespace(values=[]) %}
        {% for s in states.group | selectattr('object_id', 'search', '^switch_group_') %}
          {% set ns.values = ns.values + [ (s.name, s.attributes.entity_id | count) ] %} 
        {% endfor %}
        {{ dict.from_keys(ns.values) }}

js template

[[[
   return states['sensor.switch_group_counts'].attributes.counts[variables.var_area];
]]]

Or just go straight template sensor without the groups

template sensor

template:
- sensor:
  - name: Switch Group Counts
    state: >
      {{ states | map(attribute='entity_id') | map('area_name') | unique | reject('none') | list | count }}
    attributes:
      counts: >
        {% set ns = namespace(values=[]) %}
        {% for s in states | map(attribute='entity_id') | map('area_name') | unique | reject('none') | list %}
          {% set ns.values = ns.values + [ (s, s | area_entities | select('search', '^switch.') | list | count) ] %} 
        {% endfor %}
        {{ dict.from_keys(ns.values) }}

js template

[[[
   return states['sensor.switch_group_counts'].attributes.counts[variables.var_area];
]]]
5

Hi @petro ,

sorry for the late repoly. Was not able to look at this sooner. But this works great thank you.