WIP: add tap/hold actions to entity rows

src/panels/lovelace/cards/hui-entities-card.ts

@@ -4,20 +4,19 @@ import {
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  customElement,
 } from "lit-element";
 
 import "../../../components/ha-card";
 import "../components/hui-entities-toggle";
 
-import { fireEvent } from "../../../common/dom/fire_event";
-import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
 import { HomeAssistant } from "../../../types";
 import { EntityConfig, EntityRow } from "../entity-rows/types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
-import { LovelaceCardConfig } from "../../../data/lovelace";
+import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
 import { processConfigEntities } from "../common/process-config-entities";
 import { createRowElement } from "../common/create-row-element";
-import computeDomain from "../../../common/entity/compute_domain";
+
 import applyThemesOnElement from "../../../common/dom/apply_themes_on_element";
 
 export interface EntitiesCardEntityConfig extends EntityConfig {
@@ -27,6 +26,8 @@ export interface EntitiesCardEntityConfig extends EntityConfig {
   service?: string;
   service_data?: object;
   url?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
 }
 
 export interface EntitiesCardConfig extends LovelaceCardConfig {
@@ -36,6 +37,7 @@ export interface EntitiesCardConfig extends LovelaceCardConfig {
   theme?: string;
 }
 
+@customElement("hui-entities-card")
 class HuiEntitiesCard extends LitElement implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(/* webpackChunkName: "hui-entities-card-editor" */ "../editor/config-elements/hui-entities-card-editor");
@@ -47,7 +49,9 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
   }
 
   protected _hass?: HomeAssistant;
+
   protected _config?: EntitiesCardConfig;
+
   protected _configEntities?: EntitiesCardEntityConfig[];
 
   set hass(hass: HomeAssistant) {
@@ -168,29 +172,22 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     if (this._hass) {
       element.hass = this._hass;
     }
+
     if (
-      entityConf.entity &&
-      !DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityConf.entity))
+      !entityConf.tap_action ||
+      (entityConf.tap_action && entityConf.tap_action.action !== "none")
     ) {
       element.classList.add("state-card-dialog");
-      element.addEventListener("click", () => this._handleClick(entityConf));
     }
 
     return html`
       <div>${element}</div>
     `;
   }
-
-  private _handleClick(entityConf: EntitiesCardEntityConfig): void {
-    const entityId = entityConf.entity;
-    fireEvent(this, "hass-more-info", { entityId });
-  }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
     "hui-entities-card": HuiEntitiesCard;
   }
 }
-
-customElements.define("hui-entities-card", HuiEntitiesCard);

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -1,4 +1,3 @@
-import computeStateName from "../../../common/entity/compute_state_name";
 import {
   LitElement,
   html,
@@ -8,6 +7,7 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import computeStateName from "../../../common/entity/compute_state_name";
 
 import { HomeAssistant } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/hui-entities-card";

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -12,7 +12,11 @@ import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import { processEditorEntities } from "../process-editor-entities";
 import { struct } from "../../common/structs/struct";
-import { EntitiesEditorEvent, EditorTarget } from "../types";
+import {
+  EntitiesEditorEvent,
+  EditorTarget,
+  actionConfigStruct,
+} from "../types";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -33,6 +37,8 @@ const entitiesConfigStruct = struct.union([
     entity: "entity-id",
     name: "string?",
     icon: "icon?",
+    tap_action: struct.optional(actionConfigStruct),
+    hold_action: struct.optional(actionConfigStruct),
   },
   "entity-id",
 ]);

src/panels/lovelace/entity-rows/hui-climate-entity-row.ts

@@ -14,6 +14,8 @@ import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { longPress } from "../common/directives/long-press-directive";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-climate-entity-row")
 class HuiClimateEntityRow extends LitElement implements EntityRow {
@@ -49,7 +51,13 @@ class HuiClimateEntityRow extends LitElement implements EntityRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row
+        @ha-click="${this._handleTap}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+        .hass="${this.hass}"
+        .config="${this._config}"
+      >
         <ha-climate-state
           .hass="${this.hass}"
           .stateObj="${stateObj}"
@@ -65,6 +73,14 @@ class HuiClimateEntityRow extends LitElement implements EntityRow {
       }
     `;
   }
+
+  private _handleTap() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
 }
 
 declare global {

src/panels/lovelace/entity-rows/hui-cover-entity-row.ts

@@ -16,6 +16,8 @@ import "../components/hui-warning";
 import { isTiltOnly } from "../../../util/cover-model";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { longPress } from "../common/directives/long-press-directive";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-cover-entity-row")
 class HuiCoverEntityRow extends LitElement implements EntityRow {
@@ -50,7 +52,13 @@ class HuiCoverEntityRow extends LitElement implements EntityRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row
+        @ha-click="${this._handleTap}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+        .hass="${this.hass}"
+        .config="${this._config}"
+      >
         ${isTiltOnly(stateObj)
           ? html`
               <ha-cover-tilt-controls
@@ -76,6 +84,14 @@ class HuiCoverEntityRow extends LitElement implements EntityRow {
       }
     `;
   }
+
+  private _handleTap() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
 }
 
 declare global {

src/panels/lovelace/entity-rows/hui-group-entity-row.ts

@@ -14,6 +14,8 @@ import computeStateDisplay from "../../../common/entity/compute_state_display";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { longPress } from "../common/directives/long-press-directive";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-group-entity-row")
 class HuiGroupEntityRow extends LitElement implements EntityRow {
@@ -48,7 +50,13 @@ class HuiGroupEntityRow extends LitElement implements EntityRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row
+        @ha-click="${this._handleTap}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+        .hass="${this.hass}"
+        .config="${this._config}"
+      >
         ${this._computeCanToggle(stateObj.attributes.entity_id)
           ? html`
               <ha-entity-toggle
@@ -74,6 +82,14 @@ class HuiGroupEntityRow extends LitElement implements EntityRow {
       DOMAINS_TOGGLE.has(entityId.split(".", 1)[0])
     );
   }
