Convert hui-lock-entity-row to TypeScript/LitElement (#2022)

This commit is contained in:
Ian Richardson 2018-11-08 02:35:55 -06:00 committed by Paulus Schoutsen
parent 787ea885cc
commit 59a681fcb7
2 changed files with 88 additions and 80 deletions

View File

@ -1,80 +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 HuiLockEntityRow extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
${this.styleTemplate}
<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
${this.lockControlTemplate}
</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 lockControlTemplate() {
return html`
<paper-button on-click="_callService">
[[_computeButtonTitle(_stateObj.state)]]
</paper-button>
`;
}
static get properties() {
return {
hass: Object,
_config: Object,
_stateObj: {
type: Object,
computed: "_computeStateObj(hass.states, _config.entity)",
},
};
}
_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;
}
_computeButtonTitle(state) {
return state === "locked"
? this.localize("ui.card.lock.unlock")
: this.localize("ui.card.lock.lock");
}
_callService(ev) {
ev.stopPropagation();
const stateObj = this._stateObj;
this.hass.callService(
"lock",
stateObj.state === "locked" ? "unlock" : "lock",
{ entity_id: stateObj.entity_id }
);
}
}
customElements.define("hui-lock-entity-row", HuiLockEntityRow);

View File

@ -0,0 +1,88 @@
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
import { TemplateResult } from "lit-html";
import "../components/hui-generic-entity-row";
import "./hui-error-entity-row";
import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
import { HomeAssistant } from "../../../types";
import { EntityRow, EntityConfig } from "./types";
class HuiLockEntityRow 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}">
<paper-button @click="${this._callService}">
${
stateObj.state === "locked"
? this.localize("ui.card.lock.unlock")
: this.localize("ui.card.lock.lock")
}
</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();
const stateObj = this.hass!.states[this._config!.entity];
this.hass!.callService(
"lock",
stateObj.state === "locked" ? "unlock" : "lock",
{ entity_id: stateObj.entity_id }
);
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-lock-entity-row": HuiLockEntityRow;
}
}
customElements.define("hui-lock-entity-row", HuiLockEntityRow);