dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #8298 from kalutkaz/selectEntityDialogLabelParsing

Browse Source 
Added label parsing in select entity dialog
This commit is contained in:
Igor Kulikov 2023-04-13 17:53:12 +03:00 committed by GitHub
commit 53dab54a7f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.html
View File

@ -31,7 +31,7 @@
<mat-label translate>entity.entity</mat-label>
<mat-select formControlName="entity">
<mat-option *ngFor="let entity of data.entities" [value]="entity">
{{ entity.entityName }}
{{ entity.entityParseName }}
</mat-option>
</mat-select>
</mat-form-field>

7
ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
View File

@ -20,7 +20,7 @@ import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { Router } from '@angular/router';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FormattedData } from '@shared/models/widget.models';
export interface SelectEntityDialogData {
@ -33,14 +33,13 @@ export interface SelectEntityDialogData {
styleUrls: ['./select-entity-dialog.component.scss']
})
export class SelectEntityDialogComponent extends DialogComponent<SelectEntityDialogComponent, FormattedData> {
selectEntityFormGroup: UntypedFormGroup;
selectEntityFormGroup: FormGroup;
constructor(protected store: Store<AppState>,
protected router: Router,
@Inject(MAT_DIALOG_DATA) public data: SelectEntityDialogData,
public dialogRef: MatDialogRef<SelectEntityDialogComponent, FormattedData>,
public fb: UntypedFormBuilder) {
public fb: FormBuilder) {
super(store, router, dialogRef);
this.selectEntityFormGroup = this.fb.group(

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

@ -36,7 +36,7 @@ import { Observable, of } from 'rxjs';
import { Polyline } from './polyline';
import { Polygon } from './polygon';
import { Circle } from './circle';
import { createTooltip, isCutPolygon, isJSON } from '@home/components/widget/lib/maps/maps-utils';
import { createTooltip, entitiesParseName, isCutPolygon, isJSON } from '@home/components/widget/lib/maps/maps-utils';
import { checkLngLat, createLoadingDiv } from '@home/components/widget/lib/maps/common-maps-utils';
import { WidgetContext } from '@home/models/widget-component.models';
import {
@ -182,20 +182,40 @@ export default abstract class LeafletMap {
private selectEntityWithoutLocationDialog(shapes: L.PM.SUPPORTED_SHAPES): Observable<FormattedData> {
let entities;
let labelSettings;
switch (shapes) {
case 'Polygon':
case 'Rectangle':
entities = this.datasources.filter(pData => !this.isValidPolygonPosition(pData));
labelSettings = {
showLabel: this.options.showPolygonLabel,
useLabelFunction: this.options.usePolygonLabelFunction,
parsedLabelFunction: this.options.parsedPolygonLabelFunction,
label: this.options.polygonLabel
};
break;
case 'Marker':
entities = this.datasources.filter(mData => !this.extractPosition(mData));
labelSettings = {
showLabel: this.options.showLabel,
useLabelFunction: this.options.useLabelFunction,
parsedLabelFunction: this.options.parsedLabelFunction,
label: this.options.label
};
break;
case 'Circle':
entities = this.datasources.filter(mData => !this.isValidCircle(mData));
labelSettings = {
showLabel: this.options.showCircleLabel,
useLabelFunction: this.options.useCircleLabelFunction,
parsedLabelFunction: this.options.parsedCircleLabelFunction,
label: this.options.circleLabel
};
break;
default:
return of(null);
}
entities = entitiesParseName(entities, labelSettings);
if (entities.length === 1) {
return of(entities[0]);
}
@ -219,38 +239,38 @@ export default abstract class LeafletMap {
let customTranslation;
switch (type) {
case 'tbMarker':
tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.entityName});
tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.entityParseName});
// @ts-ignore
this.map.pm.Draw.tbMarker._hintMarker.setTooltipContent(tooltipText);
break;
case 'tbCircle':
tooltipText = this.translateService.instant('widgets.maps.tooltips.startCircle', {entityName: data.entityName});
tooltipText = this.translateService.instant('widgets.maps.tooltips.startCircle', {entityName: data.entityParseName});
// @ts-ignore
this.map.pm.Draw.tbCircle._hintMarker.setTooltipContent(tooltipText);
customTranslation = {
tooltips: {
finishCircle: this.translateService.instant('widgets.maps.tooltips.finishCircle', {entityName: data.entityName})
finishCircle: this.translateService.instant('widgets.maps.tooltips.finishCircle', {entityName: data.entityParseName})
}
};
break;
case 'tbRectangle':
tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityName});
tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityParseName});
// @ts-ignore
this.map.pm.Draw.tbRectangle._hintMarker.setTooltipContent(tooltipText);
customTranslation = {
tooltips: {
finishRect: this.translateService.instant('widgets.maps.tooltips.finishRect', {entityName: data.entityName})
finishRect: this.translateService.instant('widgets.maps.tooltips.finishRect', {entityName: data.entityParseName})
}
};
break;
case 'tbPolygon':
tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityName});
tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.entityParseName});
// @ts-ignore
this.map.pm.Draw.tbPolygon._hintMarker.setTooltipContent(tooltipText);
customTranslation = {
tooltips: {
continueLine: this.translateService.instant('widgets.maps.tooltips.continueLine', {entityName: data.entityName}),
finishPoly: this.translateService.instant('widgets.maps.tooltips.finishPoly', {entityName: data.entityName})
continueLine: this.translateService.instant('widgets.maps.tooltips.continueLine', {entityName: data.entityParseName}),
finishPoly: this.translateService.instant('widgets.maps.tooltips.finishPoly', {entityName: data.entityParseName})
}
};
break;

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

@ -16,9 +16,12 @@
import L from 'leaflet';
import {
GenericFunction,
ShowTooltipAction, WidgetToolipSettings
} from './map-models';
import { Datasource } from '@app/shared/models/widget.models';
import { Datasource, FormattedData } from '@app/shared/models/widget.models';
import { fillDataPattern, processDataPattern, safeExecute } from '@core/utils';
import { parseWithTranslation } from '@home/components/widget/lib/maps/common-maps-utils';
export function createTooltip(target: L.Layer,
settings: Partial<WidgetToolipSettings>,
@ -83,3 +86,27 @@ export function isJSON(data: string): boolean {
return false;
}
}
interface labelSettings {
showLabel: boolean;
useLabelFunction: boolean;
parsedLabelFunction: GenericFunction;
label: string;
}
export function entitiesParseName(entities: FormattedData[], labelSettings: labelSettings): FormattedData[] {
const div = document.createElement('div');
for (const entity of entities) {
if (labelSettings?.showLabel) {
const pattern = labelSettings.useLabelFunction ? safeExecute(labelSettings.parsedLabelFunction,
[entity, entities, entity.dsIndex]) : labelSettings.label;
const markerLabelText = parseWithTranslation.prepareProcessPattern(pattern, true);
const replaceInfoLabelMarker = processDataPattern(pattern, entity);
div.innerHTML = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
entity.entityParseName = div.textContent || div.innerText || '';
} else {
entity.entityParseName = entity.entityName;
}
}
return entities;
}