From 61d3d446f49a86c2d92bbdec08d7e4c0d590f889 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Thu, 19 Jul 2018 21:18:24 +0200
Subject: [PATCH] picture glance: better handle if no title (#1474)

* Better handle if no title

* Simplify code

* Arrays in ifs

* Remove unused method

* Always render the middle div

* Always show both entity divs
---
 .../src/demos/demo-hui-picture-glance-card.js |  4 +-
 .../lovelace/cards/hui-picture-glance-card.js | 42 +++++++++----------
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/gallery/src/demos/demo-hui-picture-glance-card.js b/gallery/src/demos/demo-hui-picture-glance-card.js
index 4831481879..62c415ad2f 100644
--- a/gallery/src/demos/demo-hui-picture-glance-card.js
+++ b/gallery/src/demos/demo-hui-picture-glance-card.js
@@ -60,12 +60,12 @@ class DemoPicGlance extends PolymerElement {
     return html`
       <style>
         #root {
+          padding: 10px;
         }
         hui-picture-glance-card {
           width: 400px;
           display: inline-block;
-          margin-left: 20px;
-          margin-top: 20px;
+          margin: 10px;
         }
       </style>
       <div id='root'>
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js
index d98c828279..365d568f67 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.js
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.js
@@ -83,29 +83,27 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
           entity="[[_config.entity]]"
         ></hui-image>
         <div class="box">
-          <div class="title">[[_config.title]]</div>
+          <template is="dom-if" if="[[_config.title]]">
+            <div class="title">[[_config.title]]</div>
+          </template>
           <div>
-            <template is="dom-repeat" items="[[_entitiesDialog]]">
-              <template is="dom-if" if="[[_showEntity(item.entity, hass.states)]]">
-                <paper-icon-button
-                  on-click="_openDialog"
-                  class$="[[_computeButtonClass(item.entity, hass.states)]]"
-                  icon="[[_computeIcon(item.entity, hass.states)]]"
-                  title="[[_computeTooltip(item.entity, hass.states)]]"
-                ></paper-icon-button>
-              </template>
+            <template is="dom-repeat" items="[[_computeVisible(_entitiesDialog, hass.states)]]">
+              <paper-icon-button
+                on-click="_openDialog"
+                class$="[[_computeButtonClass(item.entity, hass.states)]]"
+                icon="[[_computeIcon(item.entity, hass.states)]]"
+                title="[[_computeTooltip(item.entity, hass.states)]]"
+              ></paper-icon-button>
             </template>
           </div>
           <div>
-            <template is="dom-repeat" items="[[_entitiesToggle]]">
-              <template is="dom-if" if="[[_showEntity(item.entity, hass.states)]]">
-                <paper-icon-button
-                  on-click="_callService"
-                  class$="[[_computeButtonClass(item.entity, hass.states)]]"
-                  icon="[[_computeIcon(item.entity, hass.states)]]"
-                  title="[[_computeTooltip(item.entity, hass.states)]]"
-                ></paper-icon-button>
-              </template>
+            <template is="dom-repeat" items="[[_computeVisible(_entitiesToggle, hass.states)]]">
+              <paper-icon-button
+                on-click="_callService"
+                class$="[[_computeButtonClass(item.entity, hass.states)]]"
+                icon="[[_computeIcon(item.entity, hass.states)]]"
+                title="[[_computeTooltip(item.entity, hass.states)]]"
+              ></paper-icon-button>
             </template>
           </div>
         </div>
@@ -118,7 +116,7 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
       hass: Object,
       _config: Object,
       _entitiesDialog: Array,
-      _entitiesToggle: Array
+      _entitiesToggle: Array,
     };
   }
 
@@ -150,8 +148,8 @@ class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(Polym
     });
   }
 
-  _showEntity(entityId, states) {
-    return entityId in states;
+  _computeVisible(collection, states) {
+    return collection.filter(el => el.entity in states);
   }
 
   _computeIcon(entityId, states) {