Index Highlighting
This commit is contained in:
Ash Bhimasani
parent
ed642d1ff7
commit
7bdd0fa187
@ -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>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
64
app/src/pages/input/input.html
Normal file
64
app/src/pages/input/input.html
Normal file
@ -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>
|
||||
20
app/src/pages/input/input.module.ts
Normal file
20
app/src/pages/input/input.module.ts
Normal file
@ -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 {}
|
||||
3
app/src/pages/input/input.scss
Normal file
3
app/src/pages/input/input.scss
Normal file
@ -0,0 +1,3 @@
|
||||
page-input {
|
||||
|
||||
}
|
||||
56
app/src/pages/input/input.ts
Normal file
56
app/src/pages/input/input.ts
Normal file
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
63
app/src/pages/output/output.html
Normal file
63
app/src/pages/output/output.html
Normal file
@ -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>
|
||||
20
app/src/pages/output/output.module.ts
Normal file
20
app/src/pages/output/output.module.ts
Normal file
@ -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 {}
|
||||
3
app/src/pages/output/output.scss
Normal file
3
app/src/pages/output/output.scss
Normal file
@ -0,0 +1,3 @@
|
||||
page-output {
|
||||
|
||||
}
|
||||
52
app/src/pages/output/output.ts
Normal file
52
app/src/pages/output/output.ts
Normal file
@ -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
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user