render daily energy graphs

client/dashboard/layout/layout.js

@@ -13,7 +13,7 @@ var Layout = React.createClass({
       views: VIEWS,
       houses: null,
       house: null,
-      view: 'power',
+      view: 'energy',
       requesting_data: true
     };
   },
@@ -26,8 +26,7 @@ var Layout = React.createClass({
     var layout = this;
     // window.addEventListener('resize', this.handleResize);
     House.ensureHouses().then((houses)=>{
-      layout.setState({houses: houses, house: houses[0]});
-      layout.ensureHouseViewData();
+      layout.setState({houses: houses, house: houses[0], requesting_data: false});
     });
   },
 
@@ -35,37 +34,14 @@ var Layout = React.createClass({
     var layout = this,
       view = event.target.value;
     layout.view_name = event.target.innerText;
-    layout.setState({view: view}, function(){
-      layout.ensureHouseViewData();
-    });
+    layout.setState({view: view});
   },
 
   setHouse: function(event){
     var layout = this,
       house_id = event.target.value,
       house = layout.state.houses.find((house)=>{ return house.data.id == house_id });
-    layout.setState({house: house}, function(){
-      layout.ensureHouseViewData();
-    });
-  },
-
-  ensureHouseViewData: function(){
-    var layout = this,
-      house = layout.state.house,
-      view = layout.state.view,
-      request;
-    layout.setState({requesting_data: true}, ()=>{
-      if (view === 'power'){
-        request = house.ensurePowerData();
-      } else {
-        request = house.ensureEnergyData();
-      }
-      request.then(()=>{
-        layout.setState({requesting_data: false}, ()=>{
-          console.log(layout.state.requesting_data);
-        });
-      });
-    });
+    layout.setState({house: house});
   },
 
   render: function() {

client/dashboard/layout/layout.rt

@@ -1,54 +1,17 @@
+<rt-require dependency="./../energy/energy" as="Energy"/>
+<rt-require dependency="./../power/power" as="Power"/>
 <div id="layout">
-  <div class="alert alert-warning" rt-if="this.state.requesting_data">Loading data...</div>
+  <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>
 
-  <div>
-    <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>
-  </div>
-  <div rt-if="this.state.houses">
-    <select 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>
-  </div>
+  <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>
+  <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>
 
-  <table class="table" rt-if="this.state.view === 'energy' && this.state.house">
-    <thead>
-      <tr>
-        <th></th>
-        <th>Day</th>
-        <th>Consumption (kWh)</th>
-        <th>Production (kWh)</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr rt-repeat="energy_datum in this.state.house.energy_data" key="{energy_datum.react_key}">
-        <td></td>
-        <td>{energy_datum.day_to_s}</td>
-        <td>{energy_datum.consumption_to_s}</td>
-        <td>{energy_datum.production_to_s}</td>
-      </tr>
-    </tbody>
-  </table>
-
-  <table class="table" rt-if="this.state.view === 'power' && this.state.house">
-    <thead>
-      <tr>
-        <th></th>
-        <th>Time</th>
-        <th>Consumption (W)</th>
-        <th>Production (W)</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr rt-repeat="power_datum in this.state.house.power_data" key="{power_datum.react_key}">
-        <td></td>
-        <td>{power_datum.time_to_s}</td>
-        <td>{power_datum.consumption_to_s}</td>
-        <td>{power_datum.production_to_s}</td>
-      </tr>
-    </tbody>
-  </table>
+  <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>
 </div>

client/dashboard/layout/layout.rt.js

@@ -1,5 +1,7 @@
 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],
@@ -12,34 +14,20 @@ function repeatHouse2(house, houseIndex) {
         'key': house.react_key
     }, house.data.name);
 }
-function repeatEnergy_datum3(energy_datum, energy_datumIndex) {
-    return React.createElement('tr', { 'key': energy_datum.react_key }, React.createElement('td', {}), React.createElement('td', {}, energy_datum.day_to_s), React.createElement('td', {}, energy_datum.consumption_to_s), React.createElement('td', {}, energy_datum.production_to_s));
-}
-function repeatPower_datum4(power_datum, power_datumIndex) {
-    return React.createElement('tr', { 'key': power_datum.react_key }, React.createElement('td', {}), React.createElement('td', {}, power_datum.time_to_s), React.createElement('td', {}, power_datum.consumption_to_s), React.createElement('td', {}, power_datum.production_to_s));
-}
 export default function () {
-    return React.createElement('div', { 'id': 'layout' }, this.state.requesting_data ? React.createElement('div', { 'className': 'alert alert-warning' }, 'Loading data...') : null, this.state.house ? React.createElement('h1', {}, this.state.house.name) : null, this.state.view ? React.createElement('h3', {}, this.view_name) : null, React.createElement('div', {}, 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, 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('div', {}, React.createElement.apply(this, [
+    ]), this.state.houses ? React.createElement.apply(this, [
         'select',
         {
             'className': 'form-control',
             'onChange': this.setHouse
         },
         _.map(this.state.houses, repeatHouse2.bind(this))
-    ])) : null, this.state.view === 'energy' && this.state.house ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Day'), React.createElement('th', {}, 'Consumption (kWh)'), React.createElement('th', {}, 'Production (kWh)'))), React.createElement.apply(this, [
-        'tbody',
-        {},
-        _.map(this.state.house.energy_data, repeatEnergy_datum3.bind(this))
-    ])) : null, this.state.view === 'power' && this.state.house ? React.createElement('table', { 'className': 'table' }, React.createElement('thead', {}, React.createElement('tr', {}, React.createElement('th', {}), React.createElement('th', {}, 'Time'), React.createElement('th', {}, 'Consumption (W)'), React.createElement('th', {}, 'Production (W)'))), React.createElement.apply(this, [
-        'tbody',
-        {},
-        _.map(this.state.house.power_data, repeatPower_datum4.bind(this))
-    ])) : null);
+    ]) : null, this.state.house && this.state.view === 'energy' ? React.createElement(Energy, { 'house': this.state.house }) : null);
 };