updated with version 1.2.0

Fixed conflict issues with other widgets for material libraries

angular.json

@@ -24,7 +24,7 @@
  "src/assets"
  ],
  "styles": [
- "src/styles.css"
+ "src/styles.less"
  ],
  "scripts": []
  },
@@ -63,7 +63,8 @@
  "serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
- "browserTarget": "gp-processing-widget:build"
+ "browserTarget": "gp-processing-widget:build",
+ "proxyConfig": "src/proxy.conf.json"
  },
  "configurations": {
  "production": {
@@ -89,7 +90,7 @@
  "src/assets"
  ],
  "styles": [
- "src/styles.css"
+ "src/styles.less"
  ],
  "scripts": []
  }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "gp-processing-widget",
- "version": "1.1.0",
+ "version": "1.2.0",
  "description": "This is an Angular 8 widget, which is designed to display the current process state based on the latest event. ",
  "author": "Khushi Khanna - Software AG, Global Presales",
  "license": "Apache 2.0",
@@ -33,27 +33,7 @@
  "@c8y/ng1-modules": "^1006.3.0",
  "@c8y/ngx-components": "^1006.3.0",
  "@c8y/style": "1006.3.0",
- "@ng-select/ng-select": "^3.7.3",
- "css-loader": "^3.5.3",
- "del": "^5.1.0",
- "delay": "^4.3.0",
- "fontawesome": "^4.7.2",
- "fs-extra": "^9.0.0",
- "gulp": "^4.0.2",
- "gulp-filter": "^6.0.0",
- "gulp-inject-string": "^1.1.2",
- "gulp-replace": "^1.0.0",
- "gulp-zip": "^5.0.1",
- "less": "^3.12.2",
- "less-loader": "^7.0.2",
- "moment": "^2.26.0",
- "rxjs": "~6.4.0",
- "tslib": "^1.10.0",
- "url-loader": "^4.1.0",
- "webpack": "^4.43.0",
- "webpack-cli": "^3.3.11",
- "webpack-external-import": "^2.2.3",
- "zone.js": "~0.9.1"
+ "@ng-select/ng-select": "^3.7.3"
  },
  "devDependencies": {
  "@angular-devkit/build-angular": "~0.803.8",
@@ -78,6 +58,25 @@
  "tsickle": "^0.37.0",
  "tslint": "~5.15.0",
  "typescript": "~3.5.3",
- "ng-packagr": "^9.1.1"
+ "ng-packagr": "^9.1.1",
+ "@ng-select/ng-select": "^3.7.3",
+ "css-loader": "^3.5.3",
+ "del": "^5.1.0",
+ "delay": "^4.3.0",
+ "fontawesome": "^4.7.2",
+ "fs-extra": "^9.0.0",
+ "gulp": "^4.0.2",
+ "gulp-filter": "^6.0.0",
+ "gulp-inject-string": "^1.1.2",
+ "gulp-replace": "^1.0.0",
+ "gulp-zip": "^5.0.1",
+ "moment": "^2.26.0",
+ "rxjs": "~6.4.0",
+ "tslib": "^1.10.0",
+ "url-loader": "^4.1.0",
+ "webpack": "^4.43.0",
+ "webpack-cli": "^3.3.11",
+ "webpack-external-import": "^2.2.3",
+ "zone.js": "~0.9.1"
  }
 }

projects/gp-processing/package.json

@@ -1,6 +1,6 @@
 {
  "name": "gp-processing",
- "version": "1.1.0",
+ "version": "1.2.0",
  "description": "This is an Angular 8 widget, which is designed to display the current process state based on the latest event. ",
  "author": "Khushi Khanna - Software AG, Global Presales",
  "license": "Apache 2.0",

projects/gp-processing/src/lib/gp-lib-processing-widget-config.component.css

@@ -14,4 +14,8 @@
  }
  .cdk-overlay-container{
  z-index: 1100;
+}
+
+.ng-select.processingWidget .ng-select-container { 
+ min-width: 150px;
 }

projects/gp-processing/src/lib/gp-lib-processing-widget-config.component.html

