From 63bb70502d8f49226deb950a303a8e3607f78ded Mon Sep 17 00:00:00 2001
From: jonsadev <jonsalazar99@hotmail.com>
Date: Fri, 11 Jan 2019 12:15:33 -0700
Subject: [PATCH] web-ui: Display accumulated total value for input and output
 on detail transactions

---
 .../transaction-details.component.html                | 11 +++++++----
 .../transaction-details.component.ts                  |  4 ++++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/web-ui/src/app/components/transaction-details/transaction-details.component.html b/web-ui/src/app/components/transaction-details/transaction-details.component.html
index a2b2667d..d769aafc 100644
--- a/web-ui/src/app/components/transaction-details/transaction-details.component.html
+++ b/web-ui/src/app/components/transaction-details/transaction-details.component.html
@@ -46,13 +46,13 @@
       <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5">
         <table class="table table-condensed table-bordered table-striped table-hover">
           <thead>
-            <tr *ngIf="transaction.input == null">
+            <tr *ngIf="transaction.input == null || transaction.input.length == 0">
               <th class="col-xs-4 col-sm-4 col-md-3 col-lg-3">{{'label.noInput' | translate}}</th>
               <th class="col-xs-5 col-sm-5 col-md-4 col-lg-4"></th>
             </tr>
-            <tr *ngIf="transaction.input != null">
+            <tr *ngIf="transaction.input != null && transaction.input.length != 0">
               <th class="col-xs-4 col-sm-4 col-md-3 col-lg-3">{{'label.from' | translate}}</th>
-              <th class="col-xs-5 col-sm-5 col-md-4 col-lg-4"></th>
+              <th class="col-xs-5 col-sm-5 col-md-4 col-lg-4">{{ getTotal(collapsedInput) | explorerCurrency }}</th>
             </tr>
           </thead>
 
@@ -78,7 +78,10 @@
             <!-- Output -->
             <tr>
               <td><strong>{{'label.output' | translate}}</strong></td>
-              <td></td>
+              <td *ngIf="transaction.output == null || transaction.output.length == 0"></td>
+              <th *ngIf="transaction.output != null && transaction.output.length != 0">
+                  {{ getTotal(collapsedOutput) | explorerCurrency }}
+              </th>
             </tr>
             <tr *ngFor="let item of collapsedOutput">
               <td *ngIf="count(item.address, transaction.output) != 1">
diff --git a/web-ui/src/app/components/transaction-details/transaction-details.component.ts b/web-ui/src/app/components/transaction-details/transaction-details.component.ts
index 3a8890ef..5eac8fd2 100644
--- a/web-ui/src/app/components/transaction-details/transaction-details.component.ts
+++ b/web-ui/src/app/components/transaction-details/transaction-details.component.ts
@@ -73,6 +73,10 @@ export class TransactionDetailsComponent implements OnInit {
       .length;
   }
 
+  getTotal(rows: TransactionValue[]): number {
+    return rows.map((row) => row.value).reduce((a, b) => a + b);
+  }
+
   getFee(tx: Transaction): number {
     const vout = tx.output.map(t => t.value).reduce((a, b) => a + b, 0);
     return Math.max(0, this.getVIN(tx) - vout);