dynamic react router

client/dashboard/house/house.component.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import Templates from 'config/templates';
+import House from './../../models/house';
+import {RouteHelper} from './../routes';
+import EnergyComponent from './../energy/energy.component';
+import PowerComponent from './../power/power.component';
+
+class HouseComponent extends React.Component {
+
+  constructor(props){
+    super(props);
+    this.renders = 0;
+  }
+
+  setParam(event){
+    var house_component = this,
+      house = house_component.context.house,
+      param = event.target.dataset.param,
+      value = event.target.dataset.value,
+      update = {}, route_helper;
+    update[param] = value;
+    route_helper = new RouteHelper(house, house_component.props, update);
+    if (route_helper.routeUpdated()){
+      route_helper.updateHouseState();
+      if (house_component.renders < 10){
+        house_component.context.router.push(route_helper.newRoute());
+        house_component.renders += 1;
+      }
+    }
+  }
+
+  graphSelected(){
+    var house_component = this;
+    return RouteHelper.graphSelected(house_component.props.routes);
+  }
+
+  tableSelected(){
+    var house_component = this;
+    return RouteHelper.tableSelected(house_component.props.routes);
+  }
+
+  energySelected(){
+    var house_component = this;
+    return RouteHelper.energySelected(house_component.props.routes);
+  }
+
+  powerSelected(){
+    var house_component = this;
+    return RouteHelper.powerSelected(house_component.props.routes);
+  }
+
+  render() {
+    var houseRt = Templates.forComponent('house');
+    return houseRt.call(this);
+  }
+
+};
+
+HouseComponent.contextTypes = {
+  house: React.PropTypes.instanceOf(House),
+  router: React.PropTypes.object.isRequired
+};
+
+export default HouseComponent;

client/dashboard/house/house.rt

@@ -0,0 +1,49 @@
+<div id="house">
+  <h4>Select dataset:</h4>
+  <div class="btn-group" role="group">
+    <button
+      data-param="dataset"
+      data-value="energy"
+      rt-class="{active: this.energySelected()}"
+      onClick="{this.setParam.bind(this)}"
+      type="button" class="btn btn-primary">Daily Energy Statistics</button>
+    <button
+      data-param="dataset"
+      data-value="power"
+      rt-class="{active: this.powerSelected()}"
+      onClick="{this.setParam.bind(this)}"
+      type="button" class="btn btn-primary">15-minute Power Statistics</button>
+  </div>
+
+  <h4>View as:</h4>
+  <div class="btn-group" role="group">
+    <button
+      data-param="view"
+      data-value="graph"
+      rt-class="{active: this.graphSelected()}"
+      onClick="{this.setParam.bind(this)}"
+      type="button" class="btn btn-primary">Graph</button>
+    <button
+      data-param="view"
+      data-value="table"
+      rt-class="{active: this.tableSelected()}"
+      onClick="{this.setParam.bind(this)}"
+      type="button" class="btn btn-primary">Table</button>
+  </div>
+
+  <div rt-if="this.context.house">
+    <h4>Select dates:</h4>
+    <div class="btn-group">
+      <button
+        rt-repeat="year in this.context.house.years"
+        data-param="year"
+        data-value="{year}"
+        key="data-year-{year}"
+        class="btn-info btn btn-sm"
+        rt-class="{active: year == this.context.house.state.year}"
+        onClick="{this.setParam.bind(this)}">{year}</button>
+    </div>
+  </div><br/>
+
+  {this.props.children}
+</div>

client/dashboard/house/house.rt.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import _ from 'lodash';
+function repeatYear1(year, yearIndex) {
+    return React.createElement('button', {
+        'data-param': 'year',
+        'data-value': year,
+        'key': 'data-year-' + year,
+        'className': 'btn-info btn btn-sm' + ' ' + _.keys(_.pick({ active: year == this.context.house.state.year }, _.identity)).join(' '),
+        'onClick': this.setParam.bind(this)
+    }, year);
+}
+export default function () {
+    return React.createElement('div', { 'id': 'house' }, React.createElement('h4', {}, 'Select dataset:'), React.createElement('div', {
+        'className': 'btn-group',
+        'role': 'group'
+    }, React.createElement('button', {
+        'data-param': 'dataset',
+        'data-value': 'energy',
+        'className': _.keys(_.pick({ active: this.energySelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setParam.bind(this),
+        'type': 'button'
+    }, 'Daily Energy Statistics'), React.createElement('button', {
+        'data-param': 'dataset',
+        'data-value': 'power',
+        'className': _.keys(_.pick({ active: this.powerSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setParam.bind(this),
+        'type': 'button'
+    }, '15-minute Power Statistics')), React.createElement('h4', {}, 'View as:'), React.createElement('div', {
+        'className': 'btn-group',
+        'role': 'group'
+    }, React.createElement('button', {
+        'data-param': 'view',
+        'data-value': 'graph',
+        'className': _.keys(_.pick({ active: this.graphSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setParam.bind(this),
+        'type': 'button'
+    }, 'Graph'), React.createElement('button', {
+        'data-param': 'view',
+        'data-value': 'table',
+        'className': _.keys(_.pick({ active: this.tableSelected() }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setParam.bind(this),
+        'type': 'button'
+    }, 'Table')), this.context.house ? React.createElement('div', {}, React.createElement('h4', {}, 'Select dates:'), React.createElement.apply(this, [
+        'div',
+        { 'className': 'btn-group' },
+        _.map(this.context.house.years, repeatYear1.bind(this))
+    ])) : null, React.createElement('br', {}), '\n\n  ', this.props.children, '\n');
+};