Index Highlighting

app/src/components/transaction/transaction.html

@@ -32,16 +32,25 @@
       </ion-list>
 
       <ion-list [hidden]="tx.isCoinBase">
-        <ion-item *ngFor="let vin of aggregateItems(tx.vin)">
+        <ion-item *ngFor="let vin of aggregateItems(tx.vin); let i = index" [ngClass]="[i === dx ? '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)">
+                  <ion-icon name="arrow-dropleft-circle"></ion-icon>
+                </a>
+              </span>
+              <span>
+                {{ printer(vin) }}
+              </span>
               <p>
                 <a (click)="goToAddress(vin.addr)">{{ vin.addr }}</a>
               </p>
             </div>
             <div [hidden]="!expanded">
               <p *ngIf="vin.confirmations">
-                <b>Confirmations</b> {{vin.confirmations}}</p>
+                <b>Confirmations</b> {{vin.confirmations}}
+              </p>
               <p>
                 <b>Unlocking Script</b>
               </p>
@@ -66,7 +75,7 @@
     </ion-col>
 
     <ion-col col-12 col-md-1 text-center>
-      <ion-icon name="arrow-forward"></ion-icon>
+      <ion-icon name="arrow-forward" class="shiftDown"></ion-icon>
     </ion-col>
 
     <ion-col col-12 col-md-6>
@@ -94,7 +103,14 @@
 
           <div item-end>
             {{ currency.getConvertedNumber(vout.value) | number:'1.0-8' }} {{ currency.currencySymbol }}
-            <span [hidden]="!vout.spentTxId">(S)</span>
+            <!-- <span [hidden]="!vout.spentTxId">(S)</span> -->
+            <span [hidden]="!vout.spentTxId">
+              <!-- <a (click)="goToInput(vout.spentTxId, vout.spentIndex)">(S)</a> -->
+              (S)
+              <a (click)="goToInput(vout.spentTxId, vout.spentIndex)" [hidden]="!expanded">
+                  <ion-icon name="arrow-dropright-circle"></ion-icon>
+              </a>
+            </span>
             <span [hidden]="vout.spentTxId">(U)</span>
           </div>
         </ion-item>
@@ -128,4 +144,4 @@
       </ion-chip>
     </ion-col>
   </ion-row>
-</ion-grid>
+</ion-grid>

app/src/components/transaction/transaction.scss

@@ -9,6 +9,8 @@ transaction {
 
     ion-row {
       border: 1px solid #f3f3f3;
+      margin-top: 10px;
+      margin-bottom: 10px;
 
       &.small {
         font-size: 1.1rem;
@@ -24,11 +26,35 @@ transaction {
 
   ion-icon {
     color: rgba(0, 0, 0, 0.25);
+    margin-right: 5px;
   }
 
+// New Stuff
+
+.shiftDown {
+    padding-top: 1.2em;
+}
+
+.ellipsis {
+  margin-bottom: .7rem;
+  margin-top: 8px;
+}
+
+.unlocking-script {
+  padding-top: .7rem;
+  max-width: 90%;
+}
+
+.locking-script {
+  padding-top: .7rem;
+}
+
+//end
+
   .item,
   .item p {
     font-size: 1.4rem;
+    font-weight: bold;
   }
 
   $transaction-item-boarder-radius: 3px;
@@ -41,6 +67,13 @@ transaction {
     border-bottom-right-radius: $transaction-item-boarder-radius;
   }
 
+  .itemHighlight {
+    background-color: #8dc429;
+  }
+  .itemNoLight {
+    background-color: default;
+  }
+
   .list {
     margin-bottom: 5px;
   }

app/src/components/transaction/transaction.ts

@@ -19,6 +19,7 @@ export class TransactionComponent {
 
   public expanded: boolean = false;
   @Input() public tx: any = {};
+  @Input() public dx?: number;
 
   constructor(private navCtrl: NavController, public currency: CurrencyProvider) {
   }
@@ -37,6 +38,24 @@ export class TransactionComponent {
     });
   }
 
+  public goToInput(txId: string, dxNm: number): void {
+    this.navCtrl.push('input', {
+      'txId': txId,
+      'dxNm': dxNm
+    });
+  }
+
+  public goToOutput(txId: string, dxNm: number): void {
+    this.navCtrl.push('output', {
+      'txId': txId,
+      'dxNm': dxNm
+    });
+  }
+
+  public printer(obj: any): void {
+    console.log(obj);
+  }
+
   public goToAddress(addrStr: string): void {
     this.navCtrl.push('address', {
       'addrStr': addrStr
@@ -48,6 +67,9 @@ export class TransactionComponent {
   }
 
   public aggregateItems(items: Array<any>): Array<any> {
+
+    console.log(this.dx);
+
     if (!items) return [];
 
     let l: number = items.length;

app/src/pages/input/input.html

@@ -0,0 +1,64 @@
+<!--
+  Generated template for the InputPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+
+<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>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"></transaction>
+  </div>
+
+</ion-content>

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

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

app/src/pages/input/input.scss

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

app/src/pages/input/input.ts

@@ -0,0 +1,56 @@
+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 InputPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+ @IonicPage({
+   name: 'input',
+   segment: 'tx/:txId/:dxNm'
+ })
+@Component({
+  selector: 'page-input',
+  templateUrl: 'input.html'
+})
+export class InputPage {
+
+  public loading: boolean = true;
+  private txId: string;
+  public dxNm: number;
+  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'));
+    console.log(this.dxNm);
+  }
+
+  // ionViewDidLoad() {
+  //   console.log('ionViewDidLoad InputPage');
+  // }
+
+  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
+    });
+  }
+
+}

app/src/pages/output/output.html

@@ -0,0 +1,63 @@
+<!--
+  Generated template for the OutputPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<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>Output 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"></transaction>
+  </div>
+
+</ion-content>

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

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

app/src/pages/output/output.scss

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

app/src/pages/output/output.ts

@@ -0,0 +1,52 @@
+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 OutputPage page.
+ *
+ * See http://ionicframework.com/docs/components/#navigation for more info
+ * on Ionic pages and navigation.
+ */
+ @IonicPage({
+   name: 'output',
+   segment: 'tx/:txId/:dxNm'
+ })
+@Component({
+  selector: 'page-output',
+  templateUrl: 'output.html'
+})
+export class OutputPage {
+
+  public loading: boolean = true;
+  private txId: string;
+  public dxNm: number;
+  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'));
+    console.log(this.dxNm);
+  }
+
+  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
+    });
+  }
+
+}