Merge pull request #125 from cmgustavo/bug/02homepage-initial-values

Bug/02homepage initial values

app/controllers/blocks.js

@@ -3,9 +3,10 @@
 /**
  * Module dependencies.
  */
-var mongoose = require('mongoose'),
-    Block = mongoose.model('Block'),
-    common      = require('./common');
+var mongoose  = require('mongoose'),
+    Block     = mongoose.model('Block'),
+    common    = require('./common'),
+    async     = require('async');
 
 
 /**
@@ -47,6 +48,16 @@ exports.blockindex = function(req, res, next, height) {
   });
 };
 
+var getBlock = function(blockhash, cb) {
+  Block.fromHashWithInfo(blockhash, function(err, block) {
+    if (err) {
+      console.log(err);
+      return cb(err);
+    }
+    return cb(err, block.info);
+  });
+};
+
 /**
  * List of blocks by date
  */
@@ -89,13 +100,20 @@ exports.list = function(req, res) {
       if (err) {
         res.status(500).send(err);
       } else {
-        res.jsonp({
-          blocks: blocks,
-          pagination: {
-            next: next,
-            prev: prev,
-            current: dateStr
-          }
+        var blockshash = [];
+        for(var i=0;i<blocks.length;i++) {
+          blockshash.push(blocks[i].hash);
+        }
+        async.mapSeries(blockshash, getBlock, function(err, allblocks) {
+          res.jsonp({
+            blocks: allblocks,
+            length: allblocks.length,
+            pagination: {
+              next: next,
+              prev: prev,
+              current: dateStr
+            }
+          });
         });
       }
     });

app/controllers/transactions.js

@@ -51,6 +51,7 @@ var getTransaction = function(txid, cb) {
  * List of transaction
  */
 exports.list = function(req, res, next) {
+  var limit = req.query.limit || 5;
   var bId = req.query.block;
   var addrStr = req.query.address;
   var page = req.query.pageNum;
@@ -117,5 +118,28 @@ exports.list = function(req, res, next) {
         });
     });
   }
+  else {
+    Transaction
+      .find()
+      .limit(limit)
+      .sort('-time')
+      .exec(function(err, txs) {
+        if (err) {
+          res.status(500).send(err);
+        } else {
+          var txids = [];
+          for(var i=0;i<txs.length;i++) {
+            txids.push(txs[i].txid);
+          }
+
+          async.mapSeries(txids, getTransaction, function(err, alltxs) {
+            res.jsonp({
+              txs: alltxs,
+              length: alltxs.length
+            });
+          });
+        }
+      });
+  }
 
 };

