mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-16 05:46:35 +00:00
Convert hui-lock-entity-row to TypeScript/LitElement (#2022)
This commit is contained in:
parent
787ea885cc
commit
59a681fcb7
@ -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);
|
88
src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
Normal file
88
src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
Normal 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);
|
Loading…
x
Reference in New Issue
Block a user