The calm before updating angular and material

web/src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { HomeComponent } from './pages/home/home.component';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { AboutComponent } from './pages/about/about.component';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
+import { WalletComponent } from './pages/wallet/wallet.component';
 
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
@@ -22,6 +23,10 @@ const routes: Routes = [
     {
         path: 'settings',
         component: SettingsComponent
+    },
+    {
+        path: 'wallet',
+        component: WalletComponent
     }
 
 ];

web/src/app/app.component.scss

@@ -8,6 +8,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    padding: 20px 70px 0;
     min-width:80%;
 }
 

web/src/app/app.module.ts

@@ -29,6 +29,7 @@ import { HomeComponent } from './pages/home/home.component';
 import { AboutComponent } from './pages/about/about.component';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { DashboardComponent } from './pages/dashboard/dashboard.component';
+import { WalletComponent } from './pages/wallet/wallet.component';
 
 import { NavbarComponent } from './shared/navbar/navbar.component';
 import { SidebarComponent } from './shared/sidebar/sidebar.component';
@@ -42,6 +43,9 @@ import { ElectronService } from './providers/electron.service';
 //Routing
 import { AppRoutingModule } from './app-routing.module';
 
+import { Wallet } from './shared/classes/wallet';
+
+
 import * as Rx from 'rxjs/Rx';
 
 
@@ -55,7 +59,8 @@ import * as Rx from 'rxjs/Rx';
     DashboardComponent,
     ExchangeCurrencyTickerComponent,
     AllEnabledCurrencyTickersComponent,
-    SidebarComponent
+    SidebarComponent,
+    WalletComponent
   ],
   imports: [
     BrowserModule,

web/src/app/pages/settings/settings.component.html

@@ -4,7 +4,7 @@
 <div *ngIf="settings !== null">
     <button (click)="saveSettings()" md-fab color="accent" class="md-fab md-fab-bottom-right">Save</button>
     <form *ngIf="settings.SMSGlobal != null">
-        <md-card class="exchange-card">
+        <md-card class="exchange-card card">
             <md-card-header>
                 <md-card-title>SMS Global Settings</md-card-title>
             </md-card-header>
@@ -48,7 +48,7 @@
     </form>
 
     <form *ngFor="let exchange of settings?.Exchanges">
-        <md-card class="exchange-card">
+        <md-card class="exchange-card card">
             <md-card-header>
                 <md-card-title>{{exchange.Name}} Exchange Settings</md-card-title>
             </md-card-header>

web/src/app/pages/settings/settings.component.scss

@@ -7,14 +7,11 @@
     width: 100%;
 }
 
-.exchange-card {
-    margin-bottom: 20px;
-    width: 1000px;
-}
-
+// FAB
 .md-fab {
-    margin: 0;
-    position: fixed;
+    top: auto;
     right: 20px;
-    bottom: 10px;
+    bottom: 20px;
+    left: auto;
+    position: fixed;
 }

web/src/app/pages/wallet/wallet.component.html

@@ -0,0 +1,28 @@
+<md-card *ngIf="wallet !== null" class="wallet-card card">
+  <md-card-header>
+      <md-card-title>Wallet Summary</md-card-title>
+  </md-card-header>
+  <md-card-content>
+      <table cellspacing="0">
+          <tr>
+              <td>
+              </td>
+          </tr>
+      </table>
+      <md-grid-list cols="2" rowHeight="3:1">
+          <md-grid-tile>
+          </md-grid-tile>
+          <md-grid-tile>
+          </md-grid-tile>
+      </md-grid-list>
+      <md-grid-list cols="3" rowHeight="2:1" *ngFor="let total of wallet?.CoinTotal">
+          <md-grid-tile>
+            {{total.coin}} - {{total.balance}}
+          </md-grid-tile>
+          <md-grid-tile>
+          </md-grid-tile>
+          <md-grid-tile>
+          </md-grid-tile>
+      </md-grid-list>
+  </md-card-content>
+</md-card>

web/src/app/pages/wallet/wallet.component.scss

@@ -0,0 +1,4 @@
+.wallet-card {
+    width: 80%;
+    margin: 10px auto;
+}

web/src/app/pages/wallet/wallet.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WalletComponent } from './wallet.component';
+
+describe('WalletComponent', () => {
+  let component: WalletComponent;
+  let fixture: ComponentFixture<WalletComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WalletComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WalletComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/pages/wallet/wallet.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { WebsocketHandlerService } from './../../services/websocket-handler/websocket-handler.service';
+import { Wallet } from './../../shared/classes/wallet';
+
+
+@Component({
+  selector: 'app-wallet',
+  templateUrl: './wallet.component.html',
+  styleUrls: ['./wallet.component.scss']
+})
+export class WalletComponent implements OnInit {
+  private ws: WebsocketHandlerService;
+  private failCount = 0;
+  private timer: any;
+  public wallet: Wallet;
+
+  private getWalletMessage = {
+    Event: 'GetPortfolio',
+    data: null,
+  };
+
+  constructor(private websocketHandler: WebsocketHandlerService) {
+    this.ws = websocketHandler;
+    this.ws.messages.subscribe(msg => {
+      if (msg.Event === 'GetPortfolio') {
+        console.log(JSON.stringify(msg.data));
+        this.wallet = <Wallet>msg.data;
+      }
+    });
+  }
+  ngOnInit() {
+    this.setWallet();
+  }
+
+//there has to be a better way
+  private resendMessageIfPageRefreshed(): void {
+    if (this.failCount <= 10) {
+      setTimeout(() => {
+      if (this.wallet === null || this.wallet === undefined) {
+          this.failCount++;
+          this.setWallet();
+        }
+      }, 1000);
+    } else {
+      console.log('Could not load wallet. Check if GocryptoTrader server is running, otherwise open a ticket');
+    }
+  }
+
+  private setWallet():void {
+    this.ws.messages.next(this.getWalletMessage);
+    this.resendMessageIfPageRefreshed();
+  }
+}
+
+

web/src/app/shared/classes/wallet.ts

@@ -0,0 +1,49 @@
+
+export interface CoinTotal {
+    coin: string;
+    balance: number;
+  }
+  
+  export interface CoinsOffline {
+    coin: string;
+    balance: number;
+    percentage: number;
+  }
+  
+  export interface BTC {
+    address: string;
+    balance: number;
+    percentage: number;
+  }
+  
+  export interface ETH {
+    address: string;
+    balance: number;
+    percentage: number;
+  }
+  
+  export interface LTC {
+    address: string;
+    balance: number;
+    percentage: number;
+  }
+  
+  export interface OfflineSummary {
+    BTC: BTC[];
+    ETH: ETH[];
+    LTC: LTC[];
+  }
+  
+  export interface OnlineSummary {
+    BTC: BTC[];
+    ETH: ETH[];
+    LTC: LTC[];
+  }
+  
+  export interface Wallet {
+    coin_totals: CoinTotal[];
+    coins_offline: CoinsOffline[];
+    offline_summary: OfflineSummary;
+    coins_online?: any;
+    online_summary: OnlineSummary;
+  }

web/src/app/shared/navbar/navbar.component.html

@@ -1,6 +1,6 @@
 <!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
 <nav class="docs-navbar">
-    <md-toolbar color="primary">
+    <md-toolbar color="primary" class="md-elevation-z25">
         <a (click)="sidebarService.toggle()" class="material-icons">&#xE5D2;</a>
         <a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
             <span>GoCryptoTrader</span>

web/src/styles.scss

@@ -8,12 +8,19 @@ body {
     
 }
 
-
-
 .loading-spinner {
     margin-left:50%;
     margin-right:50%;
 }
+////////////////////////////////////////////////////////////////
+// Default settings for cards
+////////////////////////////////////////////////////////////////
+.card {
+    width: 80%;
+    margin: 10px auto;
+}
+
+
 
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';