Add support for sections

package.json

@@ -20,7 +20,7 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "MIT",
   "dependencies": {
-    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#a6ba8f88f5f0cfc09a4472fbda8d08e752358cee",
+    "home-assistant-js": "git+https://github.com/balloob/home-assistant-js.git#25db573e8534c41f21d0a25392cf4c2c47eec646",
     "lodash": "^3.10.0",
     "moment": "^2.11.1"
   },

src/components/ha-zone-cards.js

@@ -50,11 +50,11 @@ export default new Polymer({
 
     cards: {
       type: Object,
-      computed: 'computeDomains(columns, states, showIntroduction)',
+      computed: 'computeCards(columns, states, showIntroduction)',
     },
   },
 
-  computeDomains(columns, states, showIntroduction) {
+  computeCards(columns, states, showIntroduction) {
     const byDomain = states.groupBy(entity => entity.domain);
     const hasGroup = {};
 

src/layouts/partial-zone.html

@@ -1,6 +1,8 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="../../bower_components/paper-header-panel/paper-header-panel.html">
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">
 
 <link rel="import" href="../components/ha-zone-cards.html">
 
@@ -13,13 +15,39 @@
       -webkit-user-select: none;
       -moz-user-select: none;
     }
+
+    paper-tab {
+      text-transform: uppercase;
+    }
   </style>
 
   <template>
     <paper-header-panel mode="waterfall">
-      <paper-toolbar>
+      <paper-toolbar class='medium'>
         <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
-        <div class='title'>[[locationName]]</div>
+
+        <template is='dom-if' if='[[!hasSections]]'>
+          <div class='title'>[[locationName]]</div>
+        </template>
+
+        <template is='dom-if' if='[[hasSections]]'>
+          <div class='flex'>
+            <paper-tabs selected='[[currentSection]]' attr-for-selected='data-entity'
+              on-iron-select='sectionSelected' scrollable='true'>
+                <paper-tab data-entity=''>[[locationName]]</paper-tab>
+                <template is='dom-repeat' items='[[sections]]'>
+                  <paper-tab data-entity$='[[item.entityId]]'>
+                    <template is='dom-if' if='[[item.attributes.icon]]'>
+                      <iron-icon icon='[[item.attributes.icon]]'></iron-icon>
+                    </template>
+                    <template is='dom-if' if='[[!item.attributes.icon]]'>
+                      [[item.entityDisplay]]
+                    </template>
+                  </paper-tab>
+                </template>
+            </paper-tabs>
+          </div>
+        </template>
 
         <paper-icon-button
           icon="mdi:refresh"
@@ -33,7 +61,7 @@
 
       <div class='fit'>
         <ha-zone-cards
-          show-introduction='[[computeShowIntroduction(introductionLoaded, states)]]'
+          show-introduction='[[computeShowIntroduction(currentSection, introductionLoaded, states)]]'
           states='[[states]]' columns='[[columns]]'></ha-zone-cards>
       </div>
     </paper-header-panel>

src/layouts/partial-zone.js

@@ -8,7 +8,8 @@ require('../components/ha-zone-cards');
 
 const {
   configGetters,
-  entityGetters,
+  sectionActions,
+  sectionGetters,
   voiceGetters,
   streamGetters,
   syncGetters,
@@ -62,9 +63,32 @@ export default new Polymer({
       observer: 'windowChange',
     },
 
+    currentSection: {
+      type: String,
+      bindNuclear: [
+        sectionGetters.currentSection,
+        section => section || '',
+      ],
+    },
+
+    sections: {
+      type: Array,
+      bindNuclear: [
+        sectionGetters.sections,
+        sections => sections.valueSeq()
+                    .sortBy(section => section.attributes.order)
+                    .toArray(),
+      ],
+    },
+
+    hasSections: {
+      type: Boolean,
+      computed: 'computeHasSections(sections)',
+    },
+
     states: {
       type: Object,
-      bindNuclear: entityGetters.visibleEntityMap,
+      bindNuclear: sectionGetters.currentSectionEntities,
     },
 
     columns: {
@@ -103,29 +127,30 @@ export default new Polymer({
     voiceActions.listen();
   },
 
-  computeDomains(states) {
-    return states.keySeq().toArray();
-  },
-
   computeMenuButtonClass(narrow, showMenu) {
     return !narrow && showMenu ? 'invisible' : '';
   },
 
-  computeStatesOfDomain(states, domain) {
-    return states.get(domain).toArray();
-  },
-
   computeRefreshButtonClass(isFetching) {
     if (isFetching) {
       return 'ha-spin';
     }
   },
 
-  computeShowIntroduction(introductionLoaded, states) {
-    return introductionLoaded || states.size === 0;
+  computeShowIntroduction(currentSection, introductionLoaded, states) {
+    return currentSection === '' && (introductionLoaded || states.size === 0);
+  },
+
+  computeHasSections(sections) {
+    return sections.length > 0;
   },
 
   toggleMenu() {
     this.fire('open-menu');
   },
+
+  sectionSelected(ev) {
+    const section = ev.detail.item.getAttribute('data-entity') || null;
+    this.async(() => sectionActions.selectSection(section), 0);
+  },
 });