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

Add pin pad to alarm panel (#1134)

Browse Source 
* Add pin pad to alarm panel

* Update regex

* Add pin pad to alarm panel

* Lint

* Polymer3-ify

* Add new line
This commit is contained in:
Robert Accettura 2018-05-28 20:51:03 -04:00 committed by c727
parent af6167b9c8
commit 21e4bc4ee4
1 changed files with 58 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/dialogs/more-info/controls/more-info-alarm_control_panel.js
View File

@ -6,31 +6,59 @@ import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import EventsMixin from '../../../mixins/events-mixin.js';
/*
* @appliesMixin EventsMixin
*/
class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
static get template() {
return html`
<style is="custom-style" include="iron-flex"></style>
<style is="custom-style" include="iron-flex"></style>
<style>
.pad {
display: flex;
justify-content: center;
margin-bottom: 10%;
}
.pad div {
display: flex;
flex-direction: column;
}
</style>
<div class="layout horizontal">
<paper-input label="code" value="{{enteredCode}}" pattern="[[codeFormat]]" type="password" hidden\$="[[!codeFormat]]" disabled="[[!codeInputEnabled]]"></paper-input>
</div>
<div class="layout horizontal">
<paper-button on-click="handleDisarmTap" hidden\$="[[!disarmButtonVisible]]" disabled="[[!codeValid]]">Disarm</paper-button>
<paper-button on-click="handleHomeTap" hidden\$="[[!armHomeButtonVisible]]" disabled="[[!codeValid]]">Arm Home</paper-button>
<paper-button on-click="handleAwayTap" hidden\$="[[!armAwayButtonVisible]]" disabled="[[!codeValid]]">Arm Away</paper-button>
</div>
`;
<div class='layout horizontal center-justified'>
<paper-input label="code" value="{{enteredCode}}" pattern="[[codeFormat]]" type="password" hidden\$="[[!codeFormat]]" disabled="[[!codeInputEnabled]]"></paper-input>
</div>
<template is="dom-if" if="[[numericPin]]">
<div class="pad">
<div>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="1" raised>1</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="4" raised>4</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="7" raised>7</paper-button>
</div>
<div>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="2" raised>2</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="5" raised>5</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="8" raised>8</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="0" raised>0</paper-button>
</div>
<div>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="3" raised>3</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="6" raised>6</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="9" raised>9</paper-button>
<paper-button on-click='clearCode' disabled='[[!codeInputEnabled]]' raised>Clear</paper-button>
</div>
</div>
</template>
<div class="layout horizontal">
<paper-button on-click="handleDisarmTap" hidden\$="[[!disarmButtonVisible]]" disabled="[[!codeValid]]">Disarm</paper-button>
<paper-button on-click="handleHomeTap" hidden\$="[[!armHomeButtonVisible]]" disabled="[[!codeValid]]">Arm Home</paper-button>
<paper-button on-click="handleAwayTap" hidden\$="[[!armAwayButtonVisible]]" disabled="[[!codeValid]]">Arm Away</paper-button>
</div>
`;
}
static get properties() {
return {
hass: {
type: Object,
},
hass: Object,
stateObj: {
type: Object,
observer: 'stateObjChanged',
@ -39,6 +67,10 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
type: String,
value: '',
},
numericPin: {
type: Boolean,
value: false,
},
disarmButtonVisible: {
type: Boolean,
value: false,
@ -78,6 +110,7 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
if (newVal) {
const props = {
codeFormat: newVal.attributes.code_format,
numericPin: newVal.attributes.code_format === '^\\d+$',
armHomeButtonVisible: newVal.state === 'disarmed',
armAwayButtonVisible: newVal.state === 'disarmed',
};
@ -98,6 +131,14 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
}
}
numberPadClicked(ev) {
this.enteredCode += ev.target.getAttribute('data-digit');
}
clearCode() {
this.enteredCode = '';
}
handleDisarmTap() {
this.callService('alarm_disarm', { code: this.enteredCode });
}