diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index ecde160b13..c47dc8165d 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -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 { const scrollSubject = new Subject(); @@ -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); 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 eee38e54ed..c3219f90c2 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 @@ -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; 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 f45150b4f0..82db9c2b29 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 @@ -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); } 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 f3c825c069..0cb3f8765a 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 @@ -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)); } }); }); 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 6fb272acf5..cc2da88514 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 @@ -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); } } }); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts index e9e11acf48..31843c0eaf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts @@ -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); + } + } + }); } }