mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-10 19:06:36 +00:00
Convert hui-scene-entity-row to TypeScript/LitElement (#2021)
* Convert hui-scene-entity-row to TypeScript/LitElement script-entity-row and this could probably extend a common base class. The only thing that differs them is the domain used in the callService and the button text. * Stop more-info
This commit is contained in:
parent
4a893d96a0
commit
ad5f815273
@ -1,67 +0,0 @@
|
|||||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
|
||||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
|
||||||
import "@polymer/paper-button/paper-button";
|
|
||||||
|
|
||||||
import "../components/hui-generic-entity-row";
|
|
||||||
|
|
||||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
|
||||||
|
|
||||||
/*
|
|
||||||
* @appliesMixin LocalizeMixin
|
|
||||||
*/
|
|
||||||
class HuiSceneEntityRow extends LocalizeMixin(PolymerElement) {
|
|
||||||
static get template() {
|
|
||||||
return html`
|
|
||||||
${this.styleTemplate}
|
|
||||||
<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
|
|
||||||
${this.sceneControlTemplate}
|
|
||||||
</hui-generic-entity-row>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get styleTemplate() {
|
|
||||||
return html`
|
|
||||||
<style>
|
|
||||||
paper-button {
|
|
||||||
color: var(--primary-color);
|
|
||||||
font-weight: 500;
|
|
||||||
margin-right: -0.57em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get sceneControlTemplate() {
|
|
||||||
return html`
|
|
||||||
<paper-button on-click="_callService">
|
|
||||||
[[localize('ui.card.scene.activate')]]
|
|
||||||
</paper-button>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
hass: Object,
|
|
||||||
_config: Object,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
_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;
|
|
||||||
}
|
|
||||||
|
|
||||||
_callService(ev) {
|
|
||||||
ev.stopPropagation();
|
|
||||||
this.hass.callService("scene", "turn_on", {
|
|
||||||
entity_id: this._config.entity,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
customElements.define("hui-scene-entity-row", HuiSceneEntityRow);
|
|
93
src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
Normal file
93
src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
|
||||||
|
import { TemplateResult } from "lit-html";
|
||||||
|
|
||||||
|
import "../components/hui-generic-entity-row";
|
||||||
|
import "../../../components/entity/ha-entity-toggle";
|
||||||
|
import "./hui-error-entity-row";
|
||||||
|
|
||||||
|
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
|
||||||
|
import { HomeAssistant } from "../../../types";
|
||||||
|
import { EntityRow, EntityConfig } from "./types";
|
||||||
|
|
||||||
|
class HuiSceneEntityRow extends hassLocalizeLitMixin(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`
|
||||||
|
<hui-error-entity-row
|
||||||
|
.entity="${this._config.entity}"
|
||||||
|
></hui-error-entity-row>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
${this.renderStyle()}
|
||||||
|
<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
|
||||||
|
${
|
||||||
|
stateObj.attributes.can_cancel
|
||||||
|
? html`
|
||||||
|
<ha-entity-toggle
|
||||||
|
.hass="${this.hass}"
|
||||||
|
.stateObj="${stateObj}"
|
||||||
|
></ha-entity-toggle>
|
||||||
|
`
|
||||||
|
: html`
|
||||||
|
<paper-button @click="${this._callService}">
|
||||||
|
${this.localize("ui.card.scene.activate")}
|
||||||
|
</paper-button>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
</hui-generic-entity-row>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
protected renderStyle(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
paper-button {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: 500;
|
||||||
|
margin-right: -0.57em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _callService(ev): void {
|
||||||
|
ev.stopPropagation();
|
||||||
|
this.hass!.callService("scene", "turn_on", {
|
||||||
|
entity_id: this._config!.entity,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"hui-scene-entity-row": HuiSceneEntityRow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define("hui-scene-entity-row", HuiSceneEntityRow);
|
Loading…
x
Reference in New Issue
Block a user