tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

UI: Fix process header widget action - place map item

pull/12807/head
Vladyslav Prykhodko 2 years ago
parent
cd3a7c4c4e
commit
8ebf5125af
4 changed files with 93 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts
  2. 74
      ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
  3. 5
      ui-ngx/src/app/modules/home/components/widget/lib/maps/models/map.models.ts
  4. 87
      ui-ngx/src/app/modules/home/components/widget/widget.component.ts

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget.component.ts
View File

@ -64,7 +64,7 @@ export class MapWidgetComponent implements OnInit, OnDestroy {
overlayStyle: ComponentStyle = {};
padding: string;
private map: TbMap<MapSetting>;
map: TbMap<MapSetting>;
constructor(public widgetComponent: WidgetComponent,
private imagePipe: ImagePipe,

74
ui-ngx/src/app/modules/home/components/widget/lib/maps/map.ts
View File

@ -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<S extends BaseMapSettings> {
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<S extends BaseMapSettings> {
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<S extends BaseMapSettings> {
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<S extends BaseMapSettings> {
}
}
private updateAddButtonsStates() {
if (this.currentAddButton) {
private updateAddButtonsStates(disabled = false) {
if (this.currentAddButton || disabled) {
if (this.addMarkerButton && this.addMarkerButton !== this.currentAddButton) {
this.addMarkerButton.setDisabled(true);
}

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

@ -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<TbMapDatasource>,

87
ui-ngx/src/app/modules/home/components/widget/widget.component.ts
View File

@ -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<WidgetResource>,
actionDescriptor: WidgetAction): Observable<any> {
const resourceTasks: Observable<string>[] = [];

Write Preview
Loading…
Cancel
Save