diff options
| -rw-r--r-- | app.js | 2 | ||||
| -rw-r--r-- | public/javascripts/dash.js | 41 | ||||
| -rw-r--r-- | public/stylesheets/style.css | 13 | ||||
| -rw-r--r-- | routes/index.js | 1 | ||||
| -rw-r--r-- | routes/power-state.js | 23 | ||||
| -rw-r--r-- | views/index.hbs | 99 |
6 files changed, 166 insertions, 13 deletions
@@ -6,6 +6,7 @@ var logger = require('morgan'); var indexRouter = require('./routes/index'); var energyUsageRouter = require('./routes/energy-usage'); +var powerStateRouter = require('./routes/power-state'); var app = express(); @@ -21,6 +22,7 @@ app.use(express.static(path.join(__dirname, 'public'))); app.use('/', indexRouter); app.use('/energy-usage', energyUsageRouter); +app.use('/power-state', powerStateRouter); // catch 404 and forward to error handler app.use(function(req, res, next) { diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js index c8710db..4ac25b5 100644 --- a/public/javascripts/dash.js +++ b/public/javascripts/dash.js @@ -1,5 +1,6 @@ var dash = { - pollRateMs: 1000, + realtimeUsagePollRateMs: 1000, + powerStatePollRateMs: 10000, pollingEnabled: true, realtimeGauge: null, @@ -157,22 +158,22 @@ var dash = { }, // TODO - should probably use websockets - poll: function() { + pollUsage: function() { if(this.pollingEnabled) { $.ajax({ url: "/energy-usage/1/realtime", type: "GET", success: function(data) { - dash.refreshDashboard(data); + dash.refreshRealtimeDisplay(data); }, dataType: "json", - complete: setTimeout(function() {dash.poll()}, dash.pollRateMs), + complete: setTimeout(function() {dash.pollUsage()}, dash.realtimeUsagePollRateMs), timeout: 2000 }); } }, - refreshDashboard: function(realtime) { + refreshRealtimeDisplay: function(realtime) { var power = Math.round(realtime.power); var current = realtime.current.toFixed(2); @@ -196,7 +197,9 @@ var dash = { frameRate: 30, onRefresh: dash.realtimeTrendChartOnRefresh }; - this.poll(); + + this.pollUsage(); + this.pollPowerStatus(); }, stopPolling: function() { @@ -256,6 +259,32 @@ var dash = { dash.monthlyUsageChart.update(); }, + pollPowerStatus: function() { + if(this.pollingEnabled) { + $.ajax({ + url: "/power-state/1", + type: "GET", + success: function(data) { + dash.refreshPowerState(data); + }, + dataType: "json", + complete: setTimeout(function() {dash.pollPowerStatus()}, dash.powerStatePollRateMs), + timeout: 2000 + }); + } + }, + + refreshPowerState: function(powerState) { + if(powerState.isOn) { + $("#power-state").text("ON").attr("class", "label label-success"); + } + else { + $("#power-state").text("OFF").attr("class", "label label-danger"); + } + + $("#uptime").text(moment.duration(powerState.uptime, "seconds").format("d [d] h [h] m [m]")); + }, + }; diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 62b7873..919696c 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -8,4 +8,15 @@ footer ul { .x_panel { height: 350px; -}
\ No newline at end of file +} + +.x_panel.small { + height: unset; +} + +.x_content.small { + display: flex; + align-items: center; + justify-content: center; + margin-top: 0; +} diff --git a/routes/index.js b/routes/index.js index 1dba277..4909ff8 100644 --- a/routes/index.js +++ b/routes/index.js @@ -12,5 +12,4 @@ router.get('/', function(req, res, next) { }); - module.exports = router; diff --git a/routes/power-state.js b/routes/power-state.js new file mode 100644 index 0000000..6333863 --- /dev/null +++ b/routes/power-state.js @@ -0,0 +1,23 @@ +const express = require('express'); +const router = express.Router(); + +const deviceManager = require('../services/device-manager'); +const moment = require('moment'); + +router.get('/:deviceId', function(req, res, next) { + + let deviceId = req.params.deviceId; + + deviceManager.getDevice(deviceId).getSysInfo().then(response => { + + let powerState = { + isOn: (response.relay_state === 1), + uptime: response.on_time + }; + + res.json(powerState); + }); + +}); + +module.exports = router;
\ No newline at end of file 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> |