Skip to content

B
Breeze
Commit 25588866 authored by Pieterjan Vanhoof's avatar Pieterjan Vanhoof Committed by GitHub
Browse files
Options

UI Restructure0 (#49) 

- Restructured UI to latest mockup
- Improve history
parents 448810c2 438700d1
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 113 deletions
Breeze.UI/package.json
View file @ 25588866
......@@ -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
View file @ 25588866
......@@ -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 0 → 100644
View file @ 25588866
<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 0 → 100644
View file @ 25588866
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
View file @ 25588866
<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
View file @ 25588866
......@@ -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 deleted 100644 → 0
View file @ 448810c2
<p>Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</p>
<p>Unconfirmed: {{unconfirmedBalance | coinNotation | coinAbbreviation}}<p>
Breeze.UI/src/app/wallet/menu/dashboard.component.ts deleted 100644 → 0
View file @ 448810c2
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
View file @ 25588866
.navbar {
height: 100px;
width: 100%;
margin: 0;
padding: 0;
}
Breeze.UI/src/app/wallet/menu/menu.component.html
View file @ 25588866
<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
View file @ 25588866
......@@ -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
View file @ 25588866
#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
View file @ 25588866
<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
View file @ 25588866
......@@ -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';
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment