general updates and format fixes

src/app/auth/auth.service.ts

@@ -21,7 +21,6 @@ export class AuthService {
   public static SIGN_OUT = 'signOut';
   public static FACEBOOK = CognitoHostedUIIdentityProvider.Facebook;
   public static GOOGLE = CognitoHostedUIIdentityProvider.Google;
-
   public loggedIn: boolean;
   private authStateSubject: Subject<CognitoUser|any> = new Subject<CognitoUser|any>();
   authState: Observable<CognitoUser|any> = this.authStateSubject.asObservable();

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

@@ -11,16 +11,16 @@ import { CompressorService } from 'src/app/services/compressor.service';
 export class AvatarComponent {
 
   photoUrl: string;
-  hasPhoto: boolean = false;
+  hasPhoto = false;
-  uploading: boolean = false;
+  uploading = false;
   s3ImageFile: any = null;
-  s3ImagePath: string = "avatar";
+  s3ImagePath = 'avatar';
   errorMessage: string;
-  previewClass = "app-avatar-upload";
+  previewClass = 'app-avatar-upload';
 
-  private _storageOptions: any = { 'level': 'private' };
+  private storageOptionsHolder: any = { level: 'private' };
-  private _previewClassIdle = "app-avatar-upload";
+  private previewClassIdle = 'app-avatar-upload';
-  private _previewClassOver = "app-avatar-upload-dragover"
+  private previewClassOver = 'app-avatar-upload-dragover';
 
   @Input()
   set url(url: string) {
@@ -29,12 +29,12 @@ export class AvatarComponent {
   }
 
   @Input()
-  set storageOptions(storageOptions: any){
+  set storageOptions(storageOptions: any) {
-    this._storageOptions = Object.assign(this._storageOptions, storageOptions);
+    this.storageOptionsHolder = Object.assign(this.storageOptionsHolder, storageOptions);
   }
 
   @Input()
-  set path(path: string){
+  set path(path: string) {
     this.s3ImagePath = path;
   }
 
@@ -42,7 +42,7 @@ export class AvatarComponent {
   set data(data: any) {
     this.photoUrl = data.url;
     this.s3ImagePath = data.path;
-    this._storageOptions = Object.assign(this._storageOptions, data.storageOptions);
+    this.storageOptionsHolder = Object.assign(this.storageOptionsHolder, data.storageOptions);
     this.hasPhoto = true;
   }
 
@@ -72,25 +72,25 @@ export class AvatarComponent {
     if (!file) { return; }
     const isImage = file.type.split('/')[0] === 'image';
     if (!isImage) {
-      this.previewClass = this._previewClassIdle;
+      this.previewClass = this.previewClassIdle;
       return this.notification.show('Only images are allowed.');
     }
-    if (!this._storageOptions.contentType) {
+    if (!this.storageOptionsHolder.contentType) {
-      this._storageOptions.contentType = file.type;
+      this.storageOptionsHolder.contentType = file.type;
     }
     // console.log('file size: ', file.size);
     this.picked.emit(file);
     this.compressor.compress(file).subscribe(
-      (file: File) => {
+      () => {
         const { name, size, type } = file;
         // console.log('compressed size: ', size);
         const fileName = file.name.split('.');
         const fileExt = fileName[fileName.length - 1];
-        this.s3ImagePath = `${this.s3ImagePath}/picture.${fileExt}`
+        this.s3ImagePath = `${this.s3ImagePath}/picture.${fileExt}`;
         this.s3ImageFile = file;
         const that = this;
         const reader = new FileReader();
-        reader.onload = function(e) {
+        reader.onload = (e) => {
           const target: any = e.target;
           const url = target.result;
           that.photoUrl = url;
@@ -107,8 +107,8 @@ export class AvatarComponent {
     this.uploading = true;
     Storage.put(
         this.s3ImagePath,
-  			this.s3ImageFile, this._storageOptions)
+        this.s3ImageFile, this.storageOptionsHolder)
-		.then ( (result:any) => {
+        .then ( (result: any) => {
       this.uploaded.emit(result);
       this.completeFileUpload();
     })
@@ -117,7 +117,7 @@ export class AvatarComponent {
     });
   }
 
-  completeFileUpload(error?:any) {
+  completeFileUpload(error?: any) {
     if (error) {
       return this._setError(error);
     }
@@ -140,13 +140,13 @@ export class AvatarComponent {
   onDragover(event: DragEvent) {
     event.stopPropagation();
     event.preventDefault();
-    this.previewClass = this._previewClassOver;
+    this.previewClass = this.previewClassOver;
   }
 
   onDragout(event: DragEvent) {
     event.stopPropagation();
     event.preventDefault();
-    this.previewClass = this._previewClassIdle;
+    this.previewClass = this.previewClassIdle;
   }
 
   _setError(err) {

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

@@ -14,7 +14,7 @@ import { LoaderService } from 'src/app/loader/loader.service';
 })
 export class ProfileComponent implements OnInit {
   profileForm: FormGroup = new FormGroup({
-    email: new FormControl('',[ Validators.email ]),
+    email: new FormControl('', [ Validators.email ]),
     phone: new FormControl('', [ Validators.min(10) ]),
     fname: new FormControl('', [ Validators.min(2) ]),
     lname: new FormControl('', [ Validators.min(2) ])
@@ -22,7 +22,7 @@ export class ProfileComponent implements OnInit {
   currentAvatarUrl: string;
   avatar: string;
   deleteAvatar = false;
-  profile:any = {};
+  profile: any = {};
   user: CognitoUser;
 
   get emailInput() { return this.profileForm.get('email'); }
@@ -31,9 +31,9 @@ export class ProfileComponent implements OnInit {
   get phoneInput() { return this.profileForm.get('phone'); }
 
   constructor(
-    private _authService: AuthService,
+    private authService: AuthService,
-    private _router: Router,
+    private router: Router,
-    private _notification: NotificationService,
+    private notification: NotificationService,
     public loading: LoaderService ) { }
 
   ngOnInit() {
@@ -44,13 +44,13 @@ export class ProfileComponent implements OnInit {
   async getUserInfo() {
     this.profile = await Auth.currentUserInfo();
     this.user = await Auth.currentAuthenticatedUser();
-    if ( this.profile.attributes['profile'] ) {
+    if ( this.profile.attributes.profile ) {
-      this.avatar = this.profile.attributes['profile'];
+      this.avatar = this.profile.attributes.profile;
       this.currentAvatarUrl = await Storage.vault.get(this.avatar) as string;
     }
-    this.fnameInput.setValue(this.profile.attributes['given_name']);
+    this.fnameInput.setValue(this.profile.attributes.given_name);
-    this.lnameInput.setValue(this.profile.attributes['family_name']);
+    this.lnameInput.setValue(this.profile.attributes.family_name);
-    this.phoneInput.setValue(this.profile.attributes['phone_number']);
+    this.phoneInput.setValue(this.profile.attributes.phone_number);
     this.loading.hide();
   }
 
@@ -64,8 +64,8 @@ export class ProfileComponent implements OnInit {
   }
 
   signOut() {
-    this._authService.signOut()
+    this.authService.signOut()
-      .then(() => this._router.navigate(['auth/signin']))
+      .then(() => this.router.navigate(['auth/signin']));
   }
 
   onAvatarUploadComplete(data: any) {
@@ -81,22 +81,23 @@ export class ProfileComponent implements OnInit {
 
   async editProfile() {
     try {
-      let attributes = {
+      const attributes = {
-        'given_name': this.fnameInput.value,
+        given_name: this.fnameInput.value,
-        'family_name': this.lnameInput.value,
+        family_name: this.lnameInput.value,
-        'phone_number': this.phoneInput.value
+        phone_number: this.phoneInput.value,
+        profile: this.profile.value
       };
       if (this.avatar) {
-        attributes['profile'] = this.avatar;
+        attributes.profile = this.avatar;
       }
       await Auth.updateUserAttributes(this.user, attributes);
       if (!this.avatar && this.deleteAvatar) {
-        this.user.deleteAttributes(["profile"],(error) => {
+        this.user.deleteAttributes(['profile'], (error) => {
-          if (error) console.log(error);
+          if (error) { console.log(error); }
-          this._notification.show('Your profile information has been updated.');
+          this.notification.show('Your profile information has been updated.');
         });
       } else {
-        this._notification.show('Your profile information has been updated.');
+        this.notification.show('Your profile information has been updated.');
       }
     } catch (error) {
       console.log(error);

src/app/home/home.component.html

@@ -3,20 +3,21 @@
       <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
+                  [value] = "gaugeValue"
                   [label] = "gaugeLabel"
                   [append] = "gaugeAppendText"
                   [thick] = "gaugeThick"
                   [min] = "gaugeMin"
                   [max] = "gaugeMax"
-                  [thresholds] = "gaugeThresholds"></ngx-gauge>
+                  [thresholds] = "gaugeThresholds">
+                
+              </ngx-gauge>
     </div>
   </div>
      

src/app/home/home.component.ts

@@ -1,12 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { WebSocketSubject } from 'rxjs/webSocket';
+import Auth from '@aws-amplify/auth';
 
-export class Message {
-  location: string;
-  field: string;
-  volumeFlow: number;
-  company: string;
-}
 
 @Component({
   selector: 'app-home',
@@ -18,12 +13,12 @@ export class HomeComponent implements OnInit {
 
   public serverMessages = new Array<JSON>();
 
-  private socket$: WebSocketSubject<Message>;
+  private socket$: WebSocketSubject<any>;
-  private currentMessage: Message;
+  private currentMessage =  {location: {S: ''}, company: {S: ''}, volume_flow: {N: ''}, field: {S: ''}};
-
+  private token: string;
   gaugeType = 'arch';
   gaugeCap = 'round';
-  gaugeValue = 0;
+  gaugeValue = this.currentMessage.volume_flow.N;
   gaugeLabel = 'Volume Flow';
   gaugeAppendText = 'gpm';
   gaugeThick = 10;
@@ -36,18 +31,29 @@ export class HomeComponent implements OnInit {
   };
 
   constructor() {
-
+    Auth.currentSession().then(data => {
-    this.socket$ = new WebSocketSubject('wss://3fseaywb8b.execute-api.us-east-1.amazonaws.com/prototype');
+      console.log(data.getAccessToken().getJwtToken());
-
+      this.token = data.getAccessToken().getJwtToken();
-    this.socket$
+      this.connectWS(this.token);
-        .subscribe(
+      // this.subscribeWS();
-        (message) =>  this.currentMessage = message, // this.serverMessages.push(message),
+    });
-        (err) => console.error(err),
-        () => console.warn('Completed!')
-        );
   }
 
   ngOnInit() {
   }
 
+  connectWS(token: string) {
+    this.socket$ = new WebSocketSubject('wss://3fseaywb8b.execute-api.us-east-1.amazonaws.com/prototype?token=' + token);
+  }
+
+  subscribeWS() {
+    this.socket$
+        .subscribe(
+        (message) =>  {this.currentMessage = message;
+                       this.gaugeValue = parseFloat(this.currentMessage.volume_flow.N).toFixed(2);
+        }, // this.serverMessages.push(message),
+        (err) => console.error(err),
+        () => console.warn('Completed!')
+        );
+  }
 }

src/app/loader/loader.service.ts

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