Add show/hide all transducer checkboxes

Author: hi-liang

src/app/components/devices/device-information/device-visualization.component.html

@@ -1,9 +1,20 @@
 <div class="device-visualization">
-  <div class="transducerList">
-    <div *ngFor="let td of deviceTransducers">
-      <md-checkbox [(ngModel)]="td['checked']" (change)="optionToggled()">
-        {{ td.name }}
-      </md-checkbox>
+  <mat-slide-toggle [(ngModel)]="showCheckboxes">Select Transducers</mat-slide-toggle>
+  <div *ngIf="showCheckboxes">
+    <div class="transducerList">
+      <button md-raised-button (click)="checkAll('show')">
+        Show All
+      </button>
+      <button md-raised-button (click)="checkAll('hide')">
+        Hide All
+      </button>
+    </div>
+    <div class="transducerList">
+      <div *ngFor="let td of deviceTransducers">
+        <md-checkbox [(ngModel)]="td['checked']" (change)="optionToggled()">
+          {{ td.name }}
+        </md-checkbox>
+      </div>
     </div>
   </div>
   <div class="resolution">

src/app/components/devices/device-information/device-visualization.component.ts

@@ -15,6 +15,7 @@ export class DeviceVisualizationComponent {
   @Input() device: Device;
   @Output() updateDevice: EventEmitter<boolean> = new EventEmitter();
   deviceTransducers: Array<any>;
+  showCheckboxes: boolean = false;
   frameURL: SafeUrl = [];
   currentRes: 'Hour';
   resOptions = [
@@ -34,6 +35,17 @@ export class DeviceVisualizationComponent {
     this.optionToggled();
   }
 
+  checkAll(action) {
+    let val = true;
+    if (action == 'hide') {
+      val = false;
+    }
+    this.deviceTransducers.forEach( (td) => {
+      td['checked'] = val;
+    });
+    this.optionToggled();
+  }
+
   optionToggled() {
     let grafana_url = this.deviceService.getGrafanaUrl();
     let enabledTransducers = [];