Add call-service row element (#1513)

gallery/src/demos/demo-hui-entities-card.js

@@ -121,6 +121,13 @@ const CONFIGS = [
       url: http://google.com/
       icon: mdi:google
       name: Google
+    - type: call-service
+      icon: mdi:power
+      name: Bed light
+      action_name: Toggle light
+      service: light.toggle
+      service_data:
+        entity_id: light.bed_light
     - type: divider
     - type: divider
       style:

src/panels/lovelace/cards/hui-entities-card.js

@@ -28,7 +28,6 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
         margin: 4px 0;
       }
       #states > div > * {
-        display: block;
         overflow: hidden;
       }
       .header {

src/panels/lovelace/common/call-service.js

@@ -0,0 +1,9 @@
+export default function callService(config, hass) {
+  const entityId = config.entity;
+  const [domain, service] = config.service.split('.', 2);
+  const serviceData = Object.assign(
+    {}, { entity_id: entityId },
+    config.service_data
+  );
+  hass.callService(domain, service, serviceData);
+}

src/panels/lovelace/common/create-row-element.js

@@ -12,6 +12,7 @@ import '../entity-rows/hui-text-entity-row.js';
 import '../entity-rows/hui-timer-entity-row.js';
 import '../entity-rows/hui-toggle-entity-row.js';
 
+import '../special-rows/hui-call-service-row.js';
 import '../special-rows/hui-divider-row.js';
 import '../special-rows/hui-weblink-row.js';
 
@@ -19,6 +20,7 @@ import createErrorCardConfig from './create-error-card-config.js';
 
 const CUSTOM_TYPE_PREFIX = 'custom:';
 const SPECIAL_TYPES = new Set([
+  'call-service',
   'divider',
   'weblink'
 ]);

src/panels/lovelace/special-rows/hui-call-service-row.js

@@ -0,0 +1,68 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+import '@polymer/paper-button/paper-button.js';
+
+import '../../../components/ha-icon.js';
+import callService from '../common/call-service.js';
+
+class HuiCallServiceRow extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          display: flex;
+          align-items: center;
+        }
+        ha-icon {
+          padding: 8px;
+          color: var(--paper-item-icon-color);
+        }
+        .flex {
+          flex: 1;
+          overflow: hidden;
+          margin-left: 16px;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+        .flex div {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        paper-button {
+          color: var(--primary-color);
+          font-weight: 500;
+          margin: 0;
+        }
+      </style>
+      <ha-icon icon="[[_config.icon]]"></ha-icon>
+      <div class="flex">
+        <div>
+          [[_config.name]]
+        </div>
+        <paper-button on-click="_callService">[[_config.action_name]]</paper-button>
+      </div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object
+    };
+  }
+
+  setConfig(config) {
+    if (!config || !config.icon || !config.name || !config.action_name ||
+        !config.service || !config.service_data) {
+      throw new Error('Error in card configuration.');
+    }
+    this._config = config;
+  }
+
+  _callService() {
+    callService(this._config, this.hass);
+  }
+}
+customElements.define('hui-call-service-row', HuiCallServiceRow);

src/panels/lovelace/special-rows/hui-weblink-row.js

@@ -8,18 +8,27 @@ class HuiWeblinkRow extends PolymerElement {
     return html`
       <style>
         a {
-          display: block;
+          display: flex;
+          align-items: center;
           color: var(--primary-color);
         }
         ha-icon {
           padding: 8px;
-          margin-right: 16px;
           color: var(--paper-item-icon-color);
         }
-
+        div {
+          flex: 1;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-left: 16px;
+        }
       </style>
       <a href="[[_config.url]]">
-        <ha-icon icon="[[_config.icon]]"></ha-icon>[[_config.name]]
+        <ha-icon icon="[[_config.icon]]"></ha-icon>
+        <div>
+          [[_config.name]]
+        </div>
       </a>
     `;
   }