From 5f44009177fd11cb0df43149e9d494a36fb4a33e Mon Sep 17 00:00:00 2001
From: c727 <crusader727@gmx.de>
Date: Sat, 30 Jun 2018 15:52:02 +0200
Subject: [PATCH] Love: Add badges to picture elements (#1371)

* Love: Add badges to picture elements

* Lint

* Fix toggle text

* Simplify service button config

* Add default for service data

* Lint
---
 src/panels/dev-info/ha-panel-dev-info.js      |  8 +-
 .../cards/hui-picture-elements-card.js        | 86 +++++++++++--------
 2 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/panels/dev-info/ha-panel-dev-info.js b/src/panels/dev-info/ha-panel-dev-info.js
index 08e53e04a7..17fd3d235c 100644
--- a/src/panels/dev-info/ha-panel-dev-info.js
+++ b/src/panels/dev-info/ha-panel-dev-info.js
@@ -339,14 +339,12 @@ class HaPanelDevInfo extends PolymerElement {
   }
 
   _defaultPageText() {
-    return localStorage.defaultPage === 'lovelace' ?
-      '>> Remove lovelace as default page page on this device <<' :
-      '>> Set lovelace as default page page on this device <<';
+    return `>> ${localStorage.defaultPage === 'lovelace' ?
+      'Remove' : 'Set'} lovelace as default page on this device <<`;
   }
 
   _toggleDefaultPage() {
-    const curIsLove = localStorage.defaultPage === 'lovelace';
-    if (curIsLove) {
+    if (localStorage.defaultPage === 'lovelace') {
       delete localStorage.defaultPage;
     } else {
       localStorage.defaultPage = 'lovelace';
diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.js b/src/panels/lovelace/cards/hui-picture-elements-card.js
index b05bca9cc6..9a530f2088 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.js
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.js
@@ -2,9 +2,11 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import '../../../components/buttons/ha-call-service-button.js';
+import '../../../components/entity/ha-state-label-badge.js';
 import '../../../components/entity/state-badge.js';
 import '../../../components/ha-card.js';
 
+import computeDomain from '../../../common/entity/compute_domain.js';
 import computeStateDisplay from '../../../common/entity/compute_state_display.js';
 import computeStateName from '../../../common/entity/compute_state_name.js';
 import toggleEntity from '../common/entity/toggle-entity.js';
@@ -16,7 +18,7 @@ import LocalizeMixin from '../../../mixins/localize-mixin.js';
  * @appliesMixin EventsMixin
  * @appliesMixin LocalizeMixin
  */
-class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
+class HuiPictureElementsCard extends EventsMixin(LocalizeMixin(PolymerElement)) {
   static get template() {
     return html`
     <style>
@@ -32,12 +34,12 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
         width: 100%;
       }
       .element {
-        white-space: nowrap;
         position: absolute;
         transform: translate(-50%, -50%);
       }
-      .state-text {
+      .state-label {
         padding: 8px;
+        white-space: nowrap;
       }
       .clickable {
         cursor: pointer;
@@ -59,14 +61,15 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
         type: Object,
         observer: '_hassChanged'
       },
-      _config: Object,
+      _config: Object
     };
   }
 
   constructor() {
     super();
-    this._requiresStateObj = [];
-    this._requiresTextState = [];
+    this._stateBadges = [];
+    this._stateIcons = [];
+    this._stateLabels = [];
   }
 
   ready() {
@@ -90,8 +93,10 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
   _buildConfig() {
     const config = this._config;
     const root = this.$.root;
-    this._requiresStateObj = [];
-    this._requiresTextState = [];
+
+    this._stateBadges = [];
+    this._stateIcons = [];
+    this._stateLabels = [];
 
     while (root.lastChild) {
       root.removeChild(root.lastChild);
@@ -101,34 +106,41 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
     img.src = config.image;
     root.appendChild(img);
 
+
     config.elements.forEach((element) => {
+      const entityId = element.entity;
       let el;
-      if (element.type === 'state-badge') {
-        const entityId = element.entity;
-        el = document.createElement('state-badge');
-        el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle'));
-        el.classList.add('clickable');
-        this._requiresStateObj.push({ el, entityId });
-      } else if (element.type === 'state-text') {
-        const entityId = element.entity;
-        el = document.createElement('div');
-        el.addEventListener('click', () => this._handleClick(entityId, false));
-        el.classList.add('clickable', 'state-text');
-        this._requiresTextState.push({ el, entityId });
-      } else if (element.type === 'service-button') {
-        el = document.createElement('ha-call-service-button');
-        el.hass = this.hass;
-        el.domain = (element.service && element.domain) || 'homeassistant';
-        el.service = (element.service && element.service.service) || '';
-        el.serviceData = (element.service && element.service.data) || {};
-        el.innerText = element.title;
+      switch (element.type) {
+        case 'service-button':
+          el = document.createElement('ha-call-service-button');
+          el.domain = computeDomain(element.service);
+          el.service = element.service.substr(el.domain.length + 1);
+          el.serviceData = element.service_data || {};
+          el.innerText = element.title;
+          el.hass = this.hass;
+          break;
+        case 'state-badge':
+          el = document.createElement('ha-state-label-badge');
+          el.state = this.hass.states[entityId];
+          this._stateBadges.push({ el, entityId });
+          break;
+        case 'state-icon':
+          el = document.createElement('state-badge');
+          el.addEventListener('click', () => this._handleClick(entityId, element.tap_action === 'toggle'));
+          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.classList.add('clickable', 'state-label');
+          this._stateLabels.push({ el, entityId });
       }
+
       el.classList.add('element');
-      if (element.style) {
-        Object.keys(element.style).forEach((prop) => {
-          el.style.setProperty(prop, element.style[prop]);
-        });
-      }
+      Object.keys(element.style).forEach((prop) => {
+        el.style.setProperty(prop, element.style[prop]);
+      });
       root.appendChild(el);
     });
 
@@ -138,14 +150,20 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
   }
 
   _hassChanged(hass) {
-    this._requiresStateObj.forEach((element) => {
+    this._stateBadges.forEach((element) => {
+      const { el, entityId } = element;
+      el.state = hass.states[entityId];
+      el.hass = hass;
+    });
+
+    this._stateIcons.forEach((element) => {
       const { el, entityId } = element;
       const stateObj = hass.states[entityId];
       el.stateObj = stateObj;
       el.title = this._computeTooltip(stateObj);
     });
 
-    this._requiresTextState.forEach((element) => {
+    this._stateLabels.forEach((element) => {
       const { el, entityId } = element;
       const stateObj = hass.states[entityId];
       el.innerText = computeStateDisplay(this.localize, stateObj);