From 4a667eb77e28a27dc766ca6f7bbd04e3866124d9 Mon Sep 17 00:00:00 2001
From: amorsillo <andrew@peeramid.org>
Date: Sat, 21 May 2016 16:01:43 -0400
Subject: [PATCH] =?UTF-8?q?Display=20controls=20for=20all=20members=20of?=
 =?UTF-8?q?=20group=20if=20all=20members=20are=20of=20the=20s=E2=80=A6=20(?=
 =?UTF-8?q?#61)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Display controls for all members of group if all members are of the same domain.

* Clean up for eslint

* Pick the most capable member of a group as a basis for whole group controls

* Create a new state with only necessary attribute changes for group control

* Always use first member of group for base entity of group controls
---
 src/cards/ha-entities-card.html     |  5 +++-
 src/cards/ha-entities-card.js       | 19 +++++++++++---
 src/more-infos/more-info-group.html |  2 ++
 src/more-infos/more-info-group.js   | 40 ++++++++++++++++++++++++++++-
 4 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/src/cards/ha-entities-card.html b/src/cards/ha-entities-card.html
index ce55d0bf85..7db7f1d806 100644
--- a/src/cards/ha-entities-card.html
+++ b/src/cards/ha-entities-card.html
@@ -29,10 +29,13 @@
     ha-entity-toggle {
       margin-left: 16px;
     }
+    .header-more-info {
+      cursor: pointer;
+    }
   </style>
   <template>
     <ha-card>
-      <div class='header horizontal layout center'>
+      <div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
         <div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
         <template is='dom-if' if='[[showGroupToggle(groupEntity, states)]]'>
           <ha-entity-toggle state-obj='[[groupEntity]]'></ha-entity-toggle>
diff --git a/src/cards/ha-entities-card.js b/src/cards/ha-entities-card.js
index 04e544621b..abc53f88d5 100644
--- a/src/cards/ha-entities-card.js
+++ b/src/cards/ha-entities-card.js
@@ -24,14 +24,27 @@ export default new Polymer({
     return groupEntity ? groupEntity.entityDisplay :
                          states[0].domain.replace(/_/g, ' ');
   },
-
+  computeTitleClass(groupEntity) {
+    let classes = 'header horizontal layout center ';
+    if (groupEntity) {
+      classes += 'header-more-info';
+    }
+    return classes;
+  },
   entityTapped(ev) {
     if (ev.target.classList.contains('paper-toggle-button') ||
-        ev.target.classList.contains('paper-icon-button')) {
+        ev.target.classList.contains('paper-icon-button') ||
+        (!ev.model && !this.groupEntity)) {
       return;
     }
     ev.stopPropagation();
-    const entityId = ev.model.item.entityId;
+
+    let entityId;
+    if (ev.model) {
+      entityId = ev.model.item.entityId;
+    } else {
+      entityId = this.groupEntity.entityId;
+    }
     this.async(() => moreInfoActions.selectEntity(entityId), 1);
   },
 
diff --git a/src/more-infos/more-info-group.html b/src/more-infos/more-info-group.html
index 6c0f2a1b52..a31320b68f 100644
--- a/src/more-infos/more-info-group.html
+++ b/src/more-infos/more-info-group.html
@@ -2,6 +2,7 @@
 
 <link rel="import" href="../state-summary/state-card-content.html">
 
+
 <dom-module id="more-info-group">
   <style>
     .child-card {
@@ -13,6 +14,7 @@
     }
   </style>
   <template>
+    <div id="groupedControlDetails"></div>
     <template is='dom-repeat' items="[[states]]" as='state'>
       <div class='child-card'>
         <state-card-content state-obj="[[state]]"></state-card-content>
diff --git a/src/more-infos/more-info-group.js b/src/more-infos/more-info-group.js
index e484d351b2..1c4023871a 100644
--- a/src/more-infos/more-info-group.js
+++ b/src/more-infos/more-info-group.js
@@ -1,10 +1,12 @@
 import hass from '../util/home-assistant-js-instance';
-
 import Polymer from '../polymer';
 import nuclearObserver from '../util/bound-nuclear-behavior';
+import dynamicContentUpdater from '../util/dynamic-content-updater';
+import stateMoreInfoType from '../util/state-more-info-type';
 
 require('../state-summary/state-card-content');
 
+
 const {
   entityGetters,
   moreInfoGetters,
@@ -36,4 +38,40 @@ export default new Polymer({
       ],
     },
   },
+
+  observers: [
+    'statesChanged(stateObj, states)',
+  ],
+
+  statesChanged(stateObj, states) {
+    let groupDomainStateObj = false;
+
+    if (states && states.length > 0) {
+      const baseStateObj = states[0];
+
+      groupDomainStateObj = baseStateObj.set('entityId', stateObj.entityId).set(
+          'attributes', Object.assign({}, baseStateObj.attributes));
+
+      for (let i = 0; i < states.length; i++) {
+        const s = states[i];
+        if (s && s.domain) {
+          if (groupDomainStateObj.domain !== s.domain) {
+            groupDomainStateObj = false;
+          }
+        }
+      }
+    }
+
+    if (!groupDomainStateObj) {
+      const el = Polymer.dom(this.$.groupedControlDetails);
+      if (el.lastChild) {
+        el.removeChild(el.lastChild);
+      }
+    } else {
+      dynamicContentUpdater(
+        this.$.groupedControlDetails,
+          `MORE-INFO-${stateMoreInfoType(groupDomainStateObj).toUpperCase()}`,
+          { stateObj: groupDomainStateObj });
+    }
+  },
 });