State card lock (#1419)

* Add state-card-lock

* Cleanup

* Feedback

* Lovelace: Exclude covers and locks from header toggle

src/common/const.js

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

src/panels/lovelace/components/hui-entities-toggle.js

@@ -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) {

src/state-summary/state-card-content.js

@@ -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';

src/state-summary/state-card-lock.js

@@ -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);