From 6be6755f6f5f8c159666892909967ac1066e5fe2 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Wed, 23 Feb 2022 14:02:19 +0100 Subject: [PATCH] Migrate more-info configurator (#11792) * Migrate more-info configurator * Update more-info-configurator.ts * Update src/dialogs/more-info/controls/more-info-configurator.ts * Update src/dialogs/more-info/controls/more-info-configurator.ts Co-authored-by: Zack Barett * Import Co-authored-by: Zack Barett --- .../controls/more-info-configurator.js | 148 ------------------ .../controls/more-info-configurator.ts | 128 +++++++++++++++ 2 files changed, 128 insertions(+), 148 deletions(-) delete mode 100644 src/dialogs/more-info/controls/more-info-configurator.js create mode 100644 src/dialogs/more-info/controls/more-info-configurator.ts diff --git a/src/dialogs/more-info/controls/more-info-configurator.js b/src/dialogs/more-info/controls/more-info-configurator.js deleted file mode 100644 index 52f7ce6406..0000000000 --- a/src/dialogs/more-info/controls/more-info-configurator.js +++ /dev/null @@ -1,148 +0,0 @@ -import "@material/mwc-button"; -import "@polymer/iron-flex-layout/iron-flex-layout-classes"; -import "@polymer/paper-input/paper-input"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -/* eslint-plugin-disable lit */ -import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "../../../components/ha-circular-progress"; -import "../../../components/ha-markdown"; - -class MoreInfoConfigurator extends PolymerElement { - static get template() { - return html` - - - -
- -
- `; - } - - static get properties() { - return { - stateObj: { - type: Object, - }, - - action: { - type: String, - value: "display", - }, - - isConfigurable: { - type: Boolean, - computed: "computeIsConfigurable(stateObj)", - }, - - isConfiguring: { - type: Boolean, - value: false, - }, - - fieldInput: { - type: Object, - value: function () { - return {}; - }, - }, - }; - } - - computeIsConfigurable(stateObj) { - return stateObj.state === "configure"; - } - - fieldChanged(ev) { - const el = ev.target; - this.fieldInput[el.name] = el.value; - } - - submitClicked() { - const data = { - configure_id: this.stateObj.attributes.configure_id, - fields: this.fieldInput, - }; - - this.isConfiguring = true; - - this.hass.callService("configurator", "configure", data).then( - () => { - this.isConfiguring = false; - }, - () => { - this.isConfiguring = false; - } - ); - } -} - -customElements.define("more-info-configurator", MoreInfoConfigurator); diff --git a/src/dialogs/more-info/controls/more-info-configurator.ts b/src/dialogs/more-info/controls/more-info-configurator.ts new file mode 100644 index 0000000000..f6f77f451b --- /dev/null +++ b/src/dialogs/more-info/controls/more-info-configurator.ts @@ -0,0 +1,128 @@ +import "@material/mwc-button"; +import type { HassEntity } from "home-assistant-js-websocket"; +import { css, html, LitElement, TemplateResult } from "lit"; +import { customElement, property, state } from "lit/decorators"; +import "../../../components/ha-alert"; +import "../../../components/ha-circular-progress"; +import "../../../components/ha-markdown"; +import "../../../components/ha-textfield"; +import type { HomeAssistant } from "../../../types"; + +@customElement("more-info-configurator") +export class MoreInfoConfigurator extends LitElement { + @property({ attribute: false }) public hass!: HomeAssistant; + + @property({ attribute: false }) public stateObj?: HassEntity; + + @state() private _isConfiguring = false; + + private _fieldInput = {}; + + protected render(): TemplateResult { + if (this.stateObj?.state !== "configure") { + return html``; + } + + return html` +
+ + + ${this.stateObj.attributes.errors + ? html` + ${this.stateObj.attributes.errors} + ` + : ""} + ${this.stateObj.attributes.fields.map( + (field) => html`` + )} + ${this.stateObj.attributes.submit_caption + ? html`

+ + ${this._isConfiguring + ? html`` + : ""} + ${this.stateObj.attributes.submit_caption} + +

` + : ""} +
+ `; + } + + private _fieldChanged(ev) { + const el = ev.target; + this._fieldInput[el.name] = el.value; + } + + private _submitClicked() { + const data = { + configure_id: this.stateObj!.attributes.configure_id, + fields: this._fieldInput, + }; + + this._isConfiguring = true; + + this.hass.callService("configurator", "configure", data).then( + () => { + this._isConfiguring = false; + }, + () => { + this._isConfiguring = false; + } + ); + } + + static styles = css` + .container { + display: flex; + flex-direction: column; + } + p { + margin: 8px 0; + } + + a { + color: var(--primary-color); + } + + p > img { + max-width: 100%; + } + + p.center { + text-align: center; + } + + p.submit { + text-align: center; + height: 41px; + } + + ha-circular-progress { + width: 14px; + height: 14px; + margin-right: 20px; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + "more-info-configurator": MoreInfoConfigurator; + } +}