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

provide entity to custom actions

Browse Source
This commit is contained in:
Artem Halushko 2020-05-04 11:51:20 +03:00
parent 3ed29a8467
commit 19b0da39ca
6 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,6 +19,7 @@ import { Observable, Subject, fromEvent, of } from 'rxjs';
import { finalize, share, map } from 'rxjs/operators'; import { finalize, share, map } from 'rxjs/operators';
import base64js from 'base64-js'; import base64js from 'base64-js';
import { Datasource } from '@app/shared/models/widget.models'; import { Datasource } from '@app/shared/models/widget.models';
import { FormattedData } from '@app/modules/home/components/widget/lib/maps/map-models';
export function onParentScrollOrWindowResize(el: Node): Observable<Event> { export function onParentScrollOrWindowResize(el: Node): Observable<Event> {
const scrollSubject = new Subject<Event>(); const scrollSubject = new Subject<Event>();
@ -504,12 +505,12 @@ export function parseArray(input: any[]): any[] {
); );
} }
export function parseData(input: any[]): any[] { export function parseData(input: any[]): FormattedData[] {
return _(input).groupBy(el => el?.datasource?.entityName) return _(input).groupBy(el => el?.datasource?.entityName)
.values().value().map((entityArray, i) => { .values().value().map((entityArray, i) => {
const obj = { const obj = {
entityName: entityArray[0]?.datasource?.entityName, entityName: entityArray[0]?.datasource?.entityName,
$datasource: entityArray[0]?.datasource, $datasource: entityArray[0]?.datasource as Datasource,
dsIndex: i, dsIndex: i,
deviceType: null deviceType: null
}; };
@ -568,7 +569,7 @@ export function parseTemplate(template: string, data: { $datasource?: Datasource
formatted.forEach(value => { formatted.forEach(value => {
const [variable, digits] = value.replace('${', '').replace('}', '').split(':'); const [variable, digits] = value.replace('${', '').replace('}', '').split(':');
data[variable] = padValue(data[variable], +digits); data[variable] = padValue(data[variable], +digits);
if (isNaN(data[variable])) data[value] = ''; if (data[variable] === 'NaN') data[variable] = '';
template = template.replace(value, '${' + variable + '}'); template = template.replace(value, '${' + variable + '}');
}); });
const variables = template.match(/\$\{.*?\}/g); const variables = template.match(/\$\{.*?\}/g);

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

@ -15,6 +15,7 @@
/// ///
import { LatLngTuple, LeafletMouseEvent } from 'leaflet'; import { LatLngTuple, LeafletMouseEvent } from 'leaflet';
import { Datasource } from '@app/shared/models/widget.models';
export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string;
@ -96,11 +97,11 @@ export type MarkerSettings = {
} }
export interface FormattedData { export interface FormattedData {
aliasName: string; $datasource: Datasource;
entityName: string; entityName: string;
$datasource: string;
dsIndex: number; dsIndex: number;
deviceType: string deviceType: string;
[key: string]: any
} }
export type PolygonSettings = { export type PolygonSettings = {
@ -151,6 +152,6 @@ export interface HistorySelectSettings {
buttonColor: string; buttonColor: string;
} }
export type actionsHandler = ($event: Event | LeafletMouseEvent) => void; export type actionsHandler = ($event: Event | LeafletMouseEvent, datasource: Datasource) => void;
export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings; export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolylineSettings;

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

@ -36,7 +36,7 @@ import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } fro
import { of, Subject } from 'rxjs'; import { of, Subject } from 'rxjs';
import { WidgetContext } from '@app/modules/home/models/widget-component.models'; import { WidgetContext } from '@app/modules/home/models/widget-component.models';
import { getDefCenterPosition } from './maps-utils'; import { getDefCenterPosition } from './maps-utils';
import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType } from '@shared/models/widget.models'; import { JsonSettingsSchema, WidgetActionDescriptor, DatasourceType, widgetType, Datasource } from '@shared/models/widget.models';
import { EntityId } from '@shared/models/id/entity-id'; import { EntityId } from '@shared/models/id/entity-id';
import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models'; import { AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
import { AttributeService } from '@core/http/attribute.service'; import { AttributeService } from '@core/http/attribute.service';
@ -142,7 +142,7 @@ export class MapWidgetController implements MapWidgetInterface {
const descriptors = this.ctx.actionsApi.getActionDescriptors(name); const descriptors = this.ctx.actionsApi.getActionDescriptors(name);
const actions = {}; const actions = {};
descriptors.forEach(descriptor => { descriptors.forEach(descriptor => {
actions[descriptor.name] = ($event: Event) => this.onCustomAction(descriptor, $event); actions[descriptor.name] = ($event: Event, datasource: Datasource) => this.onCustomAction(descriptor, $event, datasource);
}, actions); }, actions);
return actions; return actions;
} }
@ -150,15 +150,15 @@ export class MapWidgetController implements MapWidgetInterface {
onInit() { onInit() {
} }
private onCustomAction(descriptor: WidgetActionDescriptor, $event: any) { private onCustomAction(descriptor: WidgetActionDescriptor, $event: any, entityInfo: Datasource) {
if ($event && $event.stopPropagation) { if ($event && $event.stopPropagation) {
$event?.stopPropagation(); $event?.stopPropagation();
} }
// safeExecute(parseFunction(descriptor.customFunction, ['$event', 'widgetContext']), [$event, this.ctx]) const { id, entityName, entityLabel, entityType } = entityInfo;
const entityInfo = this.ctx.actionsApi.getActiveEntityInfo(); const entityId: EntityId = {
const entityId = entityInfo ? entityInfo.entityId : null; entityType,
const entityName = entityInfo ? entityInfo.entityName : null; id
const entityLabel = entityInfo ? entityInfo.entityLabel : null; };
this.ctx.actionsApi.handleWidgetAction($event, descriptor, entityId, entityName, null, entityLabel); this.ctx.actionsApi.handleWidgetAction($event, descriptor, entityId, entityName, null, entityLabel);
} }

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

@ -16,19 +16,22 @@
import L from 'leaflet'; import L from 'leaflet';
import { MarkerSettings, PolygonSettings, PolylineSettings } from './map-models'; import { MarkerSettings, PolygonSettings, PolylineSettings } from './map-models';
import { Datasource } from '@app/shared/models/widget.models';
export function createTooltip(target: L.Layer, export function createTooltip(target: L.Layer,
settings: MarkerSettings | PolylineSettings | PolygonSettings, settings: MarkerSettings | PolylineSettings | PolygonSettings,
content?: string | HTMLElement): L.Popup { datasource: Datasource,
content?: string | HTMLElement
): L.Popup {
const popup = L.popup(); const popup = L.popup();
popup.setContent(content); popup.setContent(content);
target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false });
if (settings.showTooltipAction === 'hover') { if (settings.showTooltipAction === 'hover') {
target.off('click'); target.off('click');
target.on('mouseover', function () { target.on('mouseover', () => {
target.openPopup(); target.openPopup();
}); });
target.on('mouseout', function () { target.on('mouseout', () => {
target.closePopup(); target.closePopup();
}); });
} }
@ -37,7 +40,7 @@ export function createTooltip(target: L.Layer,
Array.from(actions).forEach( Array.from(actions).forEach(
(element: HTMLElement) => { (element: HTMLElement) => {
if (element && settings.tooltipAction[element.id]) { if (element && settings.tooltipAction[element.id]) {
element.addEventListener('click', settings.tooltipAction[element.id]) element.addEventListener('click', ($event) => settings.tooltipAction[element.id]($event, datasource));
} }
}); });
}); });

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

@ -42,7 +42,7 @@ export class Marker {
}); });
if (settings.showTooltip) { if (settings.showTooltip) {
this.tooltip = createTooltip(this.leafletMarker, settings); this.tooltip = createTooltip(this.leafletMarker, settings, data.$datasource);
this.updateMarkerTooltip(data); this.updateMarkerTooltip(data);
} }
@ -50,7 +50,7 @@ export class Marker {
this.leafletMarker.on('click', (event: LeafletMouseEvent) => { this.leafletMarker.on('click', (event: LeafletMouseEvent) => {
for (const action in this.settings.markerClick) { for (const action in this.settings.markerClick) {
if (typeof (this.settings.markerClick[action]) === 'function') { if (typeof (this.settings.markerClick[action]) === 'function') {
this.settings.markerClick[action](event); this.settings.markerClick[action](event, this.data.$datasource);
} }
} }
}); });

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

@ -14,7 +14,7 @@
/// limitations under the License. /// limitations under the License.
/// ///
import L, { LatLngExpression, LatLngTuple } from 'leaflet'; import L, { LatLngExpression, LatLngTuple, LeafletMouseEvent } from 'leaflet';
import { createTooltip } from './maps-utils'; import { createTooltip } from './maps-utils';
import { PolygonSettings, FormattedData } from './map-models'; import { PolygonSettings, FormattedData } from './map-models';
import { DatasourceData } from '@app/shared/models/widget.models'; import { DatasourceData } from '@app/shared/models/widget.models';
@ -27,7 +27,7 @@ export class Polygon {
data; data;
dataSources; dataSources;
constructor(public map, polyData: DatasourceData, dataSources, private settings: PolygonSettings, onClickListener?) { constructor(public map, polyData: DatasourceData, dataSources, private settings: PolygonSettings) {
this.leafletPoly = L.polygon(polyData.data, { this.leafletPoly = L.polygon(polyData.data, {
fill: true, fill: true,
fillColor: settings.polygonColor, fillColor: settings.polygonColor,
@ -39,11 +39,17 @@ export class Polygon {
this.dataSources = dataSources; this.dataSources = dataSources;
this.data = polyData; this.data = polyData;
if (settings.showPolygonTooltip) { if (settings.showPolygonTooltip) {
this.tooltip = createTooltip(this.leafletPoly, settings); this.tooltip = createTooltip(this.leafletPoly, settings, polyData.datasource);
this.updateTooltip(polyData); this.updateTooltip(polyData);
} }
if (onClickListener) { if (settings.polygonClick) {
this.leafletPoly.on('click', onClickListener); this.leafletPoly.on('click', (event: LeafletMouseEvent) => {
for (const action in this.settings.polygonClick) {
if (typeof (this.settings.polygonClick[action]) === 'function') {
this.settings.polygonClick[action](event, polyData.datasource);
}
}
});
} }
} }