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

Fix map tooltip actions

Browse Source
This commit is contained in:
Igor Kulikov 2020-06-08 12:08:41 +03:00
parent dc3c65dca2
commit 9f0ad60892
4 changed files with 23 additions and 12 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/leaflet-map.ts
View File

@ -333,7 +333,7 @@ export default abstract class LeafletMap {
point.on('click', () => getTooltip(data));
}
else {
createTooltip(point, this.options, pointsData, getTooltip(data, false));
createTooltip(point, this.options, data.$datasource, getTooltip(data, false));
}
this.points.addLayer(point);
});

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

@ -40,18 +40,27 @@ export function createTooltip(target: L.Layer,
});
}
target.on('popupopen', () => {
const actions = document.getElementsByClassName('tb-custom-action');
Array.from(actions).forEach(
(element: HTMLElement) => {
const actionName = element.getAttribute('data-action-name');
if (element && settings.tooltipAction[actionName]) {
element.addEventListener('click', ($event) => settings.tooltipAction[actionName]($event, datasource));
}
});
bindPopupActions(popup, settings, datasource);
});
return popup;
}
export function bindPopupActions(popup: L.Popup, settings: MarkerSettings | PolylineSettings | PolygonSettings,
datasource: Datasource) {
const actions = popup.getElement().getElementsByClassName('tb-custom-action');
Array.from(actions).forEach(
(element: HTMLElement) => {
const actionName = element.getAttribute('data-action-name');
if (element && settings.tooltipAction[actionName]) {
element.onclick = ($event) =>
{
settings.tooltipAction[actionName]($event, datasource);
return false;
};
}
});
}
export function getRatio(firsMoment: number, secondMoment: number, intermediateMoment: number): number {
return (intermediateMoment - firsMoment) / (secondMoment - firsMoment);
}
@ -133,7 +142,7 @@ const linkActionRegex = /<link-act name=['"]([^['"]*)['"]>([^<]*)<\/link-act>/g;
const buttonActionRegex = /<button-act name=['"]([^['"]*)['"]>([^<]*)<\/button-act>/g;
function createLinkElement(actionName: string, actionText: string): string {
return `<a href="#" class="tb-custom-action" data-action-name=${actionName}>${actionText}</a>`;
return `<a href="javascript:void(0);" class="tb-custom-action" data-action-name=${actionName}>${actionText}</a>`;
}
function createButtonElement(actionName: string, actionText: string) {

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

@ -16,7 +16,7 @@
import L, { LeafletMouseEvent } from 'leaflet';
import { FormattedData, MarkerSettings } from './map-models';
import { aspectCache, createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
import { aspectCache, bindPopupActions, createTooltip, parseWithTranslation, safeExecute } from './maps-utils';
import tinycolor from 'tinycolor2';
import { isDefined } from '@core/utils';
@ -76,6 +76,9 @@ export class Marker {
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));
if (this.tooltip.isOpen() && this.tooltip.getElement()) {
bindPopupActions(this.tooltip, this.settings, data.$datasource);
}
}
updateMarkerPosition(position: L.LatLngExpression) {

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

@ -50,7 +50,6 @@ export class ImageMap extends LeafletMap {
return aspectCache(res);
})).subscribe(aspect => {
this.aspect = aspect;
console.log("ImageMap -> setImageAlias -> aspect", aspect)
this.onResize(true);
});
}