Add lock features for tile card

gallery/src/pages/lovelace/tile-card.ts

@@ -2,6 +2,7 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
 import { CoverEntityFeature } from "../../../../src/data/cover";
 import { LightColorMode } from "../../../../src/data/light";
+import { LockEntityFeature } from "../../../../src/data/lock";
 import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
@@ -20,6 +21,11 @@ const ENTITIES = [
   getEntity("light", "unavailable", "unavailable", {
     friendly_name: "Unavailable entity",
   }),
+  getEntity("lock", "front_door", "locked", {
+    friendly_name: "Front Door Lock",
+    device_class: "lock",
+    supported_features: LockEntityFeature.OPEN,
+  }),
   getEntity("climate", "thermostat", "heat", {
     current_temperature: 73,
     min_temp: 45,
@@ -138,6 +144,24 @@ const CONFIGS = [
     - type: "color-temp"
     `,
   },
+  {
+    heading: "Lock commands feature",
+    config: `
+- type: tile
+  entity: lock.front_door
+  features:
+    - type: "lock-commands"
+    `,
+  },
+  {
+    heading: "Lock open door feature",
+    config: `
+- type: tile
+  entity: lock.front_door
+  features:
+    - type: "lock-open-door"
+    `,
+  },
   {
     heading: "Vacuum commands feature",
     config: `

src/data/lock.ts

@@ -5,9 +5,7 @@ import {
 import { getExtendedEntityRegistryEntry } from "./entity_registry";
 import { showEnterCodeDialog } from "../dialogs/enter-code/show-enter-code-dialog";
 import { HomeAssistant } from "../types";
-
-export const FORMAT_TEXT = "text";
-export const FORMAT_NUMBER = "number";
+import { UNAVAILABLE } from "./entity";
 
 export const enum LockEntityFeature {
   OPEN = 1,
@@ -24,6 +22,33 @@ export interface LockEntity extends HassEntityBase {
 
 type ProtectedLockService = "lock" | "unlock" | "open";
 
+export function isLocked(stateObj: LockEntity) {
+  return stateObj.state === "locked";
+}
+
+export function isUnlocking(stateObj: LockEntity) {
+  return stateObj.state === "unlocking";
+}
+
+export function isLocking(stateObj: LockEntity) {
+  return stateObj.state === "locking";
+}
+
+export function isJammed(stateObj: LockEntity) {
+  return stateObj.state === "jammed";
+}
+
+export function isAvailable(stateObj: LockEntity) {
+  if (stateObj.state === UNAVAILABLE) {
+    return false;
+  }
+  const assumedState = stateObj.attributes.assumed_state === true;
+  return (
+    assumedState ||
+    (!isLocking(stateObj) && !isUnlocking(stateObj) && !isJammed(stateObj))
+  );
+}
+
 export const callProtectedLockService = async (
   element: HTMLElement,
   hass: HomeAssistant,

src/dialogs/more-info/controls/more-info-lock.ts

@@ -9,11 +9,12 @@ import "../../../components/ha-control-button";
 import "../../../components/ha-control-button-group";
 import "../../../components/ha-outlined-icon-button";
 import "../../../components/ha-state-icon";
-import { UNAVAILABLE } from "../../../data/entity";
 import {
   LockEntity,
   LockEntityFeature,
   callProtectedLockService,
+  isAvailable,
+  isJammed,
 } from "../../../data/lock";
 import "../../../state-control/lock/ha-state-control-lock-toggle";
 import type { HomeAssistant } from "../../../types";
@@ -85,15 +86,13 @@ class MoreInfoLock extends LitElement {
       "--state-color": color,
     };
 
-    const isJammed = this.stateObj.state === "jammed";
-
     return html`
       <ha-more-info-state-header
         .hass=${this.hass}
         .stateObj=${this.stateObj}
       ></ha-more-info-state-header>
       <div class="controls" style=${styleMap(style)}>
-        ${this.stateObj.state === "jammed"
+        ${isJammed(this.stateObj)
           ? html`
               <div class="status">
                 <span></span>
@@ -125,7 +124,7 @@ class MoreInfoLock extends LitElement {
                     `
                   : html`
                       <ha-control-button
-                        .disabled=${this.stateObj.state === UNAVAILABLE}
+                        .disabled=${!isAvailable(this.stateObj)}
                         class="open-button ${this._buttonState}"
                         @click=${this._open}
                       >
@@ -139,7 +138,7 @@ class MoreInfoLock extends LitElement {
           : nothing}
       </div>
       <div>
-        ${isJammed
+        ${isJammed(this.stateObj)
           ? html`
               <ha-control-button-group class="jammed">
                 <ha-control-button @click=${this._unlock}>

src/panels/lovelace/card-features/hui-lock-commands-card-feature.ts

@@ -0,0 +1,127 @@
+import { mdiLock, mdiLockOpen } from "@mdi/js";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { computeDomain } from "../../../common/entity/compute_domain";
+
+import "../../../components/ha-control-button";
+import "../../../components/ha-control-button-group";
+import {
+  callProtectedLockService,
+  isAvailable,
+  isLocking,
+  isUnlocking,
+  isLocked,
+} from "../../../data/lock";
+import { HomeAssistant } from "../../../types";
+import { LovelaceCardFeature } from "../types";
+import { LockCommandsCardFeatureConfig } from "./types";
+import { forwardHaptic } from "../../../data/haptics";
+
+export const supportsLockCommandsCardFeature = (stateObj: HassEntity) => {
+  const domain = computeDomain(stateObj.entity_id);
+  return domain === "lock";
+};
+
+@customElement("hui-lock-commands-card-feature")
+class HuiLockCommandsCardFeature
+  extends LitElement
+  implements LovelaceCardFeature
+{
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  @state() private _config?: LockCommandsCardFeatureConfig;
+
+  static getStubConfig(): LockCommandsCardFeatureConfig {
+    return {
+      type: "lock-commands",
+    };
+  }
+
+  public setConfig(config: LockCommandsCardFeatureConfig): void {
+    if (!config) {
+      throw new Error("Invalid configuration");
+    }
+    this._config = config;
+  }
+
+  private _onTap(ev): void {
+    ev.stopPropagation();
+    const service = ev.target.dataset.service;
+    if (!this.hass || !this.stateObj || !service) {
+      return;
+    }
+    forwardHaptic("light");
+    callProtectedLockService(this, this.hass, this.stateObj, service);
+  }
+
+  protected render() {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this.stateObj ||
+      !supportsLockCommandsCardFeature(this.stateObj)
+    ) {
+      return nothing;
+    }
+
+    return html`
+      <ha-control-button-group>
+        <ha-control-button
+          .label=${this.hass.localize("ui.card.lock.lock")}
+          .disabled=${!isAvailable(this.stateObj) || isLocked(this.stateObj)}
+          @click=${this._onTap}
+          data-service="lock"
+          class=${classMap({
+            pulse: isLocking(this.stateObj) || isUnlocking(this.stateObj),
+          })}
+        >
+          <ha-svg-icon .path=${mdiLock}></ha-svg-icon>
+        </ha-control-button>
+        <ha-control-button
+          .label=${this.hass.localize("ui.card.lock.unlock")}
+          .disabled=${!isAvailable(this.stateObj) || !isLocked(this.stateObj)}
+          @click=${this._onTap}
+          data-service="unlock"
+          class=${classMap({
+            pulse: isLocking(this.stateObj) || isUnlocking(this.stateObj),
+          })}
+        >
+          <ha-svg-icon .path=${mdiLockOpen}></ha-svg-icon>
+        </ha-control-button>
+      </ha-control-button-group>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      @keyframes pulse {
+        0% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+      .pulse {
+        animation: pulse 1s infinite;
+      }
+      ha-control-button-group {
+        margin: 0 12px 12px 12px;
+        --control-button-group-spacing: 12px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-lock-commands-card-feature": HuiLockCommandsCardFeature;
+  }
+}