🕶 convert hui-configurator-notification-item to TypeScript/LitElement (#3027)

This commit is contained in:
Ian Richardson 2019-03-27 23:12:56 -05:00 committed by Paulus Schoutsen
parent a743a2c46b
commit 7f8f99a414
2 changed files with 59 additions and 60 deletions

View File

@ -1,60 +0,0 @@
import "@material/mwc-button";
import "@polymer/paper-icon-button/paper-icon-button";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
import "./hui-notification-item-template";
import EventsMixin from "../../../../mixins/events-mixin";
import LocalizeMixin from "../../../../mixins/localize-mixin";
/*
* @appliesMixin EventsMixin
* @appliesMixin LocalizeMixin
*/
export class HuiConfiguratorNotificationItem extends EventsMixin(
LocalizeMixin(PolymerElement)
) {
static get template() {
return html`
<hui-notification-item-template>
<span slot="header">[[localize('domain.configurator')]]</span>
<div>[[_getMessage(notification)]]</div>
<mwc-button slot="actions" on-click="_handleClick"
>[[_localizeState(notification.state)]]</mwc-button
>
</hui-notification-item-template>
`;
}
static get properties() {
return {
hass: Object,
notification: Object,
};
}
_handleClick() {
this.fire("hass-more-info", { entityId: this.notification.entity_id });
}
_localizeState(state) {
return this.localize(`state.configurator.${state}`);
}
_getMessage(notification) {
const friendlyName = notification.attributes.friendly_name;
return this.localize(
"ui.notification_drawer.click_to_configure",
"entity",
friendlyName
);
}
}
customElements.define(
"hui-configurator-notification-item",
HuiConfiguratorNotificationItem
);

View File

@ -0,0 +1,59 @@
import {
html,
LitElement,
TemplateResult,
property,
customElement,
} from "lit-element";
import "@material/mwc-button";
import "./hui-notification-item-template";
import { HomeAssistant } from "../../../../types";
import { HassEntity } from "home-assistant-js-websocket";
import { fireEvent } from "../../../../common/dom/fire_event";
@customElement("hui-configurator-notification-item")
export class HuiConfiguratorNotificationItem extends LitElement {
@property() public hass?: HomeAssistant;
@property() public notification?: HassEntity;
protected render(): TemplateResult | void {
if (!this.hass || !this.notification) {
return html``;
}
return html`
<hui-notification-item-template>
<span slot="header">${this.hass.localize("domain.configurator")}</span>
<div>
${this.hass.localize(
"ui.notification_drawer.click_to_configure",
"entity",
this.notification.attributes.friendly_name
)}
</div>
<mwc-button slot="actions" @click="${this._handleClick}"
>${this.hass.localize(
`state.configurator.${this.notification.state}`
)}</mwc-button
>
</hui-notification-item-template>
`;
}
private _handleClick(): void {
fireEvent(this, "hass-more-info", {
entityId: this.notification!.entity_id,
});
}
}
declare global {
interface HTMLElementTagNameMap {
"hui-configurator-notification-item": HuiConfiguratorNotificationItem;
}
}