polish energy/power data view interactions

client/dashboard/layout/layout.js

@@ -24,16 +24,23 @@ var Layout = React.createClass({
     var layout = this;
     // window.addEventListener('resize', this.handleResize);
     House.ensureHouses().then((houses)=>{
-      layout.setState({houses: houses, house: houses[0], requesting_data: false});
+      layout.setState({
+        houses: houses,
+        house: houses[0],
+        requesting_data: false,
+        month: houses[0].current_month,
+        year: houses[0].current_year
+      });
     });
   },
 
   setHouse: function(event){
     var layout = this,
       house_id = event.target.value,
+      old_house = layout.state.house,
       house = layout.state.houses.find((house)=>{ return house.data.id == house_id });
     layout.setState({house: house}, ()=>{
-      house.closeDb();
+      old_house.closeDb();
     });
   },
 
@@ -50,6 +57,16 @@ var Layout = React.createClass({
     layout.setState({dataset: dataset});
   },
 
+  setYear: function(event){
+    var layout = this,
+      year = event.target.dataset.value,
+      house = layout.state.house;
+    if (year != house.current_year){
+      house.setYear(year);
+      layout.setState({year: year});
+    }
+  },
+
   refreshData: function(){
     var layout = this,
       houses = layout.state.houses,

client/dashboard/layout/layout.rt

@@ -37,6 +37,24 @@
       type="button" class="btn btn-primary">Table</button>
   </div>
 
-  <Energy rt-if="this.state.house && this.state.dataset === 'energy'" house="{this.state.house}" view="{this.state.view}"></Energy>
-  <Power rt-if="this.state.house && this.state.dataset === 'power'" house="{this.state.house}" view="{this.state.view}"></Power>
+  <h4>Select dates:</h4>
+  <div class="btn-group">
+    <button
+      rt-if="this.state.house"
+      rt-repeat="year in this.state.house.years"
+      data-value="{year}"
+      key="data-year-{year}"
+      class="btn-info btn btn-sm"
+      rt-class="{active: year == this.state.house.current_year}"
+      onClick="{this.setYear}">{year}</button>
+  </div><br/>
+
+  <Energy rt-if="this.state.house && this.state.dataset === 'energy'"
+    house="{this.state.house}"
+    view="{this.state.view}"
+    year="{this.state.year}"></Energy>
+  <Power rt-if="this.state.house && this.state.dataset === 'power'"
+    house="{this.state.house}"
+    view="{this.state.view}"
+    year="{this.state.year}"></Power>
 </div>

client/dashboard/layout/layout.rt.js

@@ -8,6 +8,14 @@ function repeatHouse1(house, houseIndex) {
         'key': house.scoped_id
     }, house.data.name);
 }
+function repeatYear2(year, yearIndex) {
+    return React.createElement('button', {
+        'data-value': year,
+        'key': 'data-year-' + year,
+        'className': 'btn-info btn btn-sm' + ' ' + _.keys(_.pick({ active: year == this.state.house.current_year }, _.identity)).join(' '),
+        'onClick': this.setYear
+    }, year);
+}
 export default function () {
     return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Retrieving houses...') : null, React.createElement('h4', {}, 'Select household:'), this.state.houses ? React.createElement.apply(this, [
         'select',
@@ -45,11 +53,17 @@ export default function () {
         'className': _.keys(_.pick({ active: this.state.view === 'table' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
         'onClick': this.setView,
         'type': 'button'
-    }, 'Table')), this.state.house && this.state.dataset === 'energy' ? React.createElement(Energy, {
+    }, 'Table')), React.createElement('h4', {}, 'Select dates:'), React.createElement.apply(this, [
+        'div',
+        { 'className': 'btn-group' },
+        this.state.house ? _.map(this.state.house.years, repeatYear2.bind(this)) : null
+    ]), React.createElement('br', {}), this.state.house && this.state.dataset === 'energy' ? React.createElement(Energy, {
         'house': this.state.house,
-        'view': this.state.view
+        'view': this.state.view,
+        'year': this.state.year
     }) : null, this.state.house && this.state.dataset === 'power' ? React.createElement(Power, {
         'house': this.state.house,
-        'view': this.state.view
+        'view': this.state.view,
+        'year': this.state.year
     }) : null);
 };