diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index dcfb90fbbc..e4823664bb 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -77,6 +77,10 @@ export function isUndefined(value: any): boolean { return typeof value === 'undefined'; } +export function isUndefinedOrNull(value: any): boolean { + return typeof value === 'undefined' || value === null; +} + export function isDefined(value: any): boolean { return typeof value !== 'undefined'; } @@ -452,7 +456,7 @@ export function insertVariable(pattern: string, name: string, value: any): strin const variable = match[0]; const variableName = match[1]; if (variableName === name) { - result = result.split(variable).join(value); + result = result.replace(variable, value); } match = varsRegex.exec(pattern); } @@ -469,17 +473,17 @@ export function createLabelFromDatasource(datasource: Datasource, pattern: strin const variable = match[0]; const variableName = match[1]; if (variableName === 'dsName') { - label = label.split(variable).join(datasource.name); + label = label.replace(variable, datasource.name); } else if (variableName === 'entityName') { - label = label.split(variable).join(datasource.entityName); + label = label.replace(variable, datasource.entityName); } else if (variableName === 'deviceName') { - label = label.split(variable).join(datasource.entityName); + label = label.replace(variable, datasource.entityName); } else if (variableName === 'entityLabel') { - label = label.split(variable).join(datasource.entityLabel || datasource.entityName); + label = label.replace(variable, datasource.entityLabel || datasource.entityName); } else if (variableName === 'aliasName') { - label = label.split(variable).join(datasource.aliasName); + label = label.replace(variable, datasource.aliasName); } else if (variableName === 'entityDescription') { - label = label.split(variable).join(datasource.entityDescription); + label = label.replace(variable, datasource.entityDescription); } match = varsRegex.exec(pattern); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index 7a2d091588..33c36e3ce8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -15,7 +15,8 @@ /// import L, { - FeatureGroup, Icon, + FeatureGroup, + Icon, LatLngBounds, LatLngTuple, markerClusterGroup, @@ -32,6 +33,7 @@ import { MarkerSettings, PolygonSettings, PolylineSettings, + ReplaceInfo, UnitedMapSettings } from './map-models'; import { Marker } from './markers'; @@ -62,6 +64,10 @@ export default abstract class LeafletMap { defaultMarkerIconInfo: { size: number[], icon: Icon }; loadingDiv: JQuery; loading = false; + replaceInfoLabelMarker: Array = []; + markerLabelText: string; + replaceInfoTooltipMarker: Array = []; + markerTooltipText: string; protected constructor(public ctx: WidgetContext, public $container: HTMLElement, 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 32cf92eeae..0a41516b6e 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 @@ -121,6 +121,12 @@ export interface FormattedData { [key: string]: any } +export interface ReplaceInfo { + variable: string; + valDec?: number; + dataKeyName: string +} + export type PolygonSettings = { showPolygon: boolean; polygonKeyName: string; 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 ee785e6b04..a94144c061 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 @@ -15,13 +15,12 @@ /// import L from 'leaflet'; -import { FormattedData, MarkerSettings, PolygonSettings, PolylineSettings } from './map-models'; +import { FormattedData, MarkerSettings, PolygonSettings, PolylineSettings, ReplaceInfo } from './map-models'; import { Datasource, DatasourceData } from '@app/shared/models/widget.models'; import _ from 'lodash'; import { Observable, Observer, of } from 'rxjs'; import { map } from 'rxjs/operators'; -import { createLabelFromDatasource, hashCode, isNumber, isUndefined, padValue } from '@core/utils'; -import { Form } from '@angular/forms'; +import { createLabelFromDatasource, hashCode, isDefinedAndNotNull, isNumber, isUndefined, padValue } from '@core/utils'; export function createTooltip(target: L.Layer, settings: MarkerSettings | PolylineSettings | PolygonSettings, @@ -185,7 +184,7 @@ function parseTemplate(template: string, data: { $datasource?: Datasource, [key: } else { textValue = value; } - template = template.split(variable).join(textValue); + template = template.replace(variable, textValue); match = /\${([^}]*)}/g.exec(template); } @@ -198,7 +197,7 @@ function parseTemplate(template: string, data: { $datasource?: Datasource, [key: while (match !== null) { [actionTags, actionName, actionText] = match; action = createLinkElement(actionName, actionText); - template = template.split(actionTags).join(action); + template = template.replace(actionTags, action); match = linkActionRegex.exec(template); } @@ -206,7 +205,7 @@ function parseTemplate(template: string, data: { $datasource?: Datasource, [key: while (match !== null) { [actionTags, actionName, actionText] = match; action = createButtonElement(actionName, actionText); - template = template.split(actionTags).join(action); + template = template.replace(actionTags, action); match = buttonActionRegex.exec(template); } @@ -219,6 +218,94 @@ function parseTemplate(template: string, data: { $datasource?: Datasource, [key: return res; } +export function processPattern(template: string, data: { $datasource?: Datasource, [key: string]: any }): Array { + const replaceInfo = []; + try { + const reg = /\${([^}]*)}/g; + let match = reg.exec(template); + while (match !== null) { + const variableInfo: ReplaceInfo = { + dataKeyName: '', + valDec: 2, + variable: '' + }; + const variable = match[0]; + let label = match[1]; + let valDec = 2; + const splitValues = label.split(':'); + if (splitValues.length > 1) { + label = splitValues[0]; + valDec = parseFloat(splitValues[1]); + } + + variableInfo.variable = variable; + variableInfo.valDec = valDec; + + if (label.startsWith('#')) { + const keyIndexStr = label.substring(1); + const n = Math.floor(Number(keyIndexStr)); + if (String(n) === keyIndexStr && n >= 0) { + variableInfo.dataKeyName = data.$datasource.dataKeys[n].label; + } + } else { + variableInfo.dataKeyName = label; + } + replaceInfo.push(variableInfo); + + match = reg.exec(template); + } + } catch (ex) { + console.log(ex, template) + } + return replaceInfo; +} + +export function fillPattern(markerLabelText: string, replaceInfoLabelMarker: Array, data: FormattedData) { + let text = createLabelFromDatasource(data.$datasource, markerLabelText); + if (replaceInfoLabelMarker) { + for(const variableInfo of replaceInfoLabelMarker) { + let txtVal = ''; + if (variableInfo.dataKeyName && isDefinedAndNotNull(data[variableInfo.dataKeyName])) { + const varData = data[variableInfo.dataKeyName]; + if (isNumber(varData)) { + txtVal = padValue(varData, variableInfo.valDec); + } else { + txtVal = varData; + } + } + text = text.replace(variableInfo.variable, txtVal); + } + } + return text; +} + +function prepareProcessPattern(template: string, translateFn?: TranslateFunc): string { + if (translateFn) { + template = translateFn(template); + } + let actionTags: string; + let actionText: string; + let actionName: string; + let action: string; + + let match = linkActionRegex.exec(template); + while (match !== null) { + [actionTags, actionName, actionText] = match; + action = createLinkElement(actionName, actionText); + template = template.replace(actionTags, action); + match = linkActionRegex.exec(template); + } + + match = buttonActionRegex.exec(template); + while (match !== null) { + [actionTags, actionName, actionText] = match; + action = createButtonElement(actionName, actionText); + template = template.replace(actionTags, action); + match = buttonActionRegex.exec(template); + } + return template; +} + export const parseWithTranslation = { translateFn: null, @@ -233,6 +320,9 @@ export const parseWithTranslation = { parseTemplate(template: string, data: object, forceTranslate = false): string { return parseTemplate(forceTranslate ? this.translate(template) : template, data, this.translate.bind(this)); }, + prepareProcessPattern(template: string, forceTranslate = false): string { + return prepareProcessPattern(forceTranslate ? this.translate(template) : template, this.translate.bind(this)); + }, setTranslate(translateFn: TranslateFunc) { this.translateFn = translateFn; } 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 4bbfb22dd8..cd254ca406 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 @@ -16,7 +16,15 @@ import L, { LeafletMouseEvent } from 'leaflet'; import { FormattedData, MarkerSettings } from './map-models'; -import { aspectCache, bindPopupActions, createTooltip, parseWithTranslation, safeExecute } from './maps-utils'; +import { + aspectCache, + bindPopupActions, + createTooltip, + fillPattern, + parseWithTranslation, + processPattern, + safeExecute +} from './maps-utils'; import tinycolor from 'tinycolor2'; import { isDefined } from '@core/utils'; import LeafletMap from './leaflet-map'; @@ -74,9 +82,13 @@ export class Marker { } updateMarkerTooltip(data: FormattedData) { + if(!this.map.markerTooltipText || this.settings.useTooltipFunction) { const pattern = this.settings.useTooltipFunction ? - safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern; - this.tooltip.setContent(parseWithTranslation.parseTemplate(pattern, data, true)); + safeExecute(this.settings.tooltipFunction, [this.data, this.dataSources, this.data.dsIndex]) : this.settings.tooltipPattern; + this.map.markerTooltipText = parseWithTranslation.prepareProcessPattern(pattern, true); + this.map.replaceInfoTooltipMarker = processPattern(this.map.markerTooltipText, data); + } + this.tooltip.setContent(fillPattern(this.map.markerTooltipText, this.map.replaceInfoTooltipMarker, data)); if (this.tooltip.isOpen() && this.tooltip.getElement()) { bindPopupActions(this.tooltip, this.settings, data.$datasource); } @@ -89,9 +101,13 @@ export class Marker { updateMarkerLabel(settings: MarkerSettings) { this.leafletMarker.unbindTooltip(); if (settings.showLabel) { - const pattern = settings.useLabelFunction ? + if(!this.map.markerLabelText || settings.useLabelFunction) { + const pattern = settings.useLabelFunction ? safeExecute(settings.labelFunction, [this.data, this.dataSources, this.data.dsIndex]) : settings.label; - settings.labelText = parseWithTranslation.parseTemplate(pattern, this.data, true); + this.map.markerLabelText = parseWithTranslation.prepareProcessPattern(pattern, true); + this.map.replaceInfoLabelMarker = processPattern(this.map.markerLabelText, this.data); + } + settings.labelText = fillPattern(this.map.markerLabelText, this.map.replaceInfoLabelMarker, this.data); this.leafletMarker.bindTooltip(`
${settings.labelText}
`, { className: 'tb-marker-label', permanent: true, direction: 'top', offset: this.tooltipOffset }); }