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

Refactoring

pull/8298/head
kalytka 4 years ago
parent
e2114f49c0
commit
6202832d8c
4 changed files with 44 additions and 44 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/dialogs/select-entity-dialog.component.html
  2. 35
      ui-ngx/src/app/modules/home/components/widget/lib/maps/dialogs/select-entity-dialog.component.ts
  3. 22
      ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
  4. 29
      ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts

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">
{{ parseName(entity) }}
{{ entity.entityParseName }}
</mat-option>
</mat-select>
</mat-form-field>

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

@ -20,20 +20,11 @@ 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';
import { GenericFunction } from '@home/components/widget/lib/maps/map-models';
import { fillDataPattern, processDataPattern, safeExecute } from '@core/utils';
import { parseWithTranslation } from '@home/components/widget/lib/maps/common-maps-utils';
export interface SelectEntityDialogData {
entities: FormattedData[];
labelSettings: {
showLabel: boolean;
useLabelFunction: boolean;
parsedLabelFunction: GenericFunction;
label: string;
};
}
@Component({
@ -42,13 +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(
@ -58,25 +49,7 @@ export class SelectEntityDialogComponent extends DialogComponent<SelectEntityDia
);
}
public parseName(entity) {
let name;
if (this.data.labelSettings?.showLabel) {
const pattern = this.data.labelSettings.useLabelFunction ? safeExecute(this.data.labelSettings.parsedLabelFunction,
[entity, this.data.entities, entity.dsIndex]) : this.data.labelSettings.label;
const markerLabelText = parseWithTranslation.prepareProcessPattern(pattern, true);
const replaceInfoLabelMarker = processDataPattern(pattern, entity);
const div = document.createElement('div');
div.innerHTML = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
name = div.textContent || div.innerText || '';
} else {
name = entity.entityName;
}
return name;
}
save(): void {
const entity = this.selectEntityFormGroup.value.entity;
entity.parseName = this.parseName(this.selectEntityFormGroup.value.entity);
this.dialogRef.close(entity);
this.dialogRef.close(this.selectEntityFormGroup.value.entity);
}
}

22
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 {
@ -215,6 +215,7 @@ export default abstract class LeafletMap {
default:
return of(null);
}
entities = entitiesParseName(entities, labelSettings);
if (entities.length === 1) {
return of(entities[0]);
}
@ -224,8 +225,7 @@ export default abstract class LeafletMap {
disableClose: true,
panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
data: {
entities,
labelSettings
entities
}
}).afterClosed();
}
@ -239,38 +239,38 @@ export default abstract class LeafletMap {
let customTranslation;
switch (type) {
case 'tbMarker':
tooltipText = this.translateService.instant('widgets.maps.tooltips.placeMarker', {entityName: data.parseName});
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.parseName});
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.parseName})
finishCircle: this.translateService.instant('widgets.maps.tooltips.finishCircle', {entityName: data.entityParseName})
}
};
break;
case 'tbRectangle':
tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.parseName});
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.parseName})
finishRect: this.translateService.instant('widgets.maps.tooltips.finishRect', {entityName: data.entityParseName})
}
};
break;
case 'tbPolygon':
tooltipText = this.translateService.instant('widgets.maps.tooltips.firstVertex', {entityName: data.parseName});
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.parseName}),
finishPoly: this.translateService.instant('widgets.maps.tooltips.finishPoly', {entityName: data.parseName})
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[] {
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);
const div = document.createElement('div');
div.innerHTML = fillDataPattern(markerLabelText, replaceInfoLabelMarker, entity);
entity.entityParseName = div.textContent || div.innerText || '';
} else {
entity.entityParseName = entity.entityName;
}
}
return entities;
}

Write Preview
Loading…
Cancel
Save