web-ui: Display accumulated total value for input and output on detail transactions

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">

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);