table component for objects

src/app/app.component.html

 <app-map class="wrapper"></app-map>
 
 <chart-timeline></chart-timeline>
+
+<app-table class="wrapper"></app-table>

src/app/app.module.ts

@@ -28,6 +28,7 @@ import { MapComponent } from './components/map/map.component';
 import { AppRoutingModule } from './app-routing.module';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ChartTimelineComponent } from './components/chart-timeline/chart-timeline.component';
+import { TableComponent } from './components/table/table.component';
 
 
 
@@ -36,7 +37,8 @@ import { ChartTimelineComponent } from './components/chart-timeline/chart-timeli
   declarations: [
     AppComponent,
     MapComponent,
-    ChartTimelineComponent
+    ChartTimelineComponent,
+    TableComponent
   ],
   imports: [
     BrowserModule,

src/app/components/chart-timeline/chart-timeline.component.html

-<div id="chart" class="wrapper"> 
+<div id="chart" class="wrapper" *ngIf="chartOptions.series.length > 0"> 
     <apx-chart 
       [series]="chartOptions.series"
       [chart]="chartOptions.chart"

src/app/components/table/table.component.html

+<div class="table" *ngIf="dataSource.length > 0">
+    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+
+        <!-- Agent -->
+        <ng-container matColumnDef="agent">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="Agent">people</mat-icon> Agent
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+        </ng-container>
+
+        <!-- Type -->
+        <ng-container matColumnDef="type">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="Type">style</mat-icon> Type
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element.type}} </td>
+        </ng-container>
+
+        <!-- Time -->
+        <ng-container matColumnDef="time">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="Time">access_time</mat-icon> Time
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element.lastPosUpdate | date:"h:mm:ss" }} </td>
+        </ng-container>
+
+        <!-- Zone -->
+        <ng-container matColumnDef="zone">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="Zone">hive</mat-icon> Zone
+            </th>
+            <td mat-cell *matCellDef="let element"> 
+                <mat-chip-list>
+                    <mat-chip *ngFor="let zone of element.zoneDescriptors"> {{ zone.zoneId }} </mat-chip> 
+                </mat-chip-list> 
+            </td>
+        </ng-container>
+
+        <!-- Position -->
+        <ng-container matColumnDef="position">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="Position">room</mat-icon> Position
+            </th>
+            <td mat-cell *matCellDef="let element">
+                <span *ngFor="let dim of (element.position.point | keyvalue)">
+                    {{dim.key}}: {{dim.value}}
+                </span>
+            </td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+    </table>
+</div>
\ No newline at end of file

src/app/components/table/table.component.scss

+.map {
+    margin-bottom: 20px;
+    height: 70vh
+  }
+  
+  table {
+    width: 100%;
+  }
+  
+  .table {
+    margin-bottom: 35px;
+  
+    th.mat-header-cell {
+      vertical-align: middle;
+    }
+  }
+  
\ No newline at end of file

src/app/components/table/table.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TableComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/table/table.component.ts

+import { Component, OnInit, ViewChild } from '@angular/core';
+import {PositionUpdate, ZoneDesc} from 'src/app/model/base-model';
+
+import { IMqttMessage, MqttService } from 'ngx-mqtt';
+import { Subscription } from 'rxjs';
+import { MatTable } from '@angular/material/table';
+
+
+@Component({
+  selector: 'app-table',
+  templateUrl: './table.component.html',
+  styleUrls: ['./table.component.scss']
+})
+export class TableComponent implements OnInit {
+
+  @ViewChild(MatTable)
+  table!: MatTable<Object>;
+
+  private subsPosition: Subscription;
+
+  displayedColumns: string[] = ['agent', 'type', 'time', 'zone', 'position'];
+
+
+  // testMessages: PositionUpdate[] = [
+  //   { "objects": [{ "id": "turtlebot", "sensorId": "98:CD:AC:26:2D:18", "type": "ROBOT", "sensorType": "RFID_SCANNER", "position": { "refSystemId": "ROOT", "point": { "x": 2.1, "y": 0.4, "z": 0.5 }, "accuracy": 0.1 }, "orientation": { }, "lastPosUpdate": "2021-11-02T09:24:49.394953789+00:00", "zoneDescriptors": [{ "zoneId": "cobot1_door_zone", "notificationType": "EntryNotification" }, { "zoneId": "robolab_east", "notificationType": "EntryNotification" }] }], "type": "EntryNotification" },
+  //   { "objects": [{ "id": "turtlebot", "sensorId": "UWB_1", "type": "ROBOT", "sensorType": "UWB", "position": { "refSystemId": "ROOT", "point": { "x": 3.0, "y": 1.5, "z": 3.0 }, "accuracy": 10.0 }, "orientation": { "x": 1.0, "y": 0.5, "z": 1.0, "w": 1.5 }, "lastPosUpdate": "2021-10-14T19:32:23+00:00", "zoneDescriptors": [{ "zoneId": "cobot1_door_zone", "notificationType": "EntryNotification" }, { "zoneId": "robolab_east", "notificationType": "EntryNotification" }] }], "type": "EntryNotification" },
+  //   { "objects": [{ "id": "turtlebot", "sensorId": "UWB_1", "type": "ROBOT", "sensorType": "UWB", "position": { "refSystemId": "ROOT", "point": { "x": -3.0, "y": 4.5, "z": 3.0 }, "accuracy": 10.0 }, "orientation": { "x": 1.0, "y": 0.5, "z": 1.0, "w": 1.5 }, "lastPosUpdate": "2021-10-14T19:32:22+00:00", "zoneDescriptors": [{ "zoneId": "robolab_east", "notificationType": "EntryNotification" }, { "zoneId": "robolab_west", "notificationType": "EntryNotification" }] }], "type": "EntryNotification" },
+  //   { "objects": [{ "id": "turtlebot", "sensorId": "UWB_1", "type": "ROBOT", "sensorType": "UWB", "position": { "refSystemId": "ROOT", "point": { "x": 3.0, "y": 4.5, "z": 3.0 }, "accuracy": 10.0 }, "orientation": { "x": 1.0, "y": 0.5, "z": 1.0, "w": 1.5 }, "lastPosUpdate": "2021-10-14T19:32:21+00:00", "zoneDescriptors": [{ "zoneId": "robolab_east", "notificationType": "EntryNotification" }, { "zoneId": "cobot1_window_zone", "notificationType": "EntryNotification" }] }], "type": "EntryNotification" },
+  //   { "objects": [{ "id": "turtlebot", "sensorId": "UWB_1", "type": "ROBOT", "sensorType": "UWB", "position": { "refSystemId": "ROOT", "point": { "x": 3.0, "y": 1.5, "z": 3.0 }, "accuracy": 10.0 }, "orientation": { "x": 1.0, "y": 0.5, "z": 1.0, "w": 1.5 }, "lastPosUpdate": "2021-10-14T19:32:20+00:00", "zoneDescriptors": [{ "zoneId": "cobot1_door_zone", "notificationType": "EntryNotification" }, { "zoneId": "robolab_east", "notificationType": "EntryNotification" }] }], "type": "EntryNotification" }
+  // ].map(obj => JSON.parse(JSON.stringify(obj)))
+
+  dataSource: Object[] = []
+
+  constructor(private _mqttService: MqttService) {
+    // this.testMessages.forEach(upd => this.dataSource.push(...upd.objects))
+
+    this.subsPosition = this._mqttService.observe('ipos/client/position').subscribe((message: IMqttMessage) => {
+      let upd: PositionUpdate = JSON.parse(message.payload.toString())
+      console.log(upd.objects)
+      this.dataSource.push(...upd.objects);
+      this.table?.renderRows();
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/model/base-model.ts

@@ -33,7 +33,7 @@ export interface RelativePos {
     z?: number
 }
 
-interface ZoneDesc {
+export interface ZoneDesc {
     zoneId: string
     notificationType: NotificationType
 }

src/app/shared/shared.module.ts

@@ -22,6 +22,8 @@ import { MatCardModule } from '@angular/material/card';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatTableModule } from '@angular/material/table';
+import {MatChipsModule} from '@angular/material/chips';
 // Animation
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
@@ -48,6 +50,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     MatExpansionModule,
     MatSidenavModule,
     MatTooltipModule,
+    MatTableModule
   ],
   exports: [
     FormsModule, 
@@ -68,6 +71,8 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     MatExpansionModule,
     MatSidenavModule,
     MatTooltipModule,
+    MatTableModule,
+    MatChipsModule
   ]
 })
 export class SharedModule { }

src/environments/environment.ts

@@ -23,12 +23,18 @@ export const environment = {
 };
 
 export const MQTTconfig: IMqttServiceOptions = {
-  hostname: 'broker.emqx.io',
-  port: 8084,
-  protocol: 'wss',
+  hostname: 'broker.hivemq.com',
+  port: 8000,
   path: '/mqtt'
 };
 
+// export const SecMQTTconfig: IMqttServiceOptions = {
+//   hostname: 'broker.emqx.io',
+//   port: 8084,
+//   protocol: 'wss',
+//   path: '/mqtt'
+// };
+
 export const MarkerColorMap: { [key: string]: MarkerColor } = {
   "ROOT": {"marker": "red", "circle": "#d32f2f"},
   "Employee1": {"marker": "green", "circle": "#008632"},