From ecb2a73e2baa37fd2804fb2b25d3dfb0fc97b114 Mon Sep 17 00:00:00 2001
From: Raman Gupta <7243222+raman325@users.noreply.github.com>
Date: Fri, 5 May 2023 09:01:47 -0400
Subject: [PATCH] Add frontend support for `date` platform (#14389)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
---
 src/common/const.ts                           |  2 +
 src/common/entity/compute_state_display.ts    |  2 +-
 src/data/date.ts                              | 14 ++++
 .../create-element/create-row-element.ts      |  2 +
 .../entity-rows/hui-date-entity-row.ts        | 72 +++++++++++++++++++
 5 files changed, 91 insertions(+), 1 deletion(-)
 create mode 100644 src/data/date.ts
 create mode 100644 src/panels/lovelace/entity-rows/hui-date-entity-row.ts

diff --git a/src/common/const.ts b/src/common/const.ts
index 8ed86c0614..e816d5afe3 100644
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -83,6 +83,7 @@ export const FIXED_DOMAIN_ICONS = {
   configurator: mdiCog,
   conversation: mdiMicrophoneMessage,
   counter: mdiCounter,
+  date: mdiCalendar,
   demo: mdiHomeAssistant,
   google_assistant: mdiGoogleAssistant,
   group: mdiGoogleCirclesCommunities,
@@ -208,6 +209,7 @@ export const DOMAINS_INPUT_ROW = [
   "automation",
   "button",
   "cover",
+  "date",
   "fan",
   "group",
   "humidifier",
diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index 662b58a541..72f1645337 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -117,7 +117,7 @@ export const computeStateDisplayFromEntityAttributes = (
 
   const domain = computeDomain(entityId);
 
-  if (domain === "input_datetime" || domain === "time") {
+  if (["date", "input_datetime", "time"].includes(domain)) {
     if (state !== undefined) {
       // If trying to display an explicit state, need to parse the explicit state to `Date` then format.
       // Attributes aren't available, we have to use `state`.
diff --git a/src/data/date.ts b/src/data/date.ts
new file mode 100644
index 0000000000..196ddcc2af
--- /dev/null
+++ b/src/data/date.ts
@@ -0,0 +1,14 @@
+import { HassEntityBase } from "home-assistant-js-websocket";
+import { HomeAssistant } from "../types";
+
+export const stateToIsoDateString = (entityState: HassEntityBase) =>
+  `${entityState}T00:00:00`;
+
+export const setDateValue = (
+  hass: HomeAssistant,
+  entityId: string,
+  date: string | undefined = undefined
+) => {
+  const param = { entity_id: entityId, date };
+  hass.callService(entityId.split(".", 1)[0], "set_value", param);
+};
diff --git a/src/panels/lovelace/create-element/create-row-element.ts b/src/panels/lovelace/create-element/create-row-element.ts
index 6852092e42..360b7023da 100644
--- a/src/panels/lovelace/create-element/create-row-element.ts
+++ b/src/panels/lovelace/create-element/create-row-element.ts
@@ -27,6 +27,7 @@ const LAZY_LOAD_TYPES = {
   "button-entity": () => import("../entity-rows/hui-button-entity-row"),
   "climate-entity": () => import("../entity-rows/hui-climate-entity-row"),
   "cover-entity": () => import("../entity-rows/hui-cover-entity-row"),
+  "date-entity": () => import("../entity-rows/hui-date-entity-row"),
   "group-entity": () => import("../entity-rows/hui-group-entity-row"),
   "input-button-entity": () =>
     import("../entity-rows/hui-input-button-entity-row"),
@@ -61,6 +62,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
   button: "button",
   climate: "climate",
   cover: "cover",
+  date: "date",
   fan: "toggle",
   group: "group",
   humidifier: "humidifier",
diff --git a/src/panels/lovelace/entity-rows/hui-date-entity-row.ts b/src/panels/lovelace/entity-rows/hui-date-entity-row.ts
new file mode 100644
index 0000000000..d3874c3fe4
--- /dev/null
+++ b/src/panels/lovelace/entity-rows/hui-date-entity-row.ts
@@ -0,0 +1,72 @@
+import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import "../../../components/ha-date-input";
+import { isUnavailableState } from "../../../data/entity";
+import { setDateValue, stateToIsoDateString } from "../../../data/date";
+import type { HomeAssistant } from "../../../types";
+import { hasConfigOrEntityChanged } from "../common/has-changed";
+import "../components/hui-generic-entity-row";
+import { createEntityNotFoundWarning } from "../components/hui-warning";
+import type { EntityConfig, LovelaceRow } from "./types";
+
+@customElement("hui-date-entity-row")
+class HuiDateEntityRow extends LitElement implements LovelaceRow {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @state() private _config?: EntityConfig;
+
+  public setConfig(config: EntityConfig): void {
+    if (!config) {
+      throw new Error("Invalid configuration");
+    }
+    this._config = config;
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
+  protected render(): TemplateResult | typeof nothing {
+    if (!this._config || !this.hass) {
+      return nothing;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+
+    if (!stateObj) {
+      return html`
+        <hui-warning>
+          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
+        </hui-warning>
+      `;
+    }
+
+    return html`
+      <hui-generic-entity-row
+        .hass=${this.hass}
+        .config=${this._config}
+        hideName="true"
+      >
+        <ha-date-input
+          .locale=${this.hass.locale}
+          .disabled=${isUnavailableState(stateObj.state)}
+          .value=${stateToIsoDateString(stateObj)}
+          @value-changed=${this._dateChanged}
+        >
+        </ha-date-input>
+      </hui-generic-entity-row>
+    `;
+  }
+
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
+    const stateObj = this.hass!.states[this._config!.entity];
+
+    setDateValue(this.hass!, stateObj.entity_id, ev.detail.value);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-date-entity-row": HuiDateEntityRow;
+  }
+}