From a9704b110d229380305a3d3a661a5c4aade2cd3b Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Tue, 20 Nov 2018 06:09:52 -0600 Subject: [PATCH] Convert hui-input-select-entity-row to TypeScript/LitElement (#2048) * Convert hui-input-select-entity-row to TypeScript/LitElement * Address Travis issues * Address review comments * Return callService promise * Remove _selected --- src/data/input-select.ts | 11 ++ .../hui-input-select-entity-row.js | 112 ------------------ .../hui-input-select-entity-row.ts | 112 ++++++++++++++++++ 3 files changed, 123 insertions(+), 112 deletions(-) create mode 100644 src/data/input-select.ts delete mode 100644 src/panels/lovelace/entity-rows/hui-input-select-entity-row.js create mode 100644 src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts diff --git a/src/data/input-select.ts b/src/data/input-select.ts new file mode 100644 index 0000000000..04a2176fa5 --- /dev/null +++ b/src/data/input-select.ts @@ -0,0 +1,11 @@ +import { HomeAssistant } from "../types"; + +export const setOption = ( + hass: HomeAssistant, + entity: string, + option: string +) => + hass.callService("input_select", "select_option", { + option, + entity_id: entity, + }); diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js deleted file mode 100644 index 87871dcfb5..0000000000 --- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.js +++ /dev/null @@ -1,112 +0,0 @@ -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; - -import "../../../components/entity/state-badge"; - -import computeStateName from "../../../common/entity/compute_state_name"; - -import EventsMixin from "../../../mixins/events-mixin"; - -/* - * @appliesMixin EventsMixin - */ -class HuiInputSelectEntityRow extends EventsMixin(PolymerElement) { - static get template() { - return html` - ${this.styleTemplate} - - - `; - } - - static get styleTemplate() { - return html` - - `; - } - - static get properties() { - return { - hass: Object, - _config: Object, - _stateObj: { - type: Object, - computed: "_computeStateObj(hass.states, _config.entity)", - }, - _selected: { - type: String, - observer: "_selectedChanged", - }, - }; - } - - setConfig(config) { - if (!config || !config.entity) { - throw new Error("Entity not configured."); - } - this._config = config; - } - - _computeStateObj(states, entityId) { - return states && entityId in states ? states[entityId] : null; - } - - _computeName(name, stateObj) { - return name || computeStateName(stateObj); - } - - _computeSelected(stateObj) { - return stateObj.attributes.options.indexOf(stateObj.state); - } - - _selectedChanged(option) { - // Selected Option will transition to '' before transitioning to new value - if (option === "" || option === this._stateObj.state) { - return; - } - this.hass.callService("input_select", "select_option", { - option: option, - entity_id: this._stateObj.entity_id, - }); - } - - _stopPropagation(ev) { - ev.stopPropagation(); - } -} -customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow); diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts new file mode 100644 index 0000000000..eca12feb00 --- /dev/null +++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts @@ -0,0 +1,112 @@ +import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element"; +import { repeat } from "lit-html/directives/repeat"; +import { TemplateResult } from "lit-html"; +import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; +import "@polymer/paper-item/paper-item"; +import "@polymer/paper-listbox/paper-listbox"; + +import "../../../components/entity/state-badge"; +import "./hui-error-entity-row"; + +import computeStateName from "../../../common/entity/compute_state_name"; +import { HomeAssistant } from "../../../types"; +import { EntityRow, EntityConfig } from "./types"; +import { setOption } from "../../../data/input-select"; + +class HuiInputSelectEntityRow extends LitElement implements EntityRow { + public hass?: HomeAssistant; + private _config?: EntityConfig; + + static get properties(): PropertyDeclarations { + return { + hass: {}, + _config: {}, + }; + } + + public setConfig(config: EntityConfig): void { + if (!config || !config.entity) { + throw new Error("Invalid Configuration: 'entity' required"); + } + + this._config = config; + } + + protected render(): TemplateResult { + if (!this.hass || !this._config) { + return html``; + } + + const stateObj = this.hass.states[this._config.entity]; + + if (!stateObj) { + return html` + + `; + } + + return html` + ${this.renderStyle()} + + + + ${ + repeat( + stateObj.attributes.options, + (option) => + html` + ${option} + ` + ) + } + + + `; + } + + private renderStyle(): TemplateResult { + return html` + + `; + } + + private _selectedChanged(ev): void { + // Selected Option will transition to '' before transitioning to new value + const stateObj = this.hass!.states[this._config!.entity]; + if ( + !ev.target.selectedItem || + ev.target.selectedItem.innerText === "" || + ev.target.selectedItem.innerText === stateObj.state + ) { + return; + } + + setOption(this.hass!, stateObj.entity_id, ev.target.selectedItem.innerText); + } +} + +declare global { + interface HTMLElementTagNameMap { + "hui-input-select-entity-row": HuiInputSelectEntityRow; + } +} + +customElements.define("hui-input-select-entity-row", HuiInputSelectEntityRow);