feat: Extend callService with target to make it possible to call a se…

…rvice on a custom entity. (#363) * Small typo fix. * Extended callService function with target to make it possible to call service on a custom target. Extended README.md with new target property. * Run format and lint
denysdovhan · Jun 16, 2024 · 861a52c · 861a52c
1 parent 6f6261c
commit 861a52c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -146,6 +146,7 @@ You can define [custom scripts][ha-scripts] for custom actions or add shortcuts
 | `name`         | `string` | Optional | Friendly name of the shortcut, i.e. `Switch to Auto`.                                           |
 | `icon`         | `string` | Optional | Any icon for shortcut button.                                                                   |
 | `service`      | `string` | Optional | A service to call, i.e. `script.clean_air`.                                                     |
+| `target`       | `object` | Optional | A `HassServiceTarget`, to define a target for the current service call.                         |
 | `service_data` | `object` | Optional | `service_data` for `service` call                                                               |
 | `percentage`   | `object` | Optional | A `percentage` to switch to, i.e. `27`, etc. See `entity`'s `percentage_step` for valid values. |
 | `preset_mode`  | `object` | Optional | A `speed` to switch to, i.e. `Auto`, etc                                                        |

diff --git a/src/config.ts b/src/config.ts
@@ -2,7 +2,7 @@ import { PurifierCardConfig } from './types';
 import localize from './localize';
 
 export default function buildConfig(
-  config?: Partial<PurifierCardConfig>
+  config?: Partial<PurifierCardConfig>,
 ): PurifierCardConfig {
   if (!config) {
     throw new Error(localize('error.invalid_config'));

diff --git a/src/editor.ts b/src/editor.ts
@@ -63,9 +63,8 @@ export class PurifierCardEditor extends LitElement {
             validationMessage=${localize('error.missing_entity')}
           >
             ${fanEntities.map(
-              (entity) => html`<mwc-list-item .value=${entity}
-                >${entity}</mwc-list-item
-              >`
+              (entity) =>
+                html`<mwc-list-item .value=${entity}>${entity}</mwc-list-item>`,
             )}
           </ha-select>
         </div>
@@ -75,7 +74,7 @@ export class PurifierCardEditor extends LitElement {
             aria-label=${localize(
               this.compact_view
                 ? 'editor.compact_view_aria_label_off'
-                : 'editor.compact_view_aria_label_on'
+                : 'editor.compact_view_aria_label_on',
             )}
             .checked=${this.compact_view}
             .configValue=${'compact_view'}
@@ -90,7 +89,7 @@ export class PurifierCardEditor extends LitElement {
             aria-label=${localize(
               this.show_name
                 ? 'editor.show_name_aria_label_off'
-                : 'editor.show_name_aria_label_on'
+                : 'editor.show_name_aria_label_on',
             )}
             .checked=${this.show_name}
             .configValue=${'show_name'}
@@ -105,7 +104,7 @@ export class PurifierCardEditor extends LitElement {
             aria-label=${localize(
               this.show_state
                 ? 'editor.show_state_aria_label_off'
-                : 'editor.show_state_aria_label_on'
+                : 'editor.show_state_aria_label_on',
             )}
             .checked=${this.show_state}
             .configValue=${'show_state'}
@@ -120,7 +119,7 @@ export class PurifierCardEditor extends LitElement {
             aria-label=${localize(
               this.show_name
                 ? 'editor.show_toolbar_aria_label_off'
-                : 'editor.show_toolbar_aria_label_on'
+                : 'editor.show_toolbar_aria_label_on',
             )}
             .checked=${this.show_toolbar}
             .configValue=${'show_toolbar'}

diff --git a/src/localize.ts b/src/localize.ts
@@ -48,7 +48,7 @@ const DEFAULT_LANG = 'en';
 export default function localize(
   str: string,
   search?: string,
-  replace?: string
+  replace?: string,
 ): string | undefined {
   const [section, key] = str.toLowerCase().split('.');
 

diff --git a/src/purifier-card.ts b/src/purifier-card.ts
@@ -23,19 +23,19 @@ import buildConfig from './config';
 
 registerTemplates();
 
-// String in the right side will be replaced by Rollup
+// String on the right side will be replaced by Rollup
 const PKG_VERSION = 'PKG_VERSION_VALUE';
 
 console.info(
   `%c PURIFIER-CARD %c ${PKG_VERSION} `,
   'color: white; background: blue; font-weight: 700;',
-  'color: blue; background: white; font-weight: 700;'
+  'color: blue; background: white; font-weight: 700;',
 );
 
 if (!customElements.get('ha-icon-button')) {
   customElements.define(
     'ha-icon-button',
-    class extends (customElements.get('paper-icon-button') ?? HTMLElement) {}
+    class extends (customElements.get('paper-icon-button') ?? HTMLElement) {},
   );
 }
 
@@ -58,7 +58,7 @@ export class PurifierCard extends LitElement {
 
   public static getStubConfig(
     _: unknown,
-    entities: string[]
+    entities: string[],
   ): Partial<PurifierCardConfig> {
     const [purifierEntity] = entities.filter((eid) => eid.startsWith('fan'));
 
@@ -103,20 +103,26 @@ export class PurifierCard extends LitElement {
       {
         bubbles: false,
         composed: true,
-      }
+      },
     );
   }
 
   private callService(
     service: ServiceCallRequest['service'],
     options: ServiceCallRequest['serviceData'] = {},
-    request = true
+    target?: ServiceCallRequest['target'],
+    request = true,
   ) {
     const [domain, name] = service.split('.');
-    this.hass.callService(domain, name, {
-      entity_id: this.config.entity,
-      ...options,
-    });
+    this.hass.callService(
+      domain,
+      name,
+      {
+        entity_id: this.config.entity,
+        ...options,
+      },
+      target,
+    );
 
     if (request) {
       this.requestInProgress = true;
@@ -161,16 +167,15 @@ export class PurifierCard extends LitElement {
           </mmp-icon-button>
 
           ${preset_modes.map(
-            (item, index) =>
-              html`
-                <mwc-list-item
-                  ?activated=${selected === index}
-                  value=${item}
-                  @click=${(e: PointerEvent) => this.handlePresetMode(e)}
-                >
-                  ${localize(`preset_mode.${item.toLowerCase()}`) || item}
-                </mwc-list-item>
-              `
+            (item, index) => html`
+              <mwc-list-item
+                ?activated=${selected === index}
+                value=${item}
+                @click=${(e: PointerEvent) => this.handlePresetMode(e)}
+              >
+                ${localize(`preset_mode.${item.toLowerCase()}`) || item}
+              </mwc-list-item>
+            `,
           )}
         </ha-button-menu>
       </div>
@@ -316,7 +321,7 @@ export class PurifierCard extends LitElement {
             <div class="stats-subtitle">${subtitle}</div>
           </div>
         `;
-      }
+      },
     );
 
     return stats.length ? html`<div class="stats">${stats}</div>` : nothing;
@@ -331,10 +336,18 @@ export class PurifierCard extends LitElement {
     }
 
     const buttons = shortcuts.map(
-      ({ name, icon, service, service_data, preset_mode, percentage }) => {
+      ({
+        name,
+        icon,
+        service,
+        service_data,
+        target,
+        preset_mode,
+        percentage,
+      }) => {
         const execute = () => {
           if (service) {
-            this.callService(service, service_data);
+            this.callService(service, target, service_data);
           }
 
           if (preset_mode) {
@@ -362,7 +375,7 @@ export class PurifierCard extends LitElement {
             ><ha-icon icon="${icon}"></ha-icon
           ></ha-icon-button>
         `;
-      }
+      },
     );
 
     return html`

diff --git a/src/types.ts b/src/types.ts
@@ -1,6 +1,7 @@
 import {
   HassEntityAttributeBase,
   HassEntityBase,
+  HassServiceTarget,
 } from 'home-assistant-js-websocket';
 import { TemplateResult, nothing } from 'lit';
 
@@ -44,6 +45,7 @@ export interface PurifierCardShortcut {
   icon?: string;
   service?: string;
   service_data?: Record<string, unknown>;
+  target?: HassServiceTarget;
   percentage?: number;
   preset_mode?: string;
 }