Nerwyn/service-call-tile-feature

Template filters unavailable on label

SGXander opened this issue · 1 comments

Checklist:

  • I updated to the latest version available
  • I cleared the cache of my browser

Release with the issue:
3.3.8
Last working release (if known):
N/A
Browser and Operating System:
Firefox on Win10
Firefox on Android13

Description of problem:

Javascript errors shown in the web inspector (if applicable):
Uncaught (in promise) Template render error: (unknown path)
Error: filter not found: timestamp_custom
_prettifyError service-call-tile-feature.min.js:2
S service-call-tile-feature.min.js:2
root service-call-tile-feature.min.js:22
render service-call-tile-feature.min.js:2
renderString service-call-tile-feature.min.js:2
renderString service-call-tile-feature.min.js:2
renderTemplate service-call-tile-feature.min.js:2
renderTemplate service-call-tile-feature.min.js:2
buildLabel service-call-tile-feature.min.js:10
render service-call-tile-feature.min.js:102
update service-call-tile-feature.min.js:528
performUpdate service-call-tile-feature.min.js:528
scheduleUpdate service-call-tile-feature.min.js:528
_$EP service-call-tile-feature.min.js:528
requestUpdate service-call-tile-feature.min.js:528
set service-call-tile-feature.min.js:528
O service-call-tile-feature.min.js:528
_$AI service-call-tile-feature.min.js:528
p service-call-tile-feature.min.js:528
g service-call-tile-feature.min.js:528
_$AI service-call-tile-feature.min.js:528
T service-call-tile-feature.min.js:528
_$AI service-call-tile-feature.min.js:528
p service-call-tile-feature.min.js:528
g service-call-tile-feature.min.js:528
_$AI service-call-tile-feature.min.js:528
U service-call-tile-feature.min.js:528
update service-call-tile-feature.min.js:528
performUpdate service-call-tile-feature.min.js:528
scheduleUpdate service-call-tile-feature.min.js:528
_$EP service-call-tile-feature.min.js:528
requestUpdate service-call-tile-feature.min.js:528
set service-call-tile-feature.min.js:528
value hui-card-features.ts:49
value hui-card-features.ts:63
value hui-card-features.ts:62
update lit-element.ts:160
performUpdate reactive-element.ts:1329
scheduleUpdate reactive-element.ts:1261
_$Ej reactive-element.ts:1233
requestUpdate reactive-element.ts:1208
set reactive-element.ts:726
j lit-html.ts:1883
_$AI lit-html.ts:1825
v lit-html.ts:1192
g lit-html.ts:1540
_$AI lit-html.ts:1384
v lit-html.ts:1192
g lit-html.ts:1540
_$AI lit-html.ts:1384
B lit-html.ts:2183
update lit-element.ts:165
performUpdate reactive-element.ts:1329
scheduleUpdate reactive-element.ts:1261
_$Ej reactive-element.ts:1233
requestUpdate reactive-element.ts:1208
set reactive-element.ts:726


Your Full Remote Config

  - type: custom:service-call
    haptics: true
    hide: '{{ is_state("climate.r07_c01_ac", "off") }}'
    entries:
      - type: button
        icon: mdi:timer
        icon_color: |-
          {% if not (is_state(config.entity, "idle")) %}
            var(--state-active-color)
          {% endif %}
        entity_id: timer.office_a_c_off_timer
        label: |-
          {% if not (is_state(config.entity, "idle")) %}
            {{ state_attr(config.entity, "finishes_at") }}     #< OK | Broken >#     {{(state_attr(config.entity, "finishes_at") | as_timestamp | timestamp_custom('%d/%m/%Y %H:%M')}}
          {% endif %}
        style:
          flex-flow: row
        tap_action:
          action: call-service
          service: |-
            {% if is_state(config.entity, "idle") %}
              timer.start
            {% else %}
              timer.cancel
            {% endif %}

Additional information:
Any pipe filtering in templates inside the custom feature seem to cause it to blank and throw the js errors above

Per the README, this card uses a frontend only templating engine called nunjucks, which is virtually syntactically the same as jinja2 (which Home Assistant uses on the backend). Because it doesn't use the Home Assistant backend Python templating engine, it's faster and templates are rendered before the frontend is. BUT it does not have access to all of the Home Assistant templating extensions, and they have to be recreated in TypeScript in the ha-nunjucks repository.

You can create a feature request on the ha-nunjucks repository to add the as_timestamp function and timestamp_custom filter to that package, but it'll take me a while to get to it as I'm working on several major updates for this and another project. Date/timestamp logic is very different between Python and TypeScript, so I'd also have to figure out how to reconcile the two so Pythonic date/timestamp objects can be used in TypeScript.