diff --git a/src/app/app.component.html b/src/app/app.component.html
index 226caffee149e381b1a47715d9dbeff7b3f3f6f4..c0d7dd667af66da5b8dee70b4bcd0a3c1992feea 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,5 +1,27 @@
-<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>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 8a01d75e95e5021f78dfee7450b5960e7641c9f4..1a4740206d1f2190d5cfc467a922656c15f202d1 100644
--- a/src/app/app.module.ts
+++ b/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,
diff --git a/src/app/components/pick-list/pick-list.component.html b/src/app/components/pick-list/pick-list.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..c1facea60d2b460cb4264a0af5ec5d341091c64e
--- /dev/null
+++ b/src/app/components/pick-list/pick-list.component.html
@@ -0,0 +1,39 @@
+
+<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
diff --git a/src/app/components/pick-list/pick-list.component.scss b/src/app/components/pick-list/pick-list.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..caa25043d9e6f4b0ee7eae571cb689ddc3dc4ab4
--- /dev/null
+++ b/src/app/components/pick-list/pick-list.component.scss
@@ -0,0 +1,25 @@
+.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
diff --git a/src/app/components/pick-list/pick-list.component.spec.ts b/src/app/components/pick-list/pick-list.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..52bca35259c9ec41c93b93f4a0947d8760129a49
--- /dev/null
+++ b/src/app/components/pick-list/pick-list.component.spec.ts
@@ -0,0 +1,25 @@
+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();
+ });
+});
diff --git a/src/app/components/pick-list/pick-list.component.ts b/src/app/components/pick-list/pick-list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9f1e09b71840775f65e315ac194f852167098620
--- /dev/null
+++ b/src/app/components/pick-list/pick-list.component.ts
@@ -0,0 +1,69 @@
+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 {
+ }
+
+}