From 07354ff9874cbdf8fe0a642bf403f31ef63fe030 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Thu, 29 Oct 2020 21:20:32 -0500 Subject: [PATCH 1/4] convert ha-cover-tilt-controls to TypeScript/LitElement --- src/components/ha-cover-tilt-controls.js | 106 -------------------- src/components/ha-cover-tilt-controls.ts | 118 +++++++++++++++++++++++ src/translations/en.json | 5 + 3 files changed, 123 insertions(+), 106 deletions(-) delete mode 100644 src/components/ha-cover-tilt-controls.js create mode 100644 src/components/ha-cover-tilt-controls.ts diff --git a/src/components/ha-cover-tilt-controls.js b/src/components/ha-cover-tilt-controls.js deleted file mode 100644 index 08f992380a09..000000000000 --- a/src/components/ha-cover-tilt-controls.js +++ /dev/null @@ -1,106 +0,0 @@ -import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "./ha-icon-button"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import { UNAVAILABLE } from "../data/entity"; -import CoverEntity from "../util/cover-model"; - -class HaCoverTiltControls extends PolymerElement { - static get template() { - return html` - - - - - - `; - } - - static get properties() { - return { - hass: { - type: Object, - }, - stateObj: { - type: Object, - }, - entityObj: { - type: Object, - computed: "computeEntityObj(hass, stateObj)", - }, - }; - } - - computeEntityObj(hass, stateObj) { - return new CoverEntity(hass, stateObj); - } - - computeStopDisabled(stateObj) { - if (stateObj.state === UNAVAILABLE) { - return true; - } - return false; - } - - computeOpenDisabled(stateObj, entityObj) { - if (stateObj.state === UNAVAILABLE) { - return true; - } - const assumedState = stateObj.attributes.assumed_state === true; - return entityObj.isFullyOpenTilt && !assumedState; - } - - computeClosedDisabled(stateObj, entityObj) { - if (stateObj.state === UNAVAILABLE) { - return true; - } - const assumedState = stateObj.attributes.assumed_state === true; - return entityObj.isFullyClosedTilt && !assumedState; - } - - onOpenTiltTap(ev) { - ev.stopPropagation(); - this.entityObj.openCoverTilt(); - } - - onCloseTiltTap(ev) { - ev.stopPropagation(); - this.entityObj.closeCoverTilt(); - } - - onStopTiltTap(ev) { - ev.stopPropagation(); - this.entityObj.stopCoverTilt(); - } -} - -customElements.define("ha-cover-tilt-controls", HaCoverTiltControls); diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts new file mode 100644 index 000000000000..deb9d3a59e1b --- /dev/null +++ b/src/components/ha-cover-tilt-controls.ts @@ -0,0 +1,118 @@ +import { HassEntity } from "home-assistant-js-websocket"; +import { + LitElement, + property, + internalProperty, + CSSResult, + css, + customElement, + TemplateResult, + html, +} from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; + +import { UNAVAILABLE } from "../data/entity"; +import { HomeAssistant } from "../types"; +import CoverEntity from "../util/cover-model"; + +import "./ha-icon-button"; + +@customElement("ha-cover-tilt-controls") +class HaCoverTiltControls extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @internalProperty() private _stateObj!: HassEntity; + + private _entityObj?: CoverEntity; + + public set stateObj(stateObj: HassEntity) { + this._entityObj = new CoverEntity(this.hass, stateObj); + this._stateObj = stateObj; + } + + protected render(): TemplateResult { + if (!this._entityObj) { + return html``; + } + + return html` + + `; + } + + private _computeOpenDisabled(): boolean { + if (this._stateObj.state === UNAVAILABLE) { + return true; + } + const assumedState = this._stateObj.attributes.assumed_state === true; + return this._entityObj.isFullyOpenTilt && !assumedState; + } + + private _computeClosedDisabled(): boolean { + if (this._stateObj.state === UNAVAILABLE) { + return true; + } + const assumedState = this._stateObj.attributes.assumed_state === true; + return this._entityObj.isFullyClosedTilt && !assumedState; + } + + private _onOpenTiltTap(ev): void { + ev.stopPropagation(); + this._entityObj.openCoverTilt(); + } + + private _onCloseTiltTap(ev): void { + ev.stopPropagation(); + this._entityObj.closeCoverTilt(); + } + + private _onStopTiltTap(ev): void { + ev.stopPropagation(); + this._entityObj.stopCoverTilt(); + } + + static get styles(): CSSResult { + return css` + :host { + white-space: nowrap; + } + .invisible { + visibility: hidden !important; + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-cover-tilt-controls": HaCoverTiltControls; + } +} diff --git a/src/translations/en.json b/src/translations/en.json index 5b804e72ffef..70df099c7e59 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -551,6 +551,11 @@ }, "person": { "create_zone": "Create zone from current location" + }, + "cover": { + "open_tilt_cover": "Open cover tilt", + "close_tile_cover": "Close cover tilt", + "stop_cover": "Stop cover from moving" } }, "entity_registry": { From a51a5c512af1eb1fd48c29517bbd891e85223fa8 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Sat, 31 Oct 2020 23:22:20 -0600 Subject: [PATCH 2/4] address review comments --- src/components/ha-cover-tilt-controls.ts | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts index deb9d3a59e1b..cfce9b41c62c 100644 --- a/src/components/ha-cover-tilt-controls.ts +++ b/src/components/ha-cover-tilt-controls.ts @@ -8,6 +8,7 @@ import { customElement, TemplateResult, html, + PropertyValues, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; @@ -21,13 +22,14 @@ import "./ha-icon-button"; class HaCoverTiltControls extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @internalProperty() private _stateObj!: HassEntity; + @property({ attribute: false }) stateObj!: HassEntity; - private _entityObj?: CoverEntity; + @internalProperty() private _entityObj?: CoverEntity; - public set stateObj(stateObj: HassEntity) { - this._entityObj = new CoverEntity(this.hass, stateObj); - this._stateObj = stateObj; + protected updated(changedProps: PropertyValues): void { + if (changedProps.has("stateObj")) { + this._entityObj = new CoverEntity(this.hass, this.stateObj); + } } protected render(): TemplateResult { @@ -53,7 +55,7 @@ class HaCoverTiltControls extends LitElement { label=${this.hass.localize("ui.dialogs.more_info_control.stop_cover")} icon="hass:stop" @click=${this._onStopTiltTap} - .disabled=${this._stateObj.state === UNAVAILABLE} + .disabled=${this.stateObj.state === UNAVAILABLE} > Date: Sun, 1 Nov 2020 00:43:42 -0500 Subject: [PATCH 3/4] Update ha-cover-tilt-controls.ts --- src/components/ha-cover-tilt-controls.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts index cfce9b41c62c..ef5d7e1e12b8 100644 --- a/src/components/ha-cover-tilt-controls.ts +++ b/src/components/ha-cover-tilt-controls.ts @@ -27,6 +27,8 @@ class HaCoverTiltControls extends LitElement { @internalProperty() private _entityObj?: CoverEntity; protected updated(changedProps: PropertyValues): void { + super.updated(changedProperties); + if (changedProps.has("stateObj")) { this._entityObj = new CoverEntity(this.hass, this.stateObj); } From 5db0c25192397c6bcde4fae46dc8877b86b334d4 Mon Sep 17 00:00:00 2001 From: Ian Richardson Date: Sun, 1 Nov 2020 21:10:46 -0600 Subject: [PATCH 4/4] fix typo --- src/components/ha-cover-tilt-controls.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts index ef5d7e1e12b8..843eaa659888 100644 --- a/src/components/ha-cover-tilt-controls.ts +++ b/src/components/ha-cover-tilt-controls.ts @@ -26,10 +26,10 @@ class HaCoverTiltControls extends LitElement { @internalProperty() private _entityObj?: CoverEntity; - protected updated(changedProps: PropertyValues): void { + protected updated(changedProperties: PropertyValues): void { super.updated(changedProperties); - if (changedProps.has("stateObj")) { + if (changedProperties.has("stateObj")) { this._entityObj = new CoverEntity(this.hass, this.stateObj); } }