Merge pull request bitpay#378 from cmgustavo/bug/01performance-txs-list

Bug/01performance txs list
slowfx · Feb 19, 2014 · b53b2f0 · b53b2f0
2 parents 467629b + 0f7ad7b
commit b53b2f0
Show file tree

Hide file tree

Showing 9 changed files with 265 additions and 192 deletions.
diff --git a/app/views/layouts/default.jade b/app/views/layouts/default.jade
@@ -1,5 +1,5 @@
 doctype
-html(lang='en', data-ng-app='insight')
+html(lang='en', data-ng-app='insight' data-ng-csp)
   include ../includes/head
   body
     #wrap

diff --git a/public/src/css/common.css b/public/src/css/common.css
@@ -1,5 +1,7 @@
 /* Sticky footer styles
 -------------------------------------------------- */
+@charset "UTF-8";
+
 html,
 body {
   color: #373D42;
@@ -13,6 +15,12 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: 'Ubuntu', sans-serif;
 }
 
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak],
+.ng-cloak, .x-ng-cloak,
+.ng-hide {
+  display: none !important;
+}
+
 /* Styling for the ngProgress itself */
 #ngProgress {
   background-color: #6C9032 !important;

diff --git a/public/src/js/filters.js b/public/src/js/filters.js
@@ -1 +1,9 @@
-'use strict';
+'use strict';
+
+angular.module('insight')
+  .filter('startFrom', function() {
+    return function(input, start) {
+      start = +start; //parse to int
+      return input.slice(start);
+    }
+});
diff --git a/public/views/address.html b/public/views/address.html
@@ -3,55 +3,60 @@
   <div class="row">
     <div class="col-xs-12 col-gray col-gray-fixed">
       <h1 class="text-center">Address</h1>
-      <div class="text-center">
-        <qrcode size="160" data="{{address.addrStr}}"></qrcode>
-        <h4>{{$root.currency.getConvertion(address.balance)}}</h4>
-      </div>
-      <div class="m10v">
-        <button class="pull-right btn-copy" clip-copy="address.addrStr"></button>
-        <a class="ellipsis" href="/address/{{address.addrStr}}">{{address.addrStr}}</a>
-      </div>
-      <div class="m20v">
-        <h4>Summary</h4>
-        <h5>Confirmed</h5>
-        <table class="table">
-          <tbody>
-          <tr>
-            <td class="small">Total Received</td>
-            <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalReceived)}}</td>
-          </tr>
-          <tr>
-            <td class="small">Total Sent</td>
-            <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalSent)}}</td>
-          </tr>
-          <tr>
-            <td class="small">Final Balance</td>
-            <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.balance)}}</td>
-          </tr>
-          <tr>
-            <td class="small">No. Transactions</td>
-            <td class="address ellipsis text-right">{{address.txApperances}}</td>
-          </tr>
-         </tbody>
-        </table>
-        <div data-ng-show="address.unconfirmedTxApperances">
-          <h5>Unconfirmed</h5>
-          <table class="table">
+      <div class="m20v text-center text-muted" data-ng-if="!address.addrStr">
+        <span>Loading Address Information...</span>
+     </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="address.addrStr">
+        <div class="text-center">
+          <qrcode size="160" data="{{address.addrStr}}"></qrcode>
+          <h4>{{$root.currency.getConvertion(address.balance)}}</h4>
+        </div>
+        <div class="m10v">
+          <button class="pull-right btn-copy" clip-copy="address.addrStr"></button>
+          <a class="ellipsis" href="/address/{{address.addrStr}}">{{address.addrStr}}</a>
+        </div>
+        <div class="m20v">
+          <h4>Summary</h4>
+          <h5>Confirmed</h5>
+          <table class="table ng-cloak" data-ng-hide="!address.addrStr" data-ng-cloak>
             <tbody>
             <tr>
