provide entity to custom actions

@@ -19,6 +19,7 @@ import { Observable, Subject, fromEvent, of } from 'rxjs';
 import { finalize, share, map } from 'rxjs/operators';
 import base64js from 'base64-js';
 import { Datasource } from '@app/shared/models/widget.models';
+import { FormattedData } from '@app/modules/home/components/widget/lib/maps/map-models';
 
 export function onParentScrollOrWindowResize(el: Node): Observable<Event> {
   const scrollSubject = new Subject<Event>();
@@ -504,12 +505,12 @@ export function parseArray(input: any[]): any[] {
     );
 }
 
-export function parseData(input: any[]): any[] {
+export function parseData(input: any[]): FormattedData[] {
   return _(input).groupBy(el => el?.datasource?.entityName)
     .values().value().map((entityArray, i) => {
       const obj = {
         entityName: entityArray[0]?.datasource?.entityName,
-        $datasource: entityArray[0]?.datasource,
+        $datasource: entityArray[0]?.datasource as Datasource,
         dsIndex: i,
         deviceType: null
       };
@@ -568,7 +569,7 @@ export function parseTemplate(template: string, data: { $datasource?: Datasource
       formatted.forEach(value => {
         const [variable, digits] = value.replace('${', '').replace('}', '').split(':');
         data[variable] = padValue(data[variable], +digits);
-        if (isNaN(data[variable])) data[value] = '';
+        if (data[variable] === 'NaN') data[variable] = '';
         template = template.replace(value, '${' + variable + '}');
       });
     const variables = template.match(/\$\{.*?\}/g);

@@ -15,6 +15,7 @@
 ///
 
 import { LatLngTuple, LeafletMouseEvent } from 'leaflet';
+import { Datasource } from '@app/shared/models/widget.models';
 
 export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
 export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
@@ -96,11 +97,11 @@ export type MarkerSettings = {
 }
 
 export interface FormattedData {
-    aliasName: string;
+    $datasource: Datasource;
     entityName: string;
-    $datasource: string;
     dsIndex: number;
-    deviceType: string
+    deviceType: string;
+    [key: string]: any
 }
 
 export type PolygonSettings = {
@@ -151,6 +152,6 @@ export interface HistorySelectSettings {
     buttonColor: string;
 }
 
-export type actionsHandler = ($event: Event | LeafletMouseEvent) => void;
+export type actionsHandler = ($event: Event | LeafletMouseEvent, datasource: Datasource) => void;
 
 export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings;

@@ -36,7 +36,7 @@ import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } fro
 import { of, Subject } from 'rxjs';
 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
 import { getDefCenterPosition } from './maps-utils';
-import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType } from '@shared/models/widget.models';
+import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType, Datasource } from '@shared/models/widget.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
 import { AttributeService } from '@core/http/attribute.service';
@@ -142,7 +142,7 @@ export class MapWidgetController implements MapWidgetInterface {
         const descriptors = this.ctx.actionsApi.getActionDescriptors(name);
         const actions = {};
         descriptors.forEach(descriptor => {
-            actions[descriptor.name] = ($event: Event) => this.onCustomAction(descriptor, $event);
+            actions[descriptor.name] = ($event: Event, datasource: Datasource) => this.onCustomAction(descriptor, $event, datasource);
         }, actions);
         return actions;
     }
@@ -150,15 +150,15 @@ export class MapWidgetController implements MapWidgetInterface {
     onInit() {
     }
 
-    private onCustomAction(descriptor: WidgetActionDescriptor, $event: any) {
+    private onCustomAction(descriptor: WidgetActionDescriptor, $event: any, entityInfo: Datasource) {
         if ($event && $event.stopPropagation) {
             $event?.stopPropagation();
         }
-        //  safeExecute(parseFunction(descriptor.customFunction, ['$event', 'widgetContext']), [$event, this.ctx])
-        const entityInfo = this.ctx.actionsApi.getActiveEntityInfo();
-        const entityId = entityInfo ? entityInfo.entityId : null;
-        const entityName = entityInfo ? entityInfo.entityName : null;
-        const entityLabel = entityInfo ? entityInfo.entityLabel : null;
+        const { id, entityName, entityLabel, entityType } = entityInfo;
+        const entityId: EntityId = {
+            entityType,
+            id
+        };
         this.ctx.actionsApi.handleWidgetAction($event, descriptor, entityId, entityName, null, entityLabel);
     }
 

@@ -16,19 +16,22 @@
 
 import L from 'leaflet';
 import { MarkerSettings, PolygonSettings, PolylineSettings } from './map-models';
+import { Datasource } from '@app/shared/models/widget.models';
 
 export function createTooltip(target: L.Layer,
     settings: MarkerSettings | PolylineSettings | PolygonSettings,
-    content?: string | HTMLElement): L.Popup {
+    datasource: Datasource,
+    content?: string | HTMLElement
+): L.Popup {
     const popup = L.popup();
     popup.setContent(content);
     target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
     if (settings.showTooltipAction === 'hover') {
         target.off('click');
-        target.on('mouseover', function () {
+        target.on('mouseover', () => {
             target.openPopup();
         });
-        target.on('mouseout', function () {
+        target.on('mouseout', () => {
             target.closePopup();
         });
     }
@@ -37,7 +40,7 @@ export function createTooltip(target: L.Layer,
         Array.from(actions).forEach(
             (element: HTMLElement) => {
                 if (element && settings.tooltipAction[element.id]) {
-                    element.addEventListener('click', settings.tooltipAction[element.id])
+                    element.addEventListener('click', ($event) => settings.tooltipAction[element.id]($event, datasource));
                 }
             });
     });

@@ -42,7 +42,7 @@ export class Marker {
         });
 
         if (settings.showTooltip) {
-            this.tooltip = createTooltip(this.leafletMarker, settings);
+            this.tooltip = createTooltip(this.leafletMarker, settings, data.$datasource);
             this.updateMarkerTooltip(data);
         }
 
@@ -50,7 +50,7 @@ export class Marker {
             this.leafletMarker.on('click', (event: LeafletMouseEvent) => {
                 for (const action in this.settings.markerClick) {
                     if (typeof (this.settings.markerClick[action]) === 'function') {
-                        this.settings.markerClick[action](event);
+                        this.settings.markerClick[action](event, this.data.$datasource);
                     }
                 }
             });

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import L, { LatLngExpression, LatLngTuple } from 'leaflet';
+import L, { LatLngExpression, LatLngTuple, LeafletMouseEvent } from 'leaflet';
 import { createTooltip } from './maps-utils';
 import { PolygonSettings, FormattedData } from './map-models';
 import { DatasourceData } from '@app/shared/models/widget.models';
@@ -27,7 +27,7 @@ export class Polygon {
     data;
     dataSources;
 
-    constructor(public map, polyData: DatasourceData, dataSources, private settings: PolygonSettings, onClickListener?) {
+    constructor(public map, polyData: DatasourceData, dataSources, private settings: PolygonSettings) {
         this.leafletPoly = L.polygon(polyData.data, {
             fill: true,
             fillColor: settings.polygonColor,
@@ -39,11 +39,17 @@ export class Polygon {
         this.dataSources = dataSources;
         this.data = polyData;
         if (settings.showPolygonTooltip) {
-            this.tooltip = createTooltip(this.leafletPoly, settings);
+            this.tooltip = createTooltip(this.leafletPoly, settings, polyData.datasource);
             this.updateTooltip(polyData);
         }
-        if (onClickListener) {
-            this.leafletPoly.on('click', onClickListener);
+        if (settings.polygonClick) {
+            this.leafletPoly.on('click', (event: LeafletMouseEvent) => {
+                for (const action in this.settings.polygonClick) {
+                    if (typeof (this.settings.polygonClick[action]) === 'function') {
+                        this.settings.polygonClick[action](event, polyData.datasource);
+                    }
+                }
+            });
         }
     }