From 8e7887fa4005dc54cc4474d627044b14b48684c8 Mon Sep 17 00:00:00 2001
From: Matias Alejo Garcia <ematiu@gmail.com>
Date: Mon, 20 Jan 2014 17:39:27 -0300
Subject: [PATCH] isolate TX view

---
 public/views/transaction.html      | 70 +++---------------------------
 public/views/transaction/list.html | 68 +----------------------------
 public/views/transaction/tx.html   | 68 +++++++++++++++++++++++++++++
 3 files changed, 76 insertions(+), 130 deletions(-)
 create mode 100644 public/views/transaction/tx.html

diff --git a/public/views/transaction.html b/public/views/transaction.html
index fe4afeb1..ddc6007c 100644
--- a/public/views/transaction.html
+++ b/public/views/transaction.html
@@ -5,66 +5,7 @@
     </h1>
 
   <div class="block-tx">
-    <div class="line-bot">
-      <a href="/#!/tx/{{tx.txid}}">{{tx.txid}}</a>
-    </div> 
-
-    <div class="row m10b">
-
-      <div class="col-md-5">
-        <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="!tx.isCoinBase">
-          <li>
-            <a class="m10h vm lead glyphicon glyphicon-circle-arrow-left" href="/#!/tx/{{vin.txid}}" alt="Outpoint: {{vin.txid}},{{vin.vout}}" data-toggle="tooltip" title="Outpoint: {{vin.txid}},{{vin.vout}}">
-            </a>
-            <span data-ng-show="!vin.addr">Address could not be parsed</span>  
-            <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>  
-            <span class="pull-right badge">{{vin.value}} BTC</span>
-          </li>
-
-        </ul>
-        <div data-ng-show="tx.isCoinBase">
-          <ul class="list-unstyled" data-ng-repeat="vinn in tx.vin">
-            <li>
-            No Inputs (Newly Generated isCoinBasens)
-            <span class="pull-right badge">{{vinn.reward}} BTC</span>
-            </li>
-          </ul>
-        </div>
-      </div>
-
-      <div class="col-md-2 text-center">
-        <span class="glyphicon glyphicon-chevron-right lead"></span>
-      </div>
-
-      <div class="col-md-5" data-ng-repeat="vout in tx.vout">
-        <div class="row m10b">
-          <div class="col-md-3">
-            <b>{{vout.scriptPubKey.type}}</b>
-          </div>
-          <div class="col-md-9">
-            <ul class="list-unstyled" data-ng-repeat="addr in vout.scriptPubKey.addresses">
-              <li>
-                <a class="ellipsis pull-left" style="width:200px;" href="/#!/address/{{addr}}">{{addr}}</a>
-                <span class="pull-right badge">{{vout.value}} BTC</span>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="line-top">
-      <small class="text-muted">Feeds: {{tx.feeds}}</small>
-      <div class="pull-right">
-        <button data-ng-show="tx.confirmations" type="button" class="btn btn-success">
-          {{tx.confirmations}} Confirmations
-        </button>
-        <button data-ng-show="!tx.confirmations"  type="button" class="btn btn-danger">
-          Unconfirmed Transaction!
-        </button>
-        <button type="button" class="btn btn-primary">{{tx.valueOut}} BTC</button>
-      </div>
-    </div> 
+    <div data-ng-include src="'/views/transaction/tx.html'"></div>
   </div><!--  END OF BLOCK-TX -->
 
   <div class="row m50v">
@@ -81,9 +22,12 @@
           <td class="text-muted text-right">{{tx.time * 1000|date:'medium'}}</td>
         </tr>
         <tr>
-          <td><strong>Block </strong></td>
-          <td class="text-muted text-right"><a href="/#!/block/{{tx.blockhash}}">Block</a></td>
-        </tr>
+          <td><strong>Block </strong>
+          <td class="text-muted text-right">
+
+            <div class="ellipsis">
+              <a href="/#!/block/{{tx.blockhash}}">{{tx.blockhash}}</a>
+            </div>
         </tbody>
       </table>
     </div>
diff --git a/public/views/transaction/list.html b/public/views/transaction/list.html
index f8501c95..a8d35eb1 100644
--- a/public/views/transaction/list.html
+++ b/public/views/transaction/list.html
@@ -1,71 +1,5 @@
 <div data-ng-show="!txs || txs.lenght">Loading...</div>
 <div class="alert alert-warning" data-ng-show="txs && !txs[0].txid">There are not transactions</div>
 <div class="block-tx" data-ng-show="txs && txs[0].txid" data-ng-repeat="tx in txs">
