From 507de91fe50e5101345f821cb314532c9e028dd2 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Fri, 10 Jan 2014 01:55:47 -0300
Subject: [PATCH] Transaction Page: look and feel. Parser and show data from
 API

---
 public/views/transaction.html | 121 ++++++++++++++++++++++++++--------
 1 file changed, 95 insertions(+), 26 deletions(-)

diff --git a/public/views/transaction.html b/public/views/transaction.html
index b5c519b..e37226e 100644
--- a/public/views/transaction.html
+++ b/public/views/transaction.html
@@ -1,32 +1,101 @@
 <section data-ng-controller="transactionsController" data-ng-init="findOne()">
   <div class="page-header">
-    <h1>Transaction <small>View information about a bitcoin transaction</small></h1>
+    <h1>
+      <span class="glyphicon glyphicon-transfer">&nbsp;</span> 
+      <a href="/#!/tx/{{tx.txid}}" title="{{tx.txid}}">Transaction</a> 
+      <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>
+
+  <table class="table table-striped">
+    <thead>
+      <tr>
+        <th>Input</th>
+        <th>&nbsp;</th>
+        <th>Output</th>
+      </tr>
+    </thead>
+    <tbody>
+    <tr>
+      <td width="45%"> 
+        <ul class="list-unstyled" data-ng-repeat="vin in tx.vin" data-ng-show="!tx.isCoinBase">
+          <li><a href="/#!/address/{{vin.addr}}">{{vin.addr}}</a>  <span class="pull-right badge">{{vin.value}} BTC</span></li>
+        </ul>
+        <div data-ng-show="tx.isCoinBase">
+          No Inputs (Newly Generated isCoinBasens)
+        </div>
+      </td>
+      <td width="10%" style="text-align: center;"><span class="glyphicon glyphicon-chevron-right">&nbsp;</span></td>
+      <td width="45%">
+        <div data-ng-repeat="vout in tx.vout">
+          <ul class="list-unstyled" data-ng-repeat="addr in vout.scriptPubKey.addresses">
+            <li><a href="/#!/address/{{addr}}">{{addr}}</a> <span class="pull-right badge">{{vout.value}} BTC</span></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>
+        </div>
+      </td>
+    </tr>
+    </tbody>
+    <tfoot>
+      <tr>
+        <td colspan="3" style="text-align: right;">
+          <button type="button" class="btn btn-primary">{{tx.confirmations}} Confirmations</button> 
+          <button type="button" class="btn btn-success">{{tx.valueOut}} BTC</button>
+        </td>
+      </tr>
+    </tfoot>
+  </table>
+
+  <div class="row">
+    <div class="col-md-6">
+      <div class="panel panel-default">
+        <div class="panel-heading">
+          <h3 class="panel-title">Summary</h3>
+        </div>
+        <div class="panel-body">
+          <table class="table table-striped">
+            <tbody>
+            <tr>
+              <td>Size</td>
+              <td>{{tx.size}} (bytes)</td>
+            </tr>
+            <tr>
+              <td>Received Time</td>
+              <td>{{tx.time * 1000|date:'medium'}}</td>
+            </tr>
+            <tr>
+              <td>Reward From Block</td>
+              <td><a href="/#!/block/{{tx.height}}">Need height to show (it links to block page)</a></td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+    <div class="col-md-6">
+      <div class="panel panel-default" data-ng-show="!tx.isCoinBase">
+        <div class="panel-heading">
+          <h3 class="panel-title">Inputs and Outputs</h3>
+        </div>
+        <div class="panel-body">
+          <table class="table table-striped">
+            <tbody>
+            <tr>
+              <td>Total Input</td>
+              <td>{{tx.valueIn}} BTC</td>
+            </tr>
+            <tr>
+              <td>Total Output</td>
+              <td>{{tx.valueOut}} BTC</td>
+            </tr>
+            <tr>
+              <td>Fees</td>
+              <td>{{tx.feeds}} BTC</td>
+            </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
 </section>