added index highlighting on input-output pages

app/src/components/transaction/transaction.html

@@ -32,14 +32,14 @@
       </ion-list>
 
       <ion-list [hidden]="tx.isCoinBase">
-        <ion-item *ngFor="let vin of aggregateItems(tx.vin); let i = index" [ngClass]="[i === dx ? 'itemHighlight' : 'itemNoLight']">
+        <ion-item *ngFor="let vin of aggregateItems(tx.vin); let i = index" [ngClass]="[i === dx && dr === '<' ? 'itemHighlight' : 'itemNoLight']">
           <div>
             <div class="ellipsis">
-              <span *ngIf="vin.items[dx] !== undefined && vin.items[dx].txid" [hidden]="!expanded">
-                <a (click)="goToOutput(vin.items[dx].txid, dx)">
+              <!-- <span *ngIf="vin.items[dx] !== undefined && vin.items[dx].txid" [hidden]="!expanded">
+                <a (click)="goToOutput(vin.items[dx].txid, vin.items[dx].vout)">
                   <ion-icon name="arrow-dropleft-circle"></ion-icon>
                 </a>
-              </span>
+              </span> -->
               <span>
                 {{ printer(vin) }}
               </span>
@@ -56,11 +56,18 @@
               </p>
               <div *ngFor="let item of vin.items">
                 <div *ngIf="item.scriptSig">
-                  <div *ngFor="let scriptSig of item.scriptSig.asm | split:' '">
+
+                  <!-- <div *ngFor="let scriptSig of item.scriptSig.asm"> -->
+
                     <div class="unlocking-script">
-                      <p>{{ scriptSig }}</p>
+                        <a (click)="goToOutput(item.txid, item.vout)">
+                            <ion-icon name="arrow-dropleft-circle"></ion-icon>
+                          </a>
+                      <p>{{ item.scriptSig.asm }}</p>
                     </div>
-                  </div>
+
+                  <!-- </div> -->
+                  
                 </div>
               </div>
             </div>
@@ -80,7 +87,7 @@
 
     <ion-col col-12 col-md-6>
       <ion-list>
-        <ion-item *ngFor="let vout of tx.vout">
+        <ion-item *ngFor="let vout of tx.vout; let i = index" [ngClass]="[i === dx && dr === '>' ? 'itemHighlight' : 'itemNoLight']">
           <div>
             <div class="ellipsis">
               <p>

app/src/components/transaction/transaction.ts

@@ -19,6 +19,7 @@ export class TransactionComponent {
 
   public expanded: boolean = false;
   @Input() public tx: any = {};
+  @Input() public dr?: string;
   @Input() public dx?: number;
 
   constructor(private navCtrl: NavController, public currency: CurrencyProvider) {
@@ -39,15 +40,17 @@ export class TransactionComponent {
   }
 
   public goToInput(txId: string, dxNm: number): void {
-    this.navCtrl.push('input', {
+    this.navCtrl.push('input-output', {
       'txId': txId,
+      'dir': '<',
       'dxNm': dxNm
     });
   }
 
   public goToOutput(txId: string, dxNm: number): void {
-    this.navCtrl.push('output', {
+    this.navCtrl.push('input-output', {
       'txId': txId,
+      'dir': '>',
       'dxNm': dxNm
     });
   }
@@ -68,7 +71,6 @@ export class TransactionComponent {
 
   public aggregateItems(items: Array<any>): Array<any> {
 
-    console.log(this.dx);
 
     if (!items) return [];
 

app/src/pages/input-output/input-output.html

@@ -0,0 +1,59 @@
+<ion-header>
+    <head-nav [title]="'Transaction'"></head-nav>
+  </ion-header>
+  
+  
+  <ion-content padding>
+    <div *ngIf="loading">
+      <ion-spinner name="crescent"></ion-spinner>
+    </div>
+  
+    <div *ngIf="!loading" class="page-content">
+      <h1 [hidden]=" dxNm !== null && dir !== '>' ">Output Transaction | Index #{{ dxNm }}</h1>
+      <h1 [hidden]=" dxNm !== null && dir !== '<' ">Input Transaction | Index #{{ dxNm }}</h1>
+      <p class="item-hash">
+        <b>Transaction Hash</b> {{ tx.txid }}
+      </p>
+      <br><br>
+      <h2>Summary</h2>
+  
+      <ion-list class="list--summary">
+        <ion-item>
+          Size
+          <ion-note item-end>
+            {{ tx.size }} (bytes)
+          </ion-note>
+        </ion-item>
+        <ion-item>
+          Fee Rate
+          <ion-note item-end>
+            {{ (tx.fees / tx.size) * 1E8 | number:'1.0-8' }} sats/byte
+          </ion-note>
+        </ion-item>
+        <ion-item>
+          Received Time
+          <ion-note item-end>
+            {{ tx.time * 1000 | date:'medium' }}
+          </ion-note>
+        </ion-item>
+        <ion-item>
+          Mined Time
+          <ion-note item-end>
+            {{ tx.blocktime * 1000 | date:'medium' }}
+          </ion-note>
+        </ion-item>
+        <ion-item>
+          Included in Block
+          <ion-note item-end>
+            <a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
+          </ion-note>
+        </ion-item>
+      </ion-list>
+      <br>
+      <h2>Details</h2>
+  
+      <transaction [tx]="tx" [dx]="dxNm" [dr]="dir"></transaction>
+    </div>
+  
+  </ion-content>
+  

app/src/pages/input-output/input-output.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { InputOutputPage } from './input-output';
+import { TransactionComponentModule } from '../../components/transaction/transaction.module';
+import { HeadNavComponentModule } from '../../components/head-nav/head-nav.module';
+
+@NgModule({
+  declarations: [
+    InputOutputPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(InputOutputPage),
+    TransactionComponentModule,
+    HeadNavComponentModule
+  ],
+  exports: [
+    InputOutputPage
+  ]
+})
+export class InputOutputPageModule {}

app/src/pages/input-output/input-output.scss

@@ -0,0 +1,3 @@
+page-input-output {
+
+}

app/src/pages/input-output/input-output.ts

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { Http } from '@angular/http';
+import { ApiProvider } from '../../providers/api/api';
+
+/**
+ * Generated class for the InputOutputPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+@IonicPage({
+  name: 'input-output',
+  segment: 'tx/:txId/:dir/:dxNm'
+})
+@Component({
+  selector: 'page-input-output',
+  templateUrl: 'input-output.html',
+})
+export class InputOutputPage {
+
+  public loading: boolean = true;
+  private txId: string;
+  public dxNm: number;
+  public dir: string;
+  public tx: any = {};
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, private api: ApiProvider) {
+    this.txId = navParams.get('txId');
+    this.dxNm = Number(navParams.get('dxNm'));
+    this.dir = navParams.get('dir');
+  }
+
+  public ionViewDidLoad(): void {
+    this.http.get(this.api.apiPrefix + 'tx/' + this.txId).subscribe(
+      (data) => {
+        this.tx = JSON.parse(data['_body']);
+        this.loading = false;
+      },
+      (err) => {
+        console.log('err is', err);
+        this.loading = false;
+      }
+    );
+  }
+
+  public goToBlock(blockHash: string): void {
+    this.navCtrl.push('block-detail', {
+      'blockHash': blockHash
+    });
+  }
+
+}