nmelone/HPIoTWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

general updates and format fixes

Browse Source
This commit is contained in:
Nico Melone
2019-10-24 09:34:54 -05:00
parent 0d7136ce3d
commit 6a046299d1
6 changed files with 91 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/auth/auth.service.ts
View File

@@ -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();

72
src/app/auth/profile/avatar/avatar.component.ts
View File

@@ -11,16 +11,16 @@ import { CompressorService } from 'src/app/services/compressor.service';
export class AvatarComponent {
photoUrl: string;
hasPhoto: boolean = false;
uploading: boolean = false;
hasPhoto = false;
uploading = false;
s3ImageFile: any = null;
s3ImagePath: string = "avatar";
s3ImagePath = 'avatar';
errorMessage: string;
previewClass = "app-avatar-upload";
private _storageOptions: any = { 'level': 'private' };
private _previewClassIdle = "app-avatar-upload";
private _previewClassOver = "app-avatar-upload-dragover"
previewClass = 'app-avatar-upload';
private storageOptionsHolder: any = { level: 'private' };
private previewClassIdle = 'app-avatar-upload';
private previewClassOver = 'app-avatar-upload-dragover';
@Input()
set url(url: string) {
@@ -29,12 +29,12 @@ export class AvatarComponent {
}
@Input()
set storageOptions(storageOptions: any){
this._storageOptions = Object.assign(this._storageOptions, storageOptions);
set storageOptions(storageOptions: any) {
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;
}
@@ -51,7 +51,7 @@ export class AvatarComponent {
@Output()
loaded: EventEmitter<string> = new EventEmitter<string>();
@Output()
uploaded: EventEmitter<Object> = new EventEmitter<Object>();
@@ -66,31 +66,31 @@ export class AvatarComponent {
if (evt.target.files) {
file = evt.target.files[0];
}
if (!file && evt.dataTransfer.files) {
if (!file && evt.dataTransfer.files) {
file = evt.dataTransfer.files[0];
}
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) {
this._storageOptions.contentType = file.type;
if (!this.storageOptionsHolder.contentType) {
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;
@@ -104,23 +104,23 @@ export class AvatarComponent {
}
uploadFile() {
this.uploading = true;
Storage.put(
this.s3ImagePath,
this.s3ImageFile, this._storageOptions)
.then ( (result:any) => {
this.uploading = true;
Storage.put(
this.s3ImagePath,
this.s3ImageFile, this.storageOptionsHolder)
.then ( (result: any) => {
this.uploaded.emit(result);
this.completeFileUpload();
})
.catch( error => {
this.completeFileUpload(error);
});
this.completeFileUpload();
})
.catch( error => {
this.completeFileUpload(error);
});
}
completeFileUpload(error?:any) {
if (error) {
return this._setError(error);
}
completeFileUpload(error?: any) {
if (error) {
return this._setError(error);
}
this.uploading = false;
}
@@ -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) {

47
src/app/auth/profile/profile.component.ts
View File

@@ -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,18 +22,18 @@ export class ProfileComponent implements OnInit {
currentAvatarUrl: string;
avatar: string;
deleteAvatar = false;
profile:any = {};
profile: any = {};
user: CognitoUser;
get emailInput() { return this.profileForm.get('email'); }
get fnameInput() { return this.profileForm.get('fname'); }
get lnameInput() { return this.profileForm.get('lname'); }
get phoneInput() { return this.profileForm.get('phone'); }
constructor(
private _authService: AuthService,
private _router: Router,
private _notification: NotificationService,
constructor(
private authService: AuthService,
private router: Router,
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'] ) {
this.avatar = this.profile.attributes['profile'];
if ( 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.lnameInput.setValue(this.profile.attributes['family_name']);
this.phoneInput.setValue(this.profile.attributes['phone_number']);
this.fnameInput.setValue(this.profile.attributes.given_name);
this.lnameInput.setValue(this.profile.attributes.family_name);
this.phoneInput.setValue(this.profile.attributes.phone_number);
this.loading.hide();
}
@@ -64,8 +64,8 @@ export class ProfileComponent implements OnInit {
}
signOut() {
this._authService.signOut()
.then(() => this._router.navigate(['auth/signin']))
this.authService.signOut()
.then(() => this.router.navigate(['auth/signin']));
}
onAvatarUploadComplete(data: any) {
@@ -81,22 +81,23 @@ export class ProfileComponent implements OnInit {
async editProfile() {
try {
let attributes = {
'given_name': this.fnameInput.value,
'family_name': this.lnameInput.value,
'phone_number': this.phoneInput.value
const attributes = {
given_name: this.fnameInput.value,
family_name: this.lnameInput.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) => {
if (error) console.log(error);
this._notification.show('Your profile information has been updated.');
this.user.deleteAttributes(['profile'], (error) => {
if (error) { console.log(error); }
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);

7
src/app/home/home.component.html
View File

@@ -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>

44
src/app/home/home.component.ts
View File

@@ -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 currentMessage: Message;
private socket$: WebSocketSubject<any>;
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() {
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!')
);
Auth.currentSession().then(data => {
console.log(data.getAccessToken().getJwtToken());
this.token = data.getAccessToken().getJwtToken();
this.connectWS(this.token);
// this.subscribeWS();
});
}
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!')
);
}
}

4
src/app/loader/loader.service.ts
View File

@@ -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