diff options
Diffstat (limited to 'public/javascripts')
| -rw-r--r-- | public/javascripts/dash.js | 167 |
1 files changed, 64 insertions, 103 deletions
diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js index 43524ad..821e9c1 100644 --- a/public/javascripts/dash.js +++ b/public/javascripts/dash.js @@ -1,8 +1,5 @@ var dash = { - realtimeUsagePollRateMs: 1000, - powerStatePollRateMs: 60000, - historicalStatsPollRateMs: 300000, - pollingEnabled: true, + deviceId: null, realtimeGauge: null, realtimeTrendChart: null, @@ -11,13 +8,59 @@ var dash = { dailyUsageChart: null, monthlyUsageChart: null, - init: function() { + init: function(deviceId) { + this.deviceId = deviceId; + + $('.' + deviceId).addClass('active'); + this.initRealtimeGauge(); this.initRealtimeTrendChart(); this.initDailyUsageChart(); this.initMonthlyUsageChart(); - this.startPolling(); + this.initWsConnection(); + }, + + initWsConnection: function() { + var wsUri = 'ws://' + window.location.host + '/ws' + var ws = new WebSocket(wsUri); + ws.onopen = function () { + console.log('Websocket connection established'); + $('#connection-error').hide(200); + ws.send(JSON.stringify( + { + requestType: 'getCachedData', + deviceId: dash.deviceId + } + )); + } + ws.onmessage = dash.wsMessageHandler; + + ws.onclose = function() { + // Usually caused by mobile devices going to sleep or the user minimising the browser app. + // The setTimeout will begin once the device wakes from sleep or the browser regains focus. + $('#connection-error').show(); + setTimeout(dash.initWsConnection, 2000); + } + }, + + wsMessageHandler: function(messageEvent) { + let message = JSON.parse(messageEvent.data); + if(message.deviceId === dash.deviceId) { + if(message.dataType === 'realtimeUsage') { + dash.refreshRealtimeDisplay(message.data); + } + else if(message.dataType === 'dailyUsage') { + dash.parseDailyUsageData(message.data); + } + else if(message.dataType === 'monthlyUsage') { + dash.parseMonthlyUsageData(message.data); + } + else if(message.dataType === 'powerState') { + dash.refreshPowerState(message.data); + } + } + }, initRealtimeGauge: function() { @@ -81,6 +124,15 @@ var dash = { tooltips: { intersect: false }, + plugins: { + streaming: { + duration: 60000, + refresh: 1000, + delay: 1000, + frameRate: 30, + onRefresh: dash.realtimeTrendChartOnRefresh + } + } } }); }, @@ -156,22 +208,6 @@ var dash = { }); }, - // TODO - should probably use websockets - pollUsage: function() { - if(this.pollingEnabled) { - $.ajax({ - url: "/energy-usage/1/realtime", - type: "GET", - success: function(data) { - dash.refreshRealtimeDisplay(data); - }, - dataType: "json", - complete: setTimeout(function() {dash.pollUsage()}, dash.realtimeUsagePollRateMs), - timeout: 2000 - }); - } - }, - refreshRealtimeDisplay: function(realtime) { var power = Math.round(realtime.power); @@ -187,41 +223,6 @@ var dash = { this.realtimeTrendLastSample = power; }, - startPolling: function() { - this.pollingEnabled = true; - this.realtimeTrendChart.options.plugins.streaming = { - duration: 60000, - refresh: 1000, - delay: 1000, - frameRate: 30, - onRefresh: dash.realtimeTrendChartOnRefresh - }; - - this.pollUsage(); - this.pollPowerStatus(); - this.pollDayStats(); - this.pollMonthStats(); - }, - - stopPolling: function() { - this.pollingEnabled = false; - this.realtimeTrendChart.options.plugins.streaming = false; - }, - - pollDayStats: function() { - if(this.pollingEnabled) { - $.ajax({ - url: "/energy-usage/1/day-stats", - type: "GET", - success: function(data) { - dash.parseDailyUsageData(data); - }, - dataType: "json", - complete: setTimeout(function() {dash.pollDayStats()}, dash.historicalStatsPollRateMs), - timeout: 4000 - }); - } - }, parseDailyUsageData: function(usageData) { @@ -260,21 +261,6 @@ var dash = { }, - pollMonthStats: function() { - if(this.pollingEnabled) { - $.ajax({ - url: "/energy-usage/1/month-stats", - type: "GET", - success: function(data) { - dash.parseMonthlyUsageData(data); - }, - dataType: "json", - complete: setTimeout(function() {dash.pollMonthStats()}, dash.historicalStatsPollRateMs), - timeout: 4000 - }); - } - }, - parseMonthlyUsageData: function(usageData) { // Clear previous data @@ -311,21 +297,6 @@ var dash = { $("#avg-month").text(avg.toFixed(2)); }, - pollPowerStatus: function() { - if(this.pollingEnabled) { - $.ajax({ - url: "/power-state/1", - type: "GET", - success: function(data) { - dash.refreshPowerState(data); - }, - dataType: "json", - complete: setTimeout(function() {dash.pollPowerStatus()}, dash.powerStatePollRateMs), - timeout: 2000 - }); - } - }, - refreshPowerState: function(powerState) { if(powerState.isOn) { $("#power-state").text("ON").attr("class", "label label-success"); @@ -334,23 +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]")); - }, - -}; - - -$(document).ready(function () { - - dash.init(); - - $("#toggle-polling").change(function() { - if(this.checked) { - dash.startPolling(); + if(powerState.uptime === 0) { + $("#uptime").text("-"); } else { - dash.stopPolling(); + $("#uptime").text(moment.duration(powerState.uptime, "seconds").format("d[d] h[h] m[m]", {largest: 2})); } - }); + + }, -}); +}; |