-              <td class="small">Unconfirmed Txs Balance</td>
-              <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.unconfirmedBalance)}}</td>
+              <td class="small">Total Received</td>
+              <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalReceived)}}</td>
+            </tr>
+            <tr>
+              <td class="small">Total Sent</td>
+              <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.totalSent)}}</td>
+            </tr>
+            <tr>
+              <td class="small">Final Balance</td>
+              <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.balance)}}</td>
             </tr>
             <tr>
               <td class="small">No. Transactions</td>
-              <td class="address ellipsis text-right">{{address.unconfirmedTxApperances}}</td>
+              <td class="address ellipsis text-right">{{address.txApperances}}</td>
             </tr>
-
-          </tbody>
+            </tbody>
           </table>
-        </div>
-
-      </div> <!-- END OF TRANSACTIONS TABLE -->
+          <div data-ng-show="address.unconfirmedTxApperances">
+            <h5>Unconfirmed</h5>
+            <table class="table">
+              <tbody>
+              <tr>
+                <td class="small">Unconfirmed Txs Balance</td>
+                <td class="address ellipsis text-right">{{$root.currency.getConvertion(address.unconfirmedBalance)}}</td>
+              </tr>
+              <tr>
+                <td class="small">No. Transactions</td>
+                <td class="address ellipsis text-right">{{address.unconfirmedTxApperances}}</td>
+              </tr>
+
+              </tbody>
+            </table>
+          </div>
+
+        </div> <!-- END OF TRANSACTIONS TABLE -->
+      </div>
       <div data-ng-include src="'/views/includes/currency.html'"></div>
     </div> <!-- END OF COL-MD-3 -->
     <div class="col-xs-12 col-md-9 col-md-offset-3">
@@ -62,3 +67,4 @@ <h2>Transactions <small>Transactions for this address</small></h2>
     </div>
   </div> <!-- END OF ROW -->
 </section>
+
diff --git a/public/views/block.html b/public/views/block.html
@@ -3,18 +3,22 @@
   <div class="row">
     <div class="col-xs-12 col-gray col-gray-fixed">
       <h1 class="text-center">Block</h1>
-      <div class="block-id">
-        <span class="glyphicon glyphicon-th"></span>
-        <h2 data-ng-if="block">#{{block.height}}</h2>
-      </div>
-      <div class="m10v">
-        <button class="pull-right btn-copy" clip-copy="block.hash"></button>
-        <a class="ellipsis" href="/block/{{block.hash}}">{{block.hash}}</a>
-      </div>
-      <div class="m20v" data-ng-show="!tx.isCoinBase">
-        <h4>Hashes</h4>
-        <table class="table" style="table-layout: fixed">
-          <tbody class="small">
+      <div class="m20v text-center text-muted" data-ng-if="!block.hash">
+        <span>Loading Block...</span>
+     </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="block.hash">
+        <div class="block-id">
+          <span class="glyphicon glyphicon-list-alt"></span>
+          <h2 data-ng-if="block">#{{block.height}}</h2>
+        </div>
+        <div class="m10v">
+          <button class="pull-right btn-copy" clip-copy="block.hash"></button>
+          <a class="ellipsis" href="/block/{{block.hash}}">{{block.hash}}</a>
+        </div>
+        <div class="m20v" data-ng-show="!tx.isCoinBase">
+          <h4>Hashes</h4>
+          <table class="table" style="table-layout: fixed">
+            <tbody class="small">
             <tr data-ng-show="block.previousblockhash">
               <td> Previous Block</td>
               <td class="text-right"><a href="/block/{{block.previousblockhash}}">{{block.height-1}}</a></td>
@@ -23,15 +27,21 @@ <h4>Hashes</h4>
               <td> Next Block</td>
               <td class="text-right"><a href="/block/{{block.nextblockhash}}">{{block.height+1}}</a></td>
             </tr>
-          </tbody>
-        </table>
-      </div> <!-- END OF TRANSACTIONS TABLE -->
+            </tbody>
+          </table>
+        </div> <!-- END OF TRANSACTIONS TABLE -->
+      </div>
       <div data-ng-include src="'/views/includes/currency.html'"></div>
     </div> <!-- END OF COL-GRAY   -->
 
     <div class="col-xs-12 col-md-9 col-md-offset-3">
       <h2>Summary</h2>
