Add plug state and uptime. Placeholder tiles for averages

6 files changed, 166 insertions, 13 deletions

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