refactor view to top level

client/dashboard/layout/layout.js

@@ -2,18 +2,15 @@ import React from 'react';
 import layoutRt from './layout.rt.js';
 import House from './../../models/house';
 
-const VIEWS = [['power', 'Power Savings'], ['energy', 'Energy Production']];
-
 var Layout = React.createClass({
 
   getInitialState: function(){
     var layout = this;
-    layout.view_name = VIEWS[0][1];
     return {
-      views: VIEWS,
       houses: null,
       house: null,
-      view: 'energy',
+      view: 'graph',
+      dataset: 'energy',
       requesting_data: true
     };
   },
@@ -30,13 +27,6 @@ var Layout = React.createClass({
     });
   },
 
-  setView: function(event){
-    var layout = this,
-      view = event.target.value;
-    layout.view_name = event.target.innerText;
-    layout.setState({view: view});
-  },
-
   setHouse: function(event){
     var layout = this,
       house_id = event.target.value,
@@ -44,6 +34,19 @@ var Layout = React.createClass({
     layout.setState({house: house});
   },
 
+  setView: function(event){
+    var layout = this,
+      view = event.target.dataset.value;
+    layout.view_name = event.target.innerText;
+    layout.setState({view: view});
+  },
+
+  setDataset: function(event){
+    var layout = this,
+      dataset = event.target.dataset.value;
+    layout.setState({dataset: dataset});
+  },
+
   render: function() {
     return layoutRt.call(this);
   }

client/dashboard/layout/layout.rt

@@ -3,15 +3,40 @@
 <div id="layout">
   <div class="alert alert-warning" rt-if="this.state.requesting_data">Retrieving houses...</div>
   <h1 rt-if="this.state.house">{this.state.house.name}</h1>
-  <h3 rt-if="this.state.view">{this.view_name}</h3>
 
-  <select class="form-control" onChange="{this.setView}">
-    <option rt-repeat="view in this.state.views" value="{view[0]}" key="view-{view[0]}">{view[1]}</option>
-  </select>
+  <h4>Select household:</h4>
   <select rt-if="this.state.houses" class="form-control" onChange="{this.setHouse}">
     <option rt-repeat="house in this.state.houses" value="{house.data.id}" key="{house.react_key}">{house.data.name}</option>
   </select>
 
-  <Energy rt-if="this.state.house && this.state.view === 'energy'" house="{this.state.house}"></Energy>
-  <Power rt-if="this.state.house && this.state.view === 'power'" house="{this.state.house}"></Power>
+  <h4>Select dataset:</h4>
+  <div class="btn-group" role="group">
+    <button
+      data-value="energy"
+      rt-class="{active: this.state.dataset === 'energy'}"
+      onClick="{this.setDataset}"
+      type="button" class="btn btn-primary">Daily Energy Statistics</button>
+    <button
+      data-value="power"
+      rt-class="{active: this.state.dataset === 'power'}"
+      onClick="{this.setDataset}"
+      type="button" class="btn btn-primary">15-minute Power Statistics</button>
+  </div>
+
+  <h4>View as:</h4>
+  <div class="btn-group" role="group">
+    <button
+      data-value="graph"
+      rt-class="{active: this.state.view === 'graph'}"
+      onClick="{this.setView}"
+      type="button" class="btn btn-primary">Graph</button>
+    <button
+      data-value="table"
+      rt-class="{active: this.state.view === 'table'}"
+      onClick="{this.setView}"
+      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>
 </div>

client/dashboard/layout/layout.rt.js

@@ -2,32 +2,51 @@ import React from 'react';
 import _ from 'lodash';
 import Energy from './../energy/energy';
 import Power from './../power/power';
-function repeatView1(view, viewIndex) {
-    return React.createElement('option', {
-        'value': view[0],
-        'key': 'view-' + view[0]
-    }, view[1]);
-}
-function repeatHouse2(house, houseIndex) {
+function repeatHouse1(house, houseIndex) {
     return React.createElement('option', {
         'value': house.data.id,
         'key': house.react_key
     }, house.data.name);
 }
 export default function () {
-    return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Retrieving houses...') : null, this.state.house ? React.createElement('h1', {}, this.state.house.name) : null, this.state.view ? React.createElement('h3', {}, this.view_name) : null, React.createElement.apply(this, [
-        'select',
-        {
-            'className': 'form-control',
-            'onChange': this.setView
-        },
-        _.map(this.state.views, repeatView1.bind(this))
-    ]), this.state.houses ? React.createElement.apply(this, [
+    return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Retrieving houses...') : null, this.state.house ? React.createElement('h1', {}, this.state.house.name) : null, React.createElement('h4', {}, 'Select household:'), this.state.houses ? React.createElement.apply(this, [
         'select',
         {
             'className': 'form-control',
             'onChange': this.setHouse
         },
-        _.map(this.state.houses, repeatHouse2.bind(this))
-    ]) : null, this.state.house && this.state.view === 'energy' ? React.createElement(Energy, { 'house': this.state.house }) : null);
+        _.map(this.state.houses, repeatHouse1.bind(this))
+    ]) : null, React.createElement('h4', {}, 'Select dataset:'), React.createElement('div', {
+        'className': 'btn-group',
+        'role': 'group'
+    }, React.createElement('button', {
+        'data-value': 'energy',
+        'className': _.keys(_.pick({ active: this.state.dataset === 'energy' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setDataset,
+        'type': 'button'
+    }, 'Daily Energy Statistics'), React.createElement('button', {
+        'data-value': 'power',
+        'className': _.keys(_.pick({ active: this.state.dataset === 'power' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setDataset,
+        'type': 'button'
+    }, '15-minute Power Statistics')), React.createElement('h4', {}, 'View as:'), React.createElement('div', {
+        'className': 'btn-group',
+        'role': 'group'
+    }, React.createElement('button', {
+        'data-value': 'graph',
+        'className': _.keys(_.pick({ active: this.state.view === 'graph' }, _.identity)).join(' ') + ' ' + 'btn btn-primary',
+        'onClick': this.setView,
+        'type': 'button'
+    }, 'Graph'), React.createElement('button', {
+        'data-value': 'table',
+        '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, {
+        'house': this.state.house,
+        'view': this.state.view
+    }) : null, this.state.house && this.state.dataset === 'power' ? React.createElement(Power, {
+        'house': this.state.house,
+        'view': this.state.view
+    }) : null);
 };