Beginnings of the wallet summary

Changes width of menu to be smaller

web/src/app/app.component.html

@@ -1,5 +1,5 @@
-    <app-navbar class="navbar"></app-navbar>
-    <mat-sidenav-container class="container">
+    <app-navbar class="navbar mat-elevation-z6"></app-navbar>
+    <mat-sidenav-container class="container ">
         <mat-sidenav #sidenav mode="side" class="sidebar" opened="true">
             <mat-nav-list>
                     <mat-list-item routerLink="dashboard" routerLinkActive="dashboard-highlight">

web/src/app/app.component.scss

@@ -9,11 +9,12 @@
     align-items: center;
     justify-content: center;
     padding: 20px 70px 0;
-    min-width:80%;
+    min-width:94%;
+    margin: 10px auto;
 }
 
 .sidebar{
-    width:20%;
+    width:16%;
 }
 
 .dashboard-highlight {

web/src/app/app.module.ts

@@ -21,6 +21,7 @@ import {
   MatProgressSpinnerModule,
   MatSidenavModule,
   MatListModule,
+  MatSortModule
 } from '@angular/material';
 
 
@@ -80,6 +81,7 @@ import * as Rx from 'rxjs/Rx';
     MatProgressSpinnerModule,
     MatSidenavModule,
     MatListModule,
+    MatSortModule,
   ],
   providers: [ElectronService,WebsocketService,WebsocketHandlerService, SidebarService],
   bootstrap: [AppComponent]

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

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

@@ -2,48 +2,21 @@
 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;
+    icon:string;
   }
   
-  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 Summary {
+    BTC: CoinTotal[];
+    ETH: CoinTotal[];
+    LTC: CoinTotal[];
   }
   
   export interface Wallet {
     coin_totals: CoinTotal[];
-    coins_offline: CoinsOffline[];
-    offline_summary: OfflineSummary;
-    coins_online?: any;
-    online_summary: OnlineSummary;
+    coins_offline: CoinTotal[];
+    offline_summary: Summary;
+    coins_online: CoinTotal[];
+    online_summary: Summary;
   }

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">
-    <mat-toolbar color="primary" class="mat-elevation-z25">
+    <mat-toolbar color="primary">
         <a (click)="sidebarService.toggle()" class="material-icons">&#xE5D2;</a>
         <a mat-button class="docs-button" routerLink="/" aria-label="Angular Material">
             <span>GoCryptoTrader</span>

web/src/app/shared/sidebar/sidebar.component.scss

@@ -3,6 +3,8 @@
     width:20%;
 }
 
+
+
 .dashboard-highlight {
     color: green !important;
 }

web/src/styles.scss

@@ -8,6 +8,8 @@ body {
     
 }
 
+
+
 .loading-spinner {
     margin-left:50%;
     margin-right:50%;
@@ -20,7 +22,9 @@ body {
     margin: 10px auto;
 }
 
-
+.mat-drawer {
+    background: none !important;
+}
 
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';