diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts index a462a01356..a020bb1527 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts @@ -64,7 +64,7 @@ export class MapWidgetComponent implements OnInit, OnDestroy { overlayStyle: ComponentStyle = {}; padding: string; - private map: TbMap; + map: TbMap; constructor(public widgetComponent: WidgetComponent, private imagePipe: ImagePipe, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts index 11af4338e9..121277e7da 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts @@ -33,7 +33,8 @@ import { formattedDataArrayFromDatasourceData, formattedDataFormDatasourceData, isDefined, - isDefinedAndNotNull, isUndefined, + isDefinedAndNotNull, + isUndefined, mergeDeepIgnoreArray } from '@core/utils'; import { DeepPartial } from '@shared/models/common'; @@ -48,7 +49,7 @@ import { UnplacedMapDataItem, } from '@home/components/widget/lib/maps/data-layer/map-data-layer'; import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models'; -import { FormattedData, MapItemType, WidgetAction, WidgetActionType, widgetType } from '@shared/models/widget.models'; +import { FormattedData, MapItemType, WidgetAction, widgetType } from '@shared/models/widget.models'; import { EntityDataPageLink } from '@shared/models/query/query.models'; import { CustomTranslatePipe } from '@shared/pipe/custom-translate.pipe'; import { TbMarkersDataLayer } from '@home/components/widget/lib/maps/data-layer/markers-data-layer'; @@ -545,66 +546,67 @@ export abstract class TbMap { title: customTranslate.transform(actionButton.label) }; const toolbarButton = this.customActionsToolbar.toolbarButton(actionButtonConfig); - if (actionButton.action.type !== WidgetActionType.placeMapItem) { - toolbarButton.onClick((e) => this.ctx.actionsApi.handleWidgetAction(e, actionButton.action)); - } else { - switch (actionButton.action.mapItemType) { - case MapItemType.marker: - toolbarButton.onClick((e, button) => this.createMarker(e, {button, action: actionButton.action})); - break; - case MapItemType.polygon: - toolbarButton.onClick((e, button) => this.createPolygon(e, {button, action: actionButton.action})); - break; - case MapItemType.rectangle: - toolbarButton.onClick((e, button) => this.createRectangle(e, {button, action: actionButton.action})); - break; - case MapItemType.circle: - toolbarButton.onClick((e, button) => this.createCircle(e, {button, action: actionButton.action})); - break; - } - } + toolbarButton.onClick((e, button) => this.ctx.actionsApi.handleWidgetAction(e, actionButton.action, null, null, {button})); }); } } - private createMarker(e: MouseEvent, actionData: CustomActionData) { - this.createItem(e, actionData, () => this.prepareDrawMode('Marker', { + public placeMapItem(actionData: CustomActionData): void { + switch (actionData.action.mapItemType) { + case MapItemType.marker: + this.createMarker(actionData); + break; + case MapItemType.polygon: + this.createPolygon(actionData); + break; + case MapItemType.rectangle: + this.createRectangle(actionData); + break; + case MapItemType.circle: + this.createCircle(actionData); + break; + } + } + + private createMarker(actionData: CustomActionData) { + this.createItem(actionData, () => this.prepareDrawMode('Marker', { placeMarker: this.ctx.translate.instant('widgets.maps.data-layer.marker.place-marker-hint') })); } - private createRectangle(e: MouseEvent, actionData: CustomActionData): void { - this.createItem(e, actionData, () => this.prepareDrawMode('Rectangle', { + private createRectangle(actionData: CustomActionData): void { + this.createItem(actionData, () => this.prepareDrawMode('Rectangle', { firstVertex: this.ctx.translate.instant('widgets.maps.data-layer.polygon.rectangle-place-first-point-hint'), finishRect: this.ctx.translate.instant('widgets.maps.data-layer.polygon.finish-rectangle-hint') })); } - private createPolygon(e: MouseEvent, actionData: CustomActionData): void { - this.createItem(e, actionData, () => this.prepareDrawMode('Polygon', { + private createPolygon(actionData: CustomActionData): void { + this.createItem(actionData, () => this.prepareDrawMode('Polygon', { firstVertex: this.ctx.translate.instant('widgets.maps.data-layer.polygon.polygon-place-first-point-hint'), continueLine: this.ctx.translate.instant('widgets.maps.data-layer.polygon.continue-polygon-hint'), finishPoly: this.ctx.translate.instant('widgets.maps.data-layer.polygon.finish-polygon-hint') })); } - private createCircle(e: MouseEvent, actionData: CustomActionData): void { - this.createItem(e, actionData, () => this.prepareDrawMode('Circle', { + private createCircle(actionData: CustomActionData): void { + this.createItem(actionData, () => this.prepareDrawMode('Circle', { startCircle: this.ctx.translate.instant('widgets.maps.data-layer.circle.place-circle-center-hint'), finishCircle: this.ctx.translate.instant('widgets.maps.data-layer.circle.finish-circle-hint') })); } - private createItem(e: MouseEvent, actionData: CustomActionData, prepareDrawMode: () => void) { + private createItem(actionData: CustomActionData, prepareDrawMode: () => void) { if (this.isPlacingItem) { return; } - this.updatePlaceItemState(actionData.button); + this.updatePlaceItemState(actionData.button, true); this.map.once('pm:create', (e) => { - this.ctx.actionsApi.handleWidgetAction(e as any, actionData.action, null, null, { + actionData.afterPlaceItemCallback(e as any, actionData.action, null, null, { coordinates: convertLayerToCoordinates(actionData.action.mapItemType, e.layer), - layer: e.layer + layer: e.layer, + button: actionData.button }); // @ts-ignore @@ -673,7 +675,7 @@ export abstract class TbMap { L.DomUtil.addClass(this.map.pm.Draw[shape]._hintMarker.getTooltip()._container, 'tb-place-item-label'); } - private updatePlaceItemState(addButton?: L.TB.ToolbarButton): void { + private updatePlaceItemState(addButton?: L.TB.ToolbarButton, disabled = false): void { if (addButton) { this.deselectItem(false, true); addButton.setActive(true); @@ -681,7 +683,7 @@ export abstract class TbMap { this.currentAddButton.setActive(false); } this.currentAddButton = addButton; - this.updateAddButtonsStates(); + this.updateAddButtonsStates(disabled); } private createdControlButtonTooltip(root: HTMLElement, side: TooltipPositioningSide) { @@ -856,8 +858,8 @@ export abstract class TbMap { } } - private updateAddButtonsStates() { - if (this.currentAddButton) { + private updateAddButtonsStates(disabled = false) { + if (this.currentAddButton || disabled) { if (this.addMarkerButton && this.addMarkerButton !== this.currentAddButton) { this.addMarkerButton.setDisabled(true); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/models/map.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/models/map.models.ts index 79fb8a7c04..9863253ff8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/models/map.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/models/map.models.ts @@ -34,6 +34,7 @@ import { ImagePipe } from '@shared/pipe/image.pipe'; import { MarkerShape } from '@home/components/widget/lib/maps/models/marker-shape.models'; import { UnplacedMapDataItem } from '@home/components/widget/lib/maps/data-layer/map-data-layer'; import { DateFormatSettings, simpleDateFormat } from '@shared/models/widget-settings.models'; +import { EntityId } from '@shared/models/id/entity-id'; export enum MapType { geoMap = 'geoMap', @@ -1033,8 +1034,10 @@ export interface MarkerIconInfo { } export interface CustomActionData { - button: L.TB.TopToolbarButton; + button?: L.TB.TopToolbarButton; action: WidgetAction; + afterPlaceItemCallback: ($event: Event, descriptor: WidgetAction, entityId?: EntityId, entityName?: string, + additionalParams?: any, entityLabel?: string) => void } export type MapStringFunction = (data: FormattedData, diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts index 8a9b6e194c..2ac0a6a0e7 100644 --- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts @@ -125,6 +125,7 @@ import { IModulesMap } from '@modules/common/modules-map.models'; import { DashboardUtilsService } from '@core/services/dashboard-utils.service'; import { CompiledTbFunction, compileTbFunction, isNotEmptyTbFunction } from '@shared/models/js-function.models'; import { HttpClient } from '@angular/common/http'; +import type { MapWidgetComponent } from '@home/components/widget/lib/maps/map-widget.component'; @Component({ selector: 'tb-widget', @@ -1150,44 +1151,17 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges, } break; case WidgetActionType.placeMapItem: - case WidgetActionType.customPretty: - const customPrettyFunction = descriptor.customFunction; - const customHtml = descriptor.customHtml; - const customCss = descriptor.customCss; - const customResources = descriptor.customResources; - const actionNamespace = `custom-action-pretty-${guid()}`; - let htmlTemplate = ''; - if (isDefined(customHtml) && customHtml.length > 0) { - htmlTemplate = customHtml; + const mapWidget: MapWidgetComponent = this.widgetContext.$scope.mapWidget + if (mapWidget) { + mapWidget.map.placeMapItem({ + action: descriptor, + afterPlaceItemCallback: this.executeCustomPrettyAction.bind(this), + button: additionalParams?.button + }); } - this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe({ - next: () => { - if (isNotEmptyTbFunction(customPrettyFunction)) { - compileTbFunction(this.http, customPrettyFunction, '$event', 'widgetContext', 'entityId', - 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel').subscribe( - { - next: (compiled) => { - try { - if (!additionalParams) { - additionalParams = {}; - } - this.widgetContext.customDialog.setAdditionalImports(descriptor.customImports); - compiled.execute($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel); - } catch (e) { - console.error(e); - } - }, - error: (err) => { - console.error(err); - } - } - ) - } - }, - error: (errorMessages: string[]) => { - this.processResourcesLoadErrors(errorMessages); - } - }); + break; + case WidgetActionType.customPretty: + this.executeCustomPrettyAction($event, descriptor, entityId, entityName, additionalParams, entityLabel); break; case WidgetActionType.mobileAction: const mobileAction = descriptor.mobileAction; @@ -1559,6 +1533,45 @@ export class WidgetComponent extends PageComponent implements OnInit, OnChanges, this.handleWidgetAction($event, action, entityId, entityName, null, entityLabel); } + private executeCustomPrettyAction($event: Event, descriptor: WidgetAction, entityId?: EntityId, + entityName?: string, additionalParams?: any, entityLabel?: string) { + const customPrettyFunction = descriptor.customFunction; + const customHtml = descriptor.customHtml; + const customCss = descriptor.customCss; + const customResources = descriptor.customResources; + const actionNamespace = `custom-action-pretty-${guid()}`; + let htmlTemplate = ''; + if (isDefined(customHtml) && customHtml.length > 0) { + htmlTemplate = customHtml; + } + this.loadCustomActionResources(actionNamespace, customCss, customResources, descriptor).subscribe({ + next: () => { + if (isNotEmptyTbFunction(customPrettyFunction)) { + compileTbFunction(this.http, customPrettyFunction, '$event', 'widgetContext', 'entityId', + 'entityName', 'htmlTemplate', 'additionalParams', 'entityLabel').subscribe({ + next: (compiled) => { + try { + if (!additionalParams) { + additionalParams = {}; + } + this.widgetContext.customDialog.setAdditionalImports(descriptor.customImports); + compiled.execute($event, this.widgetContext, entityId, entityName, htmlTemplate, additionalParams, entityLabel); + } catch (e) { + console.error(e); + } + }, + error: (err) => { + console.error(err); + } + }); + } + }, + error: (errorMessages: string[]) => { + this.processResourcesLoadErrors(errorMessages); + } + }); + } + private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array, actionDescriptor: WidgetAction): Observable { const resourceTasks: Observable[] = [];