Display payment received notification

3 files changed, 17 insertions, 9 deletions

diff --git a/css/bitcoin_pos.css b/css/bitcoin_pos.css
index 2346ea18..b97f586d 100644
--- a/css/bitcoin_pos.css
+++ b/css/bitcoin_pos.css
@@ -1,5 +1,5 @@
 body { text-align: center; }
-body, input[type="text"], input[type="number"] { font-size: 24px; height: 30px; line-height: 24px; }
+body, input[type="text"], span.btn { font-size: 24px; height: 30px; line-height: 24px; }
 small, label { font-size: 24px; color: #999; line-height: 24px; }
 strong#total { font-size: 30px; }
 input[type="submit"] { display: none; }
diff --git a/index.html b/index.html
index 1eb2423e..91d77cf9 100644
--- a/index.html
+++ b/index.html
@@ -17,21 +17,23 @@
       <img id="banner" src="img/banner.jpg" alt="The Daily Catch" />
 
       <label for="exchange">Exchange Rate:</label>
-      <input type="number" id="exchange" value="0" disabled="disabled" />
+      <input type="text" id="exchange" value="0" disabled="disabled" />
       <small>CAD / BTC</small>
 
       <label for="owing">Amount:</label>
       <input type="text" id="owing" value="0" />
       <small>CAD</small>
 
-      <input type="submit" />
-
       <br /><br />
 
-      <p>Please send <strong id="total">0.0</strong> bitcoins to:</p><br />
-      <span id="address"></span>
+      <div id="payment">
+        <p>Please send <strong id="total">0.0</strong> bitcoins to:</p><br />
+        <span id="address"></span>
+
+        <canvas id="qrcanv">No Canvas Support</canvas>
+      </div>
 
-      <canvas id="qrcanv">No Canvas Support</canvas>
+      <span id="received" class="btn btn-success">Payment Received.  Thank you!</span>
     </div>
   </body>
 </html> 
diff --git a/js/bitcoin_pos.js b/js/bitcoin_pos.js
index 0ecc9264..49bf5c14 100644
--- a/js/bitcoin_pos.js
+++ b/js/bitcoin_pos.js
@@ -4,6 +4,8 @@ $(function() {
   var total = 0;
   var received = 0;
   var address = getParameterByName('address');
+  
+  $('#received').hide();
 
   setupqr();
 
@@ -33,9 +35,9 @@ $(function() {
       }
     });
 
-    $('#status').html('Received: ' + received.toString());
     if (total <= received) {
-      $('#status').css('color', 'green');
+      $('#payment').hide();
+      $('#received').fadeIn('slow');
     }
 
     $.get('record_transaction.php',
@@ -58,6 +60,10 @@ $(function() {
 
   $('#owing').keyup(updateTotal);
   $('#owing').focus();
+  $('#owing').click(function() {
+    $('#payment').show();
+    $('#received').hide();
+  });
 
   function updateTotal() {
     var owing = parseFloat($('#owing').val());