import "@material/mwc-button";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import { TimerEntity } from "../../../data/timer";
import { HomeAssistant } from "../../../types";
@customElement("more-info-timer")
class MoreInfoTimer extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property() public stateObj?: TimerEntity;
protected render(): TemplateResult {
if (!this.hass || !this.stateObj) {
return html``;
}
return html`
${this.stateObj.state === "idle" || this.stateObj.state === "paused"
? html`
${this.hass!.localize("ui.card.timer.actions.start")}
`
: ""}
${this.stateObj.state === "active"
? html`
${this.hass!.localize("ui.card.timer.actions.pause")}
`
: ""}
${this.stateObj.state === "active" || this.stateObj.state === "paused"
? html`
${this.hass!.localize("ui.card.timer.actions.cancel")}
${this.hass!.localize("ui.card.timer.actions.finish")}
`
: ""}
`;
}
private _handleActionClick(e: MouseEvent): void {
const action = (e.currentTarget as any).action;
this.hass.callService("timer", action, {
entity_id: this.stateObj!.entity_id,
});
}
static get styles(): CSSResultGroup {
return css`
.actions {
margin: 8px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"more-info-timer": MoreInfoTimer;
}
}