jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 16:26:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate more-info configurator (#11792)

Browse Source 
* 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 <zackbarett@hey.com>

* Import

Co-authored-by: Zack Barett <zackbarett@hey.com>
This commit is contained in:
Bram Kragten 2022-02-23 14:02:19 +01:00 committed by GitHub
parent 64459a06c6
commit 6be6755f6f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 128 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
src/dialogs/more-info/controls/more-info-configurator.js
View File

@ -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`
<style include="iron-flex"></style>
<style>
p {
margin: 8px 0;
}
a {
color: var(--primary-color);
}
p > img {
max-width: 100%;
}
p.center {
text-align: center;
}
p.error {
color: #c62828;
}
p.submit {
text-align: center;
height: 41px;
}
ha-circular-progress {
width: 14px;
height: 14px;
margin-right: 20px;
}
[hidden] {
display: none;
}
</style>
<div class="layout vertical">
<template is="dom-if" if="[[isConfigurable]]">
<ha-markdown
breaks
content="[[stateObj.attributes.description]]"
></ha-markdown>
<p class="error" hidden$="[[!stateObj.attributes.errors]]">
[[stateObj.attributes.errors]]
</p>
<template is="dom-repeat" items="[[stateObj.attributes.fields]]">
<paper-input
label="[[item.name]]"
name="[[item.id]]"
type="[[item.type]]"
on-change="fieldChanged"
></paper-input>
</template>
<p class="submit" hidden$="[[!stateObj.attributes.submit_caption]]">
<mwc-button
raised=""
disabled="[[isConfiguring]]"
on-click="submitClicked"
>
<ha-circular-progress
active="[[isConfiguring]]"
hidden="[[!isConfiguring]]"
alt="Configuring"
></ha-circular-progress>
[[stateObj.attributes.submit_caption]]
</mwc-button>
</p>
</template>
</div>
`;
}
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);

128
src/dialogs/more-info/controls/more-info-configurator.ts Normal file
View File

@ -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`
<div class="container">
<ha-markdown
breaks
.content=${this.stateObj.attributes.description}
></ha-markdown>
${this.stateObj.attributes.errors
? html`<ha-alert alert-type="error">
${this.stateObj.attributes.errors}
</ha-alert>`
: ""}
${this.stateObj.attributes.fields.map(
(field) => html`<ha-textfield
.label=${field.name}
.name=${field.id}
.type=${field.type}
@change=${this._fieldChanged}
></ha-textfield>`
)}
${this.stateObj.attributes.submit_caption
? html`<p class="submit">
<mwc-button
raised
.disabled=${this._isConfiguring}
@click=${this._submitClicked}
>
${this._isConfiguring
? html`<ha-circular-progress
active
alt="Configuring"
></ha-circular-progress>`
: ""}
${this.stateObj.attributes.submit_caption}
</mwc-button>
</p>`
: ""}
</div>
`;
}
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;
}
}