diff options
| author | James Barnett <noreply@jamesbarnett.xyz> | 2018-03-31 21:28:45 +0100 |
|---|---|---|
| committer | James Barnett <noreply@jamesbarnett.xyz> | 2018-03-31 21:28:45 +0100 |
| commit | fe70d31cea4869c7f8214dbc1d00fb917816e9a8 (patch) | |
| tree | da7e7acc4de6b350de20babc0616678b30b60a19 /views | |
| parent | 5531f72248d0372000fe09e031e5a70fb11dafe7 (diff) | |
| download | tplink-energy-monitor-fe70d31cea4869c7f8214dbc1d00fb917816e9a8.tar.xz tplink-energy-monitor-fe70d31cea4869c7f8214dbc1d00fb917816e9a8.zip | |
Add plug state and uptime. Placeholder tiles for averages
Diffstat (limited to 'views')
| -rw-r--r-- | views/index.hbs | 99 |
1 files changed, 94 insertions, 5 deletions
diff --git a/views/index.hbs b/views/index.hbs index 3a8233f..3f023e6 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -35,11 +35,7 @@ <div class="row"> <div class="col-sm-8"> <h1> - <i class="fa fa-plug"></i> {{device.alias}} {{#device.relayState}} - <span class="label label-success">ON</span> - {{/device.relayState}} {{^device.relayState}} - <span class="label label-danger">OFF</span> - {{/device.relayState}} + <i class="fa fa-plug"></i> {{device.alias}} </h1> </div> <div class="col-sm-4"> @@ -103,6 +99,98 @@ </div> + + + <div class="row"> + + <div class="col-md-2 col-sm-2 col-xs-12"> + <div class="x_panel small tile"> + <div class="x_title"> + <h2> + <strong>Plug state</strong> + </h2> + <div class="clearfix"></div> + </div> + <div class="x_content small"> + <h1> + <span id="power-state">-</span> + </h1> + </div> + </div> + </div> + + <div class="col-md-2 col-sm-2 col-xs-12"> + <div class="x_panel small tile"> + <div class="x_title"> + <h2> + <strong>Uptime</strong> + </h2> + <div class="clearfix"></div> + </div> + <div class="x_content small"> + <h1 id="uptime">-</h1> + </div> + </div> + </div> + + <div class="col-md-2 col-sm-2 col-xs-12"> + <div class="x_panel small tile"> + <div class="x_title"> + <h2> + <strong>Total today</strong> + </h2> + <div class="clearfix"></div> + </div> + <div class="x_content small"> + <h1>- <small>kWH</small></h1> + </div> + </div> + </div> + + <div class="col-md-2 col-sm-2 col-xs-12"> + <div class="x_panel small tile"> + <div class="x_title"> + <h2> + <strong>Total this month</strong> + </h2> + <div class="clearfix"></div> + </div> + <div class="x_content small"> + <h1>- <small>kWH</small></h1> + </div> + </div> + </div> + + <div class="col-md-2 col-sm-2 col-xs-12"> + <div class="x_panel small tile"> + <div class="x_title"> + <h2> + <strong>Daily avg</strong> + </h2> + <div class="clearfix"></div> + </div> + <div class="x_content small"> + <h1>- <small>kWH</small></h1> + </div> + </div> + </div> + + <div class="col-md-2 col-sm-2 col-xs-12"> + <div class="x_panel small tile"> + <div class="x_title"> + <h2> + <strong>Monthly avg</strong> + </h2> + <div class="clearfix"></div> + </div> + <div class="x_content small"> + <h1>- <small>kWH</small></h1> + </div> + </div> + </div> + + </div> + <div class="row"> <div class="col-md-8 col-sm-8 col-xs-12"> @@ -159,6 +247,7 @@ <script src="https://bernii.github.io/gauge.js/dist/gauge.min.js"></script> <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-duration-format/2.2.2/moment-duration-format.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.4.0/dist/chartjs-plugin-streaming.min.js"></script> |