UI Restructure0 (#49)

- Restructured UI to latest mockup
- Improve history

Breeze.UI/package.json

@@ -22,35 +22,35 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^4.1.0",
-    "@angular/common": "^4.1.0",
-    "@angular/compiler": "^4.1.0",
-    "@angular/compiler-cli": "^4.1.0",
-    "@angular/core": "^4.1.0",
-    "@angular/forms": "^4.1.0",
-    "@angular/http": "^4.1.0",
-    "@angular/platform-browser": "^4.1.0",
-    "@angular/platform-browser-dynamic": "^4.1.0",
-    "@angular/platform-server": "^4.1.0",
-    "@angular/router": "^4.1.0",
+    "@angular/animations": "^4.1.2",
+    "@angular/common": "^4.1.2",
+    "@angular/compiler": "^4.1.2",
+    "@angular/compiler-cli": "^4.1.2",
+    "@angular/core": "^4.1.2",
+    "@angular/forms": "^4.1.2",
+    "@angular/http": "^4.1.2",
+    "@angular/platform-browser": "^4.1.2",
+    "@angular/platform-browser-dynamic": "^4.1.2",
+    "@angular/platform-server": "^4.1.2",
+    "@angular/router": "^4.1.2",
     "bootstrap": "^4.0.0-alpha.6",
     "core-js": "^2.4.1",
-    "rxjs": "^5.3.0",
-    "zone.js": "^0.8.9"
+    "rxjs": "^5.4.0",
+    "zone.js": "^0.8.10"
   },
   "devDependencies": {
-    "@angular/cli": "^1.0.1",
-    "@angular/compiler-cli": "^4.1.0",
+    "@angular/cli": "^1.0.3",
+    "@angular/compiler-cli": "^4.1.2",
     "@types/electron": "^1.4.37",
     "@types/jasmine": "2.5.47",
-    "@types/node": "~7.0.15",
-    "autoprefixer": "^6.7.7",
+    "@types/node": "~7.0.18",
+    "autoprefixer": "^7.0.1",
     "codelyzer": "3.0.1",
     "concurrently": "^3.4.0",
     "copy-webpack-plugin": "4.0.1",
     "css-loader": "^0.28.1",
     "cssnano": "^3.10.0",
-    "electron": "^1.6.6",
+    "electron": "^1.6.7",
     "electron-packager": "^8.7.0",
     "exports-loader": "^0.6.4",
     "extract-text-webpack-plugin": "^2.1.0",
@@ -60,11 +60,11 @@
     "jasmine-core": "~2.6.1",
     "jasmine-spec-reporter": "~4.1.0",
     "json-loader": "^0.5.4",
-    "karma": "~1.6.0",
-    "karma-chrome-launcher": "~2.0.0",
+    "karma": "~1.7.0",
+    "karma-chrome-launcher": "~2.1.1",
     "karma-cli": "~1.0.1",
     "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-electron": "^5.1.1",
+    "karma-electron": "^5.2.1",
     "karma-jasmine": "~1.1.0",
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-sourcemap-loader": "^0.3.7",
@@ -73,16 +73,16 @@
     "postcss-url": "^6.0.4",
     "protractor": "~5.1.1",
     "raw-loader": "^0.5.1",
-    "sass-loader": "^6.0.3",
+    "sass-loader": "^6.0.5",
     "script-loader": "^0.7.0",
     "source-map-loader": "^0.2.1",
     "style-loader": "^0.17.0",
     "stylus-loader": "^3.0.1",
-    "ts-node": "~3.0.2",
-    "tslint": "~5.1.0",
+    "ts-node": "~3.0.4",
+    "tslint": "~5.2.0",
     "typescript": "^2.3.2",
     "url-loader": "^0.5.8",
-    "webpack": "^2.4.1",
+    "webpack": "^2.5.1",
     "webpack-dev-server": "~2.4.5"
   }
 }

Breeze.UI/src/app/login/login.component.ts

@@ -85,7 +85,7 @@ export class LoginComponent implements OnInit {
           if (response.status >= 200 && response.status < 400) {
             let responseMessage = response.json();
             this.globalService.setWalletName(walletLoad.name)
-            this.globalService.setCoinType(0);
+            this.globalService.setCoinType(1);
             this.router.navigate(['/wallet']);
           }
         },

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/history/history.component.html

 <h1>History</h1>
-<table *ngIf="transactions">
-    <thead>
-        <th>Timestamp</th>
-        <th>Amount</th>
-        <th>Confirmed</th>
-        <th>Transaction ID</th>
-    </thead>
-    <tr *ngFor="let transaction of transactions">
-        <td>{{ transaction.timestamp }}</td>
-        <td>{{ transaction.amount }}</td>
-        <td>{{ transaction.confirmed }}</td>
-        <td>{{ transaction.txId }}</td>
-    </tr>
+<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">
+    <!--<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>
+  </tr>
 </table>
+<ng-template #noTransactions>Looks like you haven't made any transactions yet.</ng-template>

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

@@ -18,16 +18,18 @@ export class HistoryComponent {
   private errorMessage: string;
 
   ngOnInit() {
-    this.getWalletHistory();
+    this.getHistory();
   }
 
-  private getWalletHistory() {
+  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) {
-            this.transactions = response.json().transactions;
+            if (response.json().transactions.length > 0) {
+              this.transactions = response.json().transactions;
+            }
           }
         },
         error => {

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/menu/menu.component.css

+.navbar {
+  height: 100px;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}

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

-<nav class="navbar navbar-fixed-top">
-    <div class="container">
-        <a class="navbar-brand">Breeze</a>
-        <dashboard-component></dashboard-component>
-        <ul class="nav navbar-nav" routerLinkActive="active">
-            <li class="nav-item"><a class="nav-link" routerLink="send">Send</a></li>
-            <li class="nav-item"><a class="nav-link" routerLink="receive">Receive</a></li>
-            <li class="nav-item"><a class="nav-link" routerLink="history">History</a></li>
-            <li class="nav-item"><a class="nav-link" (click)="logOut()">Logout</a></li>
-        </ul>
-    </div>
+<nav class="navbar navbar-toggleable-sm navbar-fixed-top navbar-light bg-faded ">
+  <div class="container">
+    <ul class="navbar-nav mr-auto" routerLinkActive="active">
+      <li class="nav-item"><a class="nav-link" routerLink="dashboard">Dashboard</a></li>
+      <li class="nav-item"><a class="nav-link" routerLink="send">Send</a></li>
+      <li class="nav-item"><a class="nav-link" routerLink="receive">Receive</a></li>
+      <li class="nav-item"><a class="nav-link" routerLink="history">History</a></li>
+      <li class="nav-item"><a class="nav-link" (click)="logOut()">Logout</a></li>
+    </ul>
+    <div class="navbar-brand">Breeze</div>
+  </div>
 </nav>

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>
+</div>
\ No newline at end of file

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';