@@ -20,19 +20,15 @@
  <ng-container matColumnDef="displayStatus">
  <th mat-header-cell *matHeaderCellDef> Display Status </th>
  <td mat-cell *matCellDef="let element">
- <mat-form-field class="example-full-width">
- <input matInput type="text" name="displayStatus" [(ngModel)]="element.displayStatus" />
- </mat-form-field>
+ <input type="text" class="form-control" name="displayStatus" [(ngModel)]="element.displayStatus"/>
  </td>
  </ng-container>
 
  <!-- Field Value Column -->
  <ng-container matColumnDef="fieldValue">
  <th mat-header-cell *matHeaderCellDef> Field Value </th>
  <td mat-cell *matCellDef="let element">
- <mat-form-field class="example-full-width">
- <input matInput type="text" [(ngModel)]="element.fieldValue" />
- </mat-form-field>
+ <input type="text" class="form-control" [(ngModel)]="element.fieldValue"/>
  </td>
  </ng-container>
 
@@ -48,11 +44,11 @@
  <ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef> Action </th>
  <td mat-cell *matCellDef="let element ; let i = index">
- <button mat-icon-button aria-label="Delete Row">
- <i matTooltip="Delete Row" class="fa fa-trash fa-lg fa-icon-action" (click)="deleteRow(i)"></i>
+ <button aria-label="Delete Row" class="btn btn-clean btn-icon">
+ <i title="Delete Row" class="fa fa-trash fa-lg fa-icon-action" (click)="deleteRow(i)"></i>
  </button>
- <button mat-icon-button aria-label="Insert New Row">
- <i matTooltip="Insert New Row" class="fa fa-plus fa-lg fa-icon-action" (click)="addNewRow(i)"></i>
+ <button  class="btn btn-clean btn-icon" aria-label="Insert New Row">
+ <i title="Insert New Row" class="fa fa-plus fa-lg fa-icon-action" (click)="addNewRow(i)"></i>
  </button>
  </td>
  </ng-container>

projects/gp-processing/src/lib/gp-lib-processing-widget-config.component.ts

@@ -19,6 +19,7 @@
 import { Component, Input, ViewEncapsulation, OnInit } from '@angular/core';
 
 @Component({
+ selector: 'lib-gp-lib-processing-widget-config',
  templateUrl: './gp-lib-processing-widget-config.component.html',
  styleUrls: ['./gp-lib-processing-widget-config.component.css'],
  encapsulation: ViewEncapsulation.None

projects/gp-processing/src/lib/gp-lib-processing-widget.component.css

@@ -51,4 +51,39 @@
  font-size: 14px; 
  font-weight: 500;
  }
+ .stepper-box-shadow {
+ box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%), 0 1px 18px 0 rgb(0 0 0 / 12%);
+ }
+ .stepper-button {
+ color: #fff;
+ box-sizing: border-box;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
+ outline: 0;
+ border: none;
+ -webkit-tap-highlight-color: transparent;
+ display: inline-block;
+ white-space: nowrap;
+ text-decoration: none;
+ vertical-align: baseline;
+ text-align: center;
+ margin: 0;
+ min-width: 64px;
+ line-height: 15px;
+ padding: 0 16px;
+ border-radius: 4px;
+ overflow: visible;
+ transform: translate3d(0,0,0);
+ transition: background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);
+ min-width: 0;
+ border-radius: 50%;
+ width: 56px;
+ height: 56px;
+ padding: 0;
+ flex-shrink: 0;
+ }
 

projects/gp-processing/src/lib/gp-lib-processing-widget.component.html

@@ -12,7 +12,7 @@
  <div class="process-div">
  <div class="single-process-div" *ngFor="let element of displayStatus; let indexOfElement = index;">
  <div class="content-div">
- <button mat-fab
+ <button class="btn btn-clean btn-icon stepper-button stepper-box-shadow"
  [ngClass]="{'status-completed': indexOfElement < index, 'status-inProces' : indexOfElement == index , 'status-default': indexOfElement > index }">
  <i [ngClass]="'fa fa-'+matImages[indexOfElement] +' fa-2x'"></i>
  </button>

projects/gp-processing/src/lib/gp-lib-processing-widget.component.ts

@@ -35,15 +35,28 @@ export class GpLibProcessingWidgetComponent implements OnInit {
  index = -1;
  matImages = [];
  arrivalTime;
+ indoorEventType = '';
+ fieldName = '';
  constructor(public events: EventService, public realtimeService: Realtime, public inventory: InventoryService) {}
 
  ngOnInit() {
- this.config.dataSource.map(row => {
- this.displayStatus.push(row.displayStatus);
- this.fieldValue.push(row.fieldValue);
- this.matImages.push(row.matIcon.className);
- });
- this.deviceId = this.config.device.id;
+ if (this.config) {
+ this.config.dataSource.map(row => {
+ this.displayStatus.push(row.displayStatus);
+ this.fieldValue.push(row.fieldValue);
+ this.matImages.push(row.matIcon.className);
+ });
+ this.indoorEventType = this.config.indoorEventType;
+ this.deviceId = this.config.device.id;
+ this.fieldName = this.config.fieldName;
+ } else {
+ this.deviceId = '2422320',
+ this.displayStatus = [ 'Truck Depot', 'In Route', 'Pick Up Point'];
+ this.fieldValue = ['truckdepoleft', 'inroute', 'pickuppoint'];
+ this.matImages = ['truck', 'list', 'map-marker'];
+ this.indoorEventType = 'c8y_LocationUpdate';
+ this.fieldName = 'process';
+ }
  this.arrivalTime = new Date();
  this.fetchEvents();
  }
@@ -96,7 +109,7 @@ export class GpLibProcessingWidgetComponent implements OnInit {
 
  // tslint:disable-next-line: deprecation
  this.events.listBySource$(deviceId, { pageSize: 3,
- type: this.config.indoorEventType,
+ type: this.indoorEventType,
  dateTo: now.add(1, 'days').format('YYYY-MM-DD'),
  dateFrom: '1970-01-01'
  },
@@ -105,10 +118,10 @@ export class GpLibProcessingWidgetComponent implements OnInit {
  realtime: true,
  }).subscribe( res => {
  const lastEvent = res[0];
- if (lastEvent.type === this.config.indoorEventType) {
- if (lastEvent.hasOwnProperty(this.config.fieldName)) {
+ if (lastEvent && lastEvent.type === this.indoorEventType) {
+ if (lastEvent.hasOwnProperty(this.fieldName)) {
  this.arrivalTime = lastEvent.creationTime;
- this.statusValue = lastEvent[this.config.fieldName];
+ this.statusValue = lastEvent[this.fieldName];
  this.fieldValue.map((singleValue, index) => {
  if (this.statusValue.includes(singleValue)) {
  this.index = index;
@@ -128,10 +141,10 @@ export class GpLibProcessingWidgetComponent implements OnInit {
  if (response && response.data) {
  const eventData = response.data;
  const lastEvent = eventData.data;
- if (lastEvent.type === this.config.indoorEventType) {
- if (lastEvent.hasOwnProperty(this.config.fieldName)) {
+ if (lastEvent.type === this.indoorEventType) {
+ if (lastEvent.hasOwnProperty(this.fieldName)) {
  this.arrivalTime = lastEvent.creationTime;
- this.statusValue = lastEvent[this.config.fieldName];
+ this.statusValue = lastEvent[this.fieldName];
  this.fieldValue.map((singleValue, index) => {
  if (this.statusValue.includes(singleValue)) {
  this.index = index;

projects/gp-processing/src/lib/gp-lib-processing-widget.module.ts

@@ -20,35 +20,21 @@ import { NgModule } from '@angular/core';
 import { GpLibProcessingWidgetComponent } from './gp-lib-processing-widget.component';
 import { CoreModule, HOOK_COMPONENTS} from '@c8y/ngx-components';
 import {GpLibProcessingConfig} from './gp-lib-processing-widget-config.component';
-import {MatButtonModule,
- MatCardModule,
- MatIconModule,
- MatStepperModule,
- MatTableModule,
- MatFormFieldModule,
- MatInputModule,
- MatSelectModule,
- MatAutocompleteModule} from '@angular/material';
-import { IconSelectorModule } from './icon-selector/icon-selector.module';
+import { MatTableModule } from '@angular/material/table';
+import { MatStepperModule } from '@angular/material/stepper';
 import * as preview from './preview-image';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {IconSelectorComponent} from './icon-selector/icon-selector.component';
+import { NgSelectModule } from '@ng-select/ng-select';
 @NgModule({
  declarations: [GpLibProcessingWidgetComponent, GpLibProcessingConfig, IconSelectorComponent],
  imports: [
  CoreModule,
- MatButtonModule,
- MatCardModule,
- MatIconModule,
  MatStepperModule,
  MatTableModule,
- // MatFormFieldModule,
- MatInputModule,
  FormsModule,
- MatSelectModule,
- MatAutocompleteModule,
- MatInputModule,
- ReactiveFormsModule
+ ReactiveFormsModule,
+ NgSelectModule,
  ],
  entryComponents: [GpLibProcessingWidgetComponent, GpLibProcessingConfig, IconSelectorComponent],
  exports: [GpLibProcessingWidgetComponent, GpLibProcessingConfig, IconSelectorComponent],

projects/gp-processing/src/lib/icon-selector/icon-selector.component.html

@@ -1,11 +1,11 @@
+<ng-select class="processingWidget" #select [items]="items" [ngModel]="value" (ngModelChange)="valueChange.emit($event)" appendTo="body" [clearable]="false" [virtualScroll]="true" (open)="opened(select)" bindLabel="name" >
+ <ng-template ng-label-tmp let-item="item">
+ <i [c8yIcon]="item.className" style="margin-right: 5px"></i>
+ <span>{{item.name}}</span>
+ </ng-template>
 
-<mat-form-field class="example-full-width">
- <input matInput placeholder="Icon Name" aria-label="Icon Name" [matAutocomplete]="auto" [formControl]="stateCtrl" />
- <mat-autocomplete #auto="matAutocomplete" (optionSelected) ="valueChange.emit($event.option.value)" [displayWith]="displayFn">
- <mat-option *ngFor="let item of filteredItems | async" [value]="item">
+ <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
  <i [c8yIcon]="item.className" style="margin-right: 5px"></i>
  <span>{{item.name}} ({{item.className}})</span>
- </mat-option>
- </mat-autocomplete>
-</mat-form-field>
-
+ </ng-template>
+</ng-select>

projects/gp-processing/src/lib/icon-selector/icon-selector.component.ts

@@ -61,4 +61,14 @@ export class IconSelectorComponent implements OnInit {
  const filterValue = value.toLowerCase();
  return this.items.filter(state => state.name.toLowerCase().includes(filterValue));
  }
+ opened(select) {
+ setTimeout(() => {
+ try {
+ select.dropdownPanel._updatePosition();
+ }
+ catch (e) {
+ // Ignore error
+ }
+ }, 25);
+}
 }

runtime/cumulocity.json

@@ -7,6 +7,11 @@
  "class": "fa fa-shopping-cart"
  },
  "manifest": {
- "noAppSwitcher": true
+ "noAppSwitcher": true,
+ "requiredPlatformVersion": ">=1006.3.0",
+ "version":"1.2.0",
+ "author":"Software AG, Global Presales",
+ "description":"This is an Angular 8 widget, which is designed to display the current process state based on the latest event.",
+ "license": "Apache 2.0"
  }
 }

runtime/package.json

@@ -4,7 +4,7 @@
  "dist\\bundle-src\\custom-widget.js": "processing-runtime-widget-CustomWidget",
  "dist/bundle-src/custom-widget.js": "processing-runtime-widget-CustomWidget"
  },
- "version": "1.0.0",
+ "version": "1.2.0",
  "description": "Runtime package.json for library widget (written by Software AG Global Presales)",
  "author": "Darpankumar Lalani - Software AG, Global Presales",
  "license": "Apache 2.0"