Display controls for all members of group if all members are of the s… (#61)

* 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

@@ -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>

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);
   },
 

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>

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 });
+    }
+  },
 });