-      <div class="row">
+      <div class="progress progress-striped active" data-ng-if="!block.hash">
+        <div class="progress-bar progress-bar-info" style="width: 100%">
+          <span>Loading Block Details...</span>
+        </div>
+      </div>
+      <div class="row ng-cloak" data-ng-cloak data-ng-if="block.hash">
         <div class="col-md-6">
           <table class="table">
             <tbody>
@@ -106,3 +116,4 @@ <h2>Transactions <small >Transactions contained within this block</small></h2>
   </div>
 
 </section>
+
diff --git a/public/views/block_list.html b/public/views/block_list.html
@@ -8,18 +8,22 @@
           <h3>Blocks <br> mined on:</h3>
         </div>
       </div>
-      <p class="lead text-center m20v">
+      <div class="m20v text-center text-muted" data-ng-if="!pagination.current">
+        <span>Loading Selected Date...</span>
+      </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="pagination.current">
+        <p class="lead text-center m20v">
         {{pagination.current}} UTC
         <a href="#" class="btn btn-primary btn-xs" datepicker-popup show-button-bar="false" data-ng-click="openCalendar($event)" data-ng-model="dt" is-open="opened" data-ng-required="true"><span class="glyphicon glyphicon-calendar"></span></a>
-      </p>
-      <p class="lead text-center m20v"  data-ng-show="loading">&nbsp;</p>
-      <p class="text-center m20v"  data-ng-show="pagination.isToday && !loading">Today</p>
-      <p class="text-center m20v"  data-ng-show="!pagination.isToday && !loading">{{humanSince(pagination.currentTs)}}</p>
-      <p class="text-center m20v"  data-ng-show="loading">&nbsp;</p>
-
-      <div class="m50v text-center">
-        <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}}" data-ng-show="!pagination.isToday"><small>{{pagination.next}} &rarr;</small></a>
+        </p>
+        <p class="lead text-center m20v"  data-ng-show="loading">&nbsp;</p>
+        <p class="text-center m20v"  data-ng-show="pagination.isToday && !loading">Today</p>
+        <p class="text-center m20v"  data-ng-show="!pagination.isToday && !loading">{{humanSince(pagination.currentTs)}}
+        <p class="text-center m20v"  data-ng-show="loading">&nbsp;</p>
+        <div class="m50v text-center">
+          <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}}" data-ng-show="!pagination.isToday"><small>{{pagination.next}} &rarr;</small></a>
+        </div>
       </div>
     </div>
     <div class="col-xs-12 col-md-9 col-md-offset-3">
@@ -56,3 +60,4 @@ <h1>
   </div>
   <h2 class="text-center text-muted" data-ng-show="!blocks.length && !loading">No blocks yet.</h2>
 </section>
+
diff --git a/public/views/transaction.html b/public/views/transaction.html
@@ -1,49 +1,60 @@
 <div data-ng-include src="'/views/includes/connection.html'"></div>
 <section data-ng-controller="transactionsController" data-ng-init="findThis()">
-<div class="row">
-  <div class="col-xs-12 col-gray col-gray-fixed">
-    <h1 class="text-center">Transaction</h1>
-    <div class="tx-id">
-      <span class="glyphicon glyphicon-transfer"></span>
-    </div>
-    <div class="m10v">
-      <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
-      <div class="ellipsis">
-        <a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
+
+  <div class="row ng-cloak" data-ng-cloak data-ng-if="tx.txid">
+    <div class="col-xs-12 col-gray col-gray-fixed">
+      <h1 class="text-center">Transaction</h1>
+      <div class="m20v text-center text-muted" data-ng-if="!tx.txid">
+        <span>Loading Transaction...</span>
       </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid">
