RanchiMall/flosight-api
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #798 from SonicWizard/ionic

Browse Source 
Added Search toggle and loading spinners for pages and transaction component
This commit is contained in:
Jason Dreyzehner 2017-08-16 14:13:44 -04:00 committed by GitHub
commit 9a80486227
10 changed files with 201 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/ionic.config.json
View File

@ -1,5 +1,6 @@
{ {
"name": "insight-ui", "name": "insight-ui",
"app_id": "", "app_id": "",
"type": "ionic-angular" "type": "ionic-angular",
"integrations": {}
} }

2
app/package.json
View File

@ -42,7 +42,7 @@
"@types/jasmine": "2.5.41", "@types/jasmine": "2.5.41",
"@types/node": "7.0.4", "@types/node": "7.0.4",
"codecov": "2.2.0", "codecov": "2.2.0",
"ionic": "3.7.0", "ionic": "3.8.1",
"jasmine-core": "2.5.2", "jasmine-core": "2.5.2",
"jasmine-spec-reporter": "3.2.0", "jasmine-spec-reporter": "3.2.0",
"karma": "1.4.1", "karma": "1.4.1",

4
app/src/app/app.scss
View File

@ -25,6 +25,10 @@
font-size: 1.4rem; font-size: 1.4rem;
} }
body {
user-select: text;
}
// Shared Sass variables, which can be used to adjust Ionic's // Shared Sass variables, which can be used to adjust Ionic's
// default Sass variables, belong in "theme/variables.scss". // default Sass variables, belong in "theme/variables.scss".
// //

4
app/src/components/head-nav/head-nav.html
View File

@ -7,9 +7,9 @@
<button ion-button (click)="changeCurrency()"> <button ion-button (click)="changeCurrency()">
<ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon><ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon>&nbsp;{{ currency.currencySymbol }} <ion-icon name="logo-bitcoin" *ngIf="currency.currencySymbol !== 'USD'"></ion-icon><ion-icon name="logo-usd" *ngIf="currency.currencySymbol === 'USD'"></ion-icon>&nbsp;{{ currency.currencySymbol }}
</button> </button>
<button ion-button icon-only> <button ion-button icon-only (click)="toggleSearch()">
<ion-icon name="search"></ion-icon> <ion-icon name="search"></ion-icon>
</button> </button>
</ion-buttons> </ion-buttons>
</ion-navbar> </ion-navbar>
<ion-searchbar (ionInput)="search($event)" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" [debounce]="1000"></ion-searchbar> <ion-searchbar [hidden]="!showSearch" (ionInput)="search($event)" placeholder="{{ 'Search for block, transaction or address' }}" [(ngModel)]="q" [debounce]="1500"></ion-searchbar>

6
app/src/components/head-nav/head-nav.ts
View File

@ -18,6 +18,7 @@ import { ActionSheetController } from 'ionic-angular';
}) })
export class HeadNavComponent { export class HeadNavComponent {
public showSearch: boolean = false;
public loading: boolean; public loading: boolean;
@Input() public title: string; @Input() public title: string;
public q: string; public q: string;
@ -27,6 +28,7 @@ export class HeadNavComponent {
} }
public search(): void { public search(): void {
this.showSearch = false;
let apiPrefix: string = this.api.apiPrefix; let apiPrefix: string = this.api.apiPrefix;
this.http.get(apiPrefix + 'block/' + this.q).subscribe( this.http.get(apiPrefix + 'block/' + this.q).subscribe(
@ -136,4 +138,8 @@ export class HeadNavComponent {
}); });
actionSheet.present(); actionSheet.present();
} }
public toggleSearch(): void {
this.showSearch = !this.showSearch;
}
} }

21
app/src/components/transaction-list/transaction-list.html
View File

@ -1,7 +1,14 @@
<ion-grid> <div *ngIf="loading">
<ion-row *ngFor="let tx of transactions.txs"> <ion-spinner name="crescent"></ion-spinner>
<ion-col col-12> </div>
<transaction [tx]="tx"></transaction>
</ion-col>
</ion-row> <div *ngIf="!loading">
</ion-grid> <ion-grid>
<ion-row *ngFor="let tx of transactions.txs">
<ion-col col-12>
<transaction [tx]="tx"></transaction>
</ion-col>
</ion-row>
</ion-grid>
</div>

