Merge pull request #106 from colkito/feature/lazyload-transactions

Feature/lazyload transactions

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/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;
 
@@ -16,12 +20,12 @@ angular.module('insight.transactions').controller('transactionsController',
     var tmp = {};
     var u=0;
     // TODO multiple output address
-    // 
+    //
     for(var i=0; i < l; i++) {
 
       var notAddr = false;
 
-      // non standard input 
+      // non standard input
       if (items[i].scriptSig && !items[i].addr) {
         items[i].addr = 'Unparsed address [' + u++  + ']';
         items[i].notAddr = true;
@@ -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';
+'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

@@ -7,7 +7,7 @@
           <h4><span class="glyphicon glyphicon-qrcode"></span> Address</h4>
           <a class="ellipsis" href="/#!/address/{{address.addrStr}}">{{address.addrStr}}</a>
         </div>
-        
+
         <div class="m50v">
           <h4>Summary</h4>
           <table class="table">
@@ -33,11 +33,11 @@
         </div> <!-- END OF TRANSACTIONS TABLE -->
       </div>
     </div> <!-- END OF COL-MD-3 -->
-    
+
     <div class="col-md-9">
-      <div data-ng-controller="transactionsController" data-ng-init="byAddress(params.addrStr)">
+      <div data-ng-controller="transactionsController" data-ng-init="load('address')">
         <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> <!-- END OF ROW -->

public/views/block.html

@@ -33,7 +33,7 @@
         </div> <!-- END OF TRANSACTIONS TABLE -->
 
       </div>
-    </div> <!-- END OF COL-GRAY   -->   
+    </div> <!-- END OF COL-GRAY   -->
 
     <div class="col-md-9">
       <h3>Summary</h3>
@@ -84,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 data-ng-controller="FooterController">
+<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>