Allow toggling groups

src/cards/ha-domain-card.html

@@ -1,6 +1,7 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
 
 <link rel='import' href='../components/ha-card.html'>
+<link rel='import' href='../components/entity/ha-entity-toggle.html'>
 <link rel='import' href='../state-summary/state-card-content.html'>
 
 <dom-module id='ha-domain-card'>
@@ -12,9 +13,27 @@
       padding: 8px 16px;
       cursor: pointer;
     }
+    .header {
+      font-size: 24px;
+      padding: 24px 16px 16px;
+      text-transform: capitalize;
+    }
+    .header .name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    ha-entity-toggle {
+      margin-left: 16px;
+    }
   </style>
   <template>
-    <ha-card header='[[computeDomainTitle(domain)]]'>
+    <ha-card>
+      <div class='header horizontal layout center'>
+        <div class='flex name'>[[computeDomainTitle(domain)]]</div>
+        <template is='dom-if' if='[[groupEntity]]'>
+          <ha-entity-toggle state-obj='[[groupEntity]]'></ha-entity-toggle>
+        </template>
+      </div>
       <div class='states'>
         <template is='dom-repeat' items="[[states]]">
           <div class='state' on-click='entityTapped'>

src/cards/ha-domain-card.js

@@ -2,6 +2,7 @@ import Polymer from '../polymer';
 import { moreInfoActions } from '../util/home-assistant-js-instance';
 
 require('../components/ha-card');
