Initial functionality. Static realtime usage for a single device

3 files changed, 170 insertions, 0 deletions

diff --git a/views/error.hbs b/views/error.hbs
new file mode 100644
index 0000000..0659765
--- /dev/null
+++ b/views/error.hbs
@@ -0,0 +1,3 @@
+<h1>{{message}}</h1>
+<h2>{{error.status}}</h2>
+<pre>{{error.stack}}</pre>
diff --git a/views/index.hbs b/views/index.hbs
new file mode 100644
index 0000000..df75747
--- /dev/null
+++ b/views/index.hbs
@@ -0,0 +1,143 @@
+  <div class="container body">
+    <div class="main_container">
+      <div class="col-md-3 left_col">
+        <div class="left_col scroll-view">
+          <div class="navbar nav_title" style="border: 0;">
+            <a href="index.html" class="site_title">
+              <span>Energy Monitor</span>
+            </a>
+          </div>
+
+          <div class="clearfix"></div>
+
+          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
+            <div class="menu_section">
+              <h3>Devices</h3>
+              <ul class="nav side-menu">
+                {{#each devices}}
+                <li class="active">
+                  <a title="Device Id: {{this.deviceId}}">
+                    <i class="fa fa-plug"></i>
+                    {{this.alias}}
+                  </a>
+                </li>
+                {{/each}}
+              </ul>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      <div class="right_col" role="main">
+        <div class="page-header">
+          <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}}
+          </h1>
+        </div>
+
+        <div class="row">
+
+
+          <div class="col-md-5 col-sm-5 col-xs-12">
+            <div class="x_panel tile">
+              <div class="x_title">
+                <h2>
+                  <strong>Realtime Usage</strong>
+                </h2>
+                <div class="clearfix"></div>
+              </div>
+              <div class="x_content">
+                <div class="row">
+                  <h1 class="text-center">
+                    <strong>{{realtimeUsage.power}} kW</strong>
+                  </h1>
+                </div>
+
+                <div class="row text-center">
+                  <div>
+                    <canvas id="realtime-gauge"></canvas>
+                  </div>
+                </div>
+
+
+                <div class="row">
+                  <div class="col-md-6 col-xs-6 text-center">
+                    <h1>
+                      <strong>{{realtimeUsage.current}} A</strong>
+                    </h1>
+                  </div>
+                  <div class="col-md-6 col-xs-6 text-center">
+                    <h1>
+                      <strong>{{realtimeUsage.voltage}} V</strong>
+                    </h1>
+                  </div>
+                </div>
+
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+  <footer>
+    <ul class="list-inline">
+      <li>
+        <strong>Device name:</strong> {{device.name}}</li>
+      <li>
+        <strong>Model:</strong> {{device.model}}</li>
+      <li>
+        <strong>Sw ver:</strong> {{device.softwareVersion}}</li>
+      <li>
+        <strong>Hw ver:</strong> {{device.hardwareVersion}}</li>
+    </ul>
+  </footer>
+  </div>
+  </div>
+
+  <script src="https://getbootstrap.com/assets/js/vendor/popper.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
+  <script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
+
+  <script>
+
+    $(document).ready(function () {
+      var opts = {
+        angle: 0,
+        lineWidth: 0.2,
+        pointer: {
+          length: 0.6,
+          strokeWidth: 0.035,
+          color: '#000000'
+        },
+        limitMax: true,
+        limitMin: true,
+        generateGradient: true,
+        highDpiSupport: true, 
+        staticLabels: {
+          font: "12px sans-serif",
+          labels: [500, 1500, 3000]
+        },
+        staticZones: [
+          { strokeStyle: "#30B32D", min: 0, max: 500 },
+          { strokeStyle: "#FFDD00", min: 500, max: 1500 },
+          { strokeStyle: "#F03E3E", min: 1500, max: 3000 }
+        ]
+      };
+      var target = document.getElementById('realtime-gauge');
+
+      var gauge = new Gauge(target).setOptions(opts);
+      gauge.maxValue = 3000;
+      gauge.setMinValue(0);
+      gauge.animationSpeed = 1;
+      gauge.set({{ realtimeUsage.power }});
+    })
+  </script>
\ No newline at end of file
diff --git a/views/layout.hbs b/views/layout.hbs
new file mode 100644
index 0000000..2f78105
--- /dev/null
+++ b/views/layout.hbs
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <title>{{device.alias}} - Energy Monitor</title>
+
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
+  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' />
+  <link href='https://cdnjs.cloudflare.com/ajax/libs/gentelella/1.4.0/css/custom.min.css' rel='stylesheet' />
+  <link href='/stylesheets/style.css' rel='stylesheet' />
+
+
+</head>
+
+<body class="nav-md">
+  {{{body}}}
+</body>
+
+</html>
\ No newline at end of file