diff --git a/web-ui/src/app/app.component.ts b/web-ui/src/app/app.component.ts index f84d133..f5734bb 100644 --- a/web-ui/src/app/app.component.ts +++ b/web-ui/src/app/app.component.ts @@ -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' }; } } diff --git a/web-ui/src/app/components/address-details/address-details.component.html b/web-ui/src/app/components/address-details/address-details.component.html index eeedfed..5b43ec5 100644 --- a/web-ui/src/app/components/address-details/address-details.component.html +++ b/web-ui/src/app/components/address-details/address-details.component.html @@ -4,57 +4,79 @@
-

{{'label.address' | translate}}

+

{{'label.address' | translate}}

-
- - - - - - - +
+
+
{{'label.summary' | translate}}
+ + + + + + - - - - - - - - - - - - - - - - - - -
{{'label.summary' | translate}}
{{'label.address' | translate}}{{addressString}}
{{'label.balance' | translate}}{{address.balance}} {{'label.coinName' | translate}}
{{'label.received' | translate}}{{address.received}} {{'label.coinName' | translate}}
{{'label.spent' | translate}}{{getSent(address)}} {{'label.coinName' | translate}}
+ + + {{'label.address' | translate}} + {{addressString}} + + + {{'label.balance' | translate}} + {{address.available}} {{'label.coinName' | translate}} + + + {{'label.received' | translate}} + {{address.received}} {{'label.coinName' | translate}} + + + {{'label.spent' | translate}} + {{getSent(address)}} {{'label.coinName' | translate}} + + + +
-
- - - - - - +

{{'label.transactions' | translate}}

+ +
+
{{'label.transactions' | translate}} ({{address.transactions.length}})
+ + + + + + + + + + + + + + + + + + + + + +
#{{'label.transaction' | translate}}{{'label.blockhash' | translate}}{{'label.date' | translate}}{{'label.value' | translate}}{{'label.size' | translate}}
{{(currentPage - 1) * pageSize + index + 1}} + {{item.id | slice:0:15}}... + + {{item.blockhash | slice:0:15}}... + {{item.time * 1000 | date:'MMMM d, y, h:mm:ss a'}}{{item.received >= item.sent ? '+' : ''}}{{item.received - item.sent}} {{'label.coinName' | translate}}{{item.size}}
+
- - - - {{item}} - - - - +
+
+ +
diff --git a/web-ui/src/app/components/address-details/address-details.component.ts b/web-ui/src/app/components/address-details/address-details.component.ts index fbd8eb7..9c4a846 100644 --- a/web-ui/src/app/components/address-details/address-details.component.ts +++ b/web-ui/src/app/components/address-details/address-details.component.ts @@ -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; + 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; } } diff --git a/web-ui/src/app/models/address.ts b/web-ui/src/app/models/address.ts deleted file mode 100644 index 95bf7b1..0000000 --- a/web-ui/src/app/models/address.ts +++ /dev/null @@ -1,6 +0,0 @@ - -export class Address { - balance: number; - received: number; - transactions: string[]; -} diff --git a/web-ui/src/app/services/addresses.service.ts b/web-ui/src/app/services/addresses.service.ts index 7c009ae..4592046 100644 --- a/web-ui/src/app/services/addresses.service.ts +++ b/web-ui/src/app/services/addresses.service.ts @@ -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
{ + get(address: string): Observable { const url = `${this.baseUrl}/${address}`; - return this.http.get
(url); + return this.http.get(url); + } + + getTransactions(address: string, offset: number = 0, limit: number = 10, orderBy: string = ''): Observable> { + const url = `${this.baseUrl}/${address}/transactions?offset=${offset}&limit=${limit}&orderBy=${orderBy}`; + return this.http.get>(url); } }