-  <div class="line-bot">
-    <a href="/#!/tx/{{tx.txid}}">{{tx.txid}}</a>
-    <span class="pull-right">{{tx.time * 1000 | date:'medium'}}</span>
-  </div>
-
-  <div class="row">
-    <div class="col-md-5">
-      <div class="ellipsis row" data-ng-show="tx.isCoinBase" data-ng-repeat="vin in tx.vin">
-        <div class="col-md-10">
-          <p class="ellipsis">No Inputs (Newly Generated isCoinBasens)</p>
-        </div>
-        <p class="text-muted pull-right"> <small>{{vin.reward}} BTC</small></p>
-      </div>
-      <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="!tx.isCoinBase">
-        <li class="row">
-          <a class="col-md-1 glyphicon glyphicon-circle-arrow-left" href="/#!/tx/{{vin.txid}}" alt="Outpoint: {{vin.txid}},{{vin.vout}}" data-toggle="tooltip" title="Outpoint: {{vin.txid}},{{vin.vout}}">
-          </a>
-          <div class="col-md-8">
-            <div class="ellipsis">
-              <span data-ng-show="!vin.addr">Address could not be parsed</span>
-              <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>  
-            </div>
-          </div>
-          <p class="text-right text-muted"><small>{{vin.value}} BTC</small></p>
-        </li>
-      </ul>
-    </div>
-
-    <div class="col-md-1 text-center">
-      <span class="glyphicon glyphicon-arrow-right lead">&nbsp;</span>
-    </div>
-
-    <div class="col-md-6">
-      <div class="row">
-        <div class="col-md-3">
-          <div data-ng-repeat="vout in tx.vout">
-            <small data-ng-repeat="address in vout.scriptPubKey.addresses">{{vout.scriptPubKey.type}}</small>
-          </div>
-        </div>
-        <div data-ng-repeat="vout in tx.vout">
-          <div class="col-md-6">
-            <div class="ellipsis">
-              <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses" class="ellipsis">{{address}}</a>
-            </div>
-          </div>
-          <div class="col-md-3">
-            <p class="text-right text-muted"> <small>{{vout.value}} BTC</small></p>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="line-top">
-    <div class="m5v">
-      <div class="pull-right">
-        <button data-ng-show="tx.confirmations" type="button" class="btn btn-success">
-          {{tx.confirmations}} Confirmations
-        </button>
-        <button data-ng-show="!tx.confirmations"  type="button" class="btn btn-danger">
-          Unconfirmed Transaction!
-        </button>
-        <button type="button" class="btn btn-primary">{{tx.valueOut}} BTC</button>
-      </div>
-      <small data-ng-show="!tx.isCoinBase" class="text-muted">Feeds: {{tx.feeds}}</small>
-    </div>
-  </div>
+  <div data-ng-include src="'/views/transaction/tx.html'"></div>
 </div>
diff --git a/public/views/transaction/tx.html b/public/views/transaction/tx.html
new file mode 100644
index 00000000..a48c67b8
--- /dev/null
+++ b/public/views/transaction/tx.html
@@ -0,0 +1,68 @@
+  <div class="line-bot">
+    <a href="/#!/tx/{{tx.txid}}">{{tx.txid}}</a>
+    <span class="pull-right">{{tx.time * 1000 | date:'medium'}}</span>
+  </div>
+
+  <div class="row">
+    <div class="col-md-5">
+      <div class="ellipsis row" data-ng-show="tx.isCoinBase" data-ng-repeat="vin in tx.vin">
+        <div class="col-md-10">
+          <p class="ellipsis">No Inputs (Newly Generated isCoinBasens)</p>
+        </div>
+        <p class="text-muted pull-right"> <small>{{vin.reward}} BTC</small></p>
+      </div>
+      <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="!tx.isCoinBase">
+        <li class="row">
+          <a class="col-md-1 glyphicon glyphicon-circle-arrow-left" href="/#!/tx/{{vin.txid}}" alt="Outpoint: {{vin.txid}},{{vin.vout}}" tooltip="Outpoint: {{vin.txid}},{{vin.vout}}">
+          </a>
+          <div class="col-md-8">
+            <div class="ellipsis">
+              <span data-ng-show="!vin.addr">Address could not be parsed</span>
+              <a data-ng-show="vin.addr" href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>  
+            </div>
+          </div>
+          <p class="text-right text-muted"><small>{{vin.value}} BTC</small></p>
+        </li>
+      </ul>
+    </div>
+
+    <div class="col-md-1 text-center">
+      <span class="glyphicon glyphicon-arrow-right lead">&nbsp;</span>
+    </div>
+
+    <div class="col-md-6">
+      <div class="row">
+        <div class="col-md-3">
+          <div data-ng-repeat="vout in tx.vout">
+            <small data-ng-repeat="address in vout.scriptPubKey.addresses">{{vout.scriptPubKey.type}}</small>
+          </div>
+        </div>
+        <div data-ng-repeat="vout in tx.vout">
+          <div class="col-md-6">
+            <div class="ellipsis">
+              <a href="/#!/address/{{address}}" data-ng-repeat="address in vout.scriptPubKey.addresses" class="ellipsis">{{address}}</a>
+            </div>
+          </div>
+          <div class="col-md-3">
+            <p class="text-right text-muted"> <small>{{vout.value}} BTC</small></p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="line-top">
+    <div class="m5v">
+      <div class="pull-right">
+        <button data-ng-show="tx.confirmations" type="button" class="btn btn-success">
+          {{tx.confirmations}} Confirmations
+        </button>
+        <button data-ng-show="!tx.confirmations"  type="button" class="btn btn-danger">
+          Unconfirmed Transaction!
+        </button>
+        <button type="button" class="btn btn-primary">{{tx.valueOut}} BTC</button>
+      </div>
+      <small data-ng-show="!tx.isCoinBase" class="text-muted">Feeds: {{tx.feeds}}</small>
+    </div>
+  </div>
+