Disable counter buttons if entity is unavailable (#8084)

This commit is contained in:
Philip Allgaier 2021-01-04 18:02:01 +01:00 committed by GitHub
parent 4a61779aba
commit 0208b50ac7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 8 deletions

View File

@ -10,6 +10,7 @@ import {
TemplateResult, TemplateResult,
} from "lit-element"; } from "lit-element";
import { HomeAssistant } from "../../../types"; import { HomeAssistant } from "../../../types";
import { UNAVAILABLE_STATES } from "../../../data/entity";
@customElement("more-info-counter") @customElement("more-info-counter")
class MoreInfoCounter extends LitElement { class MoreInfoCounter extends LitElement {
@ -22,21 +23,29 @@ class MoreInfoCounter extends LitElement {
return html``; return html``;
} }
const disabled = UNAVAILABLE_STATES.includes(this.stateObj!.state);
return html` return html`
<div class="actions"> <div class="actions">
<mwc-button <mwc-button
.action="${"increment"}" .action="${"increment"}"
@click="${this._handleActionClick}" @click=${this._handleActionClick}
.disabled=${disabled}
> >
${this.hass!.localize("ui.card.counter.actions.increment")} ${this.hass!.localize("ui.card.counter.actions.increment")}
</mwc-button> </mwc-button>
<mwc-button <mwc-button
.action="${"decrement"}" .action="${"decrement"}"
@click="${this._handleActionClick}" @click=${this._handleActionClick}
.disabled=${disabled}
> >
${this.hass!.localize("ui.card.counter.actions.decrement")} ${this.hass!.localize("ui.card.counter.actions.decrement")}
</mwc-button> </mwc-button>
<mwc-button .action="${"reset"}" @click="${this._handleActionClick}"> <mwc-button
.action="${"reset"}"
@click=${this._handleActionClick}
.disabled=${disabled}
>
${this.hass!.localize("ui.card.counter.actions.reset")} ${this.hass!.localize("ui.card.counter.actions.reset")}
</mwc-button> </mwc-button>
</div> </div>
@ -53,8 +62,7 @@ class MoreInfoCounter extends LitElement {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
.actions { .actions {
margin: 0; margin: 8px 0;
padding-top: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;

View File

@ -75,7 +75,7 @@ class MoreInfoPerson extends LitElement {
justify-content: space-between; justify-content: space-between;
} }
.actions { .actions {
margin: 36px 0 8px 0; margin: 8px 0;
text-align: right; text-align: right;
} }
ha-map { ha-map {

View File

@ -76,8 +76,7 @@ class MoreInfoTimer extends LitElement {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
.actions { .actions {
margin: 0; margin: 8px 0;
padding-top: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;