thingsboard-aplcache
Changes
ui/src/app/widget/lib/google-map.js 28(+27 -1)
ui/src/app/widget/lib/map-widget2.js 105(+76 -29)
ui/src/app/widget/lib/openstreet-map.js 12(+10 -2)
ui/src/app/widget/lib/tencent-map.js 25(+24 -1)
ui/src/app/widget/lib/widget-utils.js 34(+18 -16)
Details
diff --git a/ui/src/app/locale/locale.constant-de_DE.json b/ui/src/app/locale/locale.constant-de_DE.json
index b777b18..fb642f2 100644
--- a/ui/src/app/locale/locale.constant-de_DE.json
+++ b/ui/src/app/locale/locale.constant-de_DE.json
@@ -1559,6 +1559,7 @@
"widget-action": {
"action-cell-button": "Aktionszellenschaltfläche",
"row-click": "Klick auf Zeile",
+ "polygon-click": "Klick auf Polygon",
"marker-click": "Klick auf Marker",
"tooltip-tag-action": "Tooltip-Tag-Aktion"
}
diff --git a/ui/src/app/locale/locale.constant-en_US.json b/ui/src/app/locale/locale.constant-en_US.json
index 4f12ee0..a6bd480 100644
--- a/ui/src/app/locale/locale.constant-en_US.json
+++ b/ui/src/app/locale/locale.constant-en_US.json
@@ -1559,6 +1559,7 @@
"widget-action": {
"action-cell-button": "Action cell button",
"row-click": "On row click",
+ "polygon-click": "On polygon click",
"marker-click": "On marker click",
"tooltip-tag-action": "Tooltip tag action"
}
diff --git a/ui/src/app/locale/locale.constant-es_ES.json b/ui/src/app/locale/locale.constant-es_ES.json
index 8190157..3f97971 100644
--- a/ui/src/app/locale/locale.constant-es_ES.json
+++ b/ui/src/app/locale/locale.constant-es_ES.json
@@ -1559,7 +1559,8 @@
"widget-action": {
"action-cell-button": "Botón de acción de celda",
"row-click": "Clic en la fila",
- "marker-click": "Clic en el marcador",
+ "polygon-click": "Clic en la fila",
+ "marker-click": "Clic en el polígono",
"tooltip-tag-action": "Acción de etiqueta para globo de ayuda"
}
},
diff --git a/ui/src/app/locale/locale.constant-fr_FR.json b/ui/src/app/locale/locale.constant-fr_FR.json
index 5b4edd9..4102c91 100644
--- a/ui/src/app/locale/locale.constant-fr_FR.json
+++ b/ui/src/app/locale/locale.constant-fr_FR.json
@@ -336,6 +336,7 @@
"action-cell-button": "Action cell button",
"marker-click": "On marker click",
"row-click": "On row click",
+ "polygon-click": "On polygon click",
"tooltip-tag-action": "Tooltip tag action"
}
},
diff --git a/ui/src/app/locale/locale.constant-it_IT.json b/ui/src/app/locale/locale.constant-it_IT.json
index 4c73548..1f78af1 100644
--- a/ui/src/app/locale/locale.constant-it_IT.json
+++ b/ui/src/app/locale/locale.constant-it_IT.json
@@ -1425,6 +1425,7 @@
"widget-action": {
"action-cell-button": "Action cell button",
"row-click": "On row click",
+ "polygon-click": "On polygon click",
"marker-click": "On marker click",
"tooltip-tag-action": "Tooltip tag action"
}
diff --git a/ui/src/app/locale/locale.constant-ja_JA.json b/ui/src/app/locale/locale.constant-ja_JA.json
index fea4ab3..6a6a22a 100644
--- a/ui/src/app/locale/locale.constant-ja_JA.json
+++ b/ui/src/app/locale/locale.constant-ja_JA.json
@@ -1442,6 +1442,7 @@
"widget-action": {
"action-cell-button": "アクションセルボタン",
"row-click": "行のクリック",
+ "polygon-click": "ポリゴンクリック",
"marker-click": "マーカークリック",
"tooltip-tag-action": "ツールチップのタグアクション"
}
diff --git a/ui/src/app/locale/locale.constant-ko_KR.json b/ui/src/app/locale/locale.constant-ko_KR.json
index 4ddd9b5..2fa49ec 100644
--- a/ui/src/app/locale/locale.constant-ko_KR.json
+++ b/ui/src/app/locale/locale.constant-ko_KR.json
@@ -1318,6 +1318,7 @@
"widget-action": {
"action-cell-button": "Action cell button",
"row-click": "On row click",
+ "polygon-click": "On polygon click",
"marker-click": "On marker click",
"tooltip-tag-action": "Tooltip tag action"
}
diff --git a/ui/src/app/locale/locale.constant-ru_RU.json b/ui/src/app/locale/locale.constant-ru_RU.json
index c087649..7044d7a 100644
--- a/ui/src/app/locale/locale.constant-ru_RU.json
+++ b/ui/src/app/locale/locale.constant-ru_RU.json
@@ -1558,6 +1558,7 @@
"action-cell-button": "Кнопка действия ячейки",
"row-click": "Действий при щелчке на строку",
"marker-click": "Действия при щелчке на указателе",
+ "polygon-click": "Действия при щелчке на полигон",
"tooltip-tag-action": "Действие при подсказке"
}
},
diff --git a/ui/src/app/locale/locale.constant-tr_TR.json b/ui/src/app/locale/locale.constant-tr_TR.json
index 3f2e37e..098922b 100644
--- a/ui/src/app/locale/locale.constant-tr_TR.json
+++ b/ui/src/app/locale/locale.constant-tr_TR.json
@@ -1524,7 +1524,8 @@
"widget-action": {
"action-cell-button": "Eylem hücre butonu",
"row-click": "Satır tıklama eylemi",
- "marker-click": "İşaretçi tıklama eylemi",
+ "polygon-click": "Satır tıklama eylemi",
+ "marker-click": "Çokgen tıklama eylemi",
"tooltip-tag-action": "İpucu etiket eylemi"
}
},
diff --git a/ui/src/app/locale/locale.constant-zh_CN.json b/ui/src/app/locale/locale.constant-zh_CN.json
index bacddc4..8f4f844 100644
--- a/ui/src/app/locale/locale.constant-zh_CN.json
+++ b/ui/src/app/locale/locale.constant-zh_CN.json
@@ -1429,6 +1429,7 @@
"action-cell-button": "动作单元格按钮",
"row-click": "点击行",
"marker-click": "点击标记",
+ "polygon-click": "单击多边形",
"tooltip-tag-action": "提示标签动作"
}
},
ui/src/app/widget/lib/google-map.js 28(+27 -1)
diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js
index 3f7be4f..6a05713 100644
--- a/ui/src/app/widget/lib/google-map.js
+++ b/ui/src/app/widget/lib/google-map.js
@@ -315,7 +315,7 @@ export default class TbGoogleMap {
}
- createPolygon(latLangs, settings) {
+ createPolygon(latLangs, settings, location, onClickListener, markerArgs) {
let polygon = new google.maps.Polygon({
map: this.map,
paths: latLangs,
@@ -325,6 +325,32 @@ export default class TbGoogleMap {
fillOpacity: settings.polygonOpacity,
strokeWeight: settings.polygonStrokeWeight
});
+
+ //initialize-tooltip
+
+ let popup = new google.maps.InfoWindow({
+ content: ''
+ });
+ if (!this.tooltips) this.tooltips = [];
+ this.tooltips.push({
+ markerArgs: markerArgs,
+ popup: popup,
+ locationSettings: settings,
+ dsIndex: location.dsIndex
+ });
+
+ if (onClickListener) {
+ google.maps.event.addListener(polygon, 'click', function (event) {
+ if (settings.displayTooltip) {
+ if (!polygon.anchor) {
+ polygon.anchor = new google.maps.MVCObject();
+ }
+ polygon.anchor.set("position", event.latLng);
+ popup.open(this.map, polygon.anchor);
+ }
+ onClickListener();
+ });
+ }
return polygon;
}
/* eslint-disable no-undef */
ui/src/app/widget/lib/map-widget2.js 105(+76 -29)
diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js
index fed9cb5..4c6248f 100644
--- a/ui/src/app/widget/lib/map-widget2.js
+++ b/ui/src/app/widget/lib/map-widget2.js
@@ -233,7 +233,6 @@ export default class TbMapWidgetV2 {
}
update() {
-
var tbMap = this;
@@ -381,6 +380,17 @@ export default class TbMapWidgetV2 {
tbMap.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName);
}
}
+ function locationPolygonClick($event, location) {
+ var descriptors = tbMap.ctx.actionsApi.getActionDescriptors('polygonClick');
+ if (descriptors.length) {
+ var datasource = tbMap.subscription.datasources[location.dsIndex];
+ var entityId = {};
+ entityId.id = datasource.entityId;
+ entityId.entityType = datasource.entityType;
+ var entityName = datasource.entityName;
+ tbMap.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName);
+ }
+ }
function updateLocation(location, data, dataMap) {
var locationChanged = false;
@@ -427,21 +437,6 @@ export default class TbMapWidgetV2 {
locationChanged = true;
}
}
-
-
- if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
- let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
- let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
- if (!location.polygon && polygonLatLngs.length > 0) {
- location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings);
- tbMap.polygons.push(location.polygon);
- } else if (polygonLatLngs.length > 0) {
- let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon);
- if (!prevPolygonArr || !arraysEqual(prevPolygonArr, polygonLatLngs)) {
- tbMap.map.setPolygonLatLngs(location.polygon, polygonLatLngs);
- }
- }
- }
}
if (location.marker) {
updateLocationStyle(location, dataMap);
@@ -451,6 +446,25 @@ export default class TbMapWidgetV2 {
return locationChanged;
}
+ function createUpdatePolygon(location, dataMap) {
+ if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
+ let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
+ let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
+ if (!location.polygon && polygonLatLngs.length > 0) {
+ location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) {
+ tbMap.callbacks.onLocationClick(location);
+ locationPolygonClick(event, location);
+ }, [location.dsIndex]);
+ tbMap.polygons.push(location.polygon);
+ } else if (polygonLatLngs.length > 0) {
+ let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon);
+ if (!prevPolygonArr || !arraysEqual(prevPolygonArr, polygonLatLngs)) {
+ tbMap.map.setPolygonLatLngs(location.polygon, polygonLatLngs);
+ }
+ }
+ }
+ }
+
function loadLocations(data, datasources) {
var bounds = tbMap.map.createBounds();
tbMap.locations = [];
@@ -459,7 +473,6 @@ export default class TbMapWidgetV2 {
var currentDatasourceIndex = -1;
var latIndex = -1;
var lngIndex = -1;
-
for (var i = 0; i < data.length; i++) {
var dataKeyData = data[i];
var dataKey = dataKeyData.dataKey;
@@ -480,7 +493,6 @@ export default class TbMapWidgetV2 {
} else if (nameToCheck === tbMap.locationSettings.lngKeyName) {
lngIndex = i;
}
-
if (latIndex > -1 && lngIndex > -1) {
var location = {
latIndex: latIndex,
@@ -499,6 +511,7 @@ export default class TbMapWidgetV2 {
}
tbMap.locations.push(location);
updateLocation(location, data, dataMap);
+
if (location.polyline) {
tbMap.map.extendBounds(bounds, location.polyline);
} else if (location.marker) {
@@ -507,8 +520,28 @@ export default class TbMapWidgetV2 {
latIndex = -1;
lngIndex = -1;
}
-
}
+ data.forEach(function (dataEl, index) {
+ let nameToCheck;
+ if (dataEl.dataKey.locationAttrName) {
+ nameToCheck = dataEl.dataKey.locationAttrName;
+ } else {
+ nameToCheck = dataEl.dataKey.label;
+ }
+ if (nameToCheck === tbMap.locationSettings.polygonKeyName) {
+ let location = {
+ polIndex: index,
+ settings: angular.copy(tbMap.locationSettings)
+ };
+ location.dsIndex = datasources.findIndex(function (ds) {
+ return dataEl.datasource.entityId === ds.entityId;
+ });
+ tbMap.locations.push(location);
+ createUpdatePolygon(location, dataMap);
+ tbMap.map.extendBounds(bounds, location.polygon);
+ }
+ });
+
tbMap.map.fitBounds(bounds);
}
@@ -532,10 +565,13 @@ export default class TbMapWidgetV2 {
for (var p = 0; p < tbMap.locations.length; p++) {
var location = tbMap.locations[p];
locationsChanged |= updateLocation(location, data, dataMap);
+ createUpdatePolygon(location, dataMap);
if (location.polyline) {
tbMap.map.extendBounds(bounds, location.polyline);
} else if (location.marker) {
tbMap.map.extendBoundsWithMarker(bounds, location.marker);
+ } else if (location.polygon) {
+ tbMap.map.extendBounds(bounds, location.polygon);
}
}
if (locationsChanged && tbMap.initBounds) {
@@ -581,23 +617,30 @@ export default class TbMapWidgetV2 {
}
}
}
-
}
resize() {
if (this.map && this.map.inited()) {
- this.map.invalidateSize();
+ let map = this.map;
if (this.locations && this.locations.length > 0) {
- var bounds = this.map.createBounds();
- for (var m = 0; m < this.markers.length; m++) {
- this.map.extendBoundsWithMarker(bounds, this.markers[m]);
+ map.invalidateSize();
+ var bounds = map.createBounds();
+ if (this.markers && this.markers.length>0) {
+ this.markers.forEach(function (marker) {
+ map.extendBoundsWithMarker(bounds, marker);
+ });
}
- if (this.polylines) {
- for (var p = 0; p < this.polylines.length; p++) {
- this.map.extendBounds(bounds, this.polylines[p]);
- }
+ if (this.polylines && this.polylines.length>0) {
+ this.polylines.forEach(function (polyline) {
+ map.extendBounds(bounds, polyline);
+ })
+ }
+ if (this.polygons && this.polygons.length > 0) {
+ this.polygons.forEach(function (polygon) {
+ map.extendBounds(bounds, polygon);
+ })
}
- this.map.fitBounds(bounds);
+ map.fitBounds(bounds);
}
}
}
@@ -634,6 +677,10 @@ export default class TbMapWidgetV2 {
name: 'widget-action.marker-click',
multiple: false
},
+ 'polygonClick': {
+ name: 'widget-action.polygon-click',
+ multiple: false
+ },
'tooltipAction': {
name: 'widget-action.tooltip-tag-action',
multiple: true
ui/src/app/widget/lib/openstreet-map.js 12(+10 -2)
diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js
index 25e454f..b93eab2 100644
--- a/ui/src/app/widget/lib/openstreet-map.js
+++ b/ui/src/app/widget/lib/openstreet-map.js
@@ -190,7 +190,7 @@ export default class TbOpenStreetMap {
this.map.removeLayer(polyline);
}
- createPolygon(latLangs, settings) {
+ createPolygon(latLangs, settings, location, onClickListener, markerArgs) {
let polygon = L.polygon(latLangs, {
fill: true,
fillColor: settings.polygonColor,
@@ -199,6 +199,13 @@ export default class TbOpenStreetMap {
fillOpacity: settings.polygonOpacity,
opacity: settings.polygonStrokeOpacity
}).addTo(this.map);
+
+ if (settings.displayTooltip) {
+ this.createTooltip(polygon, location.dsIndex, settings, markerArgs);
+ }
+ if (onClickListener) {
+ polygon.on('click', onClickListener);
+ }
return polygon;
}
@@ -224,6 +231,7 @@ export default class TbOpenStreetMap {
setPolygonLatLngs(polygon, latLngs) {
polygon.setLatLngs(latLngs);
+ polygon.redraw();
}
fitBounds(bounds) {
@@ -272,7 +280,7 @@ export default class TbOpenStreetMap {
}
extendBounds(bounds, polyline) {
- if (polyline && polyline.getLatLngs()) {
+ if (polyline && polyline.getLatLngs() && polyline.getBounds()) {
bounds.extend(polyline.getBounds());
}
}
ui/src/app/widget/lib/tencent-map.js 25(+24 -1)
diff --git a/ui/src/app/widget/lib/tencent-map.js b/ui/src/app/widget/lib/tencent-map.js
index 17a6121..f2608be 100644
--- a/ui/src/app/widget/lib/tencent-map.js
+++ b/ui/src/app/widget/lib/tencent-map.js
@@ -331,7 +331,7 @@ export default class TbTencentMap {
}
/* eslint-disable no-undef */
- createPolygon(latLangs, settings) {
+ createPolygon(latLangs, settings, location, onClickListener, markerArgs) {
let polygon = new qq.maps.Polygon({
map: this.map,
path: latLangs,
@@ -339,8 +339,31 @@ export default class TbTencentMap {
fillColor: settings.polygonColor,
strokeWeight: settings.polygonStrokeWeight
});
+ //initialize-tooltip
+ let popup = new qq.maps.InfoWindow({
+ content: ''
+ });
+ if (!this.tooltips) this.tooltips = [];
+ this.tooltips.push({
+ markerArgs: markerArgs,
+ popup: popup,
+ locationSettings: settings,
+ dsIndex: location.dsIndex
+ });
+
+ if (onClickListener) {
+ qq.maps.event.addListener(polygon, 'click', function (event) {
+ if (settings.displayTooltip) {
+ popup.setMap(this.map);
+ popup.setPosition(event.latLng);
+ popup.open();
+ }
+ onClickListener();
+ });
+ }
return polygon;
}
+
/* eslint-disable no-undef */
removePolygon (polygon) {
ui/src/app/widget/lib/widget-utils.js 34(+18 -16)
diff --git a/ui/src/app/widget/lib/widget-utils.js b/ui/src/app/widget/lib/widget-utils.js
index 6ddeba5..fa75ab6 100644
--- a/ui/src/app/widget/lib/widget-utils.js
+++ b/ui/src/app/widget/lib/widget-utils.js
@@ -73,22 +73,24 @@ export function processPattern(pattern, datasources, dsIndex) {
export function fillPattern(pattern, replaceInfo, data) {
var text = angular.copy(pattern);
- for (var v = 0; v < replaceInfo.variables.length; v++) {
- var variableInfo = replaceInfo.variables[v];
- var txtVal = '';
- if (variableInfo.dataKeyIndex > -1 && data[variableInfo.dataKeyIndex]) {
- var varData = data[variableInfo.dataKeyIndex].data;
- if (varData.length > 0) {
- var val = varData[varData.length - 1][1];
- if (isNumber(val)) {
- txtVal = padValue(val, variableInfo.valDec, 0);
- } else {
- txtVal = val;
- }
- }
- }
- text = text.split(variableInfo.variable).join(txtVal);
- }
+ if (replaceInfo) {
+ for (var v = 0; v < replaceInfo.variables.length; v++) {
+ var variableInfo = replaceInfo.variables[v];
+ var txtVal = '';
+ if (variableInfo.dataKeyIndex > -1 && data[variableInfo.dataKeyIndex]) {
+ var varData = data[variableInfo.dataKeyIndex].data;
+ if (varData.length > 0) {
+ var val = varData[varData.length - 1][1];
+ if (isNumber(val)) {
+ txtVal = padValue(val, variableInfo.valDec, 0);
+ } else {
+ txtVal = val;
+ }
+ }
+ }
+ text = text.split(variableInfo.variable).join(txtVal);
+ }
+ }
return text;
}