diff options
| -rw-r--r-- | README.md | 6 | ||||
| -rw-r--r-- | public/javascripts/dash.js | 10 | ||||
| -rw-r--r-- | public/stylesheets/style.css | 57 | ||||
| -rw-r--r-- | services/device-manager.js | 5 | ||||
| -rw-r--r-- | views/index.hbs | 26 |
5 files changed, 90 insertions, 14 deletions
@@ -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> |