76
app/src/pages/address/address.html
View File

@ -3,45 +3,51 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<h1>Address</h1> <div *ngIf="loading">
<p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p> <ion-spinner name="crescent"></ion-spinner>
<p>{{ currency.getConversion(address.balance) }}</p> </div>
<h2>Summary</h2> <div *ngIf="!loading">
<h1>Address</h1>
<p class="ellipsis"><b>Address</b> {{ address.addrStr }}</p>
<p>{{ currency.getConversion(address.balance) }}</p>
<ion-list class="summary"> <h2>Summary</h2>
<ion-item>
Total Received
<span item-end>
{{ currency.getConversion(address.totalReceived) }}
</span>
</ion-item>
<ion-item>
Total Sent
<span item-end>
{{ currency.getConversion(address.totalSent) }}
</span>
</ion-item>
<ion-item>
Final Balance
<span item-end>
{{ currency.getConversion(address.balance) }}
</span>
</ion-item>
<ion-item>
No. Transactions
<span item-end>
{{ address.txApperances }}
</span>
</ion-item>
</ion-list>
<p text-center> <ion-list class="summary">
<qr-code [value]="address.addrStr" [size]="160"></qr-code> <ion-item>
<p> Total Received
<span item-end>
{{ currency.getConversion(address.totalReceived) }}
</span>
</ion-item>
<ion-item>
Total Sent
<span item-end>
{{ currency.getConversion(address.totalSent) }}
</span>
</ion-item>
<ion-item>
Final Balance
<span item-end>
{{ currency.getConversion(address.balance) }}
</span>
</ion-item>
<ion-item>
No. Transactions
<span item-end>
{{ address.txApperances }}
</span>
</ion-item>
</ion-list>
<h2>Transactions</h2> <p text-center>
<qr-code [value]="address.addrStr" [size]="160"></qr-code>
<p>
<transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list> <h2>Transactions</h2>
<transaction-list [queryType]="'address'" [queryValue]="addrStr"></transaction-list>
</div>
</ion-content> </ion-content>

180
app/src/pages/block-detail/block-detail.html
View File

