From 2af62c8a50444359408a88cb5b2ab3a4f813fad8 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam.soltys@pwgsc-tpsgc.gc.ca>
Date: Sun, 28 Oct 2012 20:48:24 -0700
Subject: Gracefully handle connection failures

---
 calculator.html     |  34 +++++++++++++++++++---------------
 css/bitcoin_pos.css |   1 +
 img/dailycatch.jpg  | Bin 27656 -> 0 bytes
 img/logo.jpg        | Bin 0 -> 27656 bytes
 js/bitcoin_pos.js   |  46 ++++++++++++++++++++++++++++++++++++----------
 ticker.json         |   1 -
 ticker.php          |   1 +
 7 files changed, 57 insertions(+), 26 deletions(-)
 delete mode 100644 img/dailycatch.jpg
 create mode 100644 img/logo.jpg
 delete mode 100644 ticker.json
 create mode 100644 ticker.php

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/dailycatch.jpg
deleted file mode 100644
index 2df858c3..00000000
Binary files a/img/dailycatch.jpg and /dev/null differ
diff --git a/img/logo.jpg b/img/logo.jpg
new file mode 100644
index 00000000..2df858c3
Binary files /dev/null and b/img/logo.jpg differ
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.json
deleted file mode 100644
index 63e0842b..00000000
--- a/ticker.json
+++ /dev/null
@@ -1 +0,0 @@
-<? echo file_get_contents("http://bitcoincharts.com/t/depthcalc.json?symbol=virtexCAD&type=bid&amount=1000&currency=true") ?>
diff --git a/ticker.php b/ticker.php
new file mode 100644
index 00000000..4cce3bcb
--- /dev/null
+++ b/ticker.php
@@ -0,0 +1 @@
+<? echo file_get_contents("http://bitcoincharts.com/t/depthcalc.json?symbol=virtexCAD&type=ask&amount=1000&currency=true"); ?>
-- 
cgit v1.2.3