add support custom actions

ui-ngx/src/app/core/utils.ts

@@ -524,9 +524,10 @@ export function parseFunction(source: any, params: string[] = []): Function {
   return res;
 }
 
-export function parseTemplate(template: string, data: object) {
+export function parseTemplate(template: string, data: object) { 
   let res = '';
   try {
+    template = template.replace(/<link-act/g, '<a').replace(/link-act>/g, 'a>').replace(/name=(\'|")(.*?)(\'|")/g, `class='tb-custom-action' id='$2'`);
     let variables = '';
     const expressions = template
       .match(/\{(.*?)\}/g) // find expressions

ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts

@@ -65,7 +65,7 @@ export default abstract class LeafletMap {
             let addMarker: L.Control;
             this.map.on('mouseup', (e: L.LeafletMouseEvent) => {
                 mousePositionOnMap = e.latlng;
-            })
+            });
             const dragListener = (e: L.DragEndEvent) => {
                 if (e.type === 'dragend' && mousePositionOnMap) {
                     const newMarker = L.marker(mousePositionOnMap).addTo(this.map);
@@ -83,7 +83,14 @@ export default abstract class LeafletMap {
                             this.createMarker(ds.entityName, updatedEnttity, this.datasources, this.options, false);
                         }
                         datasourcesList.append(dsItem);
-                    })
+                    });
+                    const deleteBtn = document.createElement('a');
+                    deleteBtn.appendChild(document.createTextNode('Delete position'));
+                    deleteBtn.setAttribute('color', 'red');
+                    deleteBtn.onclick = () => {
+                        this.map.removeLayer(newMarker);
+                    }
+                    datasourcesList.append(deleteBtn);
                     const popup = L.popup();
                     popup.setContent(datasourcesList);
                     newMarker.bindPopup(popup).openPopup();
@@ -96,6 +103,7 @@ export default abstract class LeafletMap {
                     img.src = `assets/add_location.svg`;
                     img.style.width = '32px';
                     img.style.height = '32px';
+                    img.title = "Drag and drop to add marker";
                     img.onclick = this.dragMarker;
                     img.draggable = true;
                     const draggableImg = new L.Draggable(img);
@@ -106,7 +114,6 @@ export default abstract class LeafletMap {
                 onRemove(map) {
                 },
                 dragMarker: this.dragMarker
-
             } as any);
 
             L.control.addMarker = (opts) => {
@@ -193,8 +200,8 @@ export default abstract class LeafletMap {
 
     convertToCustomFormat(position: L.LatLng): object {
         return {
-            [this.options.latKeyName]: position.lat,
+            [this.options.latKeyName]: position.lat % 180,
-            [this.options.lngKeyName]: position.lng
+            [this.options.lngKeyName]: position.lng % 180
         }
     }
 

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts

@@ -54,6 +54,7 @@ export enum MapProviders {
 
 export type MarkerSettings = {
     tooltipPattern?: any;
+    tooltipActions: object;
     icon?: any;
     showLabel?: boolean;
     label: string;
@@ -99,7 +100,8 @@ export type PolygonSettings = {
     polygonColor: string;
     autocloseTooltip: boolean;
     displayTooltipAction: string;
-
+    tooltipActions: object;
+    
     polygonColorFunction?: GenericFunction;
 }
 
@@ -108,6 +110,7 @@ export type PolylineSettings = {
     autocloseTooltip: boolean;
     displayTooltipAction: string;
     useColorFunction: any;
+    tooltipActions: object;
     color: string;
     useStrokeOpacityFunction: any;
     strokeOpacity: number;

ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts

@@ -30,12 +30,12 @@ import {
 } from './schemes';
 import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
 import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
-import { parseFunction, parseArray, parseData } from '@core/utils';
+import { parseFunction, parseArray, parseData, safeExecute } from '@core/utils';
 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils';
 import { forkJoin } from 'rxjs';
 import { WidgetContext } from '@app/modules/home/models/widget-component.models';
 import { getDefCenterPosition } from './maps-utils';
-import { JsonSettingsSchema } from '@shared/models/widget.models';
+import { JsonSettingsSchema, WidgetActionDescriptor } from '@shared/models/widget.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
 import { AttributeService } from '@core/http/attribute.service';
@@ -45,6 +45,7 @@ import { Type } from '@angular/core';
 export class MapWidgetController implements MapWidgetInterface {
 
     constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) {
+        console.log("MapWidgetController -> constructor -> ctx", ctx)
         if (this.map) {
             this.map.map.remove();
             delete this.map;
@@ -55,7 +56,11 @@ export class MapWidgetController implements MapWidgetInterface {
             $element = ctx.$container[0];
         }
         this.settings = this.initSettings(ctx.settings);
-
+        const descriptors = this.ctx.actionsApi.getActionDescriptors('tooltipAction');
+        this.settings.tooltipActions = {};
+        descriptors.forEach(descriptor => {
+            this.settings.tooltipActions[descriptor.name] = ($event) => this.onTooltipClick(descriptor, $event);
+        }, this.settings.tooltipActions);
         const MapClass = providerSets[this.provider]?.MapClass;
         if (!MapClass) {
             return;
@@ -69,6 +74,7 @@ export class MapWidgetController implements MapWidgetInterface {
     schema: JsonSettingsSchema;
     data;
     settings: UnitedMapSettings;
+    actions: Map<string, Map<string, (widgetContext: WidgetContext) => void>>;
 
     public static dataKeySettingsSchema(): object {
         return {};
@@ -86,7 +92,6 @@ export class MapWidgetController implements MapWidgetInterface {
         addGroupInfo(schema, 'Map Provider Settings');
         addToSchema(schema, commonMapSettingsSchema);
         addGroupInfo(schema, 'Common Map Settings');
-
         if (drawRoutes) {
             addToSchema(schema, routeMapSettingsSchema);
             addGroupInfo(schema, 'Route Map Settings');
@@ -118,6 +123,18 @@ export class MapWidgetController implements MapWidgetInterface {
     onInit() {
     }
 
+    private onTooltipClick(descriptor: WidgetActionDescriptor, $event: any) {
+        if ($event) {
+            $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;
+        this.ctx.actionsApi.handleWidgetAction($event, descriptor, entityId, entityName, null, entityLabel);
+    }
+
     setMarkerLocation = (e) => {
         const attributeService = this.ctx.$injector.get(AttributeService);
         forkJoin(
@@ -194,7 +211,7 @@ interface IProvider {
     name: string
 }
 
-export const providerSets: {[key: string]: IProvider} = {
+export const providerSets: { [key: string]: IProvider } = {
     'openstreet-map': {
         MapClass: OpenStreetMap,
         schema: openstreetMapSettingsSchema,

ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts

@@ -18,10 +18,24 @@ import L from 'leaflet';
 import _ from 'lodash';
 import { MarkerSettings, PolylineSettings, PolygonSettings } from './map-models';
 
-export function createTooltip(target: L.Layer, settings: MarkerSettings | PolylineSettings | PolygonSettings): L.Popup {
+export function createTooltip(target: L.Layer,
+    settings: MarkerSettings | PolylineSettings | PolygonSettings,
+    content?: string | HTMLElement): L.Popup {
     const popup = L.popup();
-    popup.setContent('');
+    popup.setContent(content);
+    console.log(settings);
+
     target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
+    target.on('popupopen', () => {
+        let actions = document.getElementsByClassName('tb-custom-action');
+        Array.from(actions).forEach(
+            (element: HTMLElement) => {
+                if (element && settings.tooltipActions[element.id]) {
+                    console.log(settings.tooltipActions[element.id]);
+                    element.addEventListener('click', settings.tooltipActions[element.id])
+                }
+            })
+    })
     if (settings.displayTooltipAction === 'hover') {
         target.off('click');
         target.on('mouseover', function () {
@@ -51,5 +65,4 @@ export function getDefCenterPosition(position) {
     if (typeof (position) === 'object')
         return position;
     return [0, 0];
-}
+}
-

ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts

@@ -43,8 +43,7 @@ export class Marker {
         });
 
         if (settings.showTooltip) {
-            this.tooltip = createTooltip(this.leafletMarker, settings);
+            this.tooltip = createTooltip(this.leafletMarker, settings, parseTemplate(this.settings.tooltipPattern, data));
-            this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data));
         }
 
         if (onClickListener) {