Add service call in html rendering

[arifroni]

I modified the update popup card in Mattias's update popup card. You can click the update button and update will start.

configuration.yaml

template:
  - sensor:
      - unique_id: updates
        state: >
          {{ this.attributes.values() | sum }}
        attributes:
          home_assistant_core: >
            {% set installed = state_attr('update.home_assistant_core_update', 'installed_version') %}
            {% set latest = state_attr('update.home_assistant_core_update', 'latest_version') %}
            {{ iif(version(latest) > version(installed) and '.' in installed and '.' in latest, 1, 0) }}
          home_assistant_supervisor: >
            {% set installed = state_attr('update.home_assistant_supervisor_update', 'installed_version') %}
            {% set latest = state_attr('update.home_assistant_supervisor_update', 'latest_version') %}
            {{ iif(version(latest) > version(installed) and '.' in installed and '.' in latest, 1, 0) }}
          home_assistant_operating_system: >
            {% set installed = state_attr('update.home_assistant_operating_system_update', 'installed_version') %}
            {% set latest = state_attr('update.home_assistant_operating_system_update', 'latest_version') %}
            {{ iif(version(latest) > version(installed) and '.' in installed and '.' in latest, 1, 0) }}
          update_entities: >
            {{ states.update | selectattr('state','eq','on') | list | count - states.update | selectattr('entity_id', 'match', 'update.home_assistant*') | selectattr('state','eq','on') | list | count }}
          # other_updates: >
          #   {{ states('sensor.template_other_updates') | int(0) }}

      - unique_id: other_updates
        state: >
          {% set ns = namespace(list=[]) %}
          {% for k, v in this.attributes | dictsort(by='value') %}
            {% set ns.list = ns.list + [v] if v != '' else [] %}
          {% endfor %}
          {{ ns.list | count }}
        attributes:
          esphome: >
            {% macro f(e) %}
              {{- state_attr('update.eh_' + e + '_sw_firmware', 'installed_version') -}}
            {% endmacro %}
            {% set group = [f('abstellraum'), f('dinning'), f('kitchen'), f('livingroom')] | min %}
            {% set installed = group.split()[0] %}
            {% set latest = states('sensor.updates_esphome_latest') %}
            {% set url = 'https://github.com/esphome/esphome/releases/latest' %}
            {% if installed != latest %}
              <b><a href="#" onclick="window.open('{{ url }}');">ESPHome</a></b> {{ installed + ' <b>&rarr;</b> ' + latest }}
            {% endif %}

command_line:
  - sensor:
      name: hacs_installed
      command: |-
        python3 << EOF
        import os, json
        installed = {"repositories": []}
        PATH = "/config/.storage/hacs.repositories"
        with open(PATH, "r", encoding="UTF-8") as file:
            data = json.load(file)["data"]
            for i in data:
                if "installed" in data[i]:
                    installed["repositories"] += [data[i]["full_name"]]
            file.close()
        print(json.dumps(installed))
        EOF
      value_template: >
        {{ value_json.repositories | count }}
      json_attributes:
        - repositories
      scan_interval: 86400

code for button

- type: custom:button-card
  variables:
    updates: sensor.template_updates
    other_updates: sensor.template_other_updates
    hacs_installed: sensor.hacs_installed
  show_state: true
  show_name: false
  show_icon: false
  styles:
    state:
      - text-align: left
      - justify-self: left
      - white-space: normal
    card:
      - cursor: default
      - padding: 0.2em 0 0 0.6em
      - letter-spacing: var(--mdc-typography-body1-letter-spacing)
  tap_action:
    href:
  state_display: |
    [[[
      // Function to call a service
      function callService() {
        hass.callService('light', 'turn_on', { entity_id: 'light.office_group_1' });
      };
      
      // variables
      let output = '',
          updates = states[variables.updates],
          hacs_installed = states[variables.hacs_installed]?.attributes.repositories,
          //other_updates = states[variables.other_updates],
          hacs_update = states['update.hacs_update']?.attributes.installed_version,
          no_updates = variables.translate_no_updates,
          update_available = variables.translate_update_available,
          updates_available = variables.translate_updates_available;
      
      const rename = a => {
          if (a.friendly_name && a.friendly_name.match(/update/i)) {
              const nameWithoutUpdate = a.friendly_name.replace(/update/i, '').trim();
              return nameWithoutUpdate;
          } else {
              return a?.friendly_name;
          }
      };
      
      // update entities
      Object.keys(states).forEach(key => {
        let s = states[key], e = s.entity_id, a = s.attributes;
        if (e.includes('update.') && !e.includes('update.home_assistant') && s.state === 'on') {
          let releaseLink = a.release_url ? `<a href="#" onclick="window.open('${a.release_url}');">${rename(a)}</a>` : rename(a);
          output += `
            <li>
              <b>${releaseLink}</b>
              ${a.installed_version} <b>&rarr;</b> ${a.latest_version}
              <button class="service-button" onclick="window.bcUpdate('${e}')">Update</button>
            </li>`;
        }
      });

      // subtitle
      let count = updates?.attributes.update_entities,
          subtitle = count === 0
              ? `${no_updates} <b>&larr;</b> ${hacs_update || ''}`
              : `${count} ${count === 1 ? update_available : updates_available} ${String.fromCodePoint('0x1f389')}`;
      window.bcUpdate = (entity) => hass.callService('update','install', { entity_id: entity });
      return `
        <ha-icon icon="mdi:package-up"></ha-icon> <span class="title">Integrations</span><br>
        <p class="subtitle">${subtitle}</p>
        <ul>${output}</ul>
      `;
    ]]]

NB: not sure if this would be the right title, if its not, please suggest me right title.
Also things can be improved, like loading icon beside the update button when update is happening :)

[Mariusthvdb]

thanks for opening this section ;-)