Beginnings of the wallet summary

Changes width of menu to be smaller

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

@@ -2,7 +2,7 @@
     <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
 </div>
 <div *ngIf="settings !== null">
-    <button (click)="saveSettings()" mat-fab color="accent" class="mat-fab mat-fab-bottom-right">Save</button>
+    <button (click)="saveSettings()" mat-fab color="accent" class="mat-fab mat-fab-bottom-right"><mat-icon >save</mat-icon></button>
     <form *ngIf="settings.SMSGlobal != null">
         <mat-card class="exchange-card card">
             <mat-card-header>

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

@@ -1,16 +1,7 @@
-.example-form {
-    min-width: 150px;
-    width: 100%;
-}
-
-.example-full-width {
-    width: 100%;
-}
-
 // FAB
 .mat-fab {
     top: auto;
-    right: 20px;
+    right: 30px;
     bottom: 20px;
     left: auto;
     position: fixed;

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

@@ -3,26 +3,81 @@
       <mat-card-title>Wallet Summary</mat-card-title>
   </mat-card-header>
   <mat-card-content>
-      <table cellspacing="0">
-          <tr>
-              <td>
-              </td>
-          </tr>
-      </table>
-      <mat-grid-list cols="2" rowHeight="3:1">
-          <mat-grid-tile>
-          </mat-grid-tile>
-          <mat-grid-tile>
-          </mat-grid-tile>
-      </mat-grid-list>
-      <mat-grid-list cols="3" rowHeight="2:1" *ngFor="let total of wallet?.CoinTotal">
-          <mat-grid-tile>
-            {{total.coin}} - {{total.balance}}
-          </mat-grid-tile>
-          <mat-grid-tile>
-          </mat-grid-tile>
-          <mat-grid-tile>
-          </mat-grid-tile>
-      </mat-grid-list>
+      <mat-list>
+            <h3 mat-subheader>Coin Totals</h3>
+            <mat-list-item *ngFor="let coin of wallet?.coin_totals">
+              <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
+              <h4 mat-line>{{coin.coin}}</h4>
+              <h4 mat-line>{{coin.balance}}</h4>
+            </mat-list-item>
+     </mat-list>
+            <mat-divider></mat-divider>
+            <mat-list>
+            
+            <h3 mat-subheader>Coins Offline</h3>
+            <mat-list-item *ngFor="let coin of wallet?.coins_offline">
+                    <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
+                    <h4 mat-line>{{coin.coin}}</h4>
+                    <h4 mat-line>{{coin.balance}}</h4>
+                  </mat-list-item>
+          </mat-list>
+          <mat-divider></mat-divider>
+      <mat-list>
+            
+          <h3 mat-subheader>Coins Online</h3>
+          <mat-list-item *ngFor="let coin of wallet?.coins_online">
+                    <mat-icon mat-list-icon [ngClass]="coin.coin">{{coin.icon}}</mat-icon>
+                    <h4 mat-line>{{coin.coin}}</h4>
+                    <h4 mat-line>{{coin.balance}}</h4>
+                  </mat-list-item>
+          </mat-list>
+
+          <mat-divider></mat-divider>
+          <mat-list>
+                <h3 mat-subheader>Online Summary</h3>
+                      <mat-list-item *ngFor="let coin of wallet?.online_summary.BTC">
+                        <mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
+                        <h4 mat-line>Address: {{coin.address}}</h4>
+                        <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+                    </mat-list-item>
+                    <mat-divider></mat-divider>
+                    
+                    <mat-list-item *ngFor="let coin of wallet?.online_summary.LTC">
+                      <mat-icon mat-list-icon class="LTC">{{coinIcon('LTC')}}</mat-icon>
+                      <h4 mat-line>Address: {{coin.address}}</h4>
+                      <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+                  </mat-list-item>
+                <mat-divider></mat-divider>
+      
+                  <mat-list-item *ngFor="let coin of wallet?.online_summary.ETH">
+                          <mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
+                          <h4 mat-line>Address: {{coin.address}}</h4>
+                          <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+                      </mat-list-item>
+                </mat-list>
+        <mat-divider></mat-divider>
+
+        <mat-list>
+          <h3 mat-subheader>Offline Summary</h3>
+                <mat-list-item *ngFor="let coin of wallet?.offline_summary.BTC">
+                  <mat-icon mat-list-icon class="BTC">{{coinIcon('BTC')}}</mat-icon>
+                  <h4 mat-line>Address: {{coin.address}}</h4>
+                  <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+              </mat-list-item>
+              <mat-divider></mat-divider>
+              
+              <mat-list-item *ngFor="let coin of wallet?.offline_summary.LTC">
+                <mat-icon mat-list-icon class="LTC">{{coinIcon('LTC')}}</mat-icon>
+                <h4 mat-line>Address: {{coin.address}}</h4>
+                <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+            </mat-list-item>
+          <mat-divider></mat-divider>
+
+            <mat-list-item *ngFor="let coin of wallet?.offline_summary.ETH">
+                    <mat-icon mat-list-icon class="ETH">{{coinIcon('ETH')}}</mat-icon>
+                    <h4 mat-line>Address: {{coin.address}}</h4>
+                    <h4 mat-line>{{coin.balance}}{{coin.coin}} - {{coin.percentage}}%</h4>
+                </mat-list-item>
+          </mat-list>
   </mat-card-content>
 </mat-card>

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

@@ -1,4 +1,14 @@
 .wallet-card {
     width: 80%;
     margin: 10px auto;
+}
+
+.BTC {
+    color:orange;
+}
+.LTC {
+    color:silver;
+}
+.ETH {
+    color:darkslategrey;
 }

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

@@ -1,18 +1,20 @@
 import { Component, OnInit } from '@angular/core';
 import { WebsocketHandlerService } from './../../services/websocket-handler/websocket-handler.service';
-import { Wallet } from './../../shared/classes/wallet';
-
+import { Wallet, CoinTotal } from './../../shared/classes/wallet';
+import {Sort} from '@angular/material';
 
 @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;
+  displayedColumns = ['coin', 'balance'];
 
   private getWalletMessage = {
     Event: 'GetPortfolio',
@@ -25,9 +27,36 @@ export class WalletComponent implements OnInit {
       if (msg.Event === 'GetPortfolio') {
         console.log(JSON.stringify(msg.data));
         this.wallet = <Wallet>msg.data;
+        
+        this.attachIcon(this.wallet.coin_totals);
+        this.attachIcon(this.wallet.coins_offline);
+        this.attachIcon(this.wallet.coins_online);
+        
+        this.attachIcon(this.wallet.offline_summary.BTC);
+        this.attachIcon(this.wallet.offline_summary.ETH);
+        this.attachIcon(this.wallet.offline_summary.LTC);
+        
+        this.attachIcon(this.wallet.online_summary.BTC);
+        this.attachIcon(this.wallet.online_summary.ETH);
+        this.attachIcon(this.wallet.online_summary.LTC);
       }
     });
   }
+
+  public coinIcon(coin:string) :string {
+    switch(coin) {
+      case "BTC": return "attach_money";
+      case "LTC": return "attach_money";
+      case "ETH": return "attach_money";
+    }
+  }
+
+public attachIcon(items:CoinTotal[]) :void {
+  for(var i = 0; i<items.length; i++) {
+    items[i].icon = this.coinIcon(items[i].coin);
+  }
+}
+
   ngOnInit() {
     this.setWallet();
   }