Add more info controls for date/time/datetime (#16775)

* Add more info controls for date/time/datetime

* Discard changes to src/panels/lovelace/entity-rows/hui-date-entity-row.ts

* handle unavailable

src/dialogs/more-info/const.ts

@@ -34,6 +34,8 @@ export const DOMAINS_WITH_MORE_INFO = [
   "configurator",
   "counter",
   "cover",
+  "date",
+  "datetime",
   "fan",
   "group",
   "humidifier",
@@ -49,6 +51,7 @@ export const DOMAINS_WITH_MORE_INFO = [
   "siren",
   "sun",
   "switch",
+  "time",
   "timer",
   "update",
   "vacuum",

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

@@ -0,0 +1,51 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { setDateValue } from "../../../data/date";
+import { isUnavailableState } from "../../../data/entity";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-date")
+class MoreInfoDate extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  protected render() {
+    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+      return nothing;
+    }
+
+    return html`
+      <ha-date-input
+        .locale=${this.hass.locale}
+        .value=${this.stateObj.state}
+        .disabled=${isUnavailableState(this.stateObj.state)}
+        @value-changed=${this._dateChanged}
+      >
+      </ha-date-input>
+    `;
+  }
+
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
+    setDateValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-date": MoreInfoDate;
+  }
+}

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

@@ -0,0 +1,80 @@
+import { format } from "date-fns";
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { setDateTimeValue } from "../../../data/datetime";
+import { isUnavailableState } from "../../../data/entity";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-datetime")
+class MoreInfoDatetime extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  protected render() {
+    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+      return nothing;
+    }
+
+    const dateObj = new Date(this.stateObj.state);
+    const time = format(dateObj, "HH:mm:ss");
+    const date = format(dateObj, "yyyy-MM-dd");
+
+    return html`<ha-date-input
+        .locale=${this.hass.locale}
+        .value=${date}
+        .disabled=${isUnavailableState(this.stateObj.state)}
+        @value-changed=${this._dateChanged}
+      >
+      </ha-date-input>
+      <ha-time-input
+        .value=${time}
+        .locale=${this.hass.locale}
+        .disabled=${isUnavailableState(this.stateObj.state)}
+        @value-changed=${this._timeChanged}
+        @click=${this._stopEventPropagation}
+      ></ha-time-input>`;
+  }
+
+  private _stopEventPropagation(ev: Event): void {
+    ev.stopPropagation();
+  }
+
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
+    const dateObj = new Date(this.stateObj!.state);
+    const newTime = ev.detail.value.split(":").map(Number);
+    dateObj.setHours(newTime[0], newTime[1], newTime[2]);
+
+    setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+  }
+
+  private _dateChanged(ev: CustomEvent<{ value: string }>): void {
+    const dateObj = new Date(this.stateObj!.state);
+    const newDate = ev.detail.value.split("-").map(Number);
+    dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]);
+
+    setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+      ha-date-input + ha-time-input {
+        margin-left: 4px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-datetime": MoreInfoDatetime;
+  }
+}

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

@@ -22,37 +22,32 @@ class MoreInfoInputDatetime extends LitElement {
     }
 
     return html`
-        ${
-          this.stateObj.attributes.has_date
-            ? html`
-                <ha-date-input
-                  .locale=${this.hass.locale}
-                  .value=${stateToIsoDateString(this.stateObj)}
-                  .disabled=${isUnavailableState(this.stateObj.state)}
-                  @value-changed=${this._dateChanged}
-                >
-                </ha-date-input>
-              `
-            : ``
-        }
-        ${
-          this.stateObj.attributes.has_time
-            ? html`
-                <ha-time-input
-                  .value=${this.stateObj.state === UNKNOWN
-                    ? ""
-                    : this.stateObj.attributes.has_date
-                    ? this.stateObj.state.split(" ")[1]
-                    : this.stateObj.state}
-                  .locale=${this.hass.locale}
-                  .disabled=${isUnavailableState(this.stateObj.state)}
-                  @value-changed=${this._timeChanged}
-                  @click=${this._stopEventPropagation}
-                ></ha-time-input>
-              `
-            : ``
-        }
-      </hui-generic-entity-row>
+      ${this.stateObj.attributes.has_date
+        ? html`
+            <ha-date-input
+              .locale=${this.hass.locale}
+              .value=${stateToIsoDateString(this.stateObj)}
+              .disabled=${isUnavailableState(this.stateObj.state)}
+              @value-changed=${this._dateChanged}
+            >
+            </ha-date-input>
+          `
+        : ``}
+      ${this.stateObj.attributes.has_time
+        ? html`
+            <ha-time-input
+              .value=${this.stateObj.state === UNKNOWN
+                ? ""
+                : this.stateObj.attributes.has_date
+                ? this.stateObj.state.split(" ")[1]
+                : this.stateObj.state}
+              .locale=${this.hass.locale}
+              .disabled=${isUnavailableState(this.stateObj.state)}
+              @value-changed=${this._timeChanged}
+              @click=${this._stopEventPropagation}
+            ></ha-time-input>
+          `
+        : ``}
     `;
   }
 

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

@@ -0,0 +1,55 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-date-input";
+import "../../../components/ha-time-input";
+import { isUnavailableState } from "../../../data/entity";
+import { setTimeValue } from "../../../data/time";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("more-info-time")
+class MoreInfoTime extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public stateObj?: HassEntity;
+
+  protected render() {
+    if (!this.stateObj || isUnavailableState(this.stateObj.state)) {
+      return nothing;
+    }
+
+    return html`
+      <ha-time-input
+        .value=${this.stateObj.state}
+        .locale=${this.hass.locale}
+        .disabled=${isUnavailableState(this.stateObj.state)}
+        @value-changed=${this._timeChanged}
+        @click=${this._stopEventPropagation}
+      ></ha-time-input>
+    `;
+  }
+
+  private _stopEventPropagation(ev: Event): void {
+    ev.stopPropagation();
+  }
+
+  private _timeChanged(ev: CustomEvent<{ value: string }>): void {
+    setTimeValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-time": MoreInfoTime;
+  }
+}

src/dialogs/more-info/state_more_info_control.ts

@@ -13,6 +13,8 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
   configurator: () => import("./controls/more-info-configurator"),
   counter: () => import("./controls/more-info-counter"),
   cover: () => import("./controls/more-info-cover"),
+  date: () => import("./controls/more-info-date"),
+  datetime: () => import("./controls/more-info-datetime"),
   fan: () => import("./controls/more-info-fan"),
   group: () => import("./controls/more-info-group"),
   humidifier: () => import("./controls/more-info-humidifier"),
@@ -27,6 +29,7 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
   siren: () => import("./controls/more-info-siren"),
   sun: () => import("./controls/more-info-sun"),
   switch: () => import("./controls/more-info-switch"),
+  time: () => import("./controls/more-info-time"),
   timer: () => import("./controls/more-info-timer"),
   update: () => import("./controls/more-info-update"),
   vacuum: () => import("./controls/more-info-vacuum"),