Reorganise layout

Breeze.UI/src/app/wallet/dashboard/dashboard.component.html

+<div class="container">
+  <div class="row">
+    <div class="col">
+      <div>Active Balance</div>
+      <div>Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</div>
+    </div>
+    <div class="col">
+      <div>Current Value</div>
+      <div>Over 9000</div>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <div>Transactions</div>
+      <table *ngIf="transactions; else noTransactions">
+        <thead>
+          <th>Timestamp</th>
+          <th>Amount</th>
+          <th>Confirmed</th>
+          <th>Transaction ID</th>
+        </thead>
+        <tr *ngFor="let transaction of transactions; let i=index">
+          <div *ngIf="i<5">
+            <!--<td *ngIf="{{ transaction.amount }} < 0; else received">SENT</td>
+            <td #received>RECEIVED</td>-->
+            <td>{{ transaction.timestamp }}</td>
+            <td>{{ transaction.amount }}</td>
+            <td>{{ transaction.confirmed }}</td>
+            <td>{{ transaction.txId }}</td>
+          </div>
+        </tr>
+      </table>
+    <ng-template #noTransactions>Looks like you haven't had any transactions yet</ng-template>
+    </div>
+  </div>
+</div>

Breeze.UI/src/app/wallet/dashboard/dashboard.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ApiService } from '../../shared/services/api.service';
+import { GlobalService } from '../../shared/services/global.service';
+import { WalletInfo } from '../../shared/classes/wallet-info';
+
+@Component({
+  selector: 'dashboard-component',
+  templateUrl: './dashboard.component.html',
+  styleUrls: ['./dashboard.component.css'],
+})
+
+export class DashboardComponent {
+  constructor(private apiService: ApiService, private globalService: GlobalService) {}
+
+  private balanceResponse: any;
+  private confirmedBalance: number;
+  private unconfirmedBalance: number;
+  private transactions: any;
+  private errorMessage: string;
+
+  ngOnInit() {
+      this.getWalletBalance();
+      this.getHistory();
+  };
+
+  private getWalletBalance() {
+    let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
+    this.apiService.getWalletBalance(walletInfo)
+        .subscribe(
+            response =>  {
+                if (response.status >= 200 && response.status < 400) {
+                    this.balanceResponse = response.json();
+                    this.confirmedBalance = this.balanceResponse.balances[0].amountConfirmed;
+                    this.unconfirmedBalance = this.balanceResponse.balances[0].amountUnconfirmed;
+                }
+            },
+            error => {
+                if (error.status >= 400) {
+                    this.errorMessage = <any>error;
+                    console.log(this.errorMessage);
+                }
+            }
+      );
+  };
+
+  private getHistory() {
+    let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
+    this.apiService.getWalletHistory(walletInfo)
+      .subscribe(
+        response => {
+          if (response.status >= 200 && response.status < 400) {
+            if (response.json().transactions.length > 0) {
+              this.transactions = response.json().transactions;
+            }
+          }
+        },
+        error => {
+          if (error.status >= 400) {
+            this.errorMessage = <any>error;
+            console.log(this.errorMessage);
+          }
+        }
+    );
+  };
+}

Breeze.UI/src/app/wallet/menu/dashboard.component.html

-<p>Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</p>
-<p>Unconfirmed: {{unconfirmedBalance | coinNotation | coinAbbreviation}}<p>

Breeze.UI/src/app/wallet/menu/dashboard.component.ts

-import { Component, OnInit } from '@angular/core';
-import { ApiService } from '../../shared/services/api.service';
-import { GlobalService } from '../../shared/services/global.service';
-import { WalletInfo } from '../../shared/classes/wallet-info';
-
-@Component({
-  selector: 'dashboard-component',
-  templateUrl: './dashboard.component.html',
-  styleUrls: ['./dashboard.component.css'],
-})
-export class DashboardComponent {
-    constructor(private apiService: ApiService, private globalService: GlobalService) {}
-
-    private balanceResponse: any;
-    private confirmedBalance: number;
-    private unconfirmedBalance: number;
-    private errorMessage: string;
-
-    ngOnInit() {
-        this.getWalletBalance();
-    }
-
-    private getWalletBalance() {
-      let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
-      this.apiService.getWalletBalance(walletInfo)
-          .subscribe(
-              response =>  {
-                  if (response.status >= 200 && response.status < 400) {
-                      this.balanceResponse = response.json();
-                      this.confirmedBalance = this.balanceResponse.balances[0].amountConfirmed;
-                      this.unconfirmedBalance = this.balanceResponse.balances[0].amountUnconfirmed;
-                  }
-              },
-              error => {
-                  if (error.status >= 400) {
-                      this.errorMessage = <any>error;
-                      console.log(this.errorMessage);
-                  }
-              }
-        );
-    }
-}

Breeze.UI/src/app/wallet/wallet-routing.module.ts

@@ -5,12 +5,14 @@ import { WalletComponent }   from './wallet.component';
 import { SendComponent } from './send/send.component';
 import { ReceiveComponent } from './receive/receive.component';
 import { HistoryComponent } from './history/history.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'wallet', pathMatch: 'full' },
   { path: 'wallet', component: WalletComponent,
     children: [
-      { path: '', redirectTo:'history', pathMatch:'full' },
+      { path: '', redirectTo:'dashboard', pathMatch:'full' },
+      { path: 'dashboard', component: DashboardComponent},
       { path: 'send', component: SendComponent},
       { path: 'receive', component: ReceiveComponent},
       { path: 'history', component: HistoryComponent}

Breeze.UI/src/app/wallet/wallet.component.css

-#sidepanel {
-    margin: 0;
-    padding: 0;
-    height: 100%;
-    width: 200px;
-    position: fixed;
-    overflow: auto;
-}
-
-#content {
-    margin-left: 200px;
-}
\ No newline at end of file

Breeze.UI/src/app/wallet/wallet.component.html

 <div id="container">
-  <div id="sidepanel">
+  <div id="navigation">
     <app-menu></app-menu>
   </div>
   <div id="content">
     <router-outlet></router-outlet>
   </div>
-</div>
\ No newline at end of file
+</div>

Breeze.UI/src/app/wallet/wallet.module.ts

@@ -4,7 +4,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { WalletComponent } from './wallet.component';
 import { MenuComponent } from './menu/menu.component';
-import { DashboardComponent } from './menu/dashboard.component';
+import { DashboardComponent } from './dashboard/dashboard.component';
 import { SendComponent } from './send/send.component';
 import { ReceiveComponent } from './receive/receive.component';
 import { HistoryComponent } from './history/history.component';