feat(#105): custom tap_action per entity

Author: MindFreeze

README.md

@@ -63,7 +63,8 @@ This card is intended to display connections between entities with numeric state
 | color_above       | string  | **Optional** | var(--paper-item-icon-color)| Color for state value above color_limit
 | color_below       | string  | **Optional** | var(--primary-color)| Color for state value below color_limit
 | add_entities      | list    | **Optional** |                     | Experimental. List of entity ids. Their states will be added to this entity, showing a sum.
-| subtract_entities| list    | **Optional** |                     | Experimental. List of entity ids. Their states will be subtracted from this entity's state
+| subtract_entities | list    | **Optional** |                     | Experimental. List of entity ids. Their states will be subtracted from this entity's state
+| tap_action        | action  | **Optional** | more-info           | Home assistant action to perform on tap. Supported actions are `more-info`, `navigate`, `url`, `toggle`, `call-service`, `fire-dom-event`
 
 ### Entity types
 
@@ -171,7 +172,9 @@ This card supports automatic configuration generation based on the HA energy das
             - sensor.washer
         - entity_id: sensor.floor2
     - entities:
-        - sensor.ev_charger
+        - entity_id: sensor.ev_charger
+          tap_action:
+            action: toggle
         - entity_id: garage_other
           type: remaining_parent_state
           name: Other

src/action-handler-directive.ts

@@ -2,15 +2,17 @@ import { LitElement, html, svg, TemplateResult, SVGTemplateResult, PropertyValue
 import { styleMap } from 'lit/directives/style-map';
 import { classMap } from 'lit/directives/class-map';
 import { until } from 'lit/directives/until.js';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { customElement, property, state } from 'lit/decorators';
-import { HomeAssistant, stateIcon, fireEvent } from 'custom-card-helpers'; // This is a community maintained npm module with common helper functions/types. https://github.com/custom-cards/custom-card-helpers
+import { HomeAssistant, stateIcon } from 'custom-card-helpers'; // This is a community maintained npm module with common helper functions/types. https://github.com/custom-cards/custom-card-helpers
 
 import type { Config, SectionState, Box, ConnectionState, EntityConfigInternal, NormalizedState } from './types';
 import { MIN_LABEL_HEIGHT } from './const';
 import { localize } from './localize/localize';
 import styles from './styles';
 import { formatState, getChildConnections, getEntityId, normalizeStateValue, renderError } from './utils';
 import { HassEntities, HassEntity } from 'home-assistant-js-websocket';
+import { handleAction } from './handle-actions';
 
 @customElement('sankey-chart-base')
 export class Chart extends LitElement {
@@ -378,7 +380,7 @@ export class Chart extends LitElement {
   }
 
   private _handleBoxClick(box: Box): void {
-    fireEvent(this, 'hass-more-info', { entityId: box.entity_id });
+    handleAction(this, this.hass, box.config, 'tap');
   }
 
   private _handleMouseEnter(box: Box): void {

src/chart.ts

@@ -0,0 +1,130 @@
+import { HomeAssistant, fireEvent, forwardHaptic, navigate, toggleEntity } from "custom-card-helpers";
+import { ActionConfigExtended } from "./types";
+
+interface ToastActionParams {
+    action: () => void;
+    text: string;
+}
+interface ShowToastParams {
+    message: string;
+    action?: ToastActionParams;
+    duration?: number;
+    dismissable?: boolean;
+}
+const showToast = (el: HTMLElement, params: ShowToastParams) =>
+    fireEvent(el, "hass-notification", params);
+
+export const handleAction = async (
+    node: HTMLElement,
+    hass: HomeAssistant,
+    config: {
+        entity_id: string;
+        hold_action?: ActionConfigExtended;
+        tap_action?: ActionConfigExtended;
+        double_tap_action?: ActionConfigExtended;
+    },
+    action: string
+): Promise<void> => {
+    let actionConfig = config.tap_action;
+
+    if (action === "double_tap" && config.double_tap_action) {
+        actionConfig = config.double_tap_action;
+    } else if (action === "hold" && config.hold_action) {
+        actionConfig = config.hold_action;
+    }
+
+    if (!actionConfig) {
+        actionConfig = {
+            action: "more-info",
+        };
+    }
+
+    if (
+        actionConfig.confirmation &&
+        (!actionConfig.confirmation.exemptions ||
+            !actionConfig.confirmation.exemptions.some((e) => e.user === hass!.user!.id))
+    ) {
+        forwardHaptic("warning");
+
+        if (
+            !confirm(
+                actionConfig.confirmation.text ||
+                    hass.localize(
+                        "ui.panel.lovelace.cards.actions.action_confirmation",
+                        "action",
+                        hass.localize(
+                            "ui.panel.lovelace.editor.action-editor.actions." +
+                                actionConfig.action
+                        ) ||
+                        actionConfig.action
+                    )
+            )
+        ) {
+            return;
+        }
+    }
+
+    switch (actionConfig.action) {
+        case "more-info": {
+            fireEvent(node, "hass-more-info", {
+                // @ts-ignore
+                entityId: actionConfig.entity ?? actionConfig.data?.entity_id ?? config.entity_id,
+            });
+            break;
+        }
+        case "navigate":
+            if (actionConfig.navigation_path) {
+                navigate(node, actionConfig.navigation_path);
+            } else {
+                showToast(node, {
+                    message: hass.localize("ui.panel.lovelace.cards.actions.no_navigation_path"),
+                });
+                forwardHaptic("failure");
+            }
+            break;
+        case "url": {
+            if (actionConfig.url_path) {
+                window.open(actionConfig.url_path);
+            } else {
+                showToast(node, {
+                    message: hass.localize("ui.panel.lovelace.cards.actions.no_url"),
+                });
+                forwardHaptic("failure");
+            }
+            break;
+        }
+        case "toggle": {
+            toggleEntity(hass, config.entity_id);
+            forwardHaptic("light");
+            break;
+        }
+        case "call-service": {
+            if (!actionConfig.service) {
+                showToast(node, {
+                    message: hass.localize("ui.panel.lovelace.cards.actions.no_service"),
+                });
+                forwardHaptic("failure");
+                return;
+            }
+            const [domain, service] = actionConfig.service.split(".", 2);
+            hass.callService(
+                domain,
+                service,
+                // @ts-ignore
+                actionConfig.data ?? actionConfig.service_data,
+                actionConfig.target,
+            );
+            forwardHaptic("light");
+            break;
+        }
+        case "fire-dom-event": {
+            fireEvent(node, "ll-custom", actionConfig);
+        }
+    }
+};
+
+declare global {
+    interface HASSDomEvents {
+        "hass-notification": ShowToastParams;
+    }
+}