State card lock (#1419)

* Add state-card-lock

* Cleanup

* Feedback

* Lovelace: Exclude covers and locks from header toggle
This commit is contained in:
c727 2018-07-08 03:24:22 +02:00 committed by GitHub
parent f58c612018
commit c17f390f58
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 1 deletions

View File

@ -15,6 +15,7 @@ export const DOMAINS_WITH_CARD = [
'input_select',
'input_number',
'input_text',
'lock',
'media_player',
'scene',
'script',

View File

@ -6,6 +6,8 @@ import canToggleState from '../../../common/entity/can_toggle_state.js';
import turnOnOffEntities from '../common/entity/turn-on-off-entities.js';
import { STATES_OFF } from '../../../common/const.js';
const EXCLUDED_DOMAINS = ['cover', 'lock'];
class HuiEntitiesToggle extends PolymerElement {
static get template() {
return html`
@ -40,7 +42,7 @@ class HuiEntitiesToggle extends PolymerElement {
_computeToggleEntities(hass, entityIds) {
return entityIds.filter(entityId => (entityId in hass.states ?
canToggleState(hass, hass.states[entityId]) : false));
!EXCLUDED_DOMAINS.includes(entityId.split('.', 1)[0]) && canToggleState(hass, hass.states[entityId]) : false));
}
_computeIsChecked(hass, entityIds) {

View File

@ -7,6 +7,7 @@ import './state-card-display.js';
import './state-card-input_number.js';
import './state-card-input_select.js';
import './state-card-input_text.js';
import './state-card-lock.js';
import './state-card-media_player.js';
import './state-card-scene.js';
import './state-card-script.js';

View File

@ -0,0 +1,77 @@
import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
import '@polymer/paper-button/paper-button.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../components/entity/state-info.js';
import LocalizeMixin from '../mixins/localize-mixin.js';
/*
* @appliesMixin LocalizeMixin
*/
class StateCardLock extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
<style include="iron-flex iron-flex-alignment"></style>
<style>
paper-button {
color: var(--primary-color);
font-weight: 500;
top: 3px;
height: 37px;
margin-right: -.57em;
}
</style>
<div class="horizontal justified layout">
${this.stateInfoTemplate}
<paper-button on-click="_callService" data-service="unlock" hidden$="[[!isLocked]]">[[localize('ui.card.lock.unlock')]]</paper-button>
<paper-button on-click="_callService" data-service="lock" hidden$="[[isLocked]]">[[localize('ui.card.lock.lock')]]</paper-button>
</div>
`;
}
static get stateInfoTemplate() {
return html`
<state-info
hass="[[hass]]"
state-obj="[[stateObj]]"
in-dialog="[[inDialog]]"
override-name="[[overrideName]]">
</state-info>
`;
}
static get properties() {
return {
hass: Object,
stateObj: {
type: Object,
observer: '_stateObjChanged',
},
inDialog: {
type: Boolean,
value: false,
},
isLocked: Boolean,
overrideName: String
};
}
_stateObjChanged(newVal) {
if (newVal) {
this.isLocked = newVal.state === 'locked';
}
}
_callService(ev) {
ev.stopPropagation();
const service = ev.target.dataset.service;
const data = {
entity_id: this.stateObj.entity_id,
};
this.hass.callService('lock', service, data);
}
}
customElements.define('state-card-lock', StateCardLock);