From c72ea6660d06ac347feafd6cbb8b3dc3c0f95c43 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Sun, 8 Apr 2018 17:09:55 +0100 Subject: Improve layout on mobile devices and tablets --- README.md | 6 ++--- public/javascripts/dash.js | 10 ++++++-- public/stylesheets/style.css | 57 +++++++++++++++++++++++++++++++++++++++++++- services/device-manager.js | 5 +++- views/index.hbs | 26 ++++++++++++++------ 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 @@

Devices