mirror of
https://github.com/home-assistant/frontend.git
synced 2025-04-24 21:37:21 +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:
Bram Kragten
GitHub
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