@ -3,96 +3,102 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<h1>Block #{{ block.height }}</h1> <div *ngIf="loading">
<p class="ellipsis"><b>BlockHash</b> {{ block.hash }}</p> <ion-spinner name="crescent"></ion-spinner>
</div>
<h2>Summary</h2>
<ion-list *ngIf="!loading" class="summary">
<ion-item>
Number of Transactions
<span item-end>
{{ block.tx.length }}
</span>
</ion-item>
<ion-item>
Height
<span item-end>
{{ block.height }} <span [hidden]="!block.isMainChain">(Mainchain)</span>
</span>
</ion-item>
<ion-item>
Block Reward
<span item-end>
{{ currency.getConversion(block.reward) }}
</span>
</ion-item>
<ion-item>
Timestamp
<span item-end>
{{ block.time * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Mined by
<span item-end>
<a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
</span>
</ion-item>
<ion-item>
Merkle Root
<span item-end class="ellipsis">
{{ block.merkleroot }}
</span>
</ion-item>
<ion-item>
Previous Block
<span item-end>
<a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
</span>
</ion-item>
<ion-item>
Difficulty
<span item-end>
{{ block.difficulty }}
</span>
</ion-item>
<ion-item>
Bits
<span item-end>
{{ block.bits }}
</span>
</ion-item>
<ion-item>
Size (bytes)
<span item-end>
{{ block.size }}
</span>
</ion-item>
<ion-item>
Version
<span item-end>
{{ block.version }}
</span>
</ion-item>
<ion-item>
Nonce
<span item-end>
{{ block.nonce }}
</span>
</ion-item>
<ion-item>
Next Block
<span item-end>
<a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
</span>
</ion-item>
</ion-list>
<div *ngIf="!loading"> <div *ngIf="!loading">
<h2>Transactions</h2> <h1>Block #{{ block.height }}</h1>
<p class="ellipsis"><b>BlockHash</b> {{ block.hash }}</p>
<transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list> <h2>Summary</h2>
<ion-list *ngIf="!loading" class="summary">
<ion-item>
Number of Transactions
<span item-end>
{{ block.tx.length }}
</span>
</ion-item>
<ion-item>
Height
<span item-end>
{{ block.height }} <span [hidden]="!block.isMainChain">(Mainchain)</span>
</span>
</ion-item>
<ion-item>
Block Reward
<span item-end>
{{ currency.getConversion(block.reward) }}
</span>
</ion-item>
<ion-item>
Timestamp
<span item-end>
{{ block.time * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Mined by
<span item-end *ngIf="block.poolInfo">
<a href="{{ block.poolInfo.url }}">{{ block.poolInfo.poolName }}</a>
</span>
</ion-item>
<ion-item>
Merkle Root
<span item-end class="ellipsis">
{{ block.merkleroot }}
</span>
</ion-item>
<ion-item>
Previous Block
<span item-end>
<a (click)="goToPreviousBlock()">{{ block.height - 1 }}</a>
</span>
</ion-item>
<ion-item>
Difficulty
<span item-end>
{{ block.difficulty }}
</span>
</ion-item>
<ion-item>
Bits
<span item-end>
{{ block.bits }}
</span>
</ion-item>
<ion-item>
Size (bytes)
<span item-end>
{{ block.size }}
</span>
</ion-item>
<ion-item>
Version
<span item-end>
{{ block.version }}
</span>
</ion-item>
<ion-item>
Nonce
<span item-end>
{{ block.nonce }}
</span>
</ion-item>
<ion-item>
Next Block
<span item-end>
<a (click)="goToNextBlock()">{{ block.height + 1 }}</a>
</span>
</ion-item>
</ion-list>
<div *ngIf="!loading">
<h2>Transactions</h2>
<transaction-list [queryType]="'block'" [queryValue]="block.hash"></transaction-list>
</div>
</div> </div>
</ion-content> </ion-content>

68
app/src/pages/transaction/transaction.html
View File

@ -3,40 +3,46 @@
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<h1>Transaction</h1> <div *ngIf="loading">
<p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p> <ion-spinner name="crescent"></ion-spinner>
</div>
<h2>Summary</h2> <div *ngIf="!loading">
<h1>Transaction</h1>
<p class="ellipsis"><b>Transaction</b> {{ tx.txid }}</p>
<ion-list class="summary"> <h2>Summary</h2>
<ion-item>
Size
<span item-end>
{{ tx.size }} (bytes)
</span>
</ion-item>
<ion-item>
Received Time
<span item-end>
{{ tx.time * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Mined Time
<span item-end>
{{ tx.blocktime * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Included in Block
<span item-end>
<a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
</span>
</ion-item>
</ion-list>
<h2>Details</h2> <ion-list class="summary">
<ion-item>
Size
<span item-end>
{{ tx.size }} (bytes)
</span>
</ion-item>
<ion-item>
Received Time
<span item-end>
{{ tx.time * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Mined Time
<span item-end>
{{ tx.blocktime * 1000 | date:'medium' }}
</span>
</ion-item>
<ion-item>
Included in Block
<span item-end>
<a (click)="goToBlock(tx.blockhash)">{{ tx.blockhash }}</a>
</span>
</ion-item>
</ion-list>
<transaction [tx]="tx"></transaction> <h2>Details</h2>
<transaction [tx]="tx"></transaction>
</div>
</ion-content> </ion-content>

2
app/src/providers/api/api.ts
View File

@ -11,7 +11,7 @@ import 'rxjs/add/operator/map';
@Injectable() @Injectable()
export class ApiProvider { export class ApiProvider {
public apiPrefix: string = 'http://localhost:3001/insight-api/'; public apiPrefix: string = 'https://insight.bitpay.com/api/';
constructor(public http: Http) { constructor(public http: Http) {
} }