Added role switching capabilities

src/app/home/home.component.html

@@ -1,6 +1,23 @@
 <div class="container">
   <div class ="viewer">
-      <div class="container" fxLayout="row wrap" fxLayoutGap="30px">Total Flow Rate {{ totalFlowRate }}</div>
+      <div class="container" fxLayout="row wrap" fxLayoutGap="30px">
+        Total Flow Rate {{ totalFlowRate }}
+
+        <div class="flex-spacer"></div>
+
+        <mat-menu #appMenu="matMenu">
+          <ng-container *ngFor="let item of groups; let i = index">
+            <button mat-menu-item (click)="setRole(i)"> {{ item }}</button>
+          </ng-container>
+        </mat-menu>
+        
+        <button mat-icon-button [matMenuTriggerFor]="appMenu">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+      </div>
+
+      
+
       <mat-divider ></mat-divider>
       <mat-form-field>
           <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">

src/app/home/home.component.scss

@@ -2,9 +2,12 @@
     width: 250px;
 }
 .container {
+    //display: flex;
     padding: 15px;
 }
-
+.flex-spacer {
+    flex-grow: 1;
+}
 table {
     width: 100%;
   }

src/app/home/home.component.ts

@@ -26,9 +26,15 @@ export class HomeComponent implements OnInit, OnDestroy {
 
   constructor() {
     Auth.currentAuthenticatedUser().then(data => {
-      this.connectWS(data.signInUserSession.accessToken.jwtToken, data.signInUserSession.idToken.payload['cognito:preferred_role'] );
-      this.subscribeWS();
-      this.socket$.next({action: 'getDashboardData', policy: data.signInUserSession.idToken.payload['cognito:preferred_role']});
+      // console.log(data);
+      this.roles = data.signInUserSession.idToken.payload['cognito:roles'];
+      this.groups = data.signInUserSession.idToken.payload['cognito:groups'];
+      this.groups.forEach( (element, index, array)  => {
+        array[index] = element.replace(/_/g, ' ');
+      });
+      this.currentRole = data.signInUserSession.idToken.payload['cognito:roles'][0];
+      this.token = data.signInUserSession.accessToken.jwtToken;
+      this.connect();
     });
   }
 
@@ -36,6 +42,10 @@ export class HomeComponent implements OnInit, OnDestroy {
   private socket$: WebSocketSubject<any>;
   private currentMessage =  {location: '', company: '', volumeflow: '', field: ''};
   private totalFlowRate = 0;
+  private roles: string[];
+  private groups: string[];
+  private currentRole: string;
+  private token: string;
   gaugeType = 'arch';
   gaugeCap = 'round';
   gaugeValue = this.currentMessage.volumeflow;
@@ -67,9 +77,16 @@ export class HomeComponent implements OnInit, OnDestroy {
     this.socket$.complete();
   }
 
+  connect() {
+    this.connectWS(this.token, this.currentRole);
+    this.subscribeWS();
+    this.socket$.next({action: 'getDashboardData', policy: this.currentRole});
+  }
+
   connectWS(token: string, role: string) {
     this.socket$ = new WebSocketSubject('wss://3fseaywb8b.execute-api.us-east-1.amazonaws.com/prototype?token=' + token +
      '&role=' + role);
+    // console.log(this.socket$);
   }
 
   subscribeWS() {
@@ -82,7 +99,7 @@ export class HomeComponent implements OnInit, OnDestroy {
           } else {
               this.updateList(message);
           }
-          this.totalFlowRate = this.totalFlowRates(0);
+          this.totalFlowRate = this.totalFlowRates();
           this.dataSource.data = this.serverMessages;
           // console.log(this.serverMessages);
         },
@@ -107,13 +124,20 @@ export class HomeComponent implements OnInit, OnDestroy {
     }
   }
 
-  totalFlowRates(temp: number) {
-    temp = 0;
+  totalFlowRates() {
+    let temp = 0;
     this.serverMessages.forEach(element => {
       temp += element.volumeflow;
     });
     return Number(temp.toFixed(2));
   }
+
+  setRole(index: number) {
+    this.currentRole = this.roles[index];
+    this.socket$.complete();
+    this.serverMessages = [];
+    this.connect();
+  }
 }