preprocess and merge new messages

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

 
-<mat-card *ngIf="tableData">
+<!-- <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>
+</mat-card> -->
 
 
 <div class="table" *ngIf="tableData">
-    <table mat-table [dataSource]="tableData.fEndInitPicklists[0].fEndInitRows" class="mat-elevation-z8">
+    <table mat-table [dataSource]="tableData" 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>
+            <td mat-cell *matCellDef="let item"> {{item.productId}} </td>
         </ng-container>
 
         <!-- Inventory -->
@@ -21,7 +21,7 @@
             <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>
+            <td mat-cell *matCellDef="let item"> {{item.inventoryItemSoll}} </td>
         </ng-container>
 
         <!-- Shipment -->
@@ -29,7 +29,7 @@
             <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>
+            <td mat-cell *matCellDef="let item"> {{item.shipmentBinNrSoll}} </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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';
 
+import {PositionUpdate, ZoneDesc} from 'src/app/model/base-model';
+import {PickerMessage} from 'src/app/model/picker-model';
+
 var MESSAGE  = '{ \
   "fEndInitPicklists": [{\
     "picklistId": "picklist_1",\
@@ -31,6 +33,11 @@ var MESSAGE  = '{ \
       "inventoryItemSoll": "invit4",\
       "shipmentBinNrSoll": 3\
     }]\
+  }],\
+  "fEndUpdateInventoryItems": [{\
+    "index": 2,\
+    "isCorrect": false,\
+  "inventoryItemIst": "box_4"\
   }]\
 }'
 
@@ -49,16 +56,73 @@ export class PickListComponent implements OnInit {
   displayedColumns: string[] = ['product', 'inventory', 'shipment'];
 
   tableData: any;
+  pickListData: any;
 
   constructor(private _mqttService: MqttService) {
+    this.tableData = []
+    this.pickListData = {}
     
-    let msg = JSON.parse(MESSAGE.toString()) 
-    this.tableData = msg
+    let msg: PickerMessage = JSON.parse(MESSAGE.toString()) 
 
-    this.subsPosition = this._mqttService.observe('ipos/client/tableWrapper').subscribe((message: IMqttMessage) => {
-      let upd = JSON.parse(message.payload.toString())
-      this.tableData = upd
+    // --- Test messages
+    // There is no check for usecase with several lists. #TODO: improve data-structure
+    // let list = msg.fEndInitPicklists.map((initList)=>{
+    //   return initList.fEndInitRows.map((initRow: any)=>{
+    //     initRow['picklistId'] = initList.picklistId
+    //     initRow['pickerId'] = initList.pickerId
+    //     return new Map().set(initRow['index'], initRow)
+    //   })
+    // })
+    // console.log(list)
+
+    console.log("-----------------")
+
+    let upd = this.parsePickListMessage(msg)
+    console.log(upd)
+    this.updateTableData(upd)
+    console.log(this.pickListData)
+
+
+    console.log("----------------- 2")
+
+    let MESSAGE_2 = '{\
+      "fEndUpdateInventoryItems": [{\
+        "index": 2,\
+        "isCorrect": false,\
+      "inventoryItemIst": "box_11"\
+      }]\
+    }'
+
+    msg = JSON.parse(MESSAGE_2.toString()) 
+    upd = this.parsePickListMessage(msg)
+    console.log(upd)
+    this.updateTableData(upd)
+    console.log(this.pickListData)
+
+
+    console.log("----------------- 3")
+
+    let MESSAGE_3 = '{\
+      "fEndUpdateShipmentBins": [{\
+        "index": 3,\
+        "isCorrect": false,\
+        "shipmentBinNrIst": 7\
+      }]\
+    }'
+
+    msg = JSON.parse(MESSAGE_3.toString()) 
+    upd = this.parsePickListMessage(msg)
     console.log(upd)
+    this.updateTableData(upd)
+    console.log(this.pickListData)
+
+
+    // --- Subscribe
+    this.subsPosition = this._mqttService.observe('ipos/client/tableWrapper').subscribe((message: IMqttMessage) => {
+      let msg: PickerMessage = JSON.parse(message.payload.toString())
+      let tableUpd = this.parsePickListMessage(msg)
+      this.updateTableData(tableUpd)
+      console.log(tableUpd)
       this.table?.renderRows();
     });
   }
@@ -66,4 +130,43 @@ export class PickListComponent implements OnInit {
   ngOnInit(): void {
   }
 
+  updateTableData(updates: any) {
+    Object.entries(updates).forEach(([key, info]) => {
+      this.pickListData[key] = Object.assign({}, this.pickListData[key], info)
+    })
+    this.tableData = Object.values(this.pickListData)
+
+  }
+
+  parsePickListMessage(payload: PickerMessage) {
+    let initItems = payload.fEndInitPicklists?.map((initList)=>{
+      return new Map(initList.fEndInitRows.map((initRow: any)=>{
+          initRow['picklistId'] = initList.picklistId
+          initRow['pickerId'] = initList.pickerId
+          return [initRow['index'], initRow]
+        })
+      )
+    })
+
+    let inventoryItems = payload.fEndUpdateInventoryItems?.map((item)=>{
+      return new Map().set(item['index'], item)
+    })
+
+    let shipments = payload.fEndUpdateShipmentBins?.map((bin)=>{
+      return new Map().set(bin['index'], bin)
+    })
+
+    let infoList = [...(initItems || []), ...(inventoryItems || []), ...(shipments || [])];
+
+    let itemsMap: any = {}
+    infoList.forEach((infoList: any)=>{
+      infoList.forEach((info: any)=> {
+        itemsMap[info['index']] = Object.assign({}, (itemsMap[info['index']] || []), info)
+      })
+    })
+
+    return itemsMap 
+
+  }
+
 }

src/app/model/picker-model.ts

+export interface PickerMessage {
+    fEndInitPicklists: Picklist[]
+    fEndUpdateInventoryItems: FEndUpdateInventoryItem[]
+    fEndUpdateShipmentBins: ShipmentBins[]
+}
+
+export interface ShipmentBins {
+    index: number
+    isCorrect: boolean
+    inventoryItem_Ist: string
+}
+
+
+export interface FEndUpdateInventoryItem {
+    index: number
+    isCorrect: boolean
+    shipmentBinNr_Ist: number
+}
+
+export interface Picklist {
+    picklistId: string
+    pickerId: string
+    fEndInitRows: InitRow[]
+}
+
+interface InitRow {
+    index: number
+    productId: string
+    inventoryItemSoll: string
+    shipmentBinNrSoll: number
+}
\ No newline at end of file