+
+  private _handleTap() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
 }
 
 declare global {

src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts

@@ -16,6 +16,8 @@ import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { EntityRow, EntityConfig } from "./types";
 import { HomeAssistant } from "../../../types";
 import { setValue } from "../../../data/input_text";
+import { longPress } from "../common/directives/long-press-directive";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-input-number-entity-row")
 class HuiInputNumberEntityRow extends LitElement implements EntityRow {
@@ -68,7 +70,13 @@ class HuiInputNumberEntityRow extends LitElement implements EntityRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row
+        @ha-click="${this._handleTap}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+        .hass="${this.hass}"
+        .config="${this._config}"
+      >
         <div>
           ${stateObj.attributes.mode === "slider"
             ? html`
@@ -152,6 +160,14 @@ class HuiInputNumberEntityRow extends LitElement implements EntityRow {
       setValue(this.hass!, stateObj.entity_id, element.value!);
     }
   }
+
+  private _handleTap() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
 }
 
 declare global {

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -13,12 +13,15 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 
 import "../../../components/entity/state-badge";
+import "../components/hui-generic-entity-row";
 import "../components/hui-warning";
 
 import computeStateName from "../../../common/entity/compute_state_name";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 import { setOption } from "../../../data/input-select";
+import { longPress } from "../common/directives/long-press-directive";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-input-select-entity-row")
 class HuiInputSelectEntityRow extends LitElement implements EntityRow {
@@ -54,7 +57,12 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
     }
 
     return html`
-      <state-badge .stateObj="${stateObj}"></state-badge>
+      <state-badge
+        @ha-click="${this._handleTap}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+        .stateObj="${stateObj}"
+      ></state-badge>
       <paper-dropdown-menu
         selected-item-label="${stateObj.state}"
         @selected-item-label-changed="${this._selectedChanged}"
@@ -102,6 +110,14 @@ class HuiInputSelectEntityRow extends LitElement implements EntityRow {
 
     setOption(this.hass!, stateObj.entity_id, ev.target.selectedItem.innerText);
   }
+
+  private _handleTap() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
 }
 
 declare global {

src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts

@@ -13,6 +13,8 @@ import "../components/hui-warning";
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
 import { setValue } from "../../../data/input_text";
+import { longPress } from "../common/directives/long-press-directive";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-input-text-entity-row")
 class HuiInputTextEntityRow extends LitElement implements EntityRow {
@@ -47,7 +49,13 @@ class HuiInputTextEntityRow extends LitElement implements EntityRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row
+        @ha-click="${this._handleTap}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+        .hass="${this.hass}"
+        .config="${this._config}"
+      >
         <paper-input
           no-label-float
           .value="${stateObj.state}"
@@ -77,6 +85,14 @@ class HuiInputTextEntityRow extends LitElement implements EntityRow {
 
     ev.target.blur();
   }
+
+  private _handleTap() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
 }
 
 declare global {

src/panels/lovelace/entity-rows/hui-lock-entity-row.ts

@@ -13,6 +13,8 @@ import "../components/hui-warning";
 
 import { HomeAssistant } from "../../../types";
 import { EntityRow, EntityConfig } from "./types";
+import { longPress } from "../common/directives/long-press-directive";
+import { handleClick } from "../common/handle-click";
 
 @customElement("hui-lock-entity-row")
 class HuiLockEntityRow extends LitElement implements EntityRow {
@@ -47,7 +49,13 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
     }
 
     return html`
-      <hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+      <hui-generic-entity-row
+        @ha-click="${this._handleTap}"
+        @ha-hold="${this._handleHold}"
+        .longPress="${longPress()}"
+        .hass="${this.hass}"
+        .config="${this._config}"
+      >
         <mwc-button @click="${this._callService}">
           ${stateObj.state === "locked"
             ? this.hass!.localize("ui.card.lock.unlock")
@@ -74,6 +82,14 @@ class HuiLockEntityRow extends LitElement implements EntityRow {
       { entity_id: stateObj.entity_id }
     );
   }
+
+  private _handleTap() {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold() {
+    handleClick(this, this.hass!, this._config!, true);
+  }
 }
 
 declare global {