editted table formatting

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

src/app/home/home.component.html

@@ -2,63 +2,112 @@
   <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>
+      <mat-form-field>
+          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
+        </mat-form-field>
+      <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
+
+          
+          <ng-container matColumnDef="location">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Location </th>
+            <td mat-cell *matCellDef="let element"> {{element.location}} </td>
+          </ng-container>
+        
+         
+          <ng-container matColumnDef="company">
+            <th mat-header-cell *matHeaderCellDef> Company </th>
+            <td mat-cell *matCellDef="let element"> {{element.company}} </td>
+          </ng-container>
+        
+          
+          <ng-container matColumnDef="field">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Field </th>
+            <td mat-cell *matCellDef="let element"> {{element.field}} </td>
+          </ng-container>
+        
+          
+          <ng-container matColumnDef="volumeflow">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Flow Rate </th>
+            <td mat-cell *matCellDef="let element"> {{element.volumeflow}} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="intakepressure">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Intake Pressure </th>
+            <td mat-cell *matCellDef="let element"> {{element.intakepressure}} </td>
+          </ng-container>
+
+          <ng-container matColumnDef="current">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Current </th>
+            <td mat-cell *matCellDef="let element"> {{element.current}} </td>
+          </ng-container>
+
+          
+
+          <ng-container matColumnDef="frequency">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header> Frequency </th>
+            <td mat-cell *matCellDef="let element"> {{element.frequency}} </td>
+          </ng-container>
+        
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        </table>
+        <!-- <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.volumeflow  }}
+                    </mat-panel-description>
+                </mat-expansion-panel-header>
+                <ngx-gauge
+                    [type] = "gaugeType"
+                    [cap] = "gaugeCap"
+                    [value] = "message.volumeflow"
+                    [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.intakepressure"
+                  [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> -->
     </div>
   </div>
 

src/app/home/home.component.scss

@@ -4,3 +4,15 @@
 .container {
     padding: 10px;
 }
+
+table {
+    width: 100%;
+  }
+ 
+.mat-form-field {
+    font-size: 14px;
+    width: 100%;
+}
+th.mat-sort-header-sorted {
+    color: black;
+  }

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<MyJSON>();
+  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: '', 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));
   }
 }