lukechilds
/
block-explorer
mirror of https://github.com/lukechilds/block-explorer.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

web-ui: improvements on address details view (#18) 

transactions from the address are now retrieved separately, the address
model was chaged for the balance model, the transactions table now is
paginated and shows more info and now the view is mobile friendly
prometheus-integration
Mario Mejia 7 years ago
parent
6ed2b5d31e
commit
027b3aa3a0
5 changed files with 103 additions and 59 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      web-ui/src/app/app.component.ts
  2. 108
      web-ui/src/app/components/address-details/address-details.component.html
  3. 32
      web-ui/src/app/components/address-details/address-details.component.ts
  4. 6
      web-ui/src/app/models/address.ts
  5. 13
      web-ui/src/app/services/addresses.service.ts

3
web-ui/src/app/app.component.ts
View File

@ -117,7 +117,8 @@ export class AppComponent {
'label.payee': 'Payee',
'label.active': 'Active',
'label.details': 'Details',
'label.raw': 'Raw'
'label.raw': 'Raw',
'label.date': 'Date'
};
}
}

108
web-ui/src/app/components/address-details/address-details.component.html
View File

@ -4,57 +4,79 @@
</div>
<div *ngIf="address != null">
<div class="row">
<h2 class="col-xs-12 col-sm-12 col-md-12 col-lg-12">{{'label.address' | translate}}</h2>
<h2 class="col-xs-12">{{'label.address' | translate}}</h2>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<table class="table table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.summary' | translate}}</th>
<th class="col-xs-2 col-sm-2 col-md-1 col-lg-1"></th>
</tr>
</thead>
<div class="col-xs-12 col-md-4">
<div class="table-responsive">
<table class="table table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.summary' | translate}}</th>
<th class="col-xs-2 col-sm-2 col-md-1 col-lg-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>{{'label.address' | translate}}</td>
<td>{{addressString}}</td>
</tr>
<tr>
<td>{{'label.balance' | translate}}</td>
<td>{{address.balance}} {{'label.coinName' | translate}}</td>
</tr>
<tr>
<td>{{'label.received' | translate}}</td>
<td>{{address.received}} {{'label.coinName' | translate}}</td>
</tr>
<tr>
<td>{{'label.spent' | translate}}</td>
<td>{{getSent(address)}} {{'label.coinName' | translate}}</td>
</tr>
</tbody>
</table>
<tbody>
<tr>
<td>{{'label.address' | translate}}</td>
<td>{{addressString}}</td>
</tr>
<tr>
<td>{{'label.balance' | translate}}</td>
<td>{{address.available}} {{'label.coinName' | translate}}</td>
</tr>
<tr>
<td>{{'label.received' | translate}}</td>
<td>{{address.received}} {{'label.coinName' | translate}}</td>
</tr>
<tr>
<td>{{'label.spent' | translate}}</td>
<td>{{getSent(address)}} {{'label.coinName' | translate}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">
<table class="table table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th class="col-xs-2 col-sm-2 col-md-1 col-lg-1">{{'label.transactions' | translate}} ({{address.transactions.length}})</th>
</tr>
</thead>
<h2 class="col-xs-12">{{'label.transactions' | translate}}</h2>
</div>
<div class="table-responsive">
<table class="table table-condensed table-bordered table-striped table-hover">
<thead>
<tr>
<th class="col-xs-1">#</th>
<th class="col-xs-2">{{'label.transaction' | translate}}</th>
<th class="col-xs-2">{{'label.blockhash' | translate}}</th>
<th class="col-xs-2">{{'label.date' | translate}}</th>
<th class="col-xs-3">{{'label.value' | translate}}</th>
<th class="col-xs-2">{{'label.size' | translate}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let index = index; let item of asyncItems | async | paginate: { id: 'transactions', itemsPerPage: pageSize, currentPage: currentPage, totalItems: total }">
<td>{{(currentPage - 1) * pageSize + index + 1}}</td>
<td>
<a routerLink="/transactions/{{item.id}}">{{item.id | slice:0:15}}...</a>
</td>
<td>
<a routerLink="/blocks/{{item.blockhash}}">{{item.blockhash | slice:0:15}}...</a>
</td>
<td>{{item.time * 1000 | date:'MMMM d, y, h:mm:ss a'}}</td>
<td>{{item.received >= item.sent ? '+' : ''}}{{item.received - item.sent}} {{'label.coinName' | translate}}</td>
<td>{{item.size}}</td>
</tr>
</tbody>
</table>
</div>
<tbody>
<tr *ngFor="let item of address.transactions">
<td>
<a routerLink="/transactions/{{item}}">{{item}}</a>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-xs-11 col-xs-offset-1 col-sm-5 col-sm-offset-4">
<pagination-controls (pageChange)="getPage($event)" id="transactions" previousLabel="" nextLabel="">
</pagination-controls>
</div>
</div>
</div>

32
web-ui/src/app/components/address-details/address-details.component.ts
View File

@ -1,9 +1,10 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Observable } from 'rxjs/Observable';
import { Address } from '../../models/address';
import { Balance } from '../../models/balance';
import { Transaction } from '../../models/transaction';
import { AddressesService } from '../../services/addresses.service';
import { ErrorService } from '../../services/error.service';
@ -16,9 +17,15 @@ import { NavigatorService } from '../../services/navigator.service';
})
export class AddressDetailsComponent implements OnInit {
address: Address;
address: Balance;
addressString: string;
// pagination
total = 0;
currentPage = 1;
pageSize = 10;
asyncItems: Observable<Transaction[]>;
constructor(
private route: ActivatedRoute,
private router: Router,
@ -32,17 +39,30 @@ export class AddressDetailsComponent implements OnInit {
response => this.onAddressRetrieved(response),
response => this.onError(response)
);
this.getPage(this.currentPage);
}
private onAddressRetrieved(response: Address) {
private onAddressRetrieved(response: Balance) {
this.address = response;
}
getPage(page: number) {
const offset = (page - 1) * this.pageSize;
const limit = this.pageSize;
const order = 'time:desc';
this.asyncItems = this.addressesService
.getTransactions(this.addressString, offset, limit, order)
.do(response => this.total = response.total)
.do(response => this.currentPage = 1 + (response.offset / this.pageSize))
.map(response => response.data);
}
private onError(response: any) {
this.errorService.renderServerErrors(null, response);
}
getSent(address: Address): number {
return address.received - address.balance;
getSent(address: Balance): number {
return address.received - address.available;
}
}

6
web-ui/src/app/models/address.ts
View File

@ -1,6 +0,0 @@
export class Address {
balance: number;
received: number;
transactions: string[];
}

13
web-ui/src/app/services/addresses.service.ts
View File

@ -4,7 +4,9 @@ import { Observable } from 'rxjs/Observable';
import { environment } from '../../environments/environment';
import { Address } from '../models/address';
import { Balance } from '../models/balance';
import { PaginatedResult } from '../models/paginated-result';
import { Transaction } from '../models/transaction';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
@ -17,8 +19,13 @@ export class AddressesService {
constructor(private http: HttpClient) { }
get(address: string): Observable<Address> {
get(address: string): Observable<Balance> {
const url = `${this.baseUrl}/${address}`;
return this.http.get<Address>(url);
return this.http.get<Balance>(url);
}
getTransactions(address: string, offset: number = 0, limit: number = 10, orderBy: string = ''): Observable<PaginatedResult<Transaction>> {
const url = `${this.baseUrl}/${address}/transactions?offset=${offset}&limit=${limit}&orderBy=${orderBy}`;
return this.http.get<PaginatedResult<Transaction>>(url);
}
}

Write Preview
Loading…
Cancel
Save