From d7f6693027963cfb31a0697e72d04daaaff7fb0f Mon Sep 17 00:00:00 2001
From: GloriousCode <scott@gloriousedge.com>
Date: Fri, 20 Oct 2017 17:34:06 +1100
Subject: [PATCH] Further improvements to settings optimisation with lists.
 Still could do more

---
 .../app/pages/settings/settings.component.html  | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/web/src/app/pages/settings/settings.component.html b/web/src/app/pages/settings/settings.component.html
index de2f1009..cbe0f0c7 100644
--- a/web/src/app/pages/settings/settings.component.html
+++ b/web/src/app/pages/settings/settings.component.html
@@ -41,7 +41,7 @@
 
 
         <mat-expansion-panel *ngFor="let exchange of settings?.Exchanges">
-            <mat-expansion-panel-header color="secondary">
+            <mat-expansion-panel-header>
                 <mat-panel-title>
                     {{exchange.Name}}
                 </mat-panel-title>
@@ -53,7 +53,6 @@
             <form class="form-content">
                 <mat-checkbox name="exchangeEnabled" [(ngModel)]="exchange.Enabled">Enabled</mat-checkbox>
                 <div mat-line></div>
-                <div *ngIf="exchange.Enabled">
                     <mat-form-field>
                         <input matInput name="apiKey" [(ngModel)]="exchange.APIKey" [disabled]="!exchange.Enabled" placeholder="API Key*">
                     </mat-form-field>
@@ -64,17 +63,15 @@
                         <input matInput name="apiClientId" [(ngModel)]="exchange.ClientID" [disabled]="!exchange.Enabled" placeholder="API ClientID">
                     </mat-form-field>
                     <div mat-line></div>
-
                     <mat-panel-description>
-                        Enabled Currency pairs
+                        Enabled Currency pairs {{enabledCurrencies.selectedOptions.selected.length}}
                     </mat-panel-description>
                     <div mat-line></div>
-                    <mat-list>
-                        <mat-list-item *ngFor="let currency of exchange.AvailablePairs.split(',')">
-                            <mat-checkbox name="availableCurrency" [disabled]="true || !exchange.Enabled">{{currency}}</mat-checkbox>
-                        </mat-list-item>
-                    </mat-list>
-                </div>
+                    <mat-selection-list #enabledCurrencies>
+                            <mat-list-option [disabled]="!exchange.Enabled" *ngFor="let currency of exchange.AvailablePairs.split(',')">
+                              {{currency}}
+                            </mat-list-option>
+                          </mat-selection-list>
             </form>
         </mat-expansion-panel>
     </mat-accordion>