Merge branch 'master' of github.com:bitpay/insight into feature/realtime-sync-info

Conflicts:
	public/views/footer.html

app/controllers/transactions.js

@@ -52,8 +52,12 @@ var getTransaction = function(txid, cb) {
  */
 exports.list = function(req, res, next) {
   var bId = req.query.block;
-  var aId = req.query.address;
+  var addrStr = req.query.address;
-  var limit = req.query.limit || 1000;
+  var page = req.query.pageNum;
+  var pageLength = 20;
+  var pagesTotal = 1;
+  var txLength;
+  var txs;
 
   if (bId) {
     Block.fromHashWithInfo(bId, function(err, block) {
@@ -63,14 +67,28 @@ exports.list = function(req, res, next) {
         return next();
       }
 
-      async.mapSeries(block.info.tx, getTransaction,
+      txLength = block.info.tx.length;
+
+      if (page) {
+        var spliceInit = page * pageLength;
+        txs = block.info.tx.splice(spliceInit, pageLength);
+        pagesTotal = Math.ceil(txLength / pageLength);
+      }
+      else {
+        txs = block.info.tx;
+      }
+
+      async.mapSeries(txs, getTransaction,
         function(err, results) {
-          res.jsonp(results);
+          res.jsonp({
+            pagesTotal: pagesTotal,
+            txs: results
+          });
         });
     });
   }
-  else if (aId) {
+  else if (addrStr) {
-    var a = Address.new(aId);
+    var a = Address.new(addrStr);
 
     a.update(function(err) {
       if (err && !a.totalReceivedSat) {
@@ -79,23 +97,25 @@ exports.list = function(req, res, next) {
         return next();
       }
 
-      async.mapSeries(a.transactions, getTransaction,
+      txLength = a.transactions.length;
+
+      if (page) {
+        var spliceInit = page * pageLength;
+        txs = a.transactions.splice(spliceInit, pageLength);
+        pagesTotal = Math.ceil(txLength / pageLength);
+      }
+      else {
+        txs = a.transactions;
+      }
+
+      async.mapSeries(txs, getTransaction,
         function(err, results) {
-          res.jsonp(results);
+          res.jsonp({
+            pagesTotal: pagesTotal,
+            txs: results
+          });
         });
     });
   }
-  else {
+
-    Transaction
-      .find()
-      .limit(limit)
-      .sort('-time')
-      .exec(function(err, txs) {
-        if (err) {
-          res.status(500).send(err);
-        } else {
-          res.jsonp(txs);
-        }
-      });
-  }
 };

public/css/common.css

@@ -38,6 +38,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 .m20h {margin: 0 20px;}
 .m5v {margin: 5px 0;}
 .m20v {margin: 20px 0;}
+.m10v {margin: 10px 0;}
 .m50v {margin: 50px 0;}
 .m10b {margin-bottom: 10px;}
 
@@ -119,6 +120,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
 }
 
 .col-gray {
+  width: 267px;
   background-color: #F4F4F4;
   padding: 15px;
   margin-top: 21px;

public/js/controllers/transactions.js

@@ -3,12 +3,16 @@
 angular.module('insight.transactions').controller('transactionsController',
   function ($scope, $rootScope, $routeParams, $location, Global, Transaction, TransactionsByBlock, TransactionsByAddress, get_socket) {
   $scope.global = Global;
+  $scope.loading = false;
+  $scope.loadedBy = null;
+
+  var pageNum = 0;
+  var pagesTotal = 1;
 
   $scope.findThis = function() {
     $scope.findTx($routeParams.txId);
   };
 
-
   $scope.aggregateItems = function(items) {
     var l = items.length;
 
@@ -57,7 +61,6 @@ angular.module('insight.transactions').controller('transactionsController',
     return (ret);
   };
 
-
   $scope.processTX = function(tx) {
     tx.vinSimple = $scope.aggregateItems(tx.vin);
     tx.voutSimple = $scope.aggregateItems(tx.vout);
@@ -84,27 +87,54 @@ angular.module('insight.transactions').controller('transactionsController',
     });
   };
 
-  $scope.byBlock = function(bId) {
+  $scope.byBlock = function() {
-    TransactionsByBlock.query({
+    TransactionsByBlock.get({
-     block: bId
+     block: $routeParams.blockHash,
-    }, function(txs) {
+     pageNum: pageNum
-      angular.forEach(txs, function(tx) {
+    }, function(data) {
-        $scope.processTX(tx);
+      $scope.paginate(data);
-      });
-      $scope.txs = txs;
     });
   };
 
-  $scope.byAddress = function(aId) {
+  $scope.byAddress = function () {
-    TransactionsByAddress.query({
+    TransactionsByAddress.get({
-     address: aId
+     address: $routeParams.addrStr,
-    }, function(txs) {
+     pageNum: pageNum
-      angular.forEach(txs, function(tx) {
+    }, function(data) {
-        $scope.processTX(tx);
+      $scope.paginate(data);
-      });
-      $scope.txs = txs;
     });
   };
+
+  $scope.paginate = function (data) {
+    $scope.loading = false;
+
+    pagesTotal = data.pagesTotal;
+    pageNum += 1;
+
+    data.txs.forEach(function(tx) {
+      $scope.processTX(tx);
+      $scope.txs.push(tx);
+    });
+  };
+
+  $scope.load = function(from) {
+    $scope.loadedBy = from;
+    $scope.loadMore();
+  };
+
+  $scope.loadMore = function() {
+    if (pageNum < pagesTotal && !$scope.loading) {
+      $scope.loading = true;
+
+      if ($scope.loadedBy === 'address') {
+        $scope.byAddress();
+      }
+      else {
+        $scope.byBlock();
+      }
+    }
+  };
+
   var socket = get_socket($scope);
   socket.on('atx', function(tx) {
     console.log('atx '+tx.txid);

public/js/directives.js

@@ -1 +1,25 @@
 'use strict';
+
+angular.module('insight.address').directive('whenScrolled', ['$window', function($window) {
+  return {
+    link: function(scope, elm, attr) {
+      var pageHeight, clientHeight, scrollPos;
+      $window = angular.element($window);
+
+      var handler = function() {
+        pageHeight = window.document.documentElement.scrollHeight;
+        clientHeight = window.document.documentElement.clientHeight;
+        scrollPos = window.pageYOffset;
+
+        if (pageHeight - (scrollPos + clientHeight) === 0) {
+          scope.$apply(attr.whenScrolled);
+        }
+      };
+
+      $window.on('scroll', handler);
+      scope.$on('$destroy', function() {
+        return $window.off('scroll', handler);
+      });
+    }
+  };
+}]);

public/views/address.html

@@ -1,45 +1,44 @@
 <section data-ng-controller="AddressController" data-ng-init="findOne()">
-  <div class="page-header">
-    <h1>
-      Address
-      <small>Addresses are identifiers which you use to send bitcoins to another person.</small>
-    </h1>
-  </div>
   <div class="row">
-    <div class="col-lg-9">
+    <div class="col-md-3">
-      <table class="table table-striped">
+      <div class="bs-sidebar hidden-print affix  col-gray">
-        <tbody>
+        <div class="text-center m10v">
-        <tr>
+          <qrcode size="200" data="{{address.addrStr}}"></qrcode>
-          <td>Address</td>
+          <h4><span class="glyphicon glyphicon-qrcode"></span> Address</h4>
-          <td><a href="/#!/address/{{address.addrStr}}">{{address.addrStr}}</a></td>
+          <a class="ellipsis" href="/#!/address/{{address.addrStr}}">{{address.addrStr}}</a>
-        </tr>
+        </div>
-        <tr>
-          <td>Total Received</td>
-          <td>{{address.totalReceived}} BTC</td>
-        </tr>
-        <tr>
-          <td>Total Sent</td>
-          <td>{{address.totalSent}} BTC</td>
-        </tr>
-        <tr>
-          <td>Final Balance</td>
-          <td>{{address.balance}} BTC</td>
-        </tr>
-        <tr>
-          <td>No. Transactions</td>
-          <td>{{address.txApperances}}</td>
-        </tr>
 
-        </tbody>
+        <div class="m50v">
-      </table>
+          <h4>Summary</h4>
-    </div>
+          <table class="table">
-    <div class="col-lg-3">
+            <tbody>
-      <qrcode size="200" data="{{address.addrStr}}"></qrcode>
+              <tr>
-    </div>
+                <td class="small">Total Received</td>
-  </div>
+                <td class="address ellipsis text-right">{{address.totalReceived}} BTC</td>
+              </tr>
+              <tr>
+                <td class="small">Total Sent</td>
+                <td class="address ellipsis text-right">{{address.totalSent}} BTC</td>
+              </tr>
+              <tr>
+                <td class="small">Final Balance</td>
+                <td class="address ellipsis text-right">{{address.balance}} BTC</td>
+              </tr>
+              <tr>
+                <td class="small">No. Transactions</td>
+                <td class="address ellipsis text-right">{{address.txApperances}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div> <!-- END OF TRANSACTIONS TABLE -->
+      </div>
+    </div> <!-- END OF COL-MD-3 -->
 
-  <div data-ng-controller="transactionsController" data-ng-init="byAddress(params.addrStr)">
+    <div class="col-md-9">
-    <h2>Transactions <small>Transactions contained within this block</small></h2>
+      <div data-ng-controller="transactionsController" data-ng-init="load('address')">
-    <div data-ng-include src="'/views/transaction/list.html'"></div>
+        <h2>Transactions <small>Transactions contained within this block</small></h2>
-  </div>
+        <div data-ng-include src="'/views/transaction/list.html'" when-scrolled="loadMore()"></div>
+      </div>
+    </div>
+  </div> <!-- END OF ROW -->
 </section>

public/views/block.html

@@ -8,30 +8,29 @@
           </div>
           <h1 data-ng-if="block">Block #{{ block.height }}</h1>
         </div>
-
         <div class="m50v" data-ng-show="!tx.isCoinBase">
           <h4>Hashes</h4>
           <table class="table">
             <tbody>
             <tr>
-              <td> <small>Hash </small></td>
+              <td class="small"> Hash </td>
               <td><a class="address ellipsis" href="/#!/block/{{block.hash}}">{{block.hash}}</a></td>
             </tr>
             <tr>
-              <td><small> Previous Block</small></td>
+              <td class="small"> Previous Block</td>
               <td><a class="address ellipsis" href="/#!/block/{{block.previousblockhash}}">{{block.previousblockhash}}</a></td>
             </tr>
             <tr>
-              <td><small> Next Block</small></td>
+              <td class="small"> Next Block</td>
               <td><a class="address ellipsis" href="/#!/block/{{block.nextblockhash}}">{{block.nextblockhash}}</a></td>
             </tr>
             <tr>
-              <td><small> Merkle Root</small></td>
+              <td class="small">Merkle Root</td>
               <td> <p class="address ellipsis"> {{block.merkleroot}} </p> </td>
             </tr>
             </tbody>
           </table>
-        </div>
+        </div> <!-- END OF TRANSACTIONS TABLE -->
 
       </div>
     </div> <!-- END OF COL-GRAY   -->
@@ -85,9 +84,9 @@
         </div>
       </div><!--  END OF ROW -->
 
-      <div data-ng-controller="transactionsController" data-ng-init="byBlock(params.blockHash)"> 
+      <div data-ng-controller="transactionsController" data-ng-init="load('block')">
         <h2>Transactions <small >Transactions contained within this block</small></h2>
-        <div data-ng-include src="'/views/transaction/list.html'"></div>
+        <div data-ng-include src="'/views/transaction/list.html'" when-scrolled="loadMore()"></div>
       </div>
     </div>
   </div>

public/views/footer.html

@@ -1,6 +1,3 @@
-<div>
+<div class="container">
-  <div class="container">
+  <p class="text-center text-muted"><a href="/">Insight</a></p>
-    <p class="text-center text-muted"><a href="/">Insight</a></p>
-  </div>
 </div>
-

public/views/transaction/list.html

@@ -1,9 +1,9 @@
-<div class="panel panel-default" data-ng-show="!txs.length">
-  <div class="panel-body">
-    Loading...
-  </div>
-</div>
 <div class="alert alert-warning" data-ng-show="txs.length && !txs[0].txid">There are not transactions</div>
 <div class="block-tx fader" data-ng-show="txs && txs[0].txid" data-ng-repeat="tx in txs">
   <div data-ng-include src="'/views/transaction/tx.html'"></div>
 </div>
+<div class="panel panel-default" data-ng-show="!txs.length || loading">
+  <div class="panel-body">
+    Loading...
+  </div>
+</div>