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 { + } + +}