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

ACP dialog: localization, new codeFormat (#1226)

Browse Source 
* ACP dialog: localization, new codeFormat

* Fix code validation

* Fix issues

* Fix issues
This commit is contained in:
c727 2018-05-30 15:32:30 +02:00 committed by Paulus Schoutsen
parent 2f6bb9af0c
commit b8ac150ee4
2 changed files with 117 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,53 +5,87 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js'; import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import EventsMixin from '../../../mixins/events-mixin.js'; import EventsMixin from '../../../mixins/events-mixin.js';
import LocalizeMixin from '../../../mixins/localize-mixin.js';
class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) { class MoreInfoAlarmControlPanel extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() { static get template() {
return html` return html`
<style is="custom-style" include="iron-flex"></style> <style include="iron-flex"></style>
<style> <style>
paper-input {
margin: auto;
max-width: 200px;
}
.pad { .pad {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 10%; margin-bottom: 24px;
} }
.pad div { .pad div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.pad paper-button {
width: 80px;
}
.actions paper-button {
min-width: 160px;
margin-bottom: 16px;
color: var(--primary-color);
}
paper-button.disarm {
color: var(--google-red-500);
}
</style> </style>
<div class='layout horizontal center-justified'> <template is="dom-if" if="[[_codeFormat]]">
<paper-input label="code" value="{{enteredCode}}" pattern="[[codeFormat]]" type="password" hidden\$="[[!codeFormat]]" disabled="[[!codeInputEnabled]]"></paper-input> <paper-input
</div> label="[[localize('ui.card.alarm_control_panel.code')]]"
value="{{_enteredCode}}"
pattern="[[_codeFormat]]"
type="password"
disabled="[[!_inputEnabled]]"
></paper-input>
<template is="dom-if" if="[[numericPin]]"> <template is="dom-if" if="[[_isNumber(_codeFormat)]]">
<div class="pad"> <div class="pad">
<div> <div>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="1" raised>1</paper-button> <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' 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='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="4" raised>4</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="7" raised>7</paper-button> <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="7" raised>7</paper-button>
</div> </div>
<div> <div>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="2" raised>2</paper-button> <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' 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='_digitClicked' disabled='[[!_inputEnabled]]' 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='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="8" raised>8</paper-button>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="0" raised>0</paper-button> <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="0" raised>0</paper-button>
</div> </div>
<div> <div>
<paper-button on-click='numberPadClicked' disabled='[[!codeInputEnabled]]' data-digit="3" raised>3</paper-button> <paper-button on-click='_digitClicked' disabled='[[!_inputEnabled]]' 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='_digitClicked' disabled='[[!_inputEnabled]]' 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='_digitClicked' disabled='[[!_inputEnabled]]' data-digit="9" raised>9</paper-button>
<paper-button on-click='clearCode' disabled='[[!codeInputEnabled]]' raised>Clear</paper-button> <paper-button on-click='_clearEnteredCode' disabled='[[!_inputEnabled]]' raised>
[[localize('ui.card.alarm_control_panel.clear_code')]]
</paper-button>
</div> </div>
</div> </div>
</template> </template>
</template>
<div class="layout horizontal"> <div class="layout horizontal center-justified actions">
<paper-button on-click="handleDisarmTap" hidden\$="[[!disarmButtonVisible]]" disabled="[[!codeValid]]">Disarm</paper-button> <template is="dom-if" if="[[_disarmVisible]]">
<paper-button on-click="handleHomeTap" hidden\$="[[!armHomeButtonVisible]]" disabled="[[!codeValid]]">Arm Home</paper-button> <paper-button raised class="disarm" on-click="_callService" data-service="alarm_disarm" disabled="[[!_codeValid]]">
<paper-button on-click="handleAwayTap" hidden\$="[[!armAwayButtonVisible]]" disabled="[[!codeValid]]">Arm Away</paper-button> [[localize('ui.card.alarm_control_panel.disarm')]]
</paper-button>
</template>
<template is="dom-if" if="[[_armVisible]]">
<paper-button raised on-click="_callService" data-service="alarm_arm_home" disabled="[[!_codeValid]]">
[[localize('ui.card.alarm_control_panel.arm_home')]]
</paper-button>
<paper-button raised on-click="_callService" data-service="alarm_arm_away" disabled="[[!_codeValid]]">
[[localize('ui.card.alarm_control_panel.arm_away')]]
</paper-button>
</template>
</div> </div>
`; `;
} }
@ -61,67 +95,50 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
hass: Object, hass: Object,
stateObj: { stateObj: {
type: Object, type: Object,
observer: 'stateObjChanged', observer: '_stateObjChanged'
}, },
enteredCode: { _enteredCode: {
type: String, type: String,
value: '', value: ''
}, },
numericPin: { _codeFormat: {
type: Boolean,
value: false,
},
disarmButtonVisible: {
type: Boolean,
value: false,
},
armHomeButtonVisible: {
type: Boolean,
value: false,
},
armAwayButtonVisible: {
type: Boolean,
value: false,
},
codeInputEnabled: {
type: Boolean,
value: false,
},
codeFormat: {
type: String, type: String,
value: '', value: ''
}, },
codeValid: { _codeValid: {
type: Boolean, type: Boolean,
computed: 'validateCode(enteredCode, codeFormat)', computed: '_validateCode(_enteredCode, _codeFormat)'
}, },
_disarmVisible: {
type: Boolean,
value: false
},
_armVisible: {
type: Boolean,
value: false
},
_inputEnabled: {
type: Boolean,
value: false
}
}; };
} }
validateCode(code, format) { constructor() {
var re = new RegExp(format); super();
if (format === null) { this._armedStates = ['armed_home', 'armed_away', 'armed_night', 'armed_custom_bypass'];
return true;
}
return re.test(code);
} }
stateObjChanged(newVal, oldVal) { _stateObjChanged(newVal, oldVal) {
if (newVal) { if (newVal) {
const state = newVal.state;
const props = { const props = {
codeFormat: newVal.attributes.code_format, _codeFormat: newVal.attributes.code_format,
numericPin: newVal.attributes.code_format === '^\\d+$', _armVisible: state === 'disarmed',
armHomeButtonVisible: newVal.state === 'disarmed', _disarmVisible: this._armedStates.includes(state) ||
armAwayButtonVisible: newVal.state === 'disarmed', state === 'pending' || state === 'triggered'
}; };
props.disarmButtonVisible = ( props._inputEnabled = props._disarmVisible || props._armVisible;
newVal.state === 'armed_home' ||
newVal.state === 'armed_away' ||
newVal.state === 'armed_night' ||
newVal.state === 'armed_custom_bypass' ||
newVal.state === 'pending' ||
newVal.state === 'triggered');
props.codeInputEnabled = props.disarmButtonVisible || newVal.state === 'disarmed';
this.setProperties(props); this.setProperties(props);
} }
if (oldVal) { if (oldVal) {
@ -131,34 +148,32 @@ class MoreInfoAlarmControlPanel extends EventsMixin(PolymerElement) {
} }
} }
numberPadClicked(ev) { _isNumber(format) {
this.enteredCode += ev.target.getAttribute('data-digit'); return format === 'Number';
} }
clearCode() { _validateCode(code, format) {
this.enteredCode = ''; return !format || code.length > 0;
} }
handleDisarmTap() { _digitClicked(ev) {
this.callService('alarm_disarm', { code: this.enteredCode }); this._enteredCode += ev.target.getAttribute('data-digit');
} }
handleHomeTap() { _clearEnteredCode() {
this.callService('alarm_arm_home', { code: this.enteredCode }); this._enteredCode = '';
} }
handleAwayTap() { _callService(ev) {
this.callService('alarm_arm_away', { code: this.enteredCode }); const service = ev.target.getAttribute('data-service');
} const data = {
entity_id: this.stateObj.entity_id,
callService(service, data) { code: this._enteredCode
var serviceData = data || {}; };
serviceData.entity_id = this.stateObj.entity_id; this.hass.callService('alarm_control_panel', service, data)
this.hass.callService('alarm_control_panel', service, serviceData) .then(() => {
.then(function () { this._enteredCode = '';
this.enteredCode = ''; });
}.bind(this));
} }
} }
customElements.define('more-info-alarm_control_panel', MoreInfoAlarmControlPanel); customElements.define('more-info-alarm_control_panel', MoreInfoAlarmControlPanel);

7
src/translations/en.json
View File

@ -315,6 +315,13 @@
}, },
"ui": { "ui": {
"card": { "card": {
"alarm_control_panel": {
"code": "Code",
"clear_code": "Clear",
"disarm": "Disarm",
"arm_home": "Arm home",
"arm_away": "Arm away"
},
"camera": { "camera": {
"not_available": "Image not available" "not_available": "Image not available"
}, },