jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-09 18: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'; import EventsMixin from '../../../mixins/events-mixin.js';
/*
* @appliesMixin EventsMixin
*/
class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) { class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
static get template() { static get template() {
return html` 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"> <div class='layout horizontal center-justified'>
<paper-input label="code" value="{{enteredCode}}" pattern="[[codeFormat]]" type="password" hidden\$="[[!codeFormat]]" disabled="[[!codeInputEnabled]]"></paper-input> <paper-input label="code" value="{{enteredCode}}" pattern="[[codeFormat]]" type="password" hidden\$="[[!codeFormat]]" disabled="[[!codeInputEnabled]]"></paper-input>
</div> </div>
<div class="layout horizontal">
<paper-button on-click="handleDisarmTap" hidden\$="[[!disarmButtonVisible]]" disabled="[[!codeValid]]">Disarm</paper-button> <template is="dom-if" if="[[numericPin]]">
<paper-button on-click="handleHomeTap" hidden\$="[[!armHomeButtonVisible]]" disabled="[[!codeValid]]">Arm Home</paper-button> <div class="pad">
<paper-button on-click="handleAwayTap" hidden\$="[[!armAwayButtonVisible]]" disabled="[[!codeValid]]">Arm Away</paper-button> <div>
</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() { static get properties() {
return { return {
hass: { hass: Object,
type: Object,
},
stateObj: { stateObj: {
type: Object, type: Object,
observer: 'stateObjChanged', observer: 'stateObjChanged',
@ -39,6 +67,10 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
type: String, type: String,
value: '', value: '',
}, },
numericPin: {
type: Boolean,
value: false,
},
disarmButtonVisible: { disarmButtonVisible: {
type: Boolean, type: Boolean,
value: false, value: false,
@ -78,6 +110,7 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
if (newVal) { if (newVal) {
const props = { const props = {
codeFormat: newVal.attributes.code_format, codeFormat: newVal.attributes.code_format,
numericPin: newVal.attributes.code_format === '^\\d+$',
armHomeButtonVisible: newVal.state === 'disarmed', armHomeButtonVisible: newVal.state === 'disarmed',
armAwayButtonVisible: 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() { handleDisarmTap() {
this.callService('alarm_disarm', { code: this.enteredCode }); this.callService('alarm_disarm', { code: this.enteredCode });
} }