diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js index 906f942573..f193d92de0 100644 --- a/gallery/src/demos/demo-hui-entities-card.js +++ b/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: diff --git a/src/panels/lovelace/cards/hui-entities-card.js b/src/panels/lovelace/cards/hui-entities-card.js index 38cd7af859..e3d1977db6 100644 --- a/src/panels/lovelace/cards/hui-entities-card.js +++ b/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 { diff --git a/src/panels/lovelace/common/call-service.js b/src/panels/lovelace/common/call-service.js new file mode 100644 index 0000000000..57989ea854 --- /dev/null +++ b/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); +} diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js index db8147e9e8..b2e797368e 100644 --- a/src/panels/lovelace/common/create-row-element.js +++ b/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' ]); diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.js b/src/panels/lovelace/special-rows/hui-call-service-row.js new file mode 100644 index 0000000000..7b1c91816b --- /dev/null +++ b/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` + + +
+
+ [[_config.name]] +
+ [[_config.action_name]] +
+ `; + } + + 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); diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.js b/src/panels/lovelace/special-rows/hui-weblink-row.js index 76a62822d5..bbcec02489 100644 --- a/src/panels/lovelace/special-rows/hui-weblink-row.js +++ b/src/panels/lovelace/special-rows/hui-weblink-row.js @@ -8,18 +8,27 @@ class HuiWeblinkRow extends PolymerElement { return html` - [[_config.name]] + +
+ [[_config.name]] +
`; }