added gauge

src/app/app.module.ts

@@ -18,7 +18,7 @@ import { SignUpComponent } from './auth/sign-up/sign-up.component';
 import { ConfirmCodeComponent } from './auth/confirm-code/confirm-code.component';
 import { ProfileComponent } from './auth/profile/profile.component';
 import { AvatarComponent } from './auth/profile/avatar/avatar.component';
-
+import { NgxGaugeModule} from 'ngx-gauge';
 @NgModule({
   declarations: [
     AppComponent,
@@ -40,7 +40,8 @@ import { AvatarComponent } from './auth/profile/avatar/avatar.component';
     MaterialModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     ReactiveFormsModule,
-    FormsModule
+    FormsModule,
+    NgxGaugeModule
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -157,4 +157,4 @@ export class AvatarComponent {
     this.errorMessage = err.message || err;
   }
 
-}
+}

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

@@ -89,7 +89,7 @@ export class ProfileComponent implements OnInit {
       if (this.avatar) {
         attributes['profile'] = this.avatar;
       }
-      await Auth.updateUserAttributes(this.user,attributes);
+      await Auth.updateUserAttributes(this.user, attributes);
       if (!this.avatar && this.deleteAvatar) {
         this.user.deleteAttributes(["profile"],(error) => {
           if (error) console.log(error);

src/app/home/home.component.html

@@ -1,12 +1,22 @@
 <div class="container">
     <div class ="viewer">
-      <div class="message" *ngFor="let msg of serverMessages" >
-              <p><span>Location: {{ msg.location.S }}</span></p>
-              <p><span>Company: {{ msg.company.S }}</span></p>
-              <p><span>Volume Flow: {{ msg.volume_flow.N }}</span></p>
-              <p><span>Field: {{ msg.field.S }}</span></p>
-              <p>---------------------------------</p>
+      <div class="message" >
+              <p><span>Location:      {{ currentMessage.location.S }}</span></p>
+              <p><span>Company:       {{ currentMessage.company.S }}</span></p>
+              <p><span>Volume Flow:   {{ currentMessage.volume_flow.N }}</span></p>
+              <p><span>Field:         {{ currentMessage.field.S }}</span></p>
+              
       </div>
+      <ngx-gauge
+                  [type] = "gaugeType"
+                  [cap] = "gaugeCap"
+                  [value] = currentMessage.volume_flow.N
+                  [label] = "gaugeLabel"
+                  [append] = "gaugeAppendText"
+                  [thick] = "gaugeThick"
+                  [min] = "gaugeMin"
+                  [max] = "gaugeMax"
+                  [thresholds] = "gaugeThresholds"></ngx-gauge>
     </div>
   </div>
      

src/app/home/home.component.ts

@@ -1,27 +1,51 @@
 import { Component, OnInit } from '@angular/core';
 import { WebSocketSubject } from 'rxjs/webSocket';
+
+export class Message {
+  location: string;
+  field: string;
+  volumeFlow: number;
+  company: string;
+}
+
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
+
 export class HomeComponent implements OnInit {
 
   public serverMessages = new Array<JSON>();
 
-    private socket$: WebSocketSubject<JSON>;
+  private socket$: WebSocketSubject<Message>;
+  private currentMessage: Message;
 
-    constructor() {
+  gaugeType = 'arch';
+  gaugeCap = 'round';
+  gaugeValue = 0;
+  gaugeLabel = 'Volume Flow';
+  gaugeAppendText = 'gpm';
+  gaugeThick = 10;
+  gaugeMin = 0;
+  gaugeMax = 100;
+  gaugeThresholds = {
+    '0' : { color : 'red'},
+    '33' : { color : 'orange'},
+    '66' : { color : 'green'}
+  };
 
-        this.socket$ = new WebSocketSubject('wss://3fseaywb8b.execute-api.us-east-1.amazonaws.com/prototype');
+  constructor() {
 
-        this.socket$
-            .subscribe(
-            (message) =>  this.serverMessages.push(message),
-            (err) => console.error(err),
-            () => console.warn('Completed!')
-            );
-    }
+    this.socket$ = new WebSocketSubject('wss://3fseaywb8b.execute-api.us-east-1.amazonaws.com/prototype');
+
+    this.socket$
+        .subscribe(
+        (message) =>  this.currentMessage = message, // this.serverMessages.push(message),
+        (err) => console.error(err),
+        () => console.warn('Completed!')
+        );
+  }
 
   ngOnInit() {
   }

src/app/loader/loader.service.ts

@@ -10,12 +10,12 @@ export class LoaderService {
   dialogRef: MatDialogRef<LoaderComponent>;
   constructor( private _dialog: MatDialog ) { }
 
-  show(message: string = "Please wait..."): void {
+  show(message: string = 'Please wait...'): void {
     setTimeout(() => {
       this.loading = true;
       this.dialogRef = this._dialog.open(LoaderComponent, {
         width: '80%',
-        data: { 'message': message },
+        data: { message },
         closeOnNavigation: false
       });
     });

src/main.ts

@@ -7,8 +7,9 @@ import { environment } from './environments/environment';
 
 // Amplify Config
 import Auth from '@aws-amplify/auth';
+import Storage from '@aws-amplify/storage';
 import AWSConfig from './aws-exports';
-
+Storage.configure(AWSConfig);
 Auth.configure(AWSConfig);