render daily energy graphs

This commit is contained in:
Eric Hulburd
2016-02-13 16:49:32 -06:00
parent b13c33d83c
commit 6713e756c4
19 changed files with 367 additions and 191 deletions

View File

@@ -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>