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

add support custom actions

Browse Source
This commit is contained in:
Adsumus 2020-04-21 05:08:06 +03:00
parent 76a8a60d76
commit cc5ebfbff7
6 changed files with 58 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui-ngx/src/app/core/utils.ts
View File

@ -527,6 +527,7 @@ export function parseFunction(source: any, params: string[] = []): Function {
export function parseTemplate(template: string, data: object) {
let res = '';
try {
template = template.replace(/<link-act/g, '<a').replace(/link-act>/g, 'a>').replace(/name=(\'|")(.*?)(\'|")/g, `class='tb-custom-action' id='$2'`);
let variables = '';
const expressions = template
.match(/\{(.*?)\}/g) // find expressions

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

@ -65,7 +65,7 @@ export default abstract class LeafletMap {
let addMarker: L.Control;
this.map.on('mouseup', (e: L.LeafletMouseEvent) => {
mousePositionOnMap = e.latlng;
})
});
const dragListener = (e: L.DragEndEvent) => {
if (e.type === 'dragend' && mousePositionOnMap) {
const newMarker = L.marker(mousePositionOnMap).addTo(this.map);
@ -83,7 +83,14 @@ export default abstract class LeafletMap {
this.createMarker(ds.entityName, updatedEnttity, this.datasources, this.options, false);
}
datasourcesList.append(dsItem);
})
});
const deleteBtn = document.createElement('a');
deleteBtn.appendChild(document.createTextNode('Delete position'));
deleteBtn.setAttribute('color', 'red');
deleteBtn.onclick = () => {
this.map.removeLayer(newMarker);
}
datasourcesList.append(deleteBtn);
const popup = L.popup();
popup.setContent(datasourcesList);
newMarker.bindPopup(popup).openPopup();
@ -96,6 +103,7 @@ export default abstract class LeafletMap {
img.src = `assets/add_location.svg`;
img.style.width = '32px';
img.style.height = '32px';
img.title = "Drag and drop to add marker";
img.onclick = this.dragMarker;
img.draggable = true;
const draggableImg = new L.Draggable(img);
@ -106,7 +114,6 @@ export default abstract class LeafletMap {
onRemove(map) {
},
dragMarker: this.dragMarker
} as any);
L.control.addMarker = (opts) => {
@ -193,8 +200,8 @@ export default abstract class LeafletMap {
convertToCustomFormat(position: L.LatLng): object {
return {
[this.options.latKeyName]: position.lat,
[this.options.lngKeyName]: position.lng
[this.options.latKeyName]: position.lat % 180,
[this.options.lngKeyName]: position.lng % 180
}
}

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

@ -54,6 +54,7 @@ export enum MapProviders {
export type MarkerSettings = {
tooltipPattern?: any;
tooltipActions: object;
icon?: any;
showLabel?: boolean;
label: string;
@ -99,6 +100,7 @@ export type PolygonSettings = {
polygonColor: string;
autocloseTooltip: boolean;
displayTooltipAction: string;
tooltipActions: object;
polygonColorFunction?: GenericFunction;
}
@ -108,6 +110,7 @@ export type PolylineSettings = {
autocloseTooltip: boolean;
displayTooltipAction: string;
useColorFunction: any;
tooltipActions: object;
color: string;
useStrokeOpacityFunction: any;
strokeOpacity: number;

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

@ -30,12 +30,12 @@ import {
} from './schemes';
import { MapWidgetStaticInterface, MapWidgetInterface } from './map-widget.interface';
import { OpenStreetMap, TencentMap, GoogleMap, HEREMap, ImageMap } from './providers';
import { parseFunction, parseArray, parseData } from '@core/utils';
import { parseFunction, parseArray, parseData, safeExecute } from '@core/utils';
import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@core/schema-utils';
import { forkJoin } from 'rxjs';
import { WidgetContext } from '@app/modules/home/models/widget-component.models';
import { getDefCenterPosition } from './maps-utils';
import { JsonSettingsSchema } from '@shared/models/widget.models';
import { JsonSettingsSchema, WidgetActionDescriptor } from '@shared/models/widget.models';
import { EntityId } from '@shared/models/id/entity-id';
import { AttributeScope } from '@shared/models/telemetry/telemetry.models';
import { AttributeService } from '@core/http/attribute.service';
@ -45,6 +45,7 @@ import { Type } from '@angular/core';
export class MapWidgetController implements MapWidgetInterface {
constructor(public mapProvider: MapProviders, private drawRoutes: boolean, public ctx: WidgetContext, $element: HTMLElement) {
console.log("MapWidgetController -> constructor -> ctx", ctx)
if (this.map) {
this.map.map.remove();
delete this.map;
@ -55,7 +56,11 @@ export class MapWidgetController implements MapWidgetInterface {
$element = ctx.$container[0];
}
this.settings = this.initSettings(ctx.settings);
const descriptors = this.ctx.actionsApi.getActionDescriptors('tooltipAction');
this.settings.tooltipActions = {};
descriptors.forEach(descriptor => {
this.settings.tooltipActions[descriptor.name] = ($event) => this.onTooltipClick(descriptor, $event);
}, this.settings.tooltipActions);
const MapClass = providerSets[this.provider]?.MapClass;
if (!MapClass) {
return;
@ -69,6 +74,7 @@ export class MapWidgetController implements MapWidgetInterface {
schema: JsonSettingsSchema;
data;
settings: UnitedMapSettings;
actions: Map<string, Map<string, (widgetContext: WidgetContext) => void>>;
public static dataKeySettingsSchema(): object {
return {};
@ -86,7 +92,6 @@ export class MapWidgetController implements MapWidgetInterface {
addGroupInfo(schema, 'Map Provider Settings');
addToSchema(schema, commonMapSettingsSchema);
addGroupInfo(schema, 'Common Map Settings');
if (drawRoutes) {
addToSchema(schema, routeMapSettingsSchema);
addGroupInfo(schema, 'Route Map Settings');
@ -118,6 +123,18 @@ export class MapWidgetController implements MapWidgetInterface {
onInit() {
}
private onTooltipClick(descriptor: WidgetActionDescriptor, $event: any) {
if ($event) {
$event.stopPropagation();
}
// safeExecute(parseFunction(descriptor.customFunction, ['$event', 'widgetContext']), [$event, this.ctx])
const entityInfo = this.ctx.actionsApi.getActiveEntityInfo();
const entityId = entityInfo ? entityInfo.entityId : null;
const entityName = entityInfo ? entityInfo.entityName : null;
const entityLabel = entityInfo ? entityInfo.entityLabel : null;
this.ctx.actionsApi.handleWidgetAction($event, descriptor, entityId, entityName, null, entityLabel);
}
setMarkerLocation = (e) => {
const attributeService = this.ctx.$injector.get(AttributeService);
forkJoin(
@ -194,7 +211,7 @@ interface IProvider {
name: string
}
export const providerSets: {[key: string]: IProvider} = {
export const providerSets: { [key: string]: IProvider } = {
'openstreet-map': {
MapClass: OpenStreetMap,
schema: openstreetMapSettingsSchema,

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

@ -18,10 +18,24 @@ import L from 'leaflet';
import _ from 'lodash';
import { MarkerSettings, PolylineSettings, PolygonSettings } from './map-models';
export function createTooltip(target: L.Layer, settings: MarkerSettings | PolylineSettings | PolygonSettings): L.Popup {
export function createTooltip(target: L.Layer,
settings: MarkerSettings | PolylineSettings | PolygonSettings,
content?: string | HTMLElement): L.Popup {
const popup = L.popup();
popup.setContent('');
popup.setContent(content);
console.log(settings);
target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
target.on('popupopen', () => {
let actions = document.getElementsByClassName('tb-custom-action');
Array.from(actions).forEach(
(element: HTMLElement) => {
if (element && settings.tooltipActions[element.id]) {
console.log(settings.tooltipActions[element.id]);
element.addEventListener('click', settings.tooltipActions[element.id])
}
})
})
if (settings.displayTooltipAction === 'hover') {
target.off('click');
target.on('mouseover', function () {
@ -52,4 +66,3 @@ export function getDefCenterPosition(position) {
return position;
return [0, 0];
}

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

@ -43,8 +43,7 @@ export class Marker {
});
if (settings.showTooltip) {
this.tooltip = createTooltip(this.leafletMarker, settings);
this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data));
this.tooltip = createTooltip(this.leafletMarker, settings, parseTemplate(this.settings.tooltipPattern, data));
}
if (onClickListener) {