Merge pull request #4 from SoftwareAG/Dev

1.1 Release

README.md

@@ -80,7 +80,7 @@ Congratulations! Data Points Map Plugin is configured.
 *  **Cluster Map:** User can switch to cluster map.
 
 
-*  **Select Measurements:**  Based on selected assets or devices, this field will be populated with available measurements/data points. User can select any one measurement which is applicable for selected device or group of devices.
+*  **Add Data point:**  Based on selected assets or devices, this field will be populated with available devices to select data points. User can select any one data point which is applicable for selected device or group of devices.
 
 
 

app.module.ts

@@ -20,18 +20,16 @@ import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule as ngRouterModule } from '@angular/router';
 import { BootstrapComponent, CoreModule, RouterModule } from '@c8y/ngx-components';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { GpDataPointsMapModule } from './widget/gp-data-points-map.module';
+import { CockpitDashboardModule } from '@c8y/ngx-components/context-dashboard';
 
 @NgModule({
   imports: [
     BrowserAnimationsModule,
     ngRouterModule.forRoot([], { enableTracing: false, useHash: true }),
     RouterModule.forRoot(),
     CoreModule.forRoot(),
-    GpDataPointsMapModule
+    CockpitDashboardModule
   ],
-  providers: [BsModalRef],
   bootstrap: [BootstrapComponent]
 })
 export class AppModule {}

package.json

@@ -1,9 +1,9 @@
 {
   "name": "cumulocity-data-points-map-widget-plugin",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "This is the Cumulocity module federation plugin. This plugin help you to display measurements and device locations on map.",
   "scripts": {
-    "start": "c8ycli server --env.beta=true",
+    "start": "c8ycli server ",
     "build": "c8ycli build --env.mode=production",
     "deploy": "c8ycli deploy",
     "postinstall": "ngcc",
@@ -27,21 +27,20 @@
     "@angular/platform-browser-dynamic": "14.0.6",
     "@angular/router": "14.0.6",
     "@angular/upgrade": "14.0.6",
-    "@c8y/client": "1016.0.40",
-    "@c8y/ngx-components": "1016.0.40",
+    "@c8y/client": "1016.0.170",
+    "@c8y/ngx-components": "1016.0.170",
+    "@c8y/style": "1016.0.170",
     "@ngx-translate/core": "14.0.0",
     "rxjs": "~6.6.3",
     "zone.js": "~0.11.7",
-    "@c8y/style": "1016.0.40",
     "@angular/material": "14.0.6",
-    "@c8y/ng1-modules": "1016.0.40",
+    "@c8y/ng1-modules": "1016.0.170",
     "leaflet-extra-markers": "^1.2.1",
     "leaflet.markercluster": "^1.4.1",
     "leaflet2": "npm:leaflet@1.7.1",
     "fontawesome": "4.7.2",
     "angular-resize-event": "^2.1.0",
-    "moment": "^2.26.0",
-    "tslib": "^2.0.0"
+    "moment": "^2.26.0"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "14.0.6",
@@ -51,25 +50,14 @@
     "@angular/service-worker": "14.0.6",
     "@angular/localize": "14.0.6",
     "@types/jest": "^28.1.6",
-    "@types/webpack": "^5.28.0",
     "file-loader": "^6.2.0",
     "jest": "^28.1.3",
-    "jest-preset-angular": "^12.2.0",
+    "jest-preset-angular": "^12.2.5",
     "typescript": "4.7.4",
-    "@c8y/cli": "1016.0.40",
+    "@c8y/cli": "1016.0.170",
     "gulp": "^4.0.2",
     "gulp-zip": "^5.0.1",
-    "del": "^6.1.1",
-    "style-loader": "3.3.1",
-    "html-loader": "4.1.0",
-    "@types/node": "~12.11.1",
-    "codelyzer": "^6.0.0",
-    "ng-packagr": "^11.0.0",
-    "protractor": "~7.0.0",
-    "ts-node": "~8.3.0",
-    "tslint": "~6.1.0",
-    "ncp": "^2.0.0",
-    "css-loader": "^3.5.3"
+    "del": "^6.1.1"
   },
   "c8y": {
     "application": {
@@ -91,7 +79,7 @@
         }
       ],
       "remotes": {
-        "widget-plugin": [
+        "sag-ps-pkg-datapoints-map": [
           "GpDataPointsMapModule"
         ]
       },

tsconfig.json

@@ -9,8 +9,10 @@
     "experimentalDecorators": true,
     "target": "es6",
     "module": "es2020",
+    "skipLibCheck": true,
     "lib": ["dom", "es2015", "es2016"]
   },
+  "exclude": ["node_modules", "**/*.spec.ts"],
   "angularCompilerOptions": {
     "enableIvy": true
   }

widget/components/gp-data-points-map.component.ts

@@ -31,9 +31,7 @@ import {
 } from '@angular/core';
 import { ResizedEvent } from 'angular-resize-event';
 import {
-  InventoryService,
   IManagedObject,
-  MeasurementService,
   Realtime,
 } from '@c8y/client';
 import * as moment_ from 'moment';
@@ -115,7 +113,6 @@ export class GpDataPointsMapComponent implements OnInit, AfterViewInit {
 
   constructor(
     private dpService: GpDataPointsMapService,
-    private inventoryService: InventoryService,
     private movingMarkerService: MovingMarkerService,
     private realTimeService: Realtime,
     private appRef: ApplicationRef,
@@ -159,7 +156,6 @@ export class GpDataPointsMapComponent implements OnInit, AfterViewInit {
   protected initializeMap(isFirstCall): void {
     this.mapDiv = this.mapDivRef.nativeElement;
     this.mapInfosDiv = this.mapInfosDivRef.nativeElement;
-
     this.deviceId = '154724'; // '23227199' ;// '23121787';
     this.measurementType = {
       name: 'T', // 'PM25',
@@ -172,7 +168,11 @@ export class GpDataPointsMapComponent implements OnInit, AfterViewInit {
       if (this.inputConfig.device) {
         this.deviceId = this.inputConfig.device.id;
       }
-      this.measurementType = this.inputConfig.measurementType;
+      if(this.inputConfig.datapoints && this.inputConfig.datapoints.length > 0) {
+        const dataPointsObj = this.inputConfig.datapoints.find( dp => dp.__active == true);
+        this.measurementType.name = dataPointsObj.series;
+        this.measurementType.type = dataPointsObj.fragment;
+      }
       this.markerColor = this.inputConfig.markerColor;
       this.markerFontColor = this.inputConfig.markerFontColor;
       this.dashboardField = this.inputConfig.dashboardField;

widget/config/gp-data-point-map-config-component.html

@@ -22,17 +22,17 @@
               </div>
             </div>
             <div class="row">
-                <div class="form-group col-sm-12 ">
-                    <label for="Measurements" class=" col-sm-4 control-label">Select Measurement:</label>
-                    <div class="col-sm-8 ">
-                        <select  [(ngModel)]="config.measurementType" 
-                        name="MeasurementType" id="MeasurementType">
-                            <option *ngFor="let measurementType of config.measurementTypeList"
-                            [ngValue]='measurementType'
-                            [attr.selected]="config.measurementType.description === measurementType.description ? true : null">
-                                {{measurementType.description}}</option>
-                        </select>
-                    </div>
+                <div class="form-group col-sm-12 " *ngIf="configDevice">
+                    <form [formGroup]="formGroup" >
+                    <c8y-datapoint-selection-list
+                        [minActiveCount]="1"
+                        [maxActiveCount]="1"
+                        [defaultFormOptions]="datapointSelectDefaultFormOptions"
+                        [config]="datapointSelectionConfig"
+                        formControlName="datapoints"
+                        name="datapoints"
+                    ></c8y-datapoint-selection-list>
+                    </form>
                 </div>
             </div>
             <div *ngIf="appId">

widget/config/gp-data-point-map-config-component.ts

@@ -20,77 +20,96 @@ import {
   DoCheck,
   Input,
   OnInit,
+  OnDestroy,
   ViewEncapsulation,
 } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { skip } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
 import { GpDataPointsMapService } from './../services/gp-data-points-map.service';
-
+import {
+  DatapointAttributesFormConfig,
+  DatapointSelectorModalOptions,
+  KPIDetails,
+} from '@c8y/ngx-components/datapoint-selector';
+import { ActivatedRoute } from '@angular/router';
+import { AbstractControl, ControlContainer, FormBuilder, NgForm, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+import { takeUntil } from 'rxjs/operators';
+import { OnBeforeSave } from '@c8y/ngx-components';
+
+export function exactlyASingleDatapointActive(): ValidatorFn {
+  return (control: AbstractControl): ValidationErrors | null => {
+    const datapoints: any[] = control.value;
+    if (!datapoints || !datapoints.length) {
+      return null;
+    }
+    const activeDatapoints = datapoints.filter(datapoint => datapoint.__active);
+    if (activeDatapoints.length === 1) {
+      return null;
+    }
+    return { exactlyOneDatapointNeedsToBeActive: true };
+  };
+}
 @Component({
   // tslint:disable-next-line: component-selector
   selector: 'gp-data-points-map-config',
   templateUrl: './gp-data-point-map-config-component.html',
   styleUrls: ['./gp-data-point-map-config-component.css'],
   encapsulation: ViewEncapsulation.None,
+  viewProviders: [{ provide: ControlContainer, useExisting: NgForm }],
 })
-export class GpDataPointsMapConfigComponent implements OnInit, DoCheck {
+export class GpDataPointsMapConfigComponent implements OnInit, DoCheck, OnDestroy, OnBeforeSave {
   @Input() config: any = {};
   isOpenCP = false;
   isOpenFontCP = false;
   configDevice = null;
   defaultOutdoorZoom = 14;
   observableDevice$ = null;
-  measurementList = [];
-  observableMeasurements$ = new BehaviorSubject<any>(this.measurementList);
-  private measurementSubs = null;
   appId = null;
-  isBusy = false;
   iconColorCode ='#000000';
   fontColorCode ='#000000'
+  datapointSelectDefaultFormOptions: Partial<DatapointAttributesFormConfig> = {
+    showRange: false,
+    showChart: false,
+
+  };
+  datapointSelectionConfig: Partial<DatapointSelectorModalOptions> = {};
+  formGroup: ReturnType<GpDataPointsMapConfigComponent['createForm']>;
+  private destroy$ = new Subject<void>();
+  activeDatapointsExists: boolean;
+
   constructor(
-    private commonService: GpDataPointsMapService
+    private commonService: GpDataPointsMapService,
+    private route: ActivatedRoute,
+    private form: NgForm,
+    private formBuilder: FormBuilder
   ) {}
 
   ngOnInit(): void {
     if (this.config.device && this.config.device.id) {
       this.configDevice = this.config.device.id;
+      this.datapointSelectionConfig.contextAsset = this.config.device;
+      this.datapointSelectionConfig.assetSelectorConfig
     }
     if (!this.config.outdoorZoom) {
       this.config.isOutdoorAutoZoom = true;
       this.config.outdoorZoom = this.defaultOutdoorZoom;
     }
 
-    if (!this.config.measurementType) {
-      this.config.measurementType = {};
-    } else {
-      if (this.config.measurementTypeList.length > 0) {
-        let measurementType;
-        for (measurementType of this.config.measurementTypeList) {
-          if (this.config.measurementType.name === measurementType.name) {
-            this.config.measurementType = measurementType;
-          }
-        }
-      }
-    }
     this.appId = this.commonService.getAppId();
-    // Get the measurements as soon as device or group is selected
-    this.measurementSubs = this.observableMeasurements$
-      .pipe(skip(1))
-      .subscribe((mes) => {
-        this.config.measurementTypeList = [];
-        if (mes && mes.length > 0) {
-          this.config.measurementTypeList = [...mes];
-        }
-        this.isBusy = false;
-      });
-
+
       if(this.config.markerColor){
         this.colorUpdateByTyping(this.config.markerColor);
       }
 
       if(this.config.markerFontColor){
         this.fontColorUpdateByTyping(this.config.markerFontColor);
       }
+
+      this.initForm();
+      this.formGroup.valueChanges
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((value) => {
+        this.config.datapoints = [ ...value.datapoints ];
+      });
   }
 
   /**
@@ -99,14 +118,43 @@ export class GpDataPointsMapConfigComponent implements OnInit, DoCheck {
   ngDoCheck(): void {
     if (this.config.device && this.config.device.id !== this.configDevice) {
       this.configDevice = this.config.device.id;
-      this.isBusy = true;
-      this.measurementList = [];
-      this.commonService.getFragmentSeries(
-        this.config.device,
-        this.measurementList,
-        this.observableMeasurements$
-      );
+      const context = this.config.device;
+      if (context?.id) {
+        this.datapointSelectionConfig.contextAsset = context;
+        this.datapointSelectionConfig.assetSelectorConfig
+      }
+    }
+  }
+
+  onBeforeSave(): boolean | Promise<boolean> | Observable<boolean> {
+    if (this.formGroup.valid) {
+   //   Object.assign(config, this.formGroup.value);
+      return true;
     }
+    return false;
+  }
+  ngOnDestroy() {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
+
+  private initForm(): void {
+    this.formGroup = this.createForm();
+    this.form.form.addControl('config', this.formGroup);
+    if (this.config?.datapoints) {
+      this.formGroup.patchValue({ datapoints: this.config.datapoints });
+    }
+  }
+
+  private createForm() {
+    return this.formBuilder.group({
+
+      datapoints: this.formBuilder.control(new Array<KPIDetails>(), [
+        Validators.required,
+        Validators.minLength(1),
+        exactlyASingleDatapointActive()
+      ])
+    });
   }
 
   // Set outdoor zoom to default