public/js/controllers/header.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('insight.system').controller('HeaderController',
-  function ($scope, Global) {
+  function ($scope, get_socket, Global, Block) {
   $scope.global = Global;
 
   $scope.menu = [
@@ -15,5 +15,23 @@ angular.module('insight.system').controller('HeaderController',
     }
   ];
 
+  var socket = get_socket($scope);
+  socket.emit('subscribe', 'inv');
+
+  var getBlock = function(hash) {
+    Block.get({
+      blockHash: hash
+    }, function(res) {
+      $scope.totalBlocks = res.height;
+    });
+  };
+
+  socket.on('block', function(block) {
+    var blockHash = block.hash.toString();
+    console.log('Update Height');
+    getBlock(blockHash);
+  });
+
+
   $scope.isCollapsed = false;
 });

public/js/controllers/index.js

@@ -3,9 +3,25 @@
 var TRANSACTION_DISPLAYED = 5;
 var BLOCKS_DISPLAYED = 5;
 angular.module('insight.system').controller('IndexController',
-  function($scope, $rootScope, Global, get_socket, Blocks, Transactions) {
+  function($scope, $rootScope, Global, get_socket, Blocks, Block, Transactions, Transaction) {
   $scope.global = Global;
 
+  var getTransaction = function(txid) {
+    Transaction.get({
+      txId: txid
+    }, function(res) {
+      $scope.txs.unshift(res);
+    });
+  };
+
+  var getBlock = function(hash) {
+    Block.get({
+      blockHash: hash
+    }, function(res) {
+      $scope.blocks.unshift(res);
+    });
+  };
+
   var socket = get_socket($scope);
   socket.emit('subscribe', 'inv');
 
@@ -13,19 +29,21 @@ angular.module('insight.system').controller('IndexController',
   $scope.flashMessage = $rootScope.flashMessage || null;
 
   socket.on('tx', function(tx) {
+    var txStr = tx.txid.toString();
     console.log('Transaction received! ' + JSON.stringify(tx));
-    if ($scope.txs.length === TRANSACTION_DISPLAYED) {
+    if (parseInt($scope.txs.length) > parseInt(TRANSACTION_DISPLAYED) - 1) {
       $scope.txs.pop();
     }
-    $scope.txs.unshift(tx);
+    getTransaction(txStr);
   });
 
   socket.on('block', function(block) {
+    var blockHash = block.hash.toString();
     console.log('Block received! ' + JSON.stringify(block));
-      if ($scope.blocks.length === BLOCKS_DISPLAYED) {
-        $scope.blocks.pop();
-      }
-    $scope.blocks.unshift(block);
+    if (parseInt($scope.blocks.length) > parseInt(BLOCKS_DISPLAYED) - 1) {
+      $scope.blocks.pop();
+    }
+    getBlock(blockHash);
   });
 
   $scope.human_since = function(time) {
@@ -38,12 +56,13 @@ angular.module('insight.system').controller('IndexController',
       limit: BLOCKS_DISPLAYED
     }, function(res) {
       $scope.blocks = res.blocks;
+      $scope.blocksLength = res.lenght;
     });
 
-    Transactions.query({
+    Transactions.get({
       limit: TRANSACTION_DISPLAYED
-    }, function(txs) {
-      $scope.txs = txs;
+    }, function(res) {
+      $scope.txs = res.txs;
     });
   };
 

public/views/blocks/list.html

@@ -11,33 +11,47 @@
         <p class="lead text-center m20v">{{pagination.current}}</p>
 
         <div class="m50v">
-          <a class="btn btn-default" href="#!/blocks-date/{{pagination.prev}}"><small>&larr; {{pagination.prev}}</small></a>
+          <a class="btn btn-primary" href="#!/blocks-date/{{pagination.prev}}"><small>&larr; {{pagination.prev}}</small></a>
           <a class="btn btn-primary" href="#!/blocks-date/{{pagination.next}}"><small>{{pagination.next}} &rarr;</small></a>
         </div>
       </div>
     </div>
 
-    <div class="col-md-8">
+    <div class="col-md-9">
       <div class="page-header">
         <h1>
           Blocks
           <small>by date</small>
         </h1>
       </div>
-      <table class="table" data-ng-show="blocks || blocks.length">
+      <table class="table table-hover">
         <thead>
           <tr>
-            <th>Hash</th>
-            <th>Solved at</th>
+            <th>Height</th>
+            <th>Timestamp</th>
+            <th>Transactions</th>
+            <th>Size</th>
+            <th>Confirmations</th>
           </tr>
         </thead>
         <tbody>
-        <tr data-ng-repeat="block in blocks">
-          <td><a href="#!/block/{{block.hash}}">{{block.hash}}</a></td>
-          <td>{{block.time * 1000 | date:'medium'}}</td>
+        <tr data-ng-show="!blocks.length"><td colspan="5">Waiting for blocks...</td></tr>
+        <tr class="fader" data-ng-repeat='b in blocks'>
+          <td>
+            <a href="/#!/block/{{b.hash}}">{{b.height}}</a>
+          </td>
+          <td>{{b.time * 1000 | date:'medium'}}</td>
+          <td>{{b.tx.length}}</td>
+          <td>{{b.size}}</td>
+          <td>{{b.confirmations}}</td>
         </tr>
         </tbody>
       </table>
+      <ul class="pager" data-ng-show="blocks.length">
+        <li class="previous"><a href="#!/blocks-date/{{pagination.prev}}">&larr; {{pagination.prev}}</a></li>
+        <li class="disabled"><a href="#">{{pagination.current}}</a></li>
+        <li class="next"><a href="#!/blocks-date/{{pagination.next}}">{{pagination.next}} &rarr;</a></li>
+      </ul>
     </div>
   </div>
   <h2 class="text-center text-muted" data-ng-hide="!blocks || blocks.length">No blocks yet.</h2>

public/views/header.html

@@ -35,7 +35,7 @@
             <strong> Conn: </strong> {{info.connections}} 
           </i>
           <i class="small">
-            <strong>Height:</strong> {{info.blocks}}
+            <strong>Height:</strong> {{totalBlocks || info.blocks}}
           </i>
         </span>
       </div>

public/views/index.html

@@ -4,21 +4,57 @@
 <section data-ng-controller="IndexController" data-ng-init="index()">
   <div class="container">
     <div class="row">
-      <div class="col-md-6">
-        <h3> New transactions </h3>
-        <div class="panel fader" ng-repeat='tx in txs'>
-          <a class="abreviate" href="#!/tx/{{tx.txid}}">{{tx.txid}}
-            <span class="badge badge-success">{{human_since(tx.time)}}</span>
-          </a>
-        </div>
+      <div class="col-md-7">
+        <h2>Blocks</h2>
+        <table class="table table-hover">
+          <thead>
+            <tr>
+              <th>Height</th>
+              <th>Age</th>
+              <th>Transactions</th>
+              <th>Size</th>
+              <th>Confirmations</th>
+            </tr>
+          </thead>
+          <tbody>
+          <tr data-ng-show="!blocks.length"><td colspan="5">Waiting for blocks...</td></tr>
+          <tr class="fader" data-ng-repeat='b in blocks'>
+            <td>
+              <a href="/#!/block/{{b.hash}}">{{b.height}}</a>
+            </td>
+            <td>{{human_since(b.time)}}</td>
+            <td>{{b.tx.length}}</td>
+            <td>{{b.size}}</td>
+            <td>{{b.confirmations}}</td>
+          </tr>
+          </tbody>
+        </table>
       </div>
-      <div class="col-md-6">
-        <h3> New blocks </h3>
-        <div class="panel fader" ng-repeat='b in blocks'>
-          <a href="#!/block/{{b.hash}}">{{b.hash}}
-            <span class="badge badge-success">{{human_since(b.time)}}</span>
-          </a>
-        </div>
+
+      <div class="col-md-5">
+        <h2>Transactions</h2>
+
+        <table class="table table-hover" style="table-layout: fixed">
+          <thead>
+            <tr>
+              <th>Hash</th>
+              <th>Age</th>
+              <th>Value Out</th>
+              <th>Size</th>
+            </tr>
+          </thead>
+          <tbody>
+          <tr data-ng-show="!txs.length"><td colspan="5">Waiting for transactions...</td></tr>
+          <tr class="fader" data-ng-repeat='tx in txs'>
+            <td>
+              <a class="ellipsis" href="/#!/tx/{{tx.txid}}">{{tx.txid}}</a>
+            </td>
+            <td><span class="ellipsis">{{human_since(tx.time)}}</span></td>
+            <td>{{tx.valueOut}}</td>
+            <td>{{tx.size}}</td>
+          </tr>
+          </tbody>
+        </table>
       </div>
     </div>
   </div>