From fe70d31cea4869c7f8214dbc1d00fb917816e9a8 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sat, 31 Mar 2018 21:28:45 +0100 Subject: Add plug state and uptime. Placeholder tiles for averages --- app.js | 2 + public/javascripts/dash.js | 41 +++++++++++++++--- public/stylesheets/style.css | 13 +++++- routes/index.js | 1 - routes/power-state.js | 23 ++++++++++ views/index.hbs | 99 +++++++++++++++++++++++++++++++++++++++++--- 6 files changed, 166 insertions(+), 13 deletions(-) create mode 100644 routes/power-state.js diff --git a/app.js b/app.js index c42b3bc..5512f07 100644 --- a/app.js +++ b/app.js @@ -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 @@

- {{device.alias}} {{#device.relayState}} - ON - {{/device.relayState}} {{^device.relayState}} - OFF - {{/device.relayState}} + {{device.alias}}

@@ -103,6 +99,98 @@
+ + +
+ +
+
+
+

+ Plug state +

+
+
+
+

+ - +

+
+
+
+ +
+
+
+

+ Uptime +

+
+
+
+

-

+
+
+
+ +
+
+
+

+ Total today +

+
+
+
+

- kWH

+
+
+
+ +
+
+
+

+ Total this month +

+
+
+
+

- kWH

+
+
+
+ +
+
+
+

+ Daily avg +

+
+
+
+

- kWH

+
+
+
+ +
+
+
+

+ Monthly avg +

+
+
+
+

- kWH

+
+
+
+ +
+
@@ -159,6 +247,7 @@ + -- cgit v1.2.3