Add more-info card for group domain

homeassistant/components/http/www_static/polymer/cards/state-card-content.html

@@ -5,6 +5,12 @@
 
 <polymer-element name="state-card-content" attributes="api stateObj" noscript>
 <template>
+  <style>
+    :host {
+      display: block;
+    }
+  </style>
+
   <template id="state-card-display">
     <state-card-display
       stateObj="{{stateObj}}">

homeassistant/components/http/www_static/polymer/dialogs/state-card-dialog.html

@@ -14,12 +14,14 @@
     <core-style ref='ha-dialog'></core-style>
 
     <style>
-
+    .title-card {
+      margin-bottom: 24px;
+    }
     </style>
 
     <div>
-      <state-card-content stateObj="{{stateObj}}" api="{{api}}"></state-card-content>
-      <br />
+      <state-card-content stateObj="{{stateObj}}" api="{{api}}" class='title-card'>
+      </state-card-content>
       <more-info-content stateObj="{{stateObj}}" api="{{api}}"></more-info-content>
     </div>
 

homeassistant/components/http/www_static/polymer/home-assistant-api.html

@@ -77,8 +77,8 @@
     // how to render the more info of this state
     moreInfoType: {
       get: function() {
-        if(this.domain === 'light') {
-          return 'light';
+        if(this.domain === 'light' || this.domain === 'group') {
+          return this.domain;
         } else {
           return 'default';
         }
@@ -110,6 +110,19 @@
       return found.length > 0 ? found[0] : null;
     },
 
+    getStates: function(entityIds) {
+      var states = [];
+      var state;
+      for(var i = 0; i < entityIds.length; i++) {
+        state = this.getState(entityIds[i]);
+
+        if(state !== null) {
+          states.push(state);
+        }
+      }
+      return states;
+    },
+
     hasService: function(domain, service) {
       var found = this.services.filter(function(serv) {
         return serv.domain == domain && serv.services.indexOf(service) !== -1;

homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html

@@ -2,9 +2,16 @@
 
 <link rel="import" href="more-info-default.html">
 <link rel="import" href="more-info-light.html">
+<link rel="import" href="more-info-group.html">
 
 <polymer-element name="more-info-content" attributes="api stateObj" noscript>
 <template>
+  <style>
+    :host {
+      display: block;
+    }
+  </style>
+
   <template id="more-info-light">
     <more-info-light
       api="{{api}}"
@@ -12,6 +19,13 @@
     </more-info-light>
   </template>
 
+  <template id="more-info-group">
+    <more-info-group
+      api="{{api}}"
+      stateObj="{{stateObj}}">
+    </more-info-group>
+  </template>
+
   <template id="more-info-default">
     <more-info-default stateObj="{{stateObj}}"></more-info-default>
   </template>

homeassistant/components/http/www_static/polymer/more-infos/more-info-group.html

@@ -0,0 +1,33 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="../cards/state-card-content.html">
+
+<polymer-element name="more-info-group" attributes="stateObj api">
+<template>
+  <style>
+    .child-card {
+      margin-bottom: 8px;
+    }
+
+    .child-card:last-child {
+      margin-bottom: 0;
+    }
+  </style>
+
+  <template repeat="{{states as state}}">
+    <state-card-content stateObj="{{state}}" api="{{api}}" class='child-card'>
+    </state-card-content>
+  </template>
+</template>
+<script>
+Polymer({
+  observe: {
+    'stateObj.attributes.entity_id': 'updateStates'
+  },
+
+  updateStates: function() {
+    this.states = this.api.getStates(this.stateObj.attributes.entity_id);
+  }
+});
+</script>
+</polymer-element>