Merge pull request #7 from cmgustavo/feature/front-end-with-angularjs

awesome!

app/views/includes/foot.jade

@@ -1,7 +1,7 @@
 #footer
   .container
     p.text-muted Place sticky footer content here.
-        
+
 //script(type='text/javascript', src='/lib/jquery/jquery.min.js')
 //script(type='text/javascript', src='/lib/bootstrap/dist/js/bootstrap.min.js')
 
@@ -23,6 +23,7 @@ script(type='text/javascript', src='/js/directives.js')
 script(type='text/javascript', src='/js/filters.js')
 
 //Application Services
+script(type='text/javascript', src='/js/services/transactions.js')
 script(type='text/javascript', src='/js/services/blocks.js')
 script(type='text/javascript', src='/js/services/global.js')
 script(type='text/javascript', src='/js/services/index.js')
@@ -31,4 +32,5 @@ script(type='text/javascript', src='/js/services/index.js')
 script(type='text/javascript', src='/js/controllers/index.js')
 script(type='text/javascript', src='/js/controllers/header.js')
 script(type='text/javascript', src='/js/controllers/blocks.js')
+script(type='text/javascript', src='/js/controllers/transactions.js')
 script(type='text/javascript', src='/js/init.js')

config/routes.js

@@ -14,7 +14,7 @@ module.exports = function(app) {
   app.get('/last_blocks', blocks.last_blocks);
 
   var transactions = require('../app/controllers/transactions');
-  app.get('/tx/:txid', transactions.show);
+  app.get('/api/tx/:txid', transactions.show);
 
   app.param('txid', transactions.transaction);
 

public/js/app.js

@@ -1,7 +1,8 @@
 'use strict';
 
-angular.module('mystery', ['ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system', 'mystery.index', 'mystery.blocks']);
+angular.module('mystery', ['ngCookies', 'ngResource', 'ngRoute', 'ui.bootstrap', 'ui.route', 'mystery.system', 'mystery.index', 'mystery.blocks', 'mystery.transactions']);
 
 angular.module('mystery.system', []);
 angular.module('mystery.index', []);
 angular.module('mystery.blocks', []);
+angular.module('mystery.transactions', []);

public/js/config.js

@@ -7,6 +7,9 @@ angular.module('mystery').config(['$routeProvider',
     when('/block/:blockHash', {
       templateUrl: 'views/block.html'
     }).
+    when('/tx/:txId', {
+      templateUrl: 'views/transaction.html'
+    }).
     when('/', {
       templateUrl: 'views/index.html'
     }).

public/js/controllers/transactions.js

@@ -0,0 +1,14 @@
+'use strict';
+
+angular.module('mystery.transactions').controller('transactionsController', ['$scope', '$routeParams', '$location', 'Global', 'Transaction', function ($scope, $routeParams, $location, Global, Transaction) {
+  $scope.global = Global;
+
+  $scope.findOne = function() {
+    Transaction.get({
+      txId: $routeParams.txId
+    }, function(tx) {
+      $scope.tx = tx;
+    });
+  };
+}]);
+

public/js/services/transactions.js

@@ -0,0 +1,8 @@
+'use strict';
+
+angular.module('mystery.transactions').factory('Transaction', ['$resource', function($resource) {
+  return $resource('/api/tx/:txId', {
+    txId: '@txId'
+  });
+}]);
+

public/views/block.html

@@ -1,23 +1,73 @@
 <section data-ng-controller="BlocksController" data-ng-init="findOne()">
   <div class="page-header">
-    <h1>Block Page</h1>
+    <h1 data-ng-if="block">Block #{{ block.height }}</h1>
   </div>
+  
+  <h2>Summary</h2>
+  <dl class="dl-horizontal">
+    <dt>Number Of Transactions</dt>
+    <dd>--</dd>
+    <dt>Output Total</dt>
+    <dd>--</dd>
+    <dt>Estimated Transaction Volume</dt>
+    <dd>--</dd>
+    <dt>Transaction Fees</dt>
+    <dd>--</dd>
+    <dt>Height</dt>
+    <dd>{{block.height}}</dd>
+    <dt>Timestamp</dt>
+    <dd>{{block.time}}</dd>
+    <dt>Received Time</dt>
+    <dd>{{block.time}}</dd>
+    <dt>Relayed By</dt>
+    <dd>--</dd>
+    <dt>Difficulty</dt>
+    <dd>{{block.difficulty}}</dd>
+    <dt>Bits</dt>
+    <dd>{{block.bits}}</dd>
+    <dt>Size</dt>
+    <dd>{{block.size}}</dd>
+    <dt>Version</dt>
+    <dd>{{block.version}}</dd>
+    <dt>Nonce</dt>
+    <dd>{{block.nonce}}</dd>
+  </dl>
+  
+  <h2>Hashes</h2>
   <table class="table table-striped">
     <thead>
-      <th>Height</th>
-      <th>Age</th>
-      <th>Transactions</th>
-      <th>Confirmations</th>
-      <th>Size (kB)</th>
+      <th>Hashes</th>
+      <th>&nbsp;</th>
     </thead>
     <tbody>
       <tr>
-        <td>{{block.height}}</td>
-        <td>{{block.time | date:'short'}}</td>
-        <td>{{block.tx.length }}</td>
-        <td>{{block.confirmations}}</td>
-        <td>{{block.size / 1024}}</td>
+        <td>Hash</td>
+        <td><a href="/#!/block/{{block.hash}}">{{block.hash}}</a></td>
+      </tr>
+      <tr>
+        <td>Previous Block</td>
+        <td><a href="/#!/block/{{block.previousblockhash}}">{{block.previousblockhash}}</a></td>
+      </tr>
+      <tr>
+        <td>Next Block(s)</td>
+        <td><a href="/#!/block/{{block.nextblockhash}}">{{block.nextblockhash}}</a></td>
+      </tr>
+      <tr>
+        <td>Merkle Root</td>
+        <td>{{block.merkleroot}}</td>
       </tr>
     </tbody>
   </table>
-</section>
+  
+  <h2>Transactions</h2>
+  <table class="table table-striped">
+    <thead>
+      <th>Hash</th>
+    </thead>
+    <tbody>
+      <tr data-ng-repeat="tx in block.tx">
+        <td><a href="/#!/tx/{{tx}}">{{tx}}</a></td>
+      </tr>
+    </tbody>
+  </table>
+</section>

public/views/index.html

@@ -4,19 +4,13 @@
   </div>
   <table class="table table-striped">
     <thead>
-      <th>Height</th>
-      <th>Age</th>
-      <th>Transactions</th>
-      <th>Confirmations</th>
-      <th>Size (kB)</th>
+      <th>Hash</th>
+      <th>Time</th>
     </thead>
     <tbody>
       <tr data-ng-repeat="block in blocks">
-        <td><a href="#!/block/{{block.hash}}">{{block.height}}</a></td>
+        <td><a href="#!/block/{{block.hash}}">{{block.hash}}</a></td>
         <td>{{block.time | date:'short'}}</td>
-        <td>{{block.tx.length }}</td>
-        <td>{{block.confirmations}}</td>
-        <td>{{block.size / 1024}}</td>
       </tr>
     </tbody>
   </table>

public/views/transaction.html

@@ -0,0 +1,32 @@
+<section data-ng-controller="transactionsController" data-ng-init="findOne()">
+  <div class="page-header">
+    <h1>Transaction <small>View information about a bitcoin transaction</small></h1>
+  </div>
+  <ul>
+    <li>{{tx.txid}}</li>
+    <li>VIN
+      <ul data-ng-repeat="vin in tx.vin">
+        <li>coinbase: {{vin.coinbase}}</li>
+        <li>sequence: {{vin.sequence}}</li>
+        <li>txid: {{vin.txid}}</li>
+        <li>vout: {{vin.vout}}</li>
+      </ul>
+    </li>
+    <li>VOUT
+      <ul data-ng-repeat="vout in tx.vout">
+        <li>value: {{vout.value}}</li>
+        <li>n: {{vout.n}}</li>
+        <li>addresses: {{vin.scriptPubKey}}
+          <ul data-ng-repeat="addr in vout.scriptPubKey.addresses">
+            <li>address: {{addr}}</li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+    <li>Blockhash: <a href="#!/block/{{tx.blockhash}}">{{tx.blockhash}}</a></li>
+    <li>Confirmations: {{tx.confirmations}}</li>
+    <li>Time {{tx.time}}</li>
+    <li>Bloctime {{tx.blocktime}}</li>
+  </ul>
+</section>
+