diff --git a/src/app/app.component.html b/src/app/app.component.html
index c0d7dd667af66da5b8dee70b4bcd0a3c1992feea..22bfa6e1642d66434dbaa26f8c73eda5c6d67138 100644
--- a/src/app/app.component.html
+++ b/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">
diff --git a/src/app/components/pick-list/pick-list.component.html b/src/app/components/pick-list/pick-list.component.html
index cae50c68bf2cf7fd1a1410031bc188cf4de2b38c..a4672493f052ef31667b656a3390f6d44ca6938d 100644
--- a/src/app/components/pick-list/pick-list.component.html
+++ b/src/app/components/pick-list/pick-list.component.html
@@ -1,35 +1,90 @@
-
-<!-- <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>
diff --git a/src/app/components/pick-list/pick-list.component.scss b/src/app/components/pick-list/pick-list.component.scss
index caa25043d9e6f4b0ee7eae571cb689ddc3dc4ab4..94ccd7f337e285b59ed8dbfb4ef422d9c91c48e1 100644
--- a/src/app/components/pick-list/pick-list.component.scss
+++ b/src/app/components/pick-list/pick-list.component.scss
@@ -22,4 +22,19 @@ mat-card {
span {
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
diff --git a/src/app/components/pick-list/pick-list.component.ts b/src/app/components/pick-list/pick-list.component.ts
index d3618dbd5285857e301ff4fd2b9adf4d44d1c1b8..cac089493e22438e601faa76380037bf08107cab 100644
--- a/src/app/components/pick-list/pick-list.component.ts
+++ b/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())