jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 19:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fixed two-part pin code input in Manual Alarm Control Panel (#4213)

Browse Source 
* Consolidated code input via clicking GUI pads and using a physical keyboard

* Replaced the querySelector with the query decorator

* Run the query selector once, store its result and reuse it multiple times
This commit is contained in:
springstan 2019-11-19 00:27:48 +01:00 committed by Bram Kragten
parent 1e217e8d2f
commit b4942ad27e
1 changed files with 7 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/panels/lovelace/cards/hui-alarm-panel-card.ts
View File

@ -7,6 +7,7 @@ import {
css, css,
property, property,
customElement, customElement,
query,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
@ -51,7 +52,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
@property() private _config?: AlarmPanelCardConfig; @property() private _config?: AlarmPanelCardConfig;
@property() private _code?: string; @query("#alarmCode") private _input?: PaperInputElement;
public getCardSize(): number { public getCardSize(): number {
if (!this._config || !this.hass) { if (!this._config || !this.hass) {
@ -79,7 +80,6 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
}; };
this._config = { ...defaults, ...config }; this._config = { ...defaults, ...config };
this._code = "";
} }
protected updated(changedProps: PropertyValues): void { protected updated(changedProps: PropertyValues): void {
@ -103,7 +103,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
} }
protected shouldUpdate(changedProps: PropertyValues): boolean { protected shouldUpdate(changedProps: PropertyValues): boolean {
if (changedProps.has("_config") || changedProps.has("_code")) { if (changedProps.has("_config")) {
return true; return true;
} }
@ -174,7 +174,6 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
id="alarmCode" id="alarmCode"
label="Alarm Code" label="Alarm Code"
type="password" type="password"
.value="${this._code}"
></paper-input> ></paper-input>
`} `}
${stateObj.attributes.code_format !== FORMAT_NUMBER ${stateObj.attributes.code_format !== FORMAT_NUMBER
@ -222,23 +221,20 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
private _handlePadClick(e: MouseEvent): void { private _handlePadClick(e: MouseEvent): void {
const val = (e.currentTarget! as any).value; const val = (e.currentTarget! as any).value;
this._code = val === "clear" ? "" : this._code + val; this._input!.value = val === "clear" ? "" : this._input!.value + val;
} }
private _handleActionClick(e: MouseEvent): void { private _handleActionClick(e: MouseEvent): void {
const input = this.shadowRoot!.querySelector( const input = this._input!;
"#alarmCode"
) as PaperInputElement;
const code = const code =
this._code || input && input.value && input.value.length > 0 ? input.value : "";
(input && input.value && input.value.length > 0 ? input.value : "");
callAlarmAction( callAlarmAction(
this.hass!, this.hass!,
this._config!.entity, this._config!.entity,
(e.currentTarget! as any).action, (e.currentTarget! as any).action,
code code
); );
this._code = ""; input.value = "";
} }
static get styles(): CSSResult { static get styles(): CSSResult {