senaduka/old-spike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

render power data in table format

Browse Source
This commit is contained in:
Eric Hulburd
2016-02-10 16:11:56 -06:00
parent b14c266de3
commit 9996dfc54e
26 changed files with 424 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
client/dashboard/layout/layout.js
View File

@@ -1,11 +1,21 @@
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(){
return {view: "????"};
var layout = this;
layout.view_name = VIEWS[0][1];
return {
views: VIEWS,
houses: null,
house: null,
view: 'power',
requesting_data: true
};
},
handleResize: function(e) {
@@ -13,13 +23,49 @@ var Layout = React.createClass({
},
componentDidMount: function() {
window.addEventListener('resize', this.handleResize);
var layout = this;
// window.addEventListener('resize', this.handleResize);
House.ensureHouses().then((houses)=>{
layout.setState({houses: houses, house: houses[0]});
layout.ensureHouseViewData();
});
},
setView: function(event) {
var layout = this;
console.log(event.target.value)
layout.setState({view: event.target.value});
setView: function(event){
var layout = this,
view = event.target.value;
layout.view_name = event.target.innerText;
layout.setState({view: view});
layout.ensureHouseViewData();
},
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(()=>{
console.log('data retrieved')
layout.setState({requesting_data: false}, ()=>{
console.log(layout.state.requesting_data);
});
});
});
},
render: function() {

58
client/dashboard/layout/layout.rt
View File

@@ -1,8 +1,54 @@
<div id="layout">
<h1>{this.state.view}</h1>
<select onChange="{this.setView}">
<option value="savings">Savings</option>
<option value="production">Production</option>
</select>
<div class="alert alert-warning" rt-if="this.state.requesting_data">Loading data...</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>
<table class="table" rt-if="this.state.view === 'energy' && this.state.house">
<thead>
<tr>
<th></th>
<th>Day</th>
<th>Consumption (Wh)</th>
<th>Production (Wh)</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>
</div>

42
client/dashboard/layout/layout.rt.js
View File

@@ -1,5 +1,45 @@
import React from 'react';
import _ from 'lodash';
function repeatView1(view, viewIndex) {
return React.createElement('option', {
'value': view[0],
'key': 'view-' + view[0]
}, view[1]);
}
function repeatHouse2(house, houseIndex) {
return React.createElement('option', {
'value': house.data.id,
'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' }, React.createElement('h1', {}, this.state.view), React.createElement('select', { 'onChange': this.setView }, React.createElement('option', { 'value': 'savings' }, 'Savings'), React.createElement('option', { 'value': 'production' }, 'Production')));
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, [
'select',
{
'className': 'form-control',
'onChange': this.setView
},
_.map(this.state.views, repeatView1.bind(this))
])), this.state.houses ? React.createElement('div', {}, 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 (Wh)'), React.createElement('th', {}, 'Production (Wh)'))), 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);
};