changed data display added data segregation code

package-lock.json

@@ -999,6 +999,14 @@
         "tslib": "^1.9.0"
       }
     },
+    "@angular/flex-layout": {
+      "version": "8.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-8.0.0-beta.27.tgz",
+      "integrity": "sha512-qmpvQPesU4ZQ56IscwgmVRpK2UnyV+gwvXUql7TMv0QV215hLcHczjGsrKkLfW2By5E7XEyDat9br72uVXcPMw==",
+      "requires": {
+        "tslib": "^1.7.1"
+      }
+    },
     "@angular/forms": {
       "version": "8.2.10",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-8.2.10.tgz",
@@ -4994,9 +5002,9 @@
       "dev": true
     },
     "https-proxy-agent": {
-      "version": "2.2.2",
+      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz",
+      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.3.tgz",
-      "integrity": "sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==",
+      "integrity": "sha512-Ytgnz23gm2DVftnzqRRz2dOXZbGd2uiajSw/95bPp6v53zPRspQjLm/AfBgqbJ2qfeRXWIOMVLpp86+/5yX39Q==",
       "dev": true,
       "requires": {
         "agent-base": "^4.3.0",

package.json

@@ -12,10 +12,11 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~8.2.0",
-    "@angular/cdk": "~8.2.3",
+    "@angular/cdk": "^8.2.3",
     "@angular/common": "~8.2.0",
     "@angular/compiler": "~8.2.0",
     "@angular/core": "~8.2.0",
+    "@angular/flex-layout": "^8.0.0-beta.27",
     "@angular/forms": "~8.2.0",
     "@angular/material": "^8.2.3",
     "@angular/platform-browser": "~8.2.0",

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { FlexLayoutModule } from '@angular/flex-layout';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -41,7 +41,8 @@ import { NgxGaugeModule} from 'ngx-gauge';
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     ReactiveFormsModule,
     FormsModule,
-    NgxGaugeModule
+    NgxGaugeModule,
+    FlexLayoutModule
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/auth/profile/avatar/avatar.component.ts

@@ -83,7 +83,7 @@ export class AvatarComponent {
     this.compressor.compress(file).subscribe(
       () => {
         const { name, size, type } = file;
-        // console.log('compressed size: ', size);
+        // console.log('compressed size: ', size, name, type);
         const fileName = file.name.split('.');
         const fileExt = fileName[fileName.length - 1];
         this.s3ImagePath = `${this.s3ImagePath}/picture.${fileExt}`;
@@ -114,11 +114,13 @@ export class AvatarComponent {
     })
     .catch( error => {
       this.completeFileUpload(error);
+      console.log('error uploading image');
     });
   }
 
   completeFileUpload(error?: any) {
     if (error) {
+      console.log('error completeing upload');
       return this._setError(error);
     }
     this.uploading = false;

src/app/auth/profile/profile.component.html

@@ -19,7 +19,7 @@
       <label>Profile Picture</label>
       <app-avatar 
         [url]="currentAvatarUrl"
-        (loaded)="this.loading.show()"
+        (loaded)="onAvatarUploadStart()"
         (uploaded)="onAvatarUploadComplete($event)"
         (removed)="onAvatarRemove()">
       </app-avatar>

src/app/auth/profile/profile.component.ts

@@ -68,6 +68,10 @@ export class ProfileComponent implements OnInit {
       .then(() => this.router.navigate(['auth/signin']));
   }
 
+  onAvatarUploadStart() {
+    // this.loading.show();
+    // console.log(this.loading);
+  }
   onAvatarUploadComplete(data: any) {
     this.avatar = data.key;
     this.loading.hide();

src/app/auth/sign-in/sign-in.component.html

@@ -16,8 +16,8 @@
         </mat-error>
     </mat-form-field>
     <button mat-raised-button color="primary" (click)="signIn()" [disabled]="!signinForm.valid">Sign In</button>
-    <p style="text-align:center;">or</p>
+    <!--<p style="text-align:center;">or</p>
     <button mat-raised-button color="primary" (click)="signInWithFacebook()">Sign In with Facebook</button><br/><br/>
-    <button mat-raised-button color="primary" (click)="signInWithGoogle()">Sign In with Google</button>
+    <button mat-raised-button color="primary" (click)="signInWithGoogle()">Sign In with Google</button> -->
     <p>Don't have an account? <a routerLink="/auth/signup">Sign up</a></p>
   </form>

src/app/auth/sign-in/sign-in.component.ts

@@ -68,7 +68,7 @@ export class SignInComponent {
       });
   }
 
-  async signInWithFacebook() {
+  /* async signInWithFacebook() {
     const socialResult = await this.auth.socialSignIn(AuthService.FACEBOOK);
     console.log('fb Result:', socialResult);
   }
@@ -76,5 +76,5 @@ export class SignInComponent {
   async signInWithGoogle() {
     const socialResult = await this.auth.socialSignIn(AuthService.GOOGLE);
     console.log('google Result:', socialResult);
-  }
+  } */
 }

src/app/home/home.component.html

@@ -1,23 +1,66 @@
 <div class="container">
-    <div class ="viewer">
+  <div class ="viewer">
-      <div class="message" >
+      <div class="container" fxLayout="row wrap" fxLayoutGap="10px">Total Flow Rate {{ totalFlowRate }}</div>
-              <p><span>Location:      {{ currentMessage.location.S }}</span></p>
+      <mat-divider ></mat-divider>
-              <p><span>Company:       {{ currentMessage.company.S }}</span></p>
+    <div class="container" fxLayout="row wrap"  fxLayoutGap="10px">
-              <p><span>Field:         {{ currentMessage.field.S }}</span></p>
+     <mat-accordion>
-              
+        <mat-expansion-panel *ngFor="let message of serverMessages">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              {{ message.location }}
+            </mat-panel-title>
+            <mat-panel-description>
+              {{ message.company }}
+            </mat-panel-description>
+            <mat-panel-description>
+              {{  message.field  }}
+            </mat-panel-description>
+            <mat-panel-description>
+                Flow Rate: {{  message.volume_flow  }}
+              </mat-panel-description>
+          </mat-expansion-panel-header>
+          <ngx-gauge
+              [type] = "gaugeType"
+              [cap] = "gaugeCap"
+              [value] = "message.volume_flow"
+              [label] = "gaugeLabel"
+              [append] = "gaugeAppendText"
+              [thick] = "gaugeThick"
+              [min] = "gaugeMin"
+              [max] = "gaugeMax"
+              [thresholds] = "gaugeThresholds">
+            </ngx-gauge>
+          <ngx-gauge
+              [type] = "gaugeType"
+              [cap] = "gaugeCap"
+              [value] = "message.current"
+              [label] = "gaugeLabel"
+              [append] = "gaugeAppendText"
+              [thick] = "gaugeThick"
+              [min] = "gaugeMin"
+              [max] = "gaugeMax"
+              [thresholds] = "gaugeThresholds">
+              <ngx-gauge-label>Current</ngx-gauge-label>
+            <ngx-gauge-append>A</ngx-gauge-append>
+            </ngx-gauge>
+            <ngx-gauge
+            [type] = "gaugeType"
+            [cap] = "gaugeCap"
+            [value] = "message.intake_pressure"
+            [label] = "gaugeLabel"
+            [append] = "gaugeAppendText"
+            [thick] = "gaugeThick"
+            [min] = "gaugeMin"
+            [max] = "gaugeMax"
+            [thresholds] = "gaugeThresholds">
+            <ngx-gauge-label>Intake Pressure</ngx-gauge-label>
+            <ngx-gauge-append>PSI</ngx-gauge-append>
+          </ngx-gauge>
+        </mat-expansion-panel>
+      </mat-accordion>
       </div>
-      <ngx-gauge
-                  [type] = "gaugeType"
-                  [cap] = "gaugeCap"
-                  [value] = "gaugeValue"
-                  [label] = "gaugeLabel"
-                  [append] = "gaugeAppendText"
-                  [thick] = "gaugeThick"
-                  [min] = "gaugeMin"
-                  [max] = "gaugeMax"
-                  [thresholds] = "gaugeThresholds">
-                
-              </ngx-gauge>
     </div>
   </div>
-     
+
+  <!--style="float:left;display:inline-block;height:50px;"-->
+  <!-- [ngStyle]="{'width': 'calc(100% /' + serverMessages.length + ')'}"-->

src/app/home/home.component.scss

@@ -0,0 +1,6 @@
+.message {
+    width: 250px;
+}
+.container {
+    padding: 10px;
+}

src/app/home/home.component.ts

@@ -1,7 +1,15 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { WebSocketSubject } from 'rxjs/webSocket';
 import Auth from '@aws-amplify/auth';
 
+export class MyJSON {
+  location: '';
+  company: '';
+  volume_flow: 0;
+  field: '';
+}
+
+
 
 @Component({
   selector: 'app-home',
@@ -9,16 +17,15 @@ import Auth from '@aws-amplify/auth';
   styleUrls: ['./home.component.scss']
 })
 
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, OnDestroy {
-
-  public serverMessages = new Array<JSON>();
 
+  public serverMessages = new Array<MyJSON>();
   private socket$: WebSocketSubject<any>;
-  private currentMessage =  {location: {S: ''}, company: {S: ''}, volume_flow: {N: ''}, field: {S: ''}};
+  private currentMessage =  {location: '', company: '', volume_flow: '', field: ''};
-  private token: string;
+  private totalFlowRate = 0;
   gaugeType = 'arch';
   gaugeCap = 'round';
-  gaugeValue = this.currentMessage.volume_flow.N;
+  gaugeValue = this.currentMessage.volume_flow;
   gaugeLabel = 'Volume Flow';
   gaugeAppendText = 'gpm';
   gaugeThick = 10;
@@ -31,29 +38,64 @@ export class HomeComponent implements OnInit {
   };
 
   constructor() {
-    Auth.currentSession().then(data => {
+    Auth.currentAuthenticatedUser().then(data => {
-      console.log(data.getAccessToken().getJwtToken());
+      this.connectWS(data.signInUserSession.accessToken.jwtToken, data.signInUserSession.idToken.payload['cognito:preferred_role'] );
-      this.token = data.getAccessToken().getJwtToken();
+      this.subscribeWS();
-      this.connectWS(this.token);
+      this.socket$.next({action: 'getDashboardData', policy: data.signInUserSession.idToken.payload['cognito:preferred_role']});
-      // this.subscribeWS();
     });
   }
 
   ngOnInit() {
   }
 
-  connectWS(token: string) {
+  ngOnDestroy() {
-    this.socket$ = new WebSocketSubject('wss://3fseaywb8b.execute-api.us-east-1.amazonaws.com/prototype?token=' + token);
+    this.socket$.complete();
+  }
+
+  connectWS(token: string, role: string) {
+    this.socket$ = new WebSocketSubject('wss://3fseaywb8b.execute-api.us-east-1.amazonaws.com/prototype?token=' + token +
+     '&role=' + role);
   }
 
   subscribeWS() {
     this.socket$
         .subscribe(
-        (message) =>  {this.currentMessage = message;
+        (message) =>  {
-                       this.gaugeValue = parseFloat(this.currentMessage.volume_flow.N).toFixed(2);
+          console.log(message);
-        }, // this.serverMessages.push(message),
+          if (message instanceof Array) {
+              message.forEach(element => {
+                this.updateList(element);
+              });
+          } else {
+              this.updateList(message);
+          }
+          this.totalFlowRate = this.totalFlowRates(0);
+        },
         (err) => console.error(err),
         () => console.warn('Completed!')
         );
   }
+
+  updateList(obj) {
+    const index = this.serverMessages.findIndex((e) => e.location === obj.location);
+    obj.volume_flow = parseFloat(obj.volume_flow).toFixed(2);
+    obj.current = parseFloat(obj.current).toFixed(2);
+    obj.intake_pressure = parseFloat(obj.intake_pressure).toFixed(2);
+    if (index === -1) {
+        this.serverMessages.push(obj);
+
+    } else {
+        this.serverMessages[index] = obj;
+    }
+  }
+
+  totalFlowRates(temp: number) {
+    temp = 0;
+    this.serverMessages.forEach(element => {
+      temp += Number(element.volume_flow);
+    });
+    return temp;
+  }
 }
+
+

src/app/loader/loader.service.ts

@@ -16,7 +16,7 @@ export class LoaderService {
       this.dialogRef = this.dialog.open(LoaderComponent, {
         width: '80%',
         data: { message },
-        closeOnNavigation: false
+        closeOnNavigation: true
       });
     });
   }

src/app/material/material.module.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CdkTreeModule } from '@angular/cdk/tree';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import {
   MatAutocompleteModule,
   MatBadgeModule,
@@ -42,6 +43,7 @@ import {
   exports: [
     CdkTableModule,
     CdkTreeModule,
+    DragDropModule,
     MatAutocompleteModule,
     MatBadgeModule,
     MatBottomSheetModule,