Commit c8fc92fb authored by dev0tion's avatar dev0tion

Reorganise layout

parent 26ed04e4
<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>
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);
}
}
);
};
}
<p>Balance: {{confirmedBalance | coinNotation | coinAbbreviation}}</p>
<p>Unconfirmed: {{unconfirmedBalance | coinNotation | coinAbbreviation}}<p>
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);
}
}
);
}
}
......@@ -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}
......
#sidepanel {
margin: 0;
padding: 0;
height: 100%;
width: 200px;
position: fixed;
overflow: auto;
}
#content {
margin-left: 200px;
}
\ No newline at end of file
<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>
......@@ -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