mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-14 21:06:34 +00:00
Convert alarm control panel more info (#11791)
* Convert alarm control panel more info * Update more-info-alarm_control_panel.ts * Update src/dialogs/more-info/controls/more-info-alarm_control_panel.ts * Apply suggestions from code review Co-authored-by: Zack Barett <zackbarett@hey.com> * import Co-authored-by: Zack Barett <zackbarett@hey.com>
This commit is contained in:
parent
df35496c6e
commit
64459a06c6
@ -1,281 +0,0 @@
|
|||||||
import "@material/mwc-button";
|
|
||||||
import "@polymer/iron-flex-layout/iron-flex-layout-classes";
|
|
||||||
import "@polymer/paper-input/paper-input";
|
|
||||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
|
||||||
/* eslint-plugin-disable lit */
|
|
||||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
|
||||||
import { fireEvent } from "../../../common/dom/fire_event";
|
|
||||||
import { FORMAT_NUMBER } from "../../../data/alarm_control_panel";
|
|
||||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
|
||||||
|
|
||||||
class MoreInfoAlarmControlPanel extends LocalizeMixin(PolymerElement) {
|
|
||||||
static get template() {
|
|
||||||
return html`
|
|
||||||
<style include="iron-flex"></style>
|
|
||||||
<style>
|
|
||||||
paper-input {
|
|
||||||
margin: auto;
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
.pad {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
|
||||||
.pad div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.pad mwc-button {
|
|
||||||
padding: 8px;
|
|
||||||
width: 80px;
|
|
||||||
}
|
|
||||||
.actions mwc-button {
|
|
||||||
flex: 1 0 50%;
|
|
||||||
margin: 0 4px 16px;
|
|
||||||
max-width: 200px;
|
|
||||||
}
|
|
||||||
mwc-button.disarm {
|
|
||||||
color: var(--error-color);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<template is="dom-if" if="[[_codeFormat]]">
|
|
||||||
<paper-input
|
|
||||||
label="[[localize('ui.card.alarm_control_panel.code')]]"
|
|
||||||
value="{{_enteredCode}}"
|
|
||||||
type="password"
|
|
||||||
inputmode="[[_inputMode]]"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
></paper-input>
|
|
||||||
|
|
||||||
<template is="dom-if" if="[[_isNumber(_codeFormat)]]">
|
|
||||||
<div class="pad">
|
|
||||||
<div>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="1"
|
|
||||||
outlined
|
|
||||||
>1</mwc-button
|
|
||||||
>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="4"
|
|
||||||
outlined
|
|
||||||
>4</mwc-button
|
|
||||||
>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="7"
|
|
||||||
outlined
|
|
||||||
>7</mwc-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="2"
|
|
||||||
outlined
|
|
||||||
>2</mwc-button
|
|
||||||
>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="5"
|
|
||||||
outlined
|
|
||||||
>5</mwc-button
|
|
||||||
>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="8"
|
|
||||||
outlined
|
|
||||||
>8</mwc-button
|
|
||||||
>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="0"
|
|
||||||
outlined
|
|
||||||
>0</mwc-button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="3"
|
|
||||||
outlined
|
|
||||||
>3</mwc-button
|
|
||||||
>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="6"
|
|
||||||
outlined
|
|
||||||
>6</mwc-button
|
|
||||||
>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_digitClicked"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
data-digit="9"
|
|
||||||
outlined
|
|
||||||
>9</mwc-button
|
|
||||||
>
|
|
||||||
<mwc-button
|
|
||||||
on-click="_clearEnteredCode"
|
|
||||||
disabled="[[!_inputEnabled]]"
|
|
||||||
outlined
|
|
||||||
>
|
|
||||||
[[localize('ui.card.alarm_control_panel.clear_code')]]
|
|
||||||
</mwc-button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="layout horizontal center-justified actions">
|
|
||||||
<template is="dom-if" if="[[_disarmVisible]]">
|
|
||||||
<mwc-button
|
|
||||||
outlined
|
|
||||||
class="disarm"
|
|
||||||
on-click="_callService"
|
|
||||||
data-service="alarm_disarm"
|
|
||||||
disabled="[[!_codeValid]]"
|
|
||||||
>
|
|
||||||
[[localize('ui.card.alarm_control_panel.disarm')]]
|
|
||||||
</mwc-button>
|
|
||||||
</template>
|
|
||||||
<template is="dom-if" if="[[_armVisible]]">
|
|
||||||
<mwc-button
|
|
||||||
outlined
|
|
||||||
on-click="_callService"
|
|
||||||
data-service="alarm_arm_home"
|
|
||||||
disabled="[[!_codeValid]]"
|
|
||||||
>
|
|
||||||
[[localize('ui.card.alarm_control_panel.arm_home')]]
|
|
||||||
</mwc-button>
|
|
||||||
<mwc-button
|
|
||||||
outlined
|
|
||||||
on-click="_callService"
|
|
||||||
data-service="alarm_arm_away"
|
|
||||||
disabled="[[!_codeValid]]"
|
|
||||||
>
|
|
||||||
[[localize('ui.card.alarm_control_panel.arm_away')]]
|
|
||||||
</mwc-button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
}
|
|
||||||
|
|
||||||
static get properties() {
|
|
||||||
return {
|
|
||||||
hass: Object,
|
|
||||||
stateObj: {
|
|
||||||
type: Object,
|
|
||||||
observer: "_stateObjChanged",
|
|
||||||
},
|
|
||||||
_enteredCode: {
|
|
||||||
type: String,
|
|
||||||
value: "",
|
|
||||||
},
|
|
||||||
_codeFormat: {
|
|
||||||
type: String,
|
|
||||||
value: "",
|
|
||||||
},
|
|
||||||
_codeValid: {
|
|
||||||
type: Boolean,
|
|
||||||
computed:
|
|
||||||
"_validateCode(_enteredCode, _codeFormat, _armVisible, _codeArmRequired)",
|
|
||||||
},
|
|
||||||
_disarmVisible: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
_armVisible: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
_inputEnabled: {
|
|
||||||
type: Boolean,
|
|
||||||
value: false,
|
|
||||||
},
|
|
||||||
_inputMode: {
|
|
||||||
type: String,
|
|
||||||
computed: "_getInputMode(_codeFormat)",
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this._armedStates = [
|
|
||||||
"armed_home",
|
|
||||||
"armed_away",
|
|
||||||
"armed_night",
|
|
||||||
"armed_custom_bypass",
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
_stateObjChanged(newVal, oldVal) {
|
|
||||||
if (newVal) {
|
|
||||||
const state = newVal.state;
|
|
||||||
const props = {
|
|
||||||
_codeFormat: newVal.attributes.code_format,
|
|
||||||
_armVisible: state === "disarmed",
|
|
||||||
_codeArmRequired: newVal.attributes.code_arm_required,
|
|
||||||
_disarmVisible:
|
|
||||||
this._armedStates.includes(state) ||
|
|
||||||
state === "pending" ||
|
|
||||||
state === "triggered" ||
|
|
||||||
state === "arming",
|
|
||||||
};
|
|
||||||
props._inputEnabled = props._disarmVisible || props._armVisible;
|
|
||||||
this.setProperties(props);
|
|
||||||
}
|
|
||||||
if (oldVal) {
|
|
||||||
setTimeout(() => {
|
|
||||||
fireEvent(this, "iron-resize");
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_getInputMode(format) {
|
|
||||||
return this._isNumber(format) ? "numeric" : "text";
|
|
||||||
}
|
|
||||||
|
|
||||||
_isNumber(format) {
|
|
||||||
return format === FORMAT_NUMBER;
|
|
||||||
}
|
|
||||||
|
|
||||||
_validateCode(code, format, armVisible, codeArmRequired) {
|
|
||||||
return !format || code.length > 0 || (armVisible && !codeArmRequired);
|
|
||||||
}
|
|
||||||
|
|
||||||
_digitClicked(ev) {
|
|
||||||
this._enteredCode += ev.target.getAttribute("data-digit");
|
|
||||||
}
|
|
||||||
|
|
||||||
_clearEnteredCode() {
|
|
||||||
this._enteredCode = "";
|
|
||||||
}
|
|
||||||
|
|
||||||
_callService(ev) {
|
|
||||||
const service = ev.target.getAttribute("data-service");
|
|
||||||
const data = {
|
|
||||||
entity_id: this.stateObj.entity_id,
|
|
||||||
code: this._enteredCode,
|
|
||||||
};
|
|
||||||
this.hass.callService("alarm_control_panel", service, data).then(() => {
|
|
||||||
this._enteredCode = "";
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
customElements.define(
|
|
||||||
"more-info-alarm_control_panel",
|
|
||||||
MoreInfoAlarmControlPanel
|
|
||||||
);
|
|
165
src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
Normal file
165
src/dialogs/more-info/controls/more-info-alarm_control_panel.ts
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
import "@material/mwc-button";
|
||||||
|
import type { HassEntity } from "home-assistant-js-websocket";
|
||||||
|
import { css, html, LitElement, TemplateResult } from "lit";
|
||||||
|
import { customElement, property, query } from "lit/decorators";
|
||||||
|
import { classMap } from "lit/directives/class-map";
|
||||||
|
import "../../../components/ha-textfield";
|
||||||
|
import type { HaTextField } from "../../../components/ha-textfield";
|
||||||
|
import {
|
||||||
|
callAlarmAction,
|
||||||
|
FORMAT_NUMBER,
|
||||||
|
} from "../../../data/alarm_control_panel";
|
||||||
|
import type { HomeAssistant } from "../../../types";
|
||||||
|
|
||||||
|
const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "clear"];
|
||||||
|
const ARM_ACTIONS = ["arm_away", "arm_home"];
|
||||||
|
const DISARM_ACTIONS = ["disarm"];
|
||||||
|
|
||||||
|
@customElement("more-info-alarm_control_panel")
|
||||||
|
export class MoreInfoAlarmControlPanel extends LitElement {
|
||||||
|
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||||
|
|
||||||
|
@property({ attribute: false }) public stateObj?: HassEntity;
|
||||||
|
|
||||||
|
@query("#alarmCode") private _input?: HaTextField;
|
||||||
|
|
||||||
|
protected render(): TemplateResult {
|
||||||
|
if (!this.hass || !this.stateObj) {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
return html`
|
||||||
|
${!this.stateObj.attributes.code_format
|
||||||
|
? ""
|
||||||
|
: html`
|
||||||
|
<div class="center">
|
||||||
|
<ha-textfield
|
||||||
|
id="alarmCode"
|
||||||
|
.label=${this.hass.localize("ui.card.alarm_control_panel.code")}
|
||||||
|
type="password"
|
||||||
|
.inputmode=${this.stateObj.attributes.code_format ===
|
||||||
|
FORMAT_NUMBER
|
||||||
|
? "numeric"
|
||||||
|
: "text"}
|
||||||
|
></ha-textfield>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
${this.stateObj.attributes.code_format !== FORMAT_NUMBER
|
||||||
|
? ""
|
||||||
|
: html`
|
||||||
|
<div id="keypad">
|
||||||
|
${BUTTONS.map((value) =>
|
||||||
|
value === ""
|
||||||
|
? html`<mwc-button disabled></mwc-button>`
|
||||||
|
: html`
|
||||||
|
<mwc-button
|
||||||
|
.value=${value}
|
||||||
|
@click=${this._handlePadClick}
|
||||||
|
outlined
|
||||||
|
class=${classMap({
|
||||||
|
numberkey: value !== "clear",
|
||||||
|
})}
|
||||||
|
>
|
||||||
|
${value === "clear"
|
||||||
|
? this.hass!.localize(
|
||||||
|
`ui.card.alarm_control_panel.clear_code`
|
||||||
|
)
|
||||||
|
: value}
|
||||||
|
</mwc-button>
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
<div class="actions">
|
||||||
|
${(this.stateObj.state === "disarmed"
|
||||||
|
? ARM_ACTIONS
|
||||||
|
: DISARM_ACTIONS
|
||||||
|
).map(
|
||||||
|
(stateAction) => html`
|
||||||
|
<mwc-button
|
||||||
|
.action=${stateAction}
|
||||||
|
@click=${this._handleActionClick}
|
||||||
|
outlined
|
||||||
|
>
|
||||||
|
${this.hass!.localize(
|
||||||
|
`ui.card.alarm_control_panel.${stateAction}`
|
||||||
|
)}
|
||||||
|
</mwc-button>
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _handlePadClick(e: MouseEvent): void {
|
||||||
|
const val = (e.currentTarget! as any).value;
|
||||||
|
this._input!.value = val === "clear" ? "" : this._input!.value + val;
|
||||||
|
}
|
||||||
|
|
||||||
|
private _handleActionClick(e: MouseEvent): void {
|
||||||
|
const input = this._input;
|
||||||
|
callAlarmAction(
|
||||||
|
this.hass!,
|
||||||
|
this.stateObj!.entity_id,
|
||||||
|
(e.currentTarget! as any).action,
|
||||||
|
input?.value || undefined
|
||||||
|
);
|
||||||
|
if (input) {
|
||||||
|
input.value = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
static styles = css`
|
||||||
|
ha-textfield {
|
||||||
|
display: block;
|
||||||
|
margin: 8px;
|
||||||
|
max-width: 150px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#keypad {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin: auto;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#keypad mwc-button {
|
||||||
|
padding: 8px;
|
||||||
|
width: 30%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions mwc-button {
|
||||||
|
margin: 0 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
mwc-button#disarm {
|
||||||
|
color: var(--error-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
mwc-button.numberkey {
|
||||||
|
--mdc-typography-button-font-size: var(--keypad-font-size, 0.875rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface HTMLElementTagNameMap {
|
||||||
|
"more-info-alarm_control_panel": MoreInfoAlarmControlPanel;
|
||||||
|
}
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user