jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Handle "unknown" for date, time and datetime entities (#17043)

Browse Source
This commit is contained in:
Philip Allgaier 2023-06-28 12:45:34 +02:00 committed by GitHub
parent 73e1b4b1d1
commit 952bcff8c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 77 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/dialogs/more-info/controls/more-info-date.ts
View File

@ -4,7 +4,7 @@ import { customElement, property } from "lit/decorators";
import "../../../components/ha-date-input"; import "../../../components/ha-date-input";
import "../../../components/ha-time-input"; import "../../../components/ha-time-input";
import { setDateValue } from "../../../data/date"; import { setDateValue } from "../../../data/date";
import { isUnavailableState } from "../../../data/entity"; import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
@customElement("more-info-date") @customElement("more-info-date")
@ -14,15 +14,17 @@ class MoreInfoDate extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity; @property({ attribute: false }) public stateObj?: HassEntity;
protected render() { protected render() {
if (!this.stateObj || isUnavailableState(this.stateObj.state)) { if (!this.stateObj || this.stateObj.state === UNAVAILABLE) {
return nothing; return nothing;
} }
return html` return html`
<ha-date-input <ha-date-input
.locale=${this.hass.locale} .locale=${this.hass.locale}
.value=${this.stateObj.state} .value=${isUnavailableState(this.stateObj.state)
.disabled=${isUnavailableState(this.stateObj.state)} ? undefined
: this.stateObj.state}
.disabled=${this.stateObj.state === UNAVAILABLE}
@value-changed=${this._dateChanged} @value-changed=${this._dateChanged}
> >
</ha-date-input> </ha-date-input>
@ -30,7 +32,9 @@ class MoreInfoDate extends LitElement {
} }
private _dateChanged(ev: CustomEvent<{ value: string }>): void { private _dateChanged(ev: CustomEvent<{ value: string }>): void {
setDateValue(this.hass!, this.stateObj!.entity_id, ev.detail.value); if (ev.detail.value) {
setDateValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
}
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {

36
src/dialogs/more-info/controls/more-info-datetime.ts
View File

@ -5,7 +5,7 @@ import { customElement, property } from "lit/decorators";
import "../../../components/ha-date-input"; import "../../../components/ha-date-input";
import "../../../components/ha-time-input"; import "../../../components/ha-time-input";
import { setDateTimeValue } from "../../../data/datetime"; import { setDateTimeValue } from "../../../data/datetime";
import { isUnavailableState } from "../../../data/entity"; import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
@customElement("more-info-datetime") @customElement("more-info-datetime")
@ -15,25 +15,27 @@ class MoreInfoDatetime extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity; @property({ attribute: false }) public stateObj?: HassEntity;
protected render() { protected render() {
if (!this.stateObj || isUnavailableState(this.stateObj.state)) { if (!this.stateObj || this.stateObj.state === UNAVAILABLE) {
return nothing; return nothing;
} }
const dateObj = new Date(this.stateObj.state); const dateObj = isUnavailableState(this.stateObj.state)
const time = format(dateObj, "HH:mm:ss"); ? undefined
const date = format(dateObj, "yyyy-MM-dd"); : new Date(this.stateObj.state);
const time = dateObj ? format(dateObj, "HH:mm:ss") : undefined;
const date = dateObj ? format(dateObj, "yyyy-MM-dd") : undefined;
return html`<ha-date-input return html`<ha-date-input
.locale=${this.hass.locale} .locale=${this.hass.locale}
.value=${date} .value=${date}
.disabled=${isUnavailableState(this.stateObj.state)} .disabled=${this.stateObj.state === UNAVAILABLE}
@value-changed=${this._dateChanged} @value-changed=${this._dateChanged}
> >
</ha-date-input> </ha-date-input>
<ha-time-input <ha-time-input
.value=${time} .value=${time}
.locale=${this.hass.locale} .locale=${this.hass.locale}
.disabled=${isUnavailableState(this.stateObj.state)} .disabled=${this.stateObj.state === UNAVAILABLE}
@value-changed=${this._timeChanged} @value-changed=${this._timeChanged}
@click=${this._stopEventPropagation} @click=${this._stopEventPropagation}
></ha-time-input>`; ></ha-time-input>`;
@ -44,19 +46,23 @@ class MoreInfoDatetime extends LitElement {
} }
private _timeChanged(ev: CustomEvent<{ value: string }>): void { private _timeChanged(ev: CustomEvent<{ value: string }>): void {
const dateObj = new Date(this.stateObj!.state); if (ev.detail.value) {
const newTime = ev.detail.value.split(":").map(Number); const dateObj = new Date(this.stateObj!.state);
dateObj.setHours(newTime[0], newTime[1], newTime[2]); const newTime = ev.detail.value.split(":").map(Number);
dateObj.setHours(newTime[0], newTime[1], newTime[2]);
setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj); setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
}
} }
private _dateChanged(ev: CustomEvent<{ value: string }>): void { private _dateChanged(ev: CustomEvent<{ value: string }>): void {
const dateObj = new Date(this.stateObj!.state); if (ev.detail.value) {
const newDate = ev.detail.value.split("-").map(Number); const dateObj = new Date(this.stateObj!.state);
dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]); 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); setDateTimeValue(this.hass!, this.stateObj!.entity_id, dateObj);
}
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {

14
src/dialogs/more-info/controls/more-info-time.ts
View File

@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import "../../../components/ha-date-input"; import "../../../components/ha-date-input";
import "../../../components/ha-time-input"; import "../../../components/ha-time-input";
import { isUnavailableState } from "../../../data/entity"; import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
import { setTimeValue } from "../../../data/time"; import { setTimeValue } from "../../../data/time";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
@ -14,15 +14,17 @@ class MoreInfoTime extends LitElement {
@property({ attribute: false }) public stateObj?: HassEntity; @property({ attribute: false }) public stateObj?: HassEntity;
protected render() { protected render() {
if (!this.stateObj || isUnavailableState(this.stateObj.state)) { if (!this.stateObj || this.stateObj.state === UNAVAILABLE) {
return nothing; return nothing;
} }
return html` return html`
<ha-time-input <ha-time-input
.value=${this.stateObj.state} .value=${isUnavailableState(this.stateObj.state)
? undefined
: this.stateObj.state}
.locale=${this.hass.locale} .locale=${this.hass.locale}
.disabled=${isUnavailableState(this.stateObj.state)} .disabled=${this.stateObj.state === UNAVAILABLE}
@value-changed=${this._timeChanged} @value-changed=${this._timeChanged}
@click=${this._stopEventPropagation} @click=${this._stopEventPropagation}
></ha-time-input> ></ha-time-input>
@ -34,7 +36,9 @@ class MoreInfoTime extends LitElement {
} }
private _timeChanged(ev: CustomEvent<{ value: string }>): void { private _timeChanged(ev: CustomEvent<{ value: string }>): void {
setTimeValue(this.hass!, this.stateObj!.entity_id, ev.detail.value); if (ev.detail.value) {
setTimeValue(this.hass!, this.stateObj!.entity_id, ev.detail.value);
}
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {

12
src/panels/lovelace/entity-rows/hui-date-entity-row.ts
View File

@ -1,7 +1,7 @@
import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-date-input"; import "../../../components/ha-date-input";
import { isUnavailableState } from "../../../data/entity"; import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
import { setDateValue } from "../../../data/date"; import { setDateValue } from "../../../data/date";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
@ -41,14 +41,16 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
`; `;
} }
const unavailable = isUnavailableState(stateObj.state); const unavailable = stateObj.state === UNAVAILABLE;
return html` return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}> <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<ha-date-input <ha-date-input
.locale=${this.hass.locale} .locale=${this.hass.locale}
.disabled=${unavailable} .disabled=${unavailable}
.value=${unavailable ? "" : stateObj.state} .value=${isUnavailableState(stateObj.state)
? undefined
: stateObj.state}
@value-changed=${this._dateChanged} @value-changed=${this._dateChanged}
> >
</ha-date-input> </ha-date-input>
@ -57,7 +59,9 @@ class HuiDateEntityRow extends LitElement implements LovelaceRow {
} }
private _dateChanged(ev: CustomEvent<{ value: string }>): void { private _dateChanged(ev: CustomEvent<{ value: string }>): void {
setDateValue(this.hass!, this._config!.entity, ev.detail.value); if (ev.detail.value) {
setDateValue(this.hass!, this._config!.entity, ev.detail.value);
}
} }
} }

36
src/panels/lovelace/entity-rows/hui-datetime-entity-row.ts
View File

@ -10,7 +10,7 @@ import {
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-date-input"; import "../../../components/ha-date-input";
import { format } from "date-fns"; import { format } from "date-fns";
import { isUnavailableState } from "../../../data/entity"; import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
import { setDateTimeValue } from "../../../data/datetime"; import { setDateTimeValue } from "../../../data/datetime";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
@ -52,11 +52,13 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
`; `;
} }
const unavailable = isUnavailableState(stateObj.state); const unavailable = stateObj.state === UNAVAILABLE;
const dateObj = unavailable ? undefined : new Date(stateObj.state); const dateObj = isUnavailableState(stateObj.state)
const time = dateObj ? format(dateObj, "HH:mm:ss") : ""; ? undefined
const date = dateObj ? format(dateObj, "yyyy-MM-dd") : ""; : new Date(stateObj.state);
const time = dateObj ? format(dateObj, "HH:mm:ss") : undefined;
const date = dateObj ? format(dateObj, "yyyy-MM-dd") : undefined;
return html` return html`
<hui-generic-entity-row <hui-generic-entity-row
@ -90,21 +92,25 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
} }
private _timeChanged(ev: CustomEvent<{ value: string }>): void { private _timeChanged(ev: CustomEvent<{ value: string }>): void {
const stateObj = this.hass!.states[this._config!.entity]; if (ev.detail.value) {
const dateObj = new Date(stateObj.state); const stateObj = this.hass!.states[this._config!.entity];
const newTime = ev.detail.value.split(":").map(Number); const dateObj = new Date(stateObj.state);
dateObj.setHours(newTime[0], newTime[1], newTime[2]); const newTime = ev.detail.value.split(":").map(Number);
dateObj.setHours(newTime[0], newTime[1], newTime[2]);
setDateTimeValue(this.hass!, stateObj.entity_id, dateObj); setDateTimeValue(this.hass!, stateObj.entity_id, dateObj);
}
} }
private _dateChanged(ev: CustomEvent<{ value: string }>): void { private _dateChanged(ev: CustomEvent<{ value: string }>): void {
const stateObj = this.hass!.states[this._config!.entity]; if (ev.detail.value) {
const dateObj = new Date(stateObj.state); const stateObj = this.hass!.states[this._config!.entity];
const newDate = ev.detail.value.split("-").map(Number); const dateObj = new Date(stateObj.state);
dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]); const newDate = ev.detail.value.split("-").map(Number);
dateObj.setFullYear(newDate[0], newDate[1] - 1, newDate[2]);
setDateTimeValue(this.hass!, stateObj.entity_id, dateObj); setDateTimeValue(this.hass!, stateObj.entity_id, dateObj);
}
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {

14
src/panels/lovelace/entity-rows/hui-time-entity-row.ts
View File

@ -1,7 +1,7 @@
import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit"; import { html, LitElement, nothing, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import "../../../components/ha-date-input"; import "../../../components/ha-date-input";
import { isUnavailableState } from "../../../data/entity"; import { isUnavailableState, UNAVAILABLE } from "../../../data/entity";
import { setTimeValue } from "../../../data/time"; import { setTimeValue } from "../../../data/time";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
@ -42,12 +42,14 @@ class HuiTimeEntityRow extends LitElement implements LovelaceRow {
`; `;
} }
const unavailable = isUnavailableState(stateObj.state); const unavailable = stateObj.state === UNAVAILABLE;
return html` return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}> <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
<ha-time-input <ha-time-input
.value=${unavailable ? "" : stateObj.state} .value=${isUnavailableState(stateObj.state)
? undefined
: stateObj.state}
.locale=${this.hass.locale} .locale=${this.hass.locale}
.disabled=${unavailable} .disabled=${unavailable}
@value-changed=${this._timeChanged} @value-changed=${this._timeChanged}
@ -62,8 +64,10 @@ class HuiTimeEntityRow extends LitElement implements LovelaceRow {
} }
private _timeChanged(ev: CustomEvent<{ value: string }>): void { private _timeChanged(ev: CustomEvent<{ value: string }>): void {
const stateObj = this.hass!.states[this._config!.entity]; if (ev.detail.value) {
setTimeValue(this.hass!, stateObj.entity_id, ev.detail.value); const stateObj = this.hass!.states[this._config!.entity];
setTimeValue(this.hass!, stateObj.entity_id, ev.detail.value);
}
} }
} }