mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 01:06:35 +00:00
🕶 convert hui-configurator-notification-item to TypeScript/LitElement (#3027)
This commit is contained in:
parent
a743a2c46b
commit
7f8f99a414
@ -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
|
||||
);
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user