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