diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ae161a6..06307d2 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -19,6 +19,7 @@ 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'; +import { MatSortModule, MatTableModule } from '@angular/material'; @NgModule({ declarations: [ AppComponent, @@ -42,7 +43,9 @@ import { NgxGaugeModule} from 'ngx-gauge'; ReactiveFormsModule, FormsModule, NgxGaugeModule, - FlexLayoutModule + FlexLayoutModule, + MatTableModule, + MatSortModule ], providers: [], bootstrap: [AppComponent], diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 2f0afbb..44256db 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -2,63 +2,112 @@
Total Flow Rate {{ totalFlowRate }}
-
- - - - - {{ message.location }} - - - {{ message.company }} - - - {{ message.field }} - - - Flow Rate: {{ message.volume_flow }} - - - - - - Current - A - - - Intake Pressure - PSI - - - -
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Location {{element.location}} Company {{element.company}} Field {{element.field}} Flow Rate {{element.volumeflow}} Intake Pressure {{element.intakepressure}} Current {{element.current}} Frequency {{element.frequency}}
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index 440bb57..ccf4cfb 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -3,4 +3,16 @@ } .container { padding: 10px; -} \ No newline at end of file +} + +table { + width: 100%; + } + +.mat-form-field { + font-size: 14px; + width: 100%; +} +th.mat-sort-header-sorted { + color: black; + } diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index e28d171..b6c9408 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,12 +1,17 @@ -import { Component, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { WebSocketSubject } from 'rxjs/webSocket'; import Auth from '@aws-amplify/auth'; +import { MatTableDataSource } from '@angular/material'; +import { MatSort } from '@angular/material/sort'; -export class MyJSON { - location: ''; - company: ''; - volume_flow: 0; - field: ''; +export interface MyJSON { + location: string; + company: string; + volumeflow: number; + field: string; + intakepressure: number; + current: number; + frequency: number; } @@ -19,13 +24,21 @@ export class MyJSON { export class HomeComponent implements OnInit, OnDestroy { - public serverMessages = new Array(); + constructor() { + 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']}); + }); + } + + public serverMessages: MyJSON[] = []; private socket$: WebSocketSubject; - private currentMessage = {location: '', company: '', volume_flow: '', field: ''}; + private currentMessage = {location: '', company: '', volumeflow: '', field: ''}; private totalFlowRate = 0; gaugeType = 'arch'; gaugeCap = 'round'; - gaugeValue = this.currentMessage.volume_flow; + gaugeValue = this.currentMessage.volumeflow; gaugeLabel = 'Volume Flow'; gaugeAppendText = 'gpm'; gaugeThick = 10; @@ -37,15 +50,17 @@ export class HomeComponent implements OnInit, OnDestroy { 66 : { color : 'green'} }; - constructor() { - 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']}); - }); + displayedColumns: string[] = ['location', 'company', 'field', 'current', 'volumeflow', 'intakepressure', 'frequency']; + dataSource = new MatTableDataSource(this.serverMessages); + + @ViewChild(MatSort, {static: true}) sort: MatSort; + + applyFilter(filterValue: string) { + this.dataSource.filter = filterValue.trim().toLowerCase(); } ngOnInit() { + this.dataSource.sort = this.sort; } ngOnDestroy() { @@ -58,10 +73,8 @@ export class HomeComponent implements OnInit, OnDestroy { } subscribeWS() { - this.socket$ - .subscribe( - (message) => { - console.log(message); + this.socket$.subscribe((message) => { + // console.log(message); if (message instanceof Array) { message.forEach(element => { this.updateList(element); @@ -70,17 +83,22 @@ export class HomeComponent implements OnInit, OnDestroy { this.updateList(message); } this.totalFlowRate = this.totalFlowRates(0); + this.dataSource.data = this.serverMessages; + // console.log(this.serverMessages); }, (err) => console.error(err), () => console.warn('Completed!') ); } - updateList(obj) { + updateList(obj: MyJSON) { + // console.log(this.serverMessages); + // console.log(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); + obj.volumeflow = Number(obj.volumeflow.toFixed(2)); + obj.current = Number(obj.current.toFixed(2)); + obj.intakepressure = Number(obj.intakepressure.toFixed(2)); + obj.frequency = Number(obj.frequency.toFixed(2)); if (index === -1) { this.serverMessages.push(obj); @@ -92,9 +110,9 @@ export class HomeComponent implements OnInit, OnDestroy { totalFlowRates(temp: number) { temp = 0; this.serverMessages.forEach(element => { - temp += Number(element.volume_flow); + temp += element.volumeflow; }); - return temp; + return Number(temp.toFixed(2)); } }