From 19e58c775ef40fef5b7b249f3a9c6bb37af48018 Mon Sep 17 00:00:00 2001
From: Jerad Meisner <jerad.meisner@gmail.com>
Date: Wed, 11 Jul 2018 23:56:53 -0700
Subject: [PATCH] Add image type for picture-elements card. (#1428)

* Add image type for picture-elements.

* Rebased master. Move overflow rule to parent.

* Cleaned up click handler.
---
 .../cards/hui-picture-elements-card.js        | 55 ++++++++++++++++---
 1 file changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.js b/src/panels/lovelace/cards/hui-picture-elements-card.js
index 0f17925b67..bb7a6c1f68 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.js
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.js
@@ -6,9 +6,11 @@ import '../../../components/entity/ha-state-label-badge.js';
 import '../../../components/entity/state-badge.js';
 import '../../../components/ha-icon.js';
 import '../../../components/ha-card.js';
+import '../components/hui-image.js';
 
 import computeStateDisplay from '../../../common/entity/compute_state_display.js';
 import computeStateName from '../../../common/entity/compute_state_name.js';
+import computeDomain from '../../../common/entity/compute_domain';
 import toggleEntity from '../common/entity/toggle-entity.js';
 
 import EventsMixin from '../../../mixins/events-mixin.js';
@@ -16,6 +18,7 @@ import LocalizeMixin from '../../../mixins/localize-mixin.js';
 import NavigateMixin from '../../../mixins/navigate-mixin.js';
 
 const VALID_TYPES = new Set([
+  'image',
   'navigation',
   'service-button',
   'state-badge',
@@ -58,6 +61,9 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
         color: var(--primary-color);
         white-space: nowrap;
       }
+      hui-image {
+        overflow-y: hidden;
+      }
     </style>
 
     <ha-card header="[[_config.title]]">
@@ -81,6 +87,7 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
     this._stateBadges = [];
     this._stateIcons = [];
     this._stateLabels = [];
+    this._images = [];
   }
 
   ready() {
@@ -139,13 +146,13 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
           break;
         case 'state-icon':
           el = document.createElement('state-badge');
-          el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle'));
+          el.addEventListener('click', () => this._handleClick(element));
           el.classList.add('clickable');
           this._stateIcons.push({ el, entityId });
           break;
         case 'state-label':
           el = document.createElement('div');
-          el.addEventListener('click', () => this._handleClick(entityId, false));
+          el.addEventListener('click', () => this._handleClick(element));
           el.classList.add('clickable', 'state-label');
           this._stateLabels.push({ el, entityId });
           break;
@@ -156,6 +163,23 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
           el.title = element.navigation_path;
           el.classList.add('clickable');
           break;
+        case 'image':
+          el = document.createElement('hui-image');
+          el.hass = this.hass;
+          el.entity = element.entity;
+          el.image = element.image;
+          el.stateImage = element.state_image;
+          el.filter = element.filter;
+          el.stateFilter = element.state_filter;
+          if (!element.camera_image && computeDomain(element.entity) === 'camera') {
+            el.cameraImage = element.entity;
+          } else {
+            el.cameraImage = element.camera_image;
+          }
+          this._images.push(el);
+          if (element.tap_action === 'none') break;
+          el.addEventListener('click', () => this._handleClick(element));
+          el.classList.add('clickable');
       }
 
       el.classList.add('element');
@@ -197,17 +221,34 @@ class HuiPictureElementsCard extends NavigateMixin(EventsMixin(LocalizeMixin(Pol
         el.title = '';
       }
     });
+
+    this._images.forEach((el) => {
+      el.hass = hass;
+    });
   }
 
   _computeTooltip(stateObj) {
     return `${computeStateName(stateObj)}: ${computeStateDisplay(this.localize, stateObj)}`;
   }
 
-  _handleClick(entityId, toggle) {
-    if (toggle) {
-      toggleEntity(this.hass, entityId);
-    } else {
-      this.fire('hass-more-info', { entityId });
+  _handleClick(elementConfig) {
+    const tapAction = elementConfig.tap_action || 'more_info';
+
+    switch (tapAction) {
+      case 'more_info':
+        this.fire('hass-more-info', { entityId: elementConfig.entity });
+        break;
+      case 'toggle':
+        toggleEntity(this.hass, elementConfig.entity);
+        break;
+      case 'call_service': {
+        const [domain, service] = elementConfig.service.split('.', 2);
+        const serviceData = Object.assign(
+          {}, { entity_id: elementConfig.entity },
+          elementConfig.service_data
+        );
+        this.hass.callService(domain, service, serviceData);
+      }
     }
   }
 }