🐛 fix severity toggle in gauge card editor (#4600)

This commit is contained in:
Ian Richardson 2020-01-25 07:35:48 -06:00 committed by Bram Kragten
parent f77bd79387
commit 6874788cc0

View File

@ -39,11 +39,8 @@ export class HuiGaugeCardEditor extends LitElement
@property() private _config?: GaugeCardConfig; @property() private _config?: GaugeCardConfig;
private _useSeverity?: boolean;
public setConfig(config: GaugeCardConfig): void { public setConfig(config: GaugeCardConfig): void {
config = cardConfigStruct(config); config = cardConfigStruct(config);
this._useSeverity = !!config.severity;
this._config = config; this._config = config;
} }
@ -106,58 +103,53 @@ export class HuiGaugeCardEditor extends LitElement
.configValue=${"name"} .configValue=${"name"}
@value-changed="${this._valueChanged}" @value-changed="${this._valueChanged}"
></paper-input> ></paper-input>
<div class="side-by-side"> <paper-input
<paper-input .label="${this.hass.localize(
.label="${this.hass.localize( "ui.panel.lovelace.editor.card.generic.unit"
"ui.panel.lovelace.editor.card.generic.unit" )} (${this.hass.localize(
)} (${this.hass.localize( "ui.panel.lovelace.editor.card.config.optional"
"ui.panel.lovelace.editor.card.config.optional" )})"
)})" .value="${this._unit}"
.value="${this._unit}" .configValue=${"unit"}
.configValue=${"unit"} @value-changed="${this._valueChanged}"
@value-changed="${this._valueChanged}" ></paper-input>
></paper-input> <hui-theme-select-editor
<hui-theme-select-editor .hass="${this.hass}"
.hass="${this.hass}" .value="${this._theme}"
.value="${this._theme}" .configValue="${"theme"}"
.configValue="${"theme"}" @theme-changed="${this._valueChanged}"
@theme-changed="${this._valueChanged}" ></hui-theme-select-editor>
></hui-theme-select-editor> <paper-input
</div> type="number"
<div class="side-by-side"> .label="${this.hass.localize(
<paper-input "ui.panel.lovelace.editor.card.generic.minimum"
type="number" )} (${this.hass.localize(
.label="${this.hass.localize( "ui.panel.lovelace.editor.card.config.optional"
"ui.panel.lovelace.editor.card.generic.minimum" )})"
)} (${this.hass.localize( .value="${this._min}"
"ui.panel.lovelace.editor.card.config.optional" .configValue=${"min"}
)})" @value-changed="${this._valueChanged}"
.value="${this._min}" ></paper-input>
.configValue=${"min"} <paper-input
@value-changed="${this._valueChanged}" type="number"
></paper-input> .label="${this.hass.localize(
<paper-input "ui.panel.lovelace.editor.card.generic.maximum"
type="number" )} (${this.hass.localize(
.label="${this.hass.localize( "ui.panel.lovelace.editor.card.config.optional"
"ui.panel.lovelace.editor.card.generic.maximum" )})"
)} (${this.hass.localize( .value="${this._max}"
"ui.panel.lovelace.editor.card.config.optional" .configValue=${"max"}
)})" @value-changed="${this._valueChanged}"
.value="${this._max}" ></paper-input>
.configValue=${"max"}
@value-changed="${this._valueChanged}"
></paper-input>
</div>
<ha-switch <ha-switch
.checked="${this._useSeverity !== false}" .checked="${this._config!.severity !== undefined}"
@change="${this._toggleSeverity}" @change="${this._toggleSeverity}"
>${this.hass.localize( >${this.hass.localize(
"ui.panel.lovelace.editor.card.gauge.severity.define" "ui.panel.lovelace.editor.card.gauge.severity.define"
)}</ha-switch )}</ha-switch
> >
${this._useSeverity ${this._config!.severity !== undefined
? html` ? html`
<div class="severity side-by-side">
<paper-input <paper-input
type="number" type="number"
.label="${this.hass.localize( .label="${this.hass.localize(
@ -191,7 +183,6 @@ export class HuiGaugeCardEditor extends LitElement
.configValue=${"red"} .configValue=${"red"}
@value-changed="${this._severityChanged}" @value-changed="${this._severityChanged}"
></paper-input> ></paper-input>
</div>
</div> </div>
` `
: ""} : ""}
@ -222,15 +213,16 @@ export class HuiGaugeCardEditor extends LitElement
if (!this._config || !this.hass) { if (!this._config || !this.hass) {
return; return;
} }
const target = ev.target! as EditorTarget;
this._config.severity = target.checked if ((ev.target as EditorTarget).checked) {
? { this._config.severity = {
green: 0, green: 0,
yellow: 0, yellow: 0,
red: 0, red: 0,
} };
: undefined; } else {
delete this._config.severity;
}
fireEvent(this, "config-changed", { config: this._config }); fireEvent(this, "config-changed", { config: this._config });
} }