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

changed data display added data segregation code

Browse Source
This commit is contained in:
Nico Melone
2019-11-14 15:59:21 -06:00
parent 6a046299d1
commit df50177061
13 changed files with 158 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -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",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz",
"integrity": "sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==",
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-2.2.3.tgz",
"integrity": "sha512-Ytgnz23gm2DVftnzqRRz2dOXZbGd2uiajSw/95bPp6v53zPRspQjLm/AfBgqbJ2qfeRXWIOMVLpp86+/5yX39Q==",
"dev": true,
"requires": {
"agent-base": "^4.3.0",

3
package.json
View File

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

5
src/app/app.module.ts
View File

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

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

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

2
src/app/auth/profile/profile.component.html
View File

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

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

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

4
src/app/auth/sign-in/sign-in.component.html
View File

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

4
src/app/auth/sign-in/sign-in.component.ts
View File

@@ -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);
}
} */
}

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

@@ -1,23 +1,66 @@
<div class="container">
<div class ="viewer">
<div class="message" >
<p><span>Location: {{ currentMessage.location.S }}</span></p>
<p><span>Company: {{ currentMessage.company.S }}</span></p>
<p><span>Field: {{ currentMessage.field.S }}</span></p>
<div class ="viewer">
<div class="container" fxLayout="row wrap" fxLayoutGap="10px">Total Flow Rate {{ totalFlowRate }}</div>
<mat-divider ></mat-divider>
<div class="container" fxLayout="row wrap" fxLayoutGap="10px">
<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 + ')'}"-->

6
src/app/home/home.component.scss
View File

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

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

@@ -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 {
public serverMessages = new Array<JSON>();
export class HomeComponent implements OnInit, OnDestroy {
public serverMessages = new Array<MyJSON>();
private socket$: WebSocketSubject<any>;
private currentMessage = {location: {S: ''}, company: {S: ''}, volume_flow: {N: ''}, field: {S: ''}};
private token: string;
private currentMessage = {location: '', company: '', volume_flow: '', field: ''};
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 => {
console.log(data.getAccessToken().getJwtToken());
this.token = data.getAccessToken().getJwtToken();
this.connectWS(this.token);
// this.subscribeWS();
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']});
});
}
ngOnInit() {
}
connectWS(token: string) {
this.socket$ = new WebSocketSubject('wss://3fseaywb8b.execute-api.us-east-1.amazonaws.com/prototype?token=' + token);
ngOnDestroy() {
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;
this.gaugeValue = parseFloat(this.currentMessage.volume_flow.N).toFixed(2);
}, // this.serverMessages.push(message),
(message) => {
console.log(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;
}
}

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

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

2
src/app/material/material.module.ts
View File

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