120 lines
3.4 KiB
TypeScript
120 lines
3.4 KiB
TypeScript
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 interface MyJSON {
|
|
location: string;
|
|
company: string;
|
|
volumeflow: number;
|
|
field: string;
|
|
intakepressure: number;
|
|
current: number;
|
|
frequency: number;
|
|
}
|
|
|
|
|
|
|
|
@Component({
|
|
selector: 'app-home',
|
|
templateUrl: './home.component.html',
|
|
styleUrls: ['./home.component.scss']
|
|
})
|
|
|
|
export class HomeComponent implements OnInit, OnDestroy {
|
|
|
|
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<any>;
|
|
private currentMessage = {location: '', company: '', volumeflow: '', field: ''};
|
|
private totalFlowRate = 0;
|
|
gaugeType = 'arch';
|
|
gaugeCap = 'round';
|
|
gaugeValue = this.currentMessage.volumeflow;
|
|
gaugeLabel = 'Volume Flow';
|
|
gaugeAppendText = 'gpm';
|
|
gaugeThick = 10;
|
|
gaugeMin = 0;
|
|
gaugeMax = 100;
|
|
gaugeThresholds = {
|
|
0 : { color : 'red'},
|
|
33 : { color : 'orange'},
|
|
66 : { color : 'green'}
|
|
};
|
|
|
|
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() {
|
|
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) => {
|
|
// console.log(message);
|
|
if (message instanceof Array) {
|
|
message.forEach(element => {
|
|
this.updateList(element);
|
|
});
|
|
} else {
|
|
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: MyJSON) {
|
|
// console.log(this.serverMessages);
|
|
// console.log(obj);
|
|
const index = this.serverMessages.findIndex((e) => e.location === obj.location);
|
|
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);
|
|
|
|
} else {
|
|
this.serverMessages[index] = obj;
|
|
}
|
|
}
|
|
|
|
totalFlowRates(temp: number) {
|
|
temp = 0;
|
|
this.serverMessages.forEach(element => {
|
|
temp += element.volumeflow;
|
|
});
|
|
return Number(temp.toFixed(2));
|
|
}
|
|
}
|
|
|
|
|