+require('../components/entity/ha-entity-toggle');
 require('../state-summary/state-card-content');
 
 export default new Polymer({
@@ -14,6 +15,9 @@ export default new Polymer({
     states: {
       type: Array,
     },
+    groupEntity: {
+      type: Object,
+    },
   },
 
   computeDomainTitle(domain) {

src/components/entity/ha-entity-toggle.html

@@ -0,0 +1,10 @@
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../bower_components/paper-toggle-button/paper-toggle-button.html">
+
+<dom-module id="ha-entity-toggle">
+  <template>
+    <paper-toggle-button class='self-center'
+      checked="[[toggleChecked]]"
+      on-change="toggleChanged"></paper-toggle-button>
+  </template>
+</dom-module>

src/components/entity/ha-entity-toggle.js

@@ -0,0 +1,63 @@
+import { serviceActions } from '../../util/home-assistant-js-instance';
+
+import Polymer from '../../polymer';
+
+export default new Polymer({
+  is: 'ha-entity-toggle',
+
+  properties: {
+    stateObj: {
+      type: Object,
+      observer: 'stateObjChanged',
+    },
+
+    toggleChecked: {
+      type: Boolean,
+      value: false,
+    },
+  },
+
+  ready() {
+    this.forceStateChange();
+  },
+
+  toggleChanged(ev) {
+    const newVal = ev.target.checked;
+
+    if (newVal && this.stateObj.state === 'off') {
+      this.turn_on();
+    } else if (!newVal && this.stateObj.state !== 'off') {
+      this.turn_off();
+    }
+  },
+
+  stateObjChanged(newVal) {
+    if (newVal) {
+      this.updateToggle(newVal);
+    }
+  },
+
+  updateToggle(stateObj) {
+    this.toggleChecked = stateObj && stateObj.state !== 'off';
+  },
+
+  forceStateChange() {
+    this.updateToggle(this.stateObj);
+  },
+
+  turn_on() {
+    // We call updateToggle after a successful call to re-sync the toggle
+    // with the state. It will be out of sync if our service call did not
+    // result in the entity to be turned on. Since the state is not changing,
+    // the resync is not called automatic.
+    serviceActions.callTurnOn(this.stateObj.entityId).then(() => this.forceStateChange());
+  },
+
+  turn_off() {
+    // We call updateToggle after a successful call to re-sync the toggle
+    // with the state. It will be out of sync if our service call did not
+    // result in the entity to be turned on. Since the state is not changing,
+    // the resync is not called automatic.
+    serviceActions.callTurnOff(this.stateObj.entityId).then(() => this.forceStateChange());
+  },
+});

src/components/ha-zone-cards.html

@@ -57,6 +57,7 @@
                 <div class='zone-card'>
                   <ha-domain-card domain='[[domain]]'
                     states='[[computeStatesOfCard(cards, domain)]]'
+                    group-entity='[[computeGroupEntityOfCard(cards, domain)]]'
                   ></ha-domain-card>
                 </div>
               </template>

src/components/ha-zone-cards.js

@@ -78,12 +78,12 @@ export default new Polymer({
       increaseIndex();
     }
 
-    function pushCard(name, entities) {
+    function pushCard(name, entities, groupEntity = false) {
       if (entities.length === 0) {
         return;
       }
       cards._columns[increaseIndex()].push(name);
-      cards[name] = entities;
+      cards[name] = {entities, groupEntity};
     }
 
     byDomain.keySeq().sortBy(domain => getPriority(domain))
@@ -104,7 +104,7 @@ export default new Polymer({
             .forEach(groupState => {
               const entities = util.expandGroup(groupState, states);
               entities.forEach(entity => hasGroup[entity.entityId] = true);
-              pushCard(groupState.entityDisplay, entities.toArray());
+              pushCard(groupState.entityDisplay, entities.toArray(), groupState);
             }
           );
         } else {
@@ -127,7 +127,11 @@ export default new Polymer({
     return states.size > 0 && !__DEMO__ && !cards._demo;
   },
 
+  computeGroupEntityOfCard(cards, card) {
+    return cards[card].groupEntity;
+  },
+
   computeStatesOfCard(cards, card) {
-    return cards[card];
+    return cards[card].entities;
   },
 });

src/state-summary/state-card-toggle.html

@@ -2,20 +2,18 @@
 <link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">
 
 <link rel="import" href="../components/state-info.html">
+<link rel="import" href="../components/entity/ha-entity-toggle.html">
 
 <dom-module id="state-card-toggle">
   <style>
-    paper-toggle-button {
+    ha-entity-toggle {
       margin-left: 16px;
     }
   </style>
   <template>
-    <div class='horizontal justified layout'>
+    <div class='horizontal justified layout center'>
       <state-info state-obj="[[stateObj]]"></state-info>
-
-      <paper-toggle-button class='self-center'
-        checked="[[toggleChecked]]"
-        on-change="toggleChanged"></paper-toggle-button>
+      <ha-entity-toggle state-obj="[[stateObj]]"></ha-entity-toggle>
     </div>
 
   </template>

src/state-summary/state-card-toggle.js

@@ -1,65 +1,8 @@
-import { serviceActions } from '../util/home-assistant-js-instance';
-
 import Polymer from '../polymer';
 
 require('../components/state-info');
+require('../components/entity/ha-entity-toggle');
 
 export default new Polymer({
   is: 'state-card-toggle',
-
-  properties: {
-    stateObj: {
-      type: Object,
-      observer: 'stateObjChanged',
-    },
-
-    toggleChecked: {
-      type: Boolean,
-      value: false,
-    },
-  },
-
-  ready() {
-    this.forceStateChange();
-  },
-
-  toggleChanged(ev) {
-    const newVal = ev.target.checked;
-
-    if (newVal && this.stateObj.state === 'off') {
-      this.turn_on();
-    } else if (!newVal && this.stateObj.state !== 'off') {
-      this.turn_off();
-    }
-  },
-
-  stateObjChanged(newVal) {
-    if (newVal) {
-      this.updateToggle(newVal);
-    }
-  },
-
-  updateToggle(stateObj) {
-    this.toggleChecked = stateObj && stateObj.state !== 'off';
-  },
-
-  forceStateChange() {
-    this.updateToggle(this.stateObj);
-  },
-
-  turn_on() {
-    // We call updateToggle after a successful call to re-sync the toggle
-    // with the state. It will be out of sync if our service call did not
-    // result in the entity to be turned on. Since the state is not changing,
-    // the resync is not called automatic.
-    serviceActions.callTurnOn(this.stateObj.entityId).then(() => this.forceStateChange());
-  },
-
-  turn_off() {
-    // We call updateToggle after a successful call to re-sync the toggle
-    // with the state. It will be out of sync if our service call did not
-    // result in the entity to be turned on. Since the state is not changing,
-    // the resync is not called automatic.
-    serviceActions.callTurnOff(this.stateObj.entityId).then(() => this.forceStateChange());
-  },
 });