All custom groups in 1 section instead of each their own

homeassistant/components/demo.py

@@ -141,7 +141,7 @@ def setup(hass, config):
                     })
 
     # Setup chromecast
-    hass.states.set("chromecast.Living_Rm", "Netflix",
+    hass.states.set("chromecast.Living_Rm", "Plex",
                     {'friendly_name': 'Living Room',
                      ATTR_ENTITY_PICTURE:
                      'http://graph.facebook.com/KillBillMovie/picture'})

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

@@ -131,6 +131,10 @@
       return found.length > 0;
     },
 
+    getCustomGroups: function() {
+      return this.states.filter(function(state) { return state.isCustomGroup;});
+    },
+
     _laterFetchStates: function() {
       if(this.stateUpdateTimeout) {
         clearTimeout(this.stateUpdateTimeout);

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

@@ -99,12 +99,7 @@
                         selected="0" on-core-select="{{tabClicked}}">
             
               <paper-tab>ALL</paper-tab>
-
-              <template repeat="{{group in customGroups}}">
-                <paper-tab data-entity="{{group.entity_id}}">
-                  {{group.entityDisplay}}
-                </paper-tab>
-              </template>
+              <paper-tab data-filter='customgroup'>GROUPS</paper-tab>
                 
             </paper-tabs>
         </div>
@@ -112,7 +107,7 @@
 
       <state-cards
         api="{{api}}"
-        filter="{{selectedTab}}"
+        filter="{{selectedFilter}}"
         class="content"></state-cards>
 
     </core-header-panel>
@@ -120,17 +115,21 @@
   </template>
   <script>
   Polymer({
-    selectedTab: null,
+    selectedFilter: null,
+    hasCustomGroups: false,
 
-    computed: {
-      customGroups: "getCustomGroups(api.states)",
-      hasCustomGroups: "customGroups.length > 0"
+    observe: {
+      'api.states': 'updateHasCustomGroup'
     },
 
+    // computed: {
+    //   hasCustomGroups: "api.getCustomGroups().length > 0"
+    // },
+
     tabClicked: function(ev) {
       if(ev.detail.isSelected) {
         // will be null for ALL tab
-        this.selectedTab = ev.detail.item.getAttribute('data-entity');
+        this.selectedFilter = ev.detail.item.getAttribute('data-filter');
       }
     },
 
@@ -154,9 +153,8 @@
       this.api.logOut();
     },
 
-    getCustomGroups: function(states) {
-      return states ?
-        states.filter(function(state) { return state.isCustomGroup;}) : [];
+    updateHasCustomGroup: function() {
+      this.hasCustomGroups = this.api.getCustomGroups().length > 0;
     }
 
   });

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

@@ -3,7 +3,7 @@
 <polymer-element name="more-info-default" attributes="stateObj" noscript>
   <template>
     <div>
-      No further options here yet..
+      The card for '{{stateObj.domain}}' is not there yet..
     </div>
   </template>
 </polymer-element>

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

@@ -37,7 +37,7 @@
 
     <div horizontal layout wrap>
 
-      <template repeat="{{state in getStates(api.states, filter)}}">
+      <template repeat="{{states as state}}">
         <state-card class="state-card" stateObj={{state}} api={{api}}></state-card>
       </template>
 
@@ -46,27 +46,20 @@
   <script>
   Polymer({
     filter: null,
+    states: [],
 
-    getStates: function(states, filter) {
-      if(!states) {
-        return [];
-      }
+    observe: {
+      'api.states': 'filterChanged'
+    },
 
-      if(!filter) {
+    filterChanged: function() {
+      if(this.filter === 'customgroup') {
+        this.states = this.api.getCustomGroups();
+      } else {
         // if no filter, return all non-group states
-        return states.filter(function(state) {
+        this.states = this.api.states.filter(function(state) {
           return state.domain != 'group';
         });
-      } else {
-        // we have a filter, return the parent filter and its children
-        var filter_state = this.api.getState(this.filter);
-
-        var map_states = function(entity_id) {
-          return this.api.getState(entity_id);
-        }.bind(this);
-
-        return [filter_state].concat(
-          filter_state.attributes.entity_id.map(map_states));
       }
     },