diff options
| -rw-r--r-- | public/javascripts/dash.js | 10 | ||||
| -rw-r--r-- | public/stylesheets/style.css | 6 | ||||
| -rw-r--r-- | views/index.hbs | 11 |
3 files changed, 23 insertions, 4 deletions
diff --git a/public/javascripts/dash.js b/public/javascripts/dash.js index 7a8207c..e3f39a9 100644 --- a/public/javascripts/dash.js +++ b/public/javascripts/dash.js @@ -26,6 +26,7 @@ var dash = { var ws = new WebSocket(wsUri); ws.onopen = function () { console.log('Websocket connection established'); + $('#connection-error').hide(200); ws.send(JSON.stringify( { requestType: 'getCachedData', @@ -33,7 +34,14 @@ var dash = { } )); } - ws.onmessage = this.wsMessageHandler; + 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) { diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index 3f4c1ca..6d37c8f 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -25,4 +25,10 @@ footer ul { color: #fff; background-color: #5cb85c; border-color: #4cae4c; +} + +.alert-danger { + color: #a94442; + background-color: #f2dede; + border-color: #ebccd1; }
\ No newline at end of file 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> |