Merge navigation and panel modules in HA-JS

This commit is contained in:
Paulus Schoutsen 2016-07-31 14:19:27 -07:00
parent 882ebfedd1
commit 56650a25df
8 changed files with 23 additions and 35 deletions

View File

@ -18,7 +18,6 @@
"font-roboto-local": "^1.0.1", "font-roboto-local": "^1.0.1",
"iron-flex-layout": "^1.3.1", "iron-flex-layout": "^1.3.1",
"paper-scroll-header-panel": "1.0.16", "paper-scroll-header-panel": "1.0.16",
"app-elements": "^0.9.0",
"app-layout": "^0.10.1" "app-layout": "^0.10.1"
}, },
"_comment": "added to get min version for iron-flex-layout, paper-scroll-header-panel" "_comment": "added to get min version for iron-flex-layout, paper-scroll-header-panel"

@ -1 +1 @@
Subproject commit 11a648c2931f4f381af439b1c52d9ff028bd0626 Subproject commit adcbd4488dc31dbe422e971822c3036269c7f6b2

View File

@ -147,27 +147,20 @@
updateCards: function (columns, states, showIntroduction, updateCards: function (columns, states, showIntroduction,
panelVisible, viewVisible) { panelVisible, viewVisible) {
/* eslint-disable no-console */
if (!panelVisible || !viewVisible) { if (!panelVisible || !viewVisible) {
console.log('cancelling update cards',
this.getAttribute('data-view') || 'default-view',
panelVisible, viewVisible);
return; return;
} }
console.log('updateCards', this.getAttribute('data-view') || 'default-view',
panelVisible, viewVisible);
this.debounce( this.debounce(
'updateCards', 'updateCards', function () {
function () { this.cards = this.computeCards(columns, states, // Things might have changed since it got scheduled.
showIntroduction); } if (this.panelVisible && this.viewVisible) {
); this.cards = this.computeCards(columns, states, showIntroduction);
}
}.bind(this));
}, },
computeCards: function (columns, states, showIntroduction) { computeCards: function (columns, states, showIntroduction) {
// Things might have changed since it got scheduled.
if (!this.panelVisible || !this.viewVisible) {
return;
}
console.error('computeCards', this.getAttribute('data-view') || 'default-view', states.size, this.viewVisible)
var hass = this.hass; var hass = this.hass;
var byDomain = states.groupBy(function (entity) { return entity.domain; }); var byDomain = states.groupBy(function (entity) { return entity.domain; });
var hasGroup = {}; var hasGroup = {};

View File

@ -175,7 +175,7 @@ Polymer({
selected: { selected: {
type: String, type: String,
bindNuclear: function (hass) { bindNuclear: function (hass) {
return hass.navigationGetters.activePane; return hass.navigationGetters.activePanelName;
}, },
}, },
@ -197,7 +197,7 @@ Polymer({
type: Array, type: Array,
bindNuclear: function (hass) { bindNuclear: function (hass) {
return [ return [
hass.panelGetters.panels, hass.navigationGetters.panels,
function (res) { return res.toJS(); }, function (res) { return res.toJS(); },
]; ];
}, },

View File

@ -29,7 +29,7 @@
main main
attr-for-selected='id' attr-for-selected='id'
fallback-selection='panel-resolver' fallback-selection='panel-resolver'
selected='[[activePane]]' selected='[[activePanel]]'
selected-attribute='panel-visible' selected-attribute='panel-visible'
> >
<partial-cards <partial-cards
@ -68,12 +68,12 @@ Polymer({
value: true, value: true,
}, },
activePane: { activePanel: {
type: String, type: String,
bindNuclear: function (hass) { bindNuclear: function (hass) {
return hass.navigationGetters.activePane; return hass.navigationGetters.activePanelName;
}, },
observer: 'activePaneChanged', observer: 'activePanelChanged',
}, },
showSidebar: { showSidebar: {
@ -105,7 +105,7 @@ Polymer({
} }
}, },
activePaneChanged: function () { activePanelChanged: function () {
if (this.narrow) { if (this.narrow) {
this.$.drawer.closeDrawer(); this.$.drawer.closeDrawer();
} }

View File

@ -1,5 +1,6 @@
<link rel="import" href="../../bower_components/polymer/polymer.html"> <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/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.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="../../bower_components/paper-tabs/paper-tabs.html">
@ -10,6 +11,7 @@
<link rel="import" href="../components/ha-menu-button.html"> <link rel="import" href="../components/ha-menu-button.html">
<link rel="import" href="../components/ha-cards.html"> <link rel="import" href="../components/ha-cards.html">
<link rel="import" href="../util/hass-behavior.html">
<dom-module id="partial-cards"> <dom-module id="partial-cards">
<template> <template>
@ -55,12 +57,12 @@
> >
<paper-tab <paper-tab
data-entity='' data-entity=''
on-tap='handleViewTapped' on-tap='scrollToTop'
>[[locationName]]</paper-tab> >[[locationName]]</paper-tab>
<template is='dom-repeat' items='[[views]]'> <template is='dom-repeat' items='[[views]]'>
<paper-tab <paper-tab
data-entity$='[[item.entityId]]' data-entity$='[[item.entityId]]'
on-tap='handleViewTapped' on-tap='scrollToTop'
> >
<template is='dom-if' if='[[item.attributes.icon]]'> <template is='dom-if' if='[[item.attributes.icon]]'>
<iron-icon icon='[[item.attributes.icon]]'></iron-icon> <iron-icon icon='[[item.attributes.icon]]'></iron-icon>
@ -211,10 +213,8 @@ Polymer({
}, },
created: function () { created: function () {
var sizes = [300, 600, 900, 1200];
var col;
this.handleWindowChange = this.handleWindowChange.bind(this); this.handleWindowChange = this.handleWindowChange.bind(this);
this.mqls = sizes.map(function (width) { this.mqls = [300, 600, 900, 1200].map(function (width) {
var mql = window.matchMedia('(min-width: ' + width + 'px)'); var mql = window.matchMedia('(min-width: ' + width + 'px)');
mql.addListener(this.handleWindowChange); mql.addListener(this.handleWindowChange);
return mql; return mql;
@ -287,16 +287,11 @@ Polymer({
var current = this.currentView || null; var current = this.currentView || null;
if (view !== current) { if (view !== current) {
this.async(function () { this.async(function () {
console.warn('changing view')
this.hass.viewActions.selectView(view); this.hass.viewActions.selectView(view);
}.bind(this), 0); }.bind(this), 0);
} }
}, },
handleViewTapped: function (ev) {
this.scrollToTop();
},
computeRefreshButtonClass: function (isFetching) { computeRefreshButtonClass: function (isFetching) {
return isFetching ? 'ha-spin' : ''; return isFetching ? 'ha-spin' : '';
}, },

View File

@ -77,7 +77,7 @@ Polymer({
panel: { panel: {
type: Object, type: Object,
bindNuclear: function (hass) { bindNuclear: function (hass) {
return hass.panelGetters.activePanel; return hass.navigationGetters.activePanel;
}, },
observer: 'panelChanged', observer: 'panelChanged',
}, },

View File

@ -19,7 +19,8 @@ window.hassBehavior = {
getter = this.properties[key].bindNuclear(hass); getter = this.properties[key].bindNuclear(hass);
if (!getter) { if (!getter) {
throw new Error('Undefined getter specified for key ' + key); throw new Error('Undefined getter specified for key ' + key +
' on ' + this.nodeName);
} }
this[key] = hass.reactor.evaluate(getter); this[key] = hass.reactor.evaluate(getter);