+        <div class="tx-id">
+          <span class="glyphicon glyphicon-retweet"></span>
+        </div>
+        <div class="m10v">
+          <button class="btn-copy pull-right" clip-copy="tx.txid"></button>
+          <div class="ellipsis">
+            <a class="txid" href="/tx/{{tx.txid}}">{{tx.txid}}</a>
+          </div>
+        </div>
+        <h4>Summary</h4>
+        <table class="table" style="table-layout: fixed">
+          <tbody>
+          <tr>
+            <td><strong> Size </strong></td>
+            <td class="text-muted text-right">{{tx.size}} (bytes)</td>
+          </tr>
+          <tr>
+            <td><strong>Received Time </strong></td>
+            <td data-ng-show="tx.firstSeenTs" class="text-muted text-right">{{tx.firstSeenTs * 1000|date:'medium'}}</td>
+            <td data-ng-show="!tx.firstSeenTs" class="text-muted text-right">N/A</td>
+          </tr>
+          <tr>
+            <td><strong>Mined Time </strong></td>
+            <td data-ng-show="tx.time" class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
+            <td data-ng-show="!tx.time" class="text-muted text-right">N/A</td>
+          </tr>
+
+          </tbody>
+        </table>
+      </div>
+      <div data-ng-include src="'/views/includes/currency.html'"></div>
     </div>
-    <h4>Summary</h4>
-    <table class="table" style="table-layout: fixed">
-      <tbody>
-      <tr>
-        <td><strong> Size </strong></td>
-        <td class="text-muted text-right">{{tx.size}} (bytes)</td>
-      </tr>
-      <tr>
-        <td><strong>Received Time </strong></td>
-        <td data-ng-show="tx.firstSeenTs" class="text-muted text-right">{{tx.firstSeenTs * 1000|date:'medium'}}</td>
-        <td data-ng-show="!tx.firstSeenTs" class="text-muted text-right">N/A</td>
-      </tr>
-      <tr>
-        <td><strong>Mined Time </strong></td>
-        <td data-ng-show="tx.time" class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
-        <td data-ng-show="!tx.time" class="text-muted text-right">N/A</td>
-      </tr>
-
-      </tbody>
-    </table>
-    <div data-ng-include src="'/views/includes/currency.html'"></div>
-  </div>
-  <div class="col-xs-12 col-md-9 col-md-offset-3">
-    <h2>
-      Details
-      <small>View information about a bitcoin transaction</small>
-    </h2>
-    <div class="block-tx">
-      <div data-ng-include src="'/views/transaction/tx.html'"></div>
-    </div>
-    <div data-ng-show="!tx.isCoinBase">
-      <h2>Inputs and Outputs</h2>
+    <div class="col-xs-12 col-md-9 col-md-offset-3">
+      <h2>
+        Details
+        <small>View information about a bitcoin transaction</small>
+      </h2>
+      <div class="progress progress-striped active" data-ng-if="!tx.txid">
+        <div class="progress-bar progress-bar-info" style="width: 100%">
+          <span>Loading Transaction Details...</span>
+        </div>
+      </div>
+      <div class="block-tx ng-cloak" data-ng-cloak data-ng-if="tx.txid">
+        <div data-ng-include src="'/views/transaction/tx.html'"></div>
+      </div>
+      <div class="ng-cloak" data-ng-cloak data-ng-if="tx.txid && !tx.isCoinBase">
+        <h2>Inputs and Outputs</h2>
         <table class="table">
           <tbody>
           <tr>
@@ -60,6 +71,8 @@ <h2>Inputs and Outputs</h2>
           </tr>
           </tbody>
         </table>
+      </div>
     </div>
   </div>
 </section>
+
diff --git a/public/views/transaction/list.html b/public/views/transaction/list.html
@@ -4,6 +4,6 @@
 </div>
 <div class="progress progress-striped active" data-ng-show="loading">
   <div class="progress-bar progress-bar-info" style="width: 100%">
-    <span>Loading...</span>
+    <span>Loading Transactions...</span>
   </div>
 </div>