pick table with new columns

src/app/app.component.html

@@ -6,8 +6,7 @@
     </mat-tab>
 
     <mat-tab label="Pick list"> 
-        <p>...</p>
-        <pick-list></pick-list>
+        <pick-list> ... </pick-list>
     </mat-tab>
 
     <mat-tab label="Timeline"> 

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">
+<div class="table" *ngIf="tableData.length > 0">
     <table mat-table [dataSource]="tableData" class="mat-elevation-z8">
 
+        <!-- Index -->
+        <ng-container matColumnDef="index">
+            <th mat-header-cell *matHeaderCellDef>
+                Index
+            </th>
+            <td mat-cell *matCellDef="let item"> {{item.index}} </td>
+        </ng-container>
+
         <!-- Product -->
         <ng-container matColumnDef="product">
             <th mat-header-cell *matHeaderCellDef>
-                <mat-icon aria-hidden="false" aria-label="Product">production_quantity_limits</mat-icon> Product
+                Product
             </th>
             <td mat-cell *matCellDef="let item"> {{item.productId}} </td>
         </ng-container>
 
-        <!-- Inventory -->
-        <ng-container matColumnDef="inventory">
+        <!-- Inventory Soll -->
+        <ng-container matColumnDef="inventory_soll">
+            <th mat-header-cell *matHeaderCellDef>
+                Inventory Soll
+            </th>
+            <td mat-cell *matCellDef="let item">
+                <mat-chip-list *ngIf="item.inventoryItemSoll">
+                    <mat-chip selected>
+                        {{item.inventoryItemSoll}} 
+                    </mat-chip>
+                </mat-chip-list>
+            </td>
+        </ng-container>
+
+        <!-- Inventory Ist -->
+        <ng-container matColumnDef="inventory_ist">
+            <th mat-header-cell *matHeaderCellDef> Inventory Ist </th>
+            <td mat-cell *matCellDef="let item"> 
+                <mat-chip-list *ngIf="item.inventoryItemIst">
+                    <mat-chip selected [color]="item.inventoryIsCorrect === false ? 'warn' : 'primary'">
+                        {{item.inventoryItemIst}} 
+                    </mat-chip>
+                </mat-chip-list>
+            </td>
+        </ng-container>
+
+        <!-- Shipment Ist-->
+        <ng-container matColumnDef="shipment_ist">
+            <th mat-header-cell *matHeaderCellDef>
+                Shipment Ist
+            </th>
+            <td mat-cell *matCellDef="let item"> 
+                <mat-chip-list *ngIf="item.shipmentBinNr_Ist">
+                    <mat-chip selected [color]="item.shipmentIsCorrect === false ? 'warn' : 'primary'">
+                        {{item.shipmentBinNr_Ist}} 
+                    </mat-chip>
+                </mat-chip-list>
+            </td>
+        </ng-container>
+
+        <!-- Shipment Soll-->
+        <ng-container matColumnDef="shipment_soll">
+            <th mat-header-cell *matHeaderCellDef>
+                Shipment Soll
+            </th>
+            <td mat-cell *matCellDef="let item">
+                <mat-chip-list *ngIf="item.shipmentBinNrSoll">
+                    <mat-chip selected>
+                        {{item.shipmentBinNrSoll}} 
+                    </mat-chip>
+                </mat-chip-list>
+            </td>
+        </ng-container>
+
+        <!-- Picker -->
+        <ng-container matColumnDef="picker">
             <th mat-header-cell *matHeaderCellDef>
-                <mat-icon aria-hidden="false" aria-label="Inventory">style</mat-icon> Inventory
+                Picker
             </th>
-            <td mat-cell *matCellDef="let item"> {{item.inventoryItemSoll}} </td>
+            <td mat-cell *matCellDef="let item"> {{item.pickerId}} </td>
         </ng-container>
 
-        <!-- Shipment -->
-        <ng-container matColumnDef="shipment">
+        <!-- List -->
+        <ng-container matColumnDef="list">
             <th mat-header-cell *matHeaderCellDef>
-                <mat-icon aria-hidden="false" aria-label="Shipment">departure_board</mat-icon> Shipment
+                List
             </th>
-            <td mat-cell *matCellDef="let item"> {{item.shipmentBinNrSoll}} </td>
+            <td mat-cell *matCellDef="let item"> {{item.picklistId}} </td>
         </ng-container>
 
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

@@ -23,3 +23,18 @@ mat-card {
         color: rgba(0,0,0,.87)
     }
 }
+
+// --- True
+.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {
+  background-color: #43a047;
+}
+
+// --- False
+.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {
+  background-color: #d32f2f;
+}
+
+.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
+  background-color: #e0e0e0;
+  color: rgba(0,0,0,.87);
+}
\ No newline at end of file

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

@@ -53,7 +53,7 @@ export class PickListComponent implements OnInit {
 
   private subsPosition: Subscription;
 
-  displayedColumns: string[] = ['product', 'inventory', 'shipment'];
+  displayedColumns: string[] = ['index', 'product', 'inventory_soll', 'inventory_ist', 'shipment_soll', 'shipment_ist', 'picker', 'list'];
 
   tableData: any;
   pickListData: any;
@@ -64,59 +64,6 @@ export class PickListComponent implements OnInit {
     
     let msg: PickerMessage = JSON.parse(MESSAGE.toString()) 
 
-    // --- 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())