picl list table with fEndInitPicklists

src/app/app.component.html

-<app-map class="wrapper"></app-map>
+<mat-tab-group class="wrapper">
+
+    <mat-tab label="Map"> 
+        <app-map></app-map>
+        <app-table></app-table> 
+    </mat-tab>
+
+    <mat-tab label="Pick list"> 
+        <p>...</p>
+        <pick-list></pick-list>
+    </mat-tab>
+
+    <mat-tab label="Timeline"> 
+        <chart-timeline> ... </chart-timeline> 
+    </mat-tab>
+    
+</mat-tab-group>
+
+
+
+
+
+
+
+
 
-<chart-timeline></chart-timeline>
 
-<app-table class="wrapper"></app-table>

src/app/app.module.ts

@@ -29,6 +29,7 @@ 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';
+import { PickListComponent } from './components/pick-list/pick-list.component';
 
 
 
@@ -38,7 +39,8 @@ import { TableComponent } from './components/table/table.component';
     AppComponent,
     MapComponent,
     ChartTimelineComponent,
-    TableComponent
+    TableComponent,
+    PickListComponent
   ],
   imports: [
     BrowserModule,

src/app/components/pick-list/pick-list.component.html

+
+<mat-card *ngIf="tableData">
+    <p><mat-icon aria-hidden="false" aria-label="Product">people</mat-icon> Picker: <span>{{tableData.fEndInitPicklists[0].pickerId}}</span></p>
+    <p><mat-icon aria-hidden="false" aria-label="List">format_list_bulleted</mat-icon> Lisdt ID: <span>{{tableData.fEndInitPicklists[0].picklistId}}</span></p>
+</mat-card>
+
+
+<div class="table" *ngIf="tableData">
+    <table mat-table [dataSource]="tableData.fEndInitPicklists[0].fEndInitRows" class="mat-elevation-z8">
+
+        <!-- Product -->
+        <ng-container matColumnDef="product">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="Product">production_quantity_limits</mat-icon> Product
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element.productId}} </td>
+        </ng-container>
+
+        <!-- Inventory -->
+        <ng-container matColumnDef="inventory">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="Inventory">style</mat-icon> Inventory
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element.inventoryItemSoll}} </td>
+        </ng-container>
+
+        <!-- Shipment -->
+        <ng-container matColumnDef="shipment">
+            <th mat-header-cell *matHeaderCellDef>
+                <mat-icon aria-hidden="false" aria-label="Shipment">departure_board</mat-icon> Shipment
+            </th>
+            <td mat-cell *matCellDef="let element"> {{element.shipmentBinNrSoll}} </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/pick-list/pick-list.component.scss

+.map {
+    margin-bottom: 20px;
+    height: 70vh
+  }
+  
+  table {
+    width: 100%;
+  }
+  
+  .table {
+    margin-bottom: 35px;
+  
+    th.mat-header-cell {
+      vertical-align: middle;
+    }
+  }
+  
+mat-card {
+    p {
+        color: rgba(0,0,0,.54)
+    }
+    span {
+        color: rgba(0,0,0,.87)
+    }
+}
\ No newline at end of file

src/app/components/pick-list/pick-list.component.spec.ts

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

src/app/components/pick-list/pick-list.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';
+import { NONE_TYPE } from '@angular/compiler';
+
+var MESSAGE  = '{ \
+  "fEndInitPicklists": [{\
+    "picklistId": "picklist_1",\
+    "pickerId": "Employee_1",\
+    "fEndInitRows": [{\
+      "index": 1,\
+      "productId": "Rasierer",\
+      "inventoryItemSoll": "invit1",\
+      "shipmentBinNrSoll": 4\
+    }, {\
+      "index": 2,\
+      "productId": "Smartphone",\
+      "inventoryItemSoll": "invit2",\
+      "shipmentBinNrSoll": 3\
+    }, {\
+      "index": 3,\
+      "productId": "Bohrmaschine",\
+      "inventoryItemSoll": "invit3",\
+      "shipmentBinNrSoll": 3\
+    }, {\
+      "index": 4,\
+      "productId": "Hammer",\
+      "inventoryItemSoll": "invit4",\
+      "shipmentBinNrSoll": 3\
+    }]\
+  }]\
+}'
+
+@Component({
+  selector: 'pick-list',
+  templateUrl: './pick-list.component.html',
+  styleUrls: ['./pick-list.component.scss']
+})
+export class PickListComponent implements OnInit {
+
+  @ViewChild(MatTable)
+  table!: MatTable<Object>;
+
+  private subsPosition: Subscription;
+
+  displayedColumns: string[] = ['product', 'inventory', 'shipment'];
+
+  tableData: any;
+
+  constructor(private _mqttService: MqttService) {
+ 
+    let msg = JSON.parse(MESSAGE.toString()) 
+    this.tableData = msg
+
+    this.subsPosition = this._mqttService.observe('ipos/client/tableWrapper').subscribe((message: IMqttMessage) => {
+      let upd = JSON.parse(message.payload.toString())
+      this.tableData = upd
+      console.log(upd)
+      this.table?.renderRows();
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+}