From eb75029273e477a6ed4486d204a19ee762af07bf Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 22 Jul 2014 14:42:18 -0700 Subject: Display connection status icon --- public/css/calculator.css | 4 ++++ public/css/calculator.less | 3 ++- public/js/calculator.coffee | 8 ++++++-- public/js/calculator.js | 7 ++++++- 4 files changed, 18 insertions(+), 4 deletions(-) (limited to 'public') 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; -- cgit v1.2.3 From de1cdd2e3f9d9f36ce3d8e97335341cc3237e829 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Tue, 22 Jul 2014 15:11:16 -0700 Subject: Play a chaching sound when payment is received --- public/cash_register.wav | Bin 0 -> 15058 bytes public/js/calculator.coffee | 1 + public/js/calculator.js | 1 + views/calculator/show.html | 1 + 4 files changed, 3 insertions(+) create mode 100644 public/cash_register.wav (limited to 'public') diff --git a/public/cash_register.wav b/public/cash_register.wav new file mode 100644 index 00000000..4ec12957 Binary files /dev/null and b/public/cash_register.wav differ diff --git a/public/js/calculator.coffee b/public/js/calculator.coffee index 48e14764..7b42bab5 100644 --- a/public/js/calculator.coffee +++ b/public/js/calculator.coffee @@ -159,6 +159,7 @@ setupSocket = -> $('#amount').blur() $('#payment').hide() $('#received').fadeIn('slow') + $('#chaching')[0].play() if g.user $.post("/#{g.user}/transactions", diff --git a/public/js/calculator.js b/public/js/calculator.js index ba6f6511..71aa22da 100644 --- a/public/js/calculator.js +++ b/public/js/calculator.js @@ -159,6 +159,7 @@ $('#amount').blur(); $('#payment').hide(); $('#received').fadeIn('slow'); + $('#chaching')[0].play(); } if (g.user) { return $.post("/" + g.user + "/transactions", { diff --git a/views/calculator/show.html b/views/calculator/show.html index d0be8db2..95924789 100644 --- a/views/calculator/show.html +++ b/views/calculator/show.html @@ -50,6 +50,7 @@ Payment Received. Thank you! +