50 lines
1.6 KiB
Plaintext
50 lines
1.6 KiB
Plaintext
<div id="energy_view">
|
|
<h2>Household Daily Energy</h2>
|
|
<div class="alert alert-warning" rt-if="this.state.loading_data">
|
|
Retrieving energy data for the {this.props.house.name} household...
|
|
</div>
|
|
<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><br/>
|
|
<div rt-if="this.state.view === 'graph'" class="btn-group" role="group">
|
|
<button
|
|
data-value="consumption"
|
|
rt-class="{active: this.state.graph_attr === 'consumption'}"
|
|
onClick="{this.setGraphAttr}"
|
|
type="button" class="btn btn-primary">Consumption</button>
|
|
<button
|
|
data-value="production"
|
|
rt-class="{active: this.state.graph_attr === 'production'}"
|
|
onClick="{this.setGraphAttr}"
|
|
type="button" class="btn btn-primary">Production</button>
|
|
</div>
|
|
<table class="table" rt-if="this.state.view === 'table'">
|
|
<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.props.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>
|
|
<div id="energy_graph"></div>
|
|
</div>
|