web-ui: Complete details on the AddressDetails view

web-ui/src/app/app.component.ts

@@ -36,6 +36,8 @@ export class AppComponent {
       // messages
       'message.serverUnavailable': 'The server unavailable, please try again in a minute',
       'message.unknownError': 'Unknown error, please try again in a minute',
+      'message.transactionNotFound': 'Transaction not found',
+      'message.addressNotFound': 'Address not found',
 
       // actions
       'action.find': 'Find',
@@ -52,7 +54,13 @@ export class AppComponent {
       'label.from': 'From',
       'label.to': 'To',
       'label.value': 'Amount',
-      'label.fee': 'Fee'
+      'label.fee': 'Fee',
+
+      'label.address': 'Address',
+      'label.balance': 'Balance',
+      'label.received': 'Received',
+      'label.spent': 'Spent',
+      'label.transactionCount': 'Transactions'
     };
   }
 }

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

@@ -1,3 +1,27 @@
-<p>
-  address-details works!
-</p>
+<div>
+  <div [hidden]="address != null">
+    <alert>{{'message.addressNotFound' | translate}}</alert>
+  </div>
+  <div *ngIf="address != null">
+    <div class="row">
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.address' | translate}}</label>
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{addressString}}</label>
+    </div>
+    <div class="row">
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.balance' | translate}}</label>
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{address.balance}} {{'label.coinName' | translate}}</label>
+    </div>
+    <div class="row">
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.received' | translate}}</label>
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{address.received}} {{'label.coinName' | translate}}</label>
+    </div>
+    <div class="row">
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.spent' | translate}}</label>
+      <label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{getSent(address)}} {{'label.coinName' | translate}}</label>
+    </div>
+    <div class="row">
+      <label class="col-sm-2 col-md-1 col-xs-1 col-lg-1">{{'label.transactionCount' | translate}}</label>
+      <label class="col-sm-3 col-md-2 col-xs-2 col-lg-2">{{address.transactionCount}}</label>
+    </div>
+  </div>
+</div>

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

@@ -1,4 +1,13 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { TranslateService } from '@ngx-translate/core';
+
+import { Address } from '../../models/address';
+
+import { AddressesService } from '../../services/addresses.service';
+import { ErrorService } from '../../services/error.service';
+import { NavigatorService } from '../../services/navigator.service';
 
 @Component({
   selector: 'app-address-details',
@@ -7,9 +16,33 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AddressDetailsComponent implements OnInit {
 
-  constructor() { }
+  address: Address;
+  addressString: string;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private navigatorService: NavigatorService,
+    private addressesService: AddressesService,
+    private errorService: ErrorService) { }
 
   ngOnInit() {
+    this.addressString = this.route.snapshot.paramMap.get('address');
+    this.addressesService.get(this.addressString).subscribe(
+      response => this.onAddressRetrieved(response),
+      response => this.onError(response)
+    );
   }
 
+  private onAddressRetrieved(response: Address) {
+    this.address = response;
+  }
+
+  private onError(response: any) {
+    this.errorService.renderServerErrors(null, response);
+  }
+
+  getSent(address: Address): number {
+    return address.received - address.balance;
+  }
 }