Display connection status icon

5 files changed, 20 insertions, 5 deletions

diff --git a/public/css/calculator.css b/public/css/calculator.css
index d2211ff9..e0a85748 100644
--- a/public/css/calculator.css
+++ b/public/css/calculator.css
@@ -30,6 +30,7 @@ div.container-fluid {
 }
 .navbar-toggle .glyphicon {
   margin-top: -5px;
+  padding-left: 10px;
 }
 .navbar {
   margin: 0;
@@ -43,6 +44,9 @@ div.container-fluid {
 .nav li a {
   padding: 10px 0 10px 10px;
 }
+#connection {
+  display: none;
+}
 .form-group label {
   font-weight: normal;
   font-size: 14px;
diff --git a/public/css/calculator.less b/public/css/calculator.less
index f48f2dba..66aa48a4 100644
--- a/public/css/calculator.less
+++ b/public/css/calculator.less
@@ -16,11 +16,12 @@ div.container-fluid {
 }
 
 .navbar-toggle { background-color: #428bca; width: 100%; position: absolute; top: 0px; height: 30px; margin: 0; float: none; z-index: 1; }
-.navbar-toggle .glyphicon { margin-top: -5px; }
+.navbar-toggle .glyphicon { margin-top: -5px; padding-left: 10px; }
 .navbar { margin: 0; }
 .navbar-collapse.in { overflow-y: visible; }
 .nav { margin-top: 30px; }
 .nav li a { padding: 10px 0 10px 10px; }
+#connection { display: none; }
 
 .form-group {
   label { font-weight: normal; font-size: 14px; display: block; }
diff --git a/public/js/calculator.coffee b/public/js/calculator.coffee
index f035855e..48e14764 100644
--- a/public/js/calculator.coffee
+++ b/public/js/calculator.coffee
@@ -92,7 +92,7 @@ setup = ->
   $('#currency').html(g.currency)
   $('#received').hide()
 
-  # setupSocket()
+  setupSocket()
   fetchExchangeRate()
 
 fetchExchangeRate = ->
@@ -126,14 +126,18 @@ setupSocket = ->
     g.websocket = new WebSocket("wss://ws.blockchain.info/inv")
 
     g.websocket.onopen = -> 
+      $('#connection').fadeIn().removeClass('glyphicon-exclamation-sign').addClass('glyphicon-signal')
       g.websocket.send('{"op":"addr_sub", "addr":"' + g.address + '"}')
     
     g.websocket.onerror =  ->
+      $('#connection').addClass('glyphicon-exclamation-sign').removeClass('glyphicon-signal')
       g.websocket = null
       fail(SOCKET_FAIL)
 
     g.websocket.onclose = ->
-      setupSocket()
+      $('#connection').addClass('glyphicon-exclamation-sign').removeClass('glyphicon-signal')
+      g.websocket = null
+      fail(SOCKET_FAIL)
 
     g.websocket.onmessage = (e) ->
       results = eval('(' + e.data + ')')
diff --git a/public/js/calculator.js b/public/js/calculator.js
index d552b895..ba6f6511 100644
--- a/public/js/calculator.js
+++ b/public/js/calculator.js
@@ -88,6 +88,7 @@
     $('#symbol').html(g.symbol + " bid");
     $('#currency').html(g.currency);
     $('#received').hide();
+    setupSocket();
     return fetchExchangeRate();
   };
 
@@ -125,14 +126,18 @@
     if (!(g.websocket && g.websocket.readyState === 1)) {
       g.websocket = new WebSocket("wss://ws.blockchain.info/inv");
       g.websocket.onopen = function() {
+        $('#connection').fadeIn().removeClass('glyphicon-exclamation-sign').addClass('glyphicon-signal');
         return g.websocket.send('{"op":"addr_sub", "addr":"' + g.address + '"}');
       };
       g.websocket.onerror = function() {
+        $('#connection').addClass('glyphicon-exclamation-sign').removeClass('glyphicon-signal');
         g.websocket = null;
         return fail(SOCKET_FAIL);
       };
       g.websocket.onclose = function() {
-        return setupSocket();
+        $('#connection').addClass('glyphicon-exclamation-sign').removeClass('glyphicon-signal');
+        g.websocket = null;
+        return fail(SOCKET_FAIL);
       };
       return g.websocket.onmessage = function(e) {
         var from_address, received, results;
diff --git a/views/layout.html b/views/layout.html
index 2a30cda2..4a99c7e0 100644
--- a/views/layout.html
+++ b/views/layout.html
@@ -12,7 +12,8 @@
     <div class="container-fluid">
       <nav class="navbar" role="navigation">
         <button type="button" class="btn btn-primary navbar-toggle" data-toggle="collapse" data-target="#nav">
-          <span class="glyphicon glyphicon-list"></span>
+          <span class="pull-right glyphicon glyphicon-list"></span>
+          <span id="connection" class="pull-right glyphicon glyphicon-exclamation-sign"></span>
         </button>
         <div id="nav" class="collapse navbar-collapse">
           <div class="navbar">