From d8b982a74c53e0944d2441b72b11e6e6984903ff Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam.soltys@pwgsc-tpsgc.gc.ca>
Date: Thu, 25 Oct 2012 23:51:15 -0700
Subject: Create setup page for adjusting/specifying calculator parameters

---
 .gitignore                           |   1 -
 README.md                            |  20 +++++++++++-----
 calculator.html                      |  43 +++++++++++++++++++++++++++++++++++
 css/bitcoin_pos.css                  |   7 ++++--
 db/migrations/001_create_database.rb |  19 ++++++++++++++++
 db/migrations/001_create_users.rb    |  10 --------
 img/banner.jpg                       | Bin 27656 -> 0 bytes
 img/dailycatch.jpg                   | Bin 0 -> 27656 bytes
 index.html                           |  32 ++++++++------------------
 js/bitcoin_pos.js                    |  17 +++++++++++---
 js/report.js                         |   2 +-
 report.html                          |   6 ++++-
 ticker.json                          |   1 +
 13 files changed, 112 insertions(+), 46 deletions(-)
 create mode 100644 calculator.html
 create mode 100644 db/migrations/001_create_database.rb
 delete mode 100644 db/migrations/001_create_users.rb
 delete mode 100644 img/banner.jpg
 create mode 100644 img/dailycatch.jpg
 create mode 100644 ticker.json

diff --git a/.gitignore b/.gitignore
index 0f104277..7ccc2d1c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,3 @@
-ticker.json
 transactions.json
 .htpasswd
 .rvmrc
diff --git a/README.md b/README.md
index 8b3e3458..b2e3b195 100644
--- a/README.md
+++ b/README.md
@@ -1,19 +1,27 @@
 # Bitcoin Point of Sale
 
-This is a simple utility that a merchant can run on a tablet or phone to convert dollars to bitcoins and receive payments from clients
+This is a simple utility that a merchant can run on a tablet or phone to convert dollars to bitcoins and receive payments from clients.  A setup page allows you to configure the company title, logo, address, exchange rate, and commission.
 
-It uses the websocket payment notification API from http://blockchain.info/ to display notifications in real time.
+We use the websocket payment notification API from http://blockchain.info/api/api_websocket to listen for and display payment notifications in real time. The bitcoin exchange rates are fetched from http://bitcoincharts.com/.
 
-# Installation
+When transactions are detected, they are logged along with the time and current exchange rate, and a report is provided so that merchants can account for how many bitcoins they received in a given time period and see their equivalent dollar value.  If desired, merchants can then keep a cash float on hand and instruct cashiers to convert the received bitcoins to dollars on-premise at the time of payment, daily, weekly, monthly or as desired.
 
-Download market price data into a file called `ticker.json`:
+# Installation
 
-    curl "http://bitcoincharts.com/t/depthcalc.json?symbol=virtexCAD&type=bid&amount=1000&currency=true" > ticker.json
+The main calculator page `calculator.html` is programmed in HTML5 and should run in any modern browser.  The transaction logging and reporting functionality requires a data store.  It's currently using PHP to write to flat JSON files but am probably going to switch to NodeJS and MySQL.
 
 # Demo Instance
 
-http://bitcoin.adamsoltys.com/
+http://vanbtc.ca/
+
+# Todo
 
+* Allow calculator configurations to be saved and assigned to an account
+* Short/pretty URLs for pre-saved configurations
+* Security/authentication around transaction logging
+* Verify transaction logs against the blockchain
+* More robust disconnect and error handling
+* Better device detection and browser testing
 
 # License
 
diff --git a/calculator.html b/calculator.html
new file mode 100644
index 00000000..906bff14
--- /dev/null
+++ b/calculator.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+		<meta name="viewport" content="width=480, height=752, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+    <title>Bitcoin Payment Calculator</title>
+    <link href="img/favicon.ico" rel="shortcut icon" />
+    <link href="css/bootstrap.min.css" rel="stylesheet" />
+    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
+    <link href="css/bitcoin_pos.css" rel="stylesheet" />
+    <script src="js/jquery-1.8.2.min.js"></script>
+    <script src="js/moment.min.js"></script>
+    <script src="js/qr.js"></script>
+    <script src="js/bootstrap.min.js"></script>
+    <script src="js/bitcoin_pos.js"></script>
+  </head>
+  <body>
+    <div class="container-fluid" style="display: none">
+      <h1 id="title">Bitcoin Payment Calculator</h1>
+
+      <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="amount">Amount:</label>
+      <input type="text" id="amount" />
+      <small>CAD</small>
+
+      <br /><br />
+
+      <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>
+      </div>
+
+      <span id="received" class="btn btn-success">Payment Received.  Thank you!</span>
+    </div>
+  </body>
+</html> 
diff --git a/css/bitcoin_pos.css b/css/bitcoin_pos.css
index f6b80f58..736a206e 100644
--- a/css/bitcoin_pos.css
+++ b/css/bitcoin_pos.css
@@ -1,13 +1,16 @@
 body { text-align: center; }
 body { font-size: 100%; line-height: 100%; }
+h1 { width: 100%; text-align: center; }
 p, span, input[type="text"] { font-size: 1.4em; }
-input[type="text"] { height: 1.4em; width: 5em; }
+input[type="text"] { height: 1.4em; }
+#exchange, #amount { width: 5em; }
 span.btn { font-size: 1.4em; width: 80%; }
 small, label { color: #999; font-size: 1.2em; }
 strong#total { font-size: 2em; }
-img#banner { width: 100%; }
+#logo { padding: 10px 0; }
 	
 div.container-fluid {
+  width: 600px;
   margin-left: auto;
   margin-right: auto;
   text-align:left;
diff --git a/db/migrations/001_create_database.rb b/db/migrations/001_create_database.rb
new file mode 100644
index 00000000..9e374de2
--- /dev/null
+++ b/db/migrations/001_create_database.rb
@@ -0,0 +1,19 @@
+class CreateDatabase <  ActiveRecord::Migration
+  def change 
+    create_table :users do |t|
+      t.string :login
+      t.string :password
+      t.string :name
+      t.string :address
+      t.decimal :credit, :precision => 10, :scale => 2
+      t.string :logo
+    end
+
+    create_table :transactions do |t|
+      t.string :address
+      t.decimal :amount, :precision => 10, :scale => 2
+      t.decimal :exchange, :precision => 10, :scale => 2
+      t.timestamps
+    end
+  end
+end
diff --git a/db/migrations/001_create_users.rb b/db/migrations/001_create_users.rb
deleted file mode 100644
index 4225589d..00000000
--- a/db/migrations/001_create_users.rb
+++ /dev/null
@@ -1,10 +0,0 @@
-class CreateUsers <  ActiveRecord::Migration
-  def change 
-    create_table :users do |t|
-      t.string :name
-      t.string :address
-      t.decimal :credit, :precision => 10, :scale => 2
-      t.string :logo
-    end
-  end
-end
diff --git a/img/banner.jpg b/img/banner.jpg
deleted file mode 100644
index 2df858c3..00000000
Binary files a/img/banner.jpg and /dev/null differ
diff --git a/img/dailycatch.jpg b/img/dailycatch.jpg
new file mode 100644
index 00000000..2df858c3
Binary files /dev/null and b/img/dailycatch.jpg differ
diff --git a/index.html b/index.html
index 85b65ac8..0d715542 100644
--- a/index.html
+++ b/index.html
@@ -8,34 +8,22 @@
     <link href="css/bootstrap.min.css" rel="stylesheet" />
     <link href="css/bootstrap-responsive.min.css" rel="stylesheet" />
     <link href="css/bitcoin_pos.css" rel="stylesheet" />
-    <script src="js/jquery-1.8.2.min.js"></script>
-    <script src="js/moment.min.js"></script>
-    <script src="js/qr.js"></script>
     <script src="js/bootstrap.min.js"></script>
-    <script src="js/bitcoin_pos.js"></script>
   </head>
   <body>
     <div class="container-fluid">
-      <img id="banner" src="img/banner.jpg" alt="The Daily Catch" />
+      <form action="calculator.html">
+        <h1>Calculator Setup</h1>
 
-      <label for="exchange">Exchange Rate:</label>
-      <input type="text" id="exchange" value="0" disabled="disabled" />
-      <small>CAD / BTC</small>
+        <label for="title">Name:</label>
+        <input type="text" id="title" name="title" />
 
-      <label for="amount">Amount:</label>
-      <input type="text" id="amount" />
-      <small>CAD</small>
-
-      <br /><br />
-
-      <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>
-
-      <span id="received" class="btn btn-success">Payment Received.  Thank you!</span>
+        <label for="address">Bitcoin Address:</label>
+        <input type="text" id="address" name="address" />
+        
+        <br />
+        <input class="btn" type="submit" value="Go" />
+      </form>
     </div>
   </body>
 </html> 
diff --git a/js/bitcoin_pos.js b/js/bitcoin_pos.js
index 9a2ac153..014732b1 100644
--- a/js/bitcoin_pos.js
+++ b/js/bitcoin_pos.js
@@ -1,14 +1,23 @@
 $(function() {
   var websocket = null;
+  var title = getParameterByName('title');
   var address = getParameterByName('address');
+  var logo = getParameterByName('logo');
   var exchange = 0;
 
+  if (title != "")
+    $('#title').html(title);
+
+  if (logo != "") {
+    $('#logo').attr('src', logo).show();
+    $('#title').hide();
+  }
+
   if (address == "")
-    window.location = 'index.html?address=1KDaKixtYqPdDNsu3fMeAHHB52R2WHvXCQ'
+    address = '1VAnbtCAnYccECnjaMCPnWwt81EHCVgNr'
+  $('#address').html(address);
 
   $('#received').hide()
-  $('div.container-fluid').css('width', Math.min(screen.width, 600) + 'px');
-  $('#address').html(address);
   setupQR();
   setInterval(setupSocket, 5000);
 
@@ -29,6 +38,8 @@ $(function() {
     updateTotal();
   });
 
+  $('div.container-fluid').fadeIn('slow');
+
   function updateTotal() {
     var amount = parseFloat($('#amount').val());
     var total = amount / exchange;
diff --git a/js/report.js b/js/report.js
index 6cacf077..a470f348 100644
--- a/js/report.js
+++ b/js/report.js
@@ -1,5 +1,5 @@
 $(function() {
-  $('#date').datepicker();
+  $('.date').datepicker();
 
   $.getJSON('transactions.json', function(data) {
     $.each(data.transactions, function() {
diff --git a/report.html b/report.html
index 30ec240b..7ded2cb5 100644
--- a/report.html
+++ b/report.html
@@ -16,7 +16,11 @@
   </head>
   <body>
     <div class="container-fluid">
-      Date: <input id="date" name="date" type="text" />
+      <h1>Transactions Report</h1>
+
+      From: <input id="from" name="from" type="text" class="date" />
+      To: <input id="to" name="to" type="text" class="date" />
+
       <table class="table">
         <thead>
           <tr>
diff --git a/ticker.json b/ticker.json
new file mode 100644
index 00000000..63e0842b
--- /dev/null
+++ b/ticker.json
@@ -0,0 +1 @@
+<? echo file_get_contents("http://bitcoincharts.com/t/depthcalc.json?symbol=virtexCAD&type=bid&amount=1000&currency=true") ?>
-- 
cgit v1.2.3