From 24b4a39fce61dd9bd8ab7757f3bbda0636adc8c9 Mon Sep 17 00:00:00 2001
From: James Barnett <noreply@jamesbarnett.xyz>
Date: Sat, 7 Apr 2018 18:49:48 +0100
Subject: Switch from http polling to data push via websockets

---
 views/index.hbs | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

(limited to 'views/index.hbs')

diff --git a/views/index.hbs b/views/index.hbs
index 7b2806d..ef2a514 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -33,16 +33,9 @@
         
         <div class="page-header">
           <div class="row">
-            <div class="col-sm-8">
-              <h1>
-                <i class="fa fa-plug"></i> {{device.alias}}
-              </h1>
-            </div>
-            <div class="col-sm-4">
-              <h2 class="pull-right">
-              <input id="toggle-polling" class="form-control" type="checkbox" checked data-toggle="toggle" data-on="Auto refresh on" data-off="Auto refresh off" data-onstyle="success" data-offstyle="danger">
-              </h2>
-            </div>
+            <h1>
+              <i class="fa fa-plug"></i> {{device.alias}}
+            </h1>
           </div>
         </div>
 
@@ -243,7 +236,6 @@
   <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="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>
-- 
cgit v1.2.3


From 1301d90e93af799a9054f133847ebf3cbda15f9d Mon Sep 17 00:00:00 2001
From: James Barnett <noreply@jamesbarnett.xyz>
Date: Sat, 7 Apr 2018 21:43:17 +0100
Subject: Add support for switching between multiple plugs

---
 views/index.hbs | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'views/index.hbs')

diff --git a/views/index.hbs b/views/index.hbs
index ef2a514..d0210a7 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -15,8 +15,8 @@
               <h3>Devices</h3>
               <ul class="nav side-menu">
                 {{#each devices}}
-                <li class="active">
-                  <a title="Device Id: {{this.deviceId}}">
+                <li id="{{this.deviceId}}">
+                  <a title="Device Id: {{this.deviceId}}" href="/{{this.deviceId}}">
                     <i class="fa fa-plug"></i>
                     {{this.alias}}
                   </a>
@@ -242,3 +242,8 @@
   <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@1.4.0/dist/chartjs-plugin-streaming.min.js"></script>
 
   <script src="/javascripts/dash.js"></script>
+  <script>
+    $(document).ready(function () {
+      dash.init( '{{device.deviceId}}' );
+    });
+  </script>
-- 
cgit v1.2.3


From 0bbe22dd69bbb149e9fed74c87e7fc75e181483e Mon Sep 17 00:00:00 2001
From: James Barnett <noreply@jamesbarnett.xyz>
Date: Sat, 7 Apr 2018 23:22:58 +0100
Subject: Try to re-establish lost websocket connections

---
 views/index.hbs | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

(limited to 'views/index.hbs')

diff --git a/views/index.hbs b/views/index.hbs
index d0210a7..6178c96 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -33,9 +33,14 @@
         
         <div class="page-header">
           <div class="row">
-            <h1>
-              <i class="fa fa-plug"></i> {{device.alias}}
-            </h1>
+            <div class="col-sm-8">
+              <h1>
+                <i class="fa fa-plug"></i> {{device.alias}}
+              </h1>
+            </div>
+            <div class="col-sm-4">
+              <div id="connection-error" class="alert alert-danger" style="display:none">Connection lost. Attempting to re-establish...</div>
+            </div>
           </div>
         </div>
 
-- 
cgit v1.2.3


From c72ea6660d06ac347feafd6cbb8b3dc3c0f95c43 Mon Sep 17 00:00:00 2001
From: James Barnett <noreply@jamesbarnett.xyz>
Date: Sun, 8 Apr 2018 17:09:55 +0100
Subject: Improve layout on mobile devices and tablets

---
 views/index.hbs | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

(limited to 'views/index.hbs')

diff --git a/views/index.hbs b/views/index.hbs
index 6178c96..5fe03c4 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -15,7 +15,7 @@
               <h3>Devices</h3>
               <ul class="nav side-menu">
                 {{#each devices}}
-                <li id="{{this.deviceId}}">
+                <li class="{{this.deviceId}}">
                   <a title="Device Id: {{this.deviceId}}" href="/{{this.deviceId}}">
                     <i class="fa fa-plug"></i>
                     {{this.alias}}
@@ -34,6 +34,18 @@
         <div class="page-header">
           <div class="row">
             <div class="col-sm-8">
+              <div class="device-list-small">
+                <ul class="list-inline">
+                {{#each devices}}
+                <li class="{{this.deviceId}}">
+                  <a title="Device Id: {{this.deviceId}}" href="/{{this.deviceId}}">
+                    <i class="fa fa-plug"></i>
+                    {{this.alias}}
+                  </a>
+                </li>
+                {{/each}}
+              </ul>
+              </div>
               <h1>
                 <i class="fa fa-plug"></i> {{device.alias}}
               </h1>
@@ -99,7 +111,7 @@
 
         <div class="row">
 
-          <div class="col-md-2 col-sm-2 col-xs-12">
+          <div class="col-md-4 col-sm-4 col-xs-12 col-lg-4 col-xl-2">
             <div class="x_panel small tile">
               <div class="x_title">
                 <h2>
@@ -115,7 +127,7 @@
             </div>
           </div>
 
-          <div class="col-md-2 col-sm-2 col-xs-12">
+          <div class="col-md-4 col-sm-4 col-xs-12 col-lg-4 col-xl-2">
             <div class="x_panel small tile">
               <div class="x_title">
                 <h2>
@@ -129,7 +141,7 @@
             </div>
           </div>
 
-          <div class="col-md-2 col-sm-2 col-xs-12">
+          <div class="col-md-4 col-sm-4 col-xs-12 col-lg-4 col-xl-2">
             <div class="x_panel small tile">
               <div class="x_title">
                 <h2>
@@ -143,7 +155,7 @@
             </div>
           </div>
 
-          <div class="col-md-2 col-sm-2 col-xs-12">
+          <div class="col-md-4 col-sm-4 col-xs-12 col-lg-4 col-xl-2">
             <div class="x_panel small tile">
               <div class="x_title">
                 <h2>
@@ -157,7 +169,7 @@
             </div>
           </div>
 
-          <div class="col-md-2 col-sm-2 col-xs-12">
+          <div class="col-md-4 col-sm-4 col-xs-12 col-lg-4 col-xl-2">
             <div class="x_panel small tile">
               <div class="x_title">
                 <h2>
@@ -171,7 +183,7 @@
             </div>
           </div>
 
-          <div class="col-md-2 col-sm-2 col-xs-12">
+          <div class="col-md-4 col-sm-4 col-xs-12 col-lg-4 col-xl-2">
             <div class="x_panel small tile">
               <div class="x_title">
                 <h2>
-- 
cgit v1.2.3