Lovelace: Datetime and text to match look select (#11836)

This commit is contained in:
Paulus Schoutsen 2022-02-24 10:16:42 -08:00 committed by GitHub
parent 4e57fb1ec1
commit 02d058561b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 22 deletions

View File

@ -16,6 +16,7 @@ import "../components/hui-generic-entity-row";
import { createEntityNotFoundWarning } from "../components/hui-warning"; import { createEntityNotFoundWarning } from "../components/hui-warning";
import type { EntityConfig, LovelaceRow } from "./types"; import type { EntityConfig, LovelaceRow } from "./types";
import "../../../components/ha-time-input"; import "../../../components/ha-time-input";
import { computeStateName } from "../../../common/entity/compute_state_name";
@customElement("hui-input-datetime-entity-row") @customElement("hui-input-datetime-entity-row")
class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow { class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
@ -49,11 +50,19 @@ class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
`; `;
} }
const name = this._config.name || computeStateName(stateObj);
return html` return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}> <hui-generic-entity-row
.hass=${this.hass}
.config=${this._config}
.hideName=${stateObj.attributes.has_date &&
stateObj.attributes.has_time}
>
${stateObj.attributes.has_date ${stateObj.attributes.has_date
? html` ? html`
<ha-date-input <ha-date-input
.label=${stateObj.attributes.has_time ? name : undefined}
.locale=${this.hass.locale} .locale=${this.hass.locale}
.disabled=${UNAVAILABLE_STATES.includes(stateObj.state)} .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
.value=${`${stateObj.attributes.year}-${stateObj.attributes.month}-${stateObj.attributes.day}`} .value=${`${stateObj.attributes.year}-${stateObj.attributes.month}-${stateObj.attributes.day}`}

View File

@ -1,12 +1,5 @@
import "@material/mwc-list/mwc-list-item"; import "@material/mwc-list/mwc-list-item";
import { import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
css,
CSSResultGroup,
html,
LitElement,
PropertyValues,
TemplateResult,
} from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { stopPropagation } from "../../../common/dom/stop_propagation"; import { stopPropagation } from "../../../common/dom/stop_propagation";
import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeStateName } from "../../../common/entity/compute_state_name";
@ -87,8 +80,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
`; `;
} }
static get styles(): CSSResultGroup { static styles = css`
return css`
hui-generic-entity-row { hui-generic-entity-row {
display: flex; display: flex;
align-items: center; align-items: center;
@ -97,7 +89,6 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
width: 100%; width: 100%;
} }
`; `;
}
private _selectedChanged(ev): void { private _selectedChanged(ev): void {
const stateObj = this.hass!.states[this._config!.entity]; const stateObj = this.hass!.states[this._config!.entity];

View File

@ -1,4 +1,4 @@
import { html, LitElement, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity"; import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../../data/entity";
import { setValue } from "../../../data/input_text"; import { setValue } from "../../../data/input_text";
@ -8,6 +8,7 @@ import "../components/hui-generic-entity-row";
import { createEntityNotFoundWarning } from "../components/hui-warning"; import { createEntityNotFoundWarning } from "../components/hui-warning";
import { EntityConfig, LovelaceRow } from "./types"; import { EntityConfig, LovelaceRow } from "./types";
import "../../../components/ha-textfield"; import "../../../components/ha-textfield";
import { computeStateName } from "../../../common/entity/compute_state_name";
@customElement("hui-input-text-entity-row") @customElement("hui-input-text-entity-row")
class HuiInputTextEntityRow extends LitElement implements LovelaceRow { class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
@ -42,8 +43,13 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
} }
return html` return html`
<hui-generic-entity-row .hass=${this.hass} .config=${this._config}> <hui-generic-entity-row
.hass=${this.hass}
.config=${this._config}
hideName
>
<ha-textfield <ha-textfield
.label=${this._config.name || computeStateName(stateObj)}
.disabled=${stateObj.state === UNAVAILABLE} .disabled=${stateObj.state === UNAVAILABLE}
.value=${stateObj.state} .value=${stateObj.state}
.minlength=${stateObj.attributes.min} .minlength=${stateObj.attributes.min}
@ -75,6 +81,16 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
ev.target.blur(); ev.target.blur();
} }
static styles = css`
hui-generic-entity-row {
display: flex;
align-items: center;
}
ha-textfield {
width: 100%;
}
`;
} }
declare global { declare global {