diff --git a/src/data/input_text.ts b/src/data/input_text.ts new file mode 100644 index 0000000000..a8ed653111 --- /dev/null +++ b/src/data/input_text.ts @@ -0,0 +1,7 @@ +import { HomeAssistant } from "../types"; + +export const setValue = (hass: HomeAssistant, entity: string, value: string) => + hass.callService("input_text", "set_value", { + value, + entity_id: entity, + }); diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js deleted file mode 100644 index 6b2e362222..0000000000 --- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.js +++ /dev/null @@ -1,70 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "@polymer/paper-input/paper-input"; - -import "../components/hui-generic-entity-row"; - -class HuiInputTextEntityRow extends PolymerElement { - static get template() { - return html` - - ${this.inputTextControlTemplate} - - `; - } - - static get inputTextControlTemplate() { - return html` - - `; - } - - static get properties() { - return { - hass: Object, - _config: Object, - _stateObj: { - type: Object, - computed: "_computeStateObj(hass.states, _config.entity)", - observer: "_stateObjChanged", - }, - _value: String, - }; - } - - _computeStateObj(states, entityId) { - return states && entityId in states ? states[entityId] : null; - } - - setConfig(config) { - if (!config || !config.entity) { - throw new Error("Entity not configured."); - } - this._config = config; - } - - _stateObjChanged(stateObj) { - this._value = stateObj && stateObj.state; - } - - _selectedValueChanged() { - if (this._value === this._stateObj.state) { - return; - } - this.hass.callService("input_text", "set_value", { - value: this._value, - entity_id: this._stateObj.entity_id, - }); - } -} -customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow); diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts new file mode 100644 index 0000000000..e6c4b4b336 --- /dev/null +++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts @@ -0,0 +1,84 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { TemplateResult } from "lit-html"; +import { PaperInputElement } from "@polymer/paper-input/paper-input"; + +import "../components/hui-generic-entity-row"; +import "./hui-error-entity-row"; + +import { HomeAssistant } from "../../../types"; +import { EntityRow, EntityConfig } from "./types"; +import { setValue } from "../../../data/input_text"; + +class HuiInputTextEntityRow extends LitElement implements EntityRow { + public hass?: HomeAssistant; + private _config?: EntityConfig; + + static get properties(): PropertyDeclarations { + return { + hass: {}, + _config: {}, + }; + } + + public setConfig(config: EntityConfig): void { + if (!config) { + throw new Error("Configuration error"); + } + this._config = config; + } + + protected render(): TemplateResult { + if (!this._config || !this.hass) { + return html``; + } + + const stateObj = this.hass.states[this._config.entity]; + + if (!stateObj) { + return html` + + `; + } + + return html` + + + + `; + } + + private get _inputEl(): PaperInputElement { + return this.shadowRoot!.querySelector("paper-input") as PaperInputElement; + } + + private _selectedValueChanged(ev): void { + const element = this._inputEl; + const stateObj = this.hass!.states[this._config!.entity]; + + if (element.value !== stateObj.state) { + setValue(this.hass!, stateObj.entity_id, element.value!); + } + + ev.target.blur(); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-input-text-entity-row": HuiInputTextEntityRow; + } +} + +customElements.define("hui-input-text-entity-row", HuiInputTextEntityRow);