The calm before updating angular and material

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();
+  }
+}
+
+