How to apply css class the right way?

[gitmirko]

Hi,
I'm not sure which way I should apply style classes in the rules section.

This works:

          rules:
            - entities:
                - light.esstisch
                - light.vorraum_treppe
              state_action:
                action: call-service
                service: floorplan.class_set
                service_data: 'light-${entity.state}'

But I would prefer this way (at least I think) but this doesn't work:

          rules:
            - entities:
                - light.esstisch
                - light.vorraum_treppe
              states:
                - state: 'on'
                  class: light-on
                - state: 'off'
                  class: light-off
                - state: unavailable
                  class: light-unavailable
              propagate: true

I've just copied it from here. What does propagate: true even do? :)

Best regards
Mirko

[OzGav]

Your second way is the way the “old” floor plan worked. So yes you have to format your code the first way.

[pkozul]

Hi @gitmirko

Yep, as @OzGav said, that is the old config format. In the new format, you can use a switch statement (JavaScript) to get the same sort of structure.

We should add this to our examples...

Oh yes, the option propagate: true was used in the old version, to apply the styles to the target SVG element, all all its nested child elements. With the new version, the idea is for CSS rules to drive this behaviour.

[pkozul]

Mirko,

Here is an example.

    - entities:
        - light.esstisch
        - light.vorraum_treppe
      state_action:
        service: floorplan.class_set
        service_data:
          class: |
            >
            switch (entity.state) {
              case "on":
                return "light-on";

              case "off":
                return "light-off";

              default:
                return "light-unavailable";
            }

[pkozul]

@gitmirko

The Ring example now contains a switch statement.

https://experiencelovelace.github.io/ha-floorplan/docs/example-ring/