diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index 39241c10d1..3b6221be0b 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/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(//g, 'a>').replace(/name=(\'|")(.*?)(\'|")/g, `class='tb-custom-action' id='$2'`); let variables = ''; const expressions = template .match(/\{(.*?)\}/g) // find expressions diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 90bd9341d6..c32bb9f044 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/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.lngKeyName]: position.lng + [this.options.latKeyName]: position.lat % 180, + [this.options.lngKeyName]: position.lng % 180 } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts index 1d2c993ef1..0825a7047b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts +++ b/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; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index c2cd46c6b2..17ba28ed25 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/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 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, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index 7af0828891..69ca0780d1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/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]; -} - +} \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts index 0903c5cd77..2f2919edbd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts +++ b/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.setContent(parseTemplate(this.settings.tooltipPattern, data)); + this.tooltip = createTooltip(this.leafletMarker, settings, parseTemplate(this.settings.tooltipPattern, data)); } if (onClickListener) {