Improve layout on mobile devices and tablets

5 files changed, 90 insertions, 14 deletions

diff --git a/README.md b/README.md
index e1fa2e2..fd28b6a 100644
--- a/README.md
+++ b/README.md
@@ -51,10 +51,10 @@ If you hit this issue you can try disabling the VirtualBox adapter in `Control P
 - [x] Show historical data
 - [x] Build dists
 - [x] Docker image
-- [ ] Support switching between multiple plugs (currently only works for the fist plug discovered)
+- [x] Support switching between multiple plugs
+- [x] Switch to websockets
 - [ ] Rescan for devices on the fly
 - [ ] Add daily cost metrics
-- [ ] Configurable poll rates
-- [ ] Switch to websockets
+
 
 
diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js
index e3f39a9..821e9c1 100644
--- a/public/javascripts/dash.js
+++ b/public/javascripts/dash.js
@@ -11,7 +11,7 @@ var dash = {
   init: function(deviceId) {
     this.deviceId = deviceId;
 
-    $('#' + deviceId).addClass('active');
+    $('.' + deviceId).addClass('active');
 
     this.initRealtimeGauge();
     this.initRealtimeTrendChart();
@@ -305,7 +305,13 @@ var dash = {
       $("#power-state").text("OFF").attr("class", "label label-danger");
     }
 
-    $("#uptime").text(moment.duration(powerState.uptime, "seconds").format("d[d] h[h] m[m]"));
+    if(powerState.uptime === 0) {
+      $("#uptime").text("-");
+    }
+    else {
+      $("#uptime").text(moment.duration(powerState.uptime, "seconds").format("d[d] h[h] m[m]", {largest: 2}));
+    }
+    
   },
 
 };
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index 6d37c8f..2057c4d 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -31,4 +31,59 @@ footer ul {
   color: #a94442;
   background-color: #f2dede;
   border-color: #ebccd1;
-}
\ No newline at end of file
+}
+
+.list-inline > .active {
+  font-weight: bold;
+}
+
+.nav_title { 
+  width: 170px;
+}
+
+.nav-md .container.body .col-md-3.left_col {
+  width: 170px;
+}
+
+.nav-md .container.body .right_col {
+  margin-left: 170px;
+}
+
+@media (min-width: 992px) {
+  footer {
+    margin-left: 170px;
+  }
+}
+
+@media (max-width: 991px) {
+  .nav-md .container.body .right_col {
+    padding-right: 0;
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 1100px) {
+  .col-md-2, .col-md-3, .col-md-4, .col-md-6, .col-md-8, .col-md-9,  .col-xs-12, .col-lg-2 {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
+}
+
+@media (min-width: 1635px) {
+  .col-xl-2,{
+    float: left;
+  }
+  .col-xl-2 {
+    width: 16.66666667%;
+  }
+}
+
+.device-list-small{
+  display: none;
+}
+
+@media (max-width: 991px) {
+  .device-list-small{
+      display: inline;
+  }
+}
diff --git a/services/device-manager.js b/services/device-manager.js
index d1d81a1..e4d18f3 100644
--- a/services/device-manager.js
+++ b/services/device-manager.js
@@ -3,7 +3,10 @@ const { Client } = require('tplink-smarthome-api');
 const client = new Client();
 var devices = [];
 
-client.startDiscovery({deviceTypes: ['plug']}).on('plug-new', plug => {
+client.startDiscovery({
+    deviceTypes: ['plug'],
+    discoveryTimeout: 20000
+  }).on('plug-new', plug => {
   console.log('Found device: ' + plug.alias + ' [' + plug.deviceId + ']');
   devices.push(plug);
 });
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>