Gracefully handle connection failures

5 files changed, 57 insertions, 26 deletions

diff --git a/calculator.html b/calculator.html
index 906bff14..bdc9fde8 100644
--- a/calculator.html
+++ b/calculator.html
@@ -15,29 +15,33 @@
     <script src="js/bitcoin_pos.js"></script>
   </head>
   <body>
-    <div class="container-fluid" style="display: none">
-      <h1 id="title">Bitcoin Payment Calculator</h1>
+    <div class="container-fluid">
+      <div id="calculator" style="display: none">
+        <h1 id="title">Bitcoin Payment Calculator</h1>
 
-      <img id="logo" src="img/logo.jpg" alt="Logo" style="display: none" />
+        <img id="logo" src="img/logo.jpg" alt="Logo" style="display: none" />
 
-      <label for="exchange">Exchange Rate:</label>
-      <input type="text" id="exchange" value="0" disabled="disabled" />
-      <small>CAD / BTC</small>
+        <label for="exchange">Exchange Rate:</label>
+        <input type="text" id="exchange" value="0" disabled="disabled" />
+        <small>CAD / BTC</small>
 
-      <label for="amount">Amount:</label>
-      <input type="text" id="amount" />
-      <small>CAD</small>
+        <label for="amount">Amount:</label>
+        <input type="text" id="amount" />
+        <small>CAD</small>
 
-      <br /><br />
+        <br /><br />
 
-      <div id="payment">
-        <p>Please send <strong id="total">0.0</strong> bitcoins to:</p><br />
-        <p id="address"></p>
+        <div id="payment">
+          <p>Please send <strong id="total">0.0</strong> bitcoins to:</p><br />
+          <p id="address"></p>
 
-        <canvas id="qrcanv">No Canvas Support</canvas>
+          <canvas id="qrcanv">No Canvas Support</canvas>
+        </div>
+
+        <span id="received" class="btn btn-success">Payment Received.  Thank you!</span>
       </div>
 
-      <span id="received" class="btn btn-success">Payment Received.  Thank you!</span>
+      <span id="error" class="btn btn-danger" style="display: none">Can't establish connection</span> 
     </div>
   </body>
 </html> 
diff --git a/css/bitcoin_pos.css b/css/bitcoin_pos.css
index 736a206e..7da47f08 100644
--- a/css/bitcoin_pos.css
+++ b/css/bitcoin_pos.css
@@ -8,6 +8,7 @@ span.btn { font-size: 1.4em; width: 80%; }
 small, label { color: #999; font-size: 1.2em; }
 strong#total { font-size: 2em; }
 #logo { padding: 10px 0; }
+#error { margin-top: 10px; }
 	
 div.container-fluid {
   width: 600px;
diff --git a/img/dailycatch.jpg b/img/logo.jpg
index 2df858c3..2df858c3 100644
--- a/img/dailycatch.jpg
+++ b/img/logo.jpg
diff --git a/js/bitcoin_pos.js b/js/bitcoin_pos.js
index adbd5fbf..2416ec6b 100644
--- a/js/bitcoin_pos.js
+++ b/js/bitcoin_pos.js
@@ -2,12 +2,16 @@ $(function() {
   var websocket = null;
   var title = getParameterByName('title');
   var address = getParameterByName('address');
+  var commission = getParameterByName('commission');
   var logo = getParameterByName('logo');
   var exchange = 0;
 
   if (title != "")
     $('#title').html(title);
 
+  if (commission == "")
+    commission = 3;
+
   if (logo != "") {
     $('#logo').attr('src', logo).show();
     $('#title').hide();
@@ -19,16 +23,7 @@ $(function() {
 
   $('#received').hide()
   setupQR();
-  setInterval(setupSocket, 5000);
-
-  $.getJSON('ticker.json', function (data) {
-    exchange = 1000 / data.out;
-    exchange = exchange + exchange * 0.03;
-    exchange = Math.ceil(exchange * 100) / 100;
-    $('#exchange').val(exchange.toFixed(2));
-    updateTotal();
-    $('div.container-fluid').fadeIn('slow');
-  });
+  setupSocket();
 
   $('#amount').keyup(updateTotal);
   $('#amount').focus();
@@ -39,6 +34,10 @@ $(function() {
     updateTotal();
   });
 
+  $('#error').click(function() {
+    location.reload();
+  });
+
   function updateTotal() {
     var amount = parseFloat($('#amount').val());
     var total = amount / exchange;
@@ -52,14 +51,41 @@ $(function() {
     displayQR('bitcoin:' + address + '?amount=' + total.toString());
   }
 
+  function fetchExchangeRate() {
+    $.getJSON('ticker.php', function (data) {
+      if (data == null) {
+        $('#error').show();
+      } else {
+        exchange = 1000 / data.out;
+        exchange = exchange - exchange * commission * 0.01;
+        exchange = Math.ceil(exchange * 100) / 100;
+        $('#exchange').val(exchange.toFixed(2));
+        updateTotal();
+
+        $('#error').hide();
+        $('#calculator').fadeIn('slow');
+      }
+    });
+
+    setTimeout(fetchExchangeRate, 900000);
+  }
+
   function setupSocket() {
+    setTimeout(setupSocket, 10000);
+
     if (!websocket || websocket.readystate != 1) {
       websocket = new WebSocket("ws://api.blockchain.info:8335/inv");
 
       websocket.onopen = function() { 
         websocket.send('{"op":"addr_sub", "addr":"' + address + '"}');
+        fetchExchangeRate();
       }
 
+      websocket.onerror = websocket.onclose = function() {
+        $('#calculator').hide();
+        $('#error').show();
+      };
+
       websocket.onmessage = function(e) { 
         var results = eval('(' + e.data + ')');
         var from_address = '';
diff --git a/ticker.json b/ticker.php
index 63e0842b..4cce3bcb 100644
--- a/ticker.json
+++ b/ticker.php
@@ -1 +1 @@
-<? echo file_get_contents("http://bitcoincharts.com/t/depthcalc.json?symbol=virtexCAD&type=bid&amount=1000&currency=true") ?>
+<? echo file_get_contents("http://bitcoincharts.com/t/depthcalc.json?symbol=virtexCAD&type=ask&amount=1000&currency=true"); ?>