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

Merge pull request #3293 from vvlladd28/bugs/delete-update/marker-polygon

Browse Source 
Updated example delete marker/polygon for map
This commit is contained in:
Igor Kulikov 2020-08-12 14:04:02 +03:00 committed by GitHub
commit bf920c0b2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
application/src/main/data/json/system/widget_bundles/input_widgets.json
View File

File diff suppressed because one or more lines are too long

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

@ -89,8 +89,8 @@ export function isDefinedAndNotNull(value: any): boolean {
return typeof value !== 'undefined' && value !== null; return typeof value !== 'undefined' && value !== null;
} }
export function isDefinedAndNotEmptyStr(value: any): boolean { export function isEmptyStr(value: any): boolean {
return typeof value !== 'undefined' && value !== ''; return value === '';
} }
export function isFunction(value: any): boolean { export function isFunction(value: any): boolean {

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

@ -49,7 +49,7 @@ import {
safeExecute safeExecute
} from '@home/components/widget/lib/maps/maps-utils'; } from '@home/components/widget/lib/maps/maps-utils';
import { WidgetContext } from '@home/models/widget-component.models'; import { WidgetContext } from '@home/models/widget-component.models';
import { deepClone, isDefinedAndNotEmptyStr } from '@core/utils'; import { deepClone, isDefinedAndNotNull, isEmptyStr, isString } from '@core/utils';
export default abstract class LeafletMap { export default abstract class LeafletMap {
@ -127,10 +127,14 @@ export default abstract class LeafletMap {
const newMarker = L.marker(mousePositionOnMap, { icon }).addTo(this.map); const newMarker = L.marker(mousePositionOnMap, { icon }).addTo(this.map);
const datasourcesList = document.createElement('div'); const datasourcesList = document.createElement('div');
const customLatLng = this.convertToCustomFormat(mousePositionOnMap); const customLatLng = this.convertToCustomFormat(mousePositionOnMap);
const header = document.createElement('p');
header.appendChild(document.createTextNode('Select entity:'));
header.setAttribute('style', 'font-size: 14px; margin: 8px 0');
datasourcesList.append(header);
this.datasources.forEach(ds => { this.datasources.forEach(ds => {
const dsItem = document.createElement('p'); const dsItem = document.createElement('p');
dsItem.appendChild(document.createTextNode(ds.entityName)); dsItem.appendChild(document.createTextNode(ds.entityName));
dsItem.setAttribute('style', 'font-size: 14px'); dsItem.setAttribute('style', 'font-size: 14px; margin: 8px 0; cursor: pointer');
dsItem.onclick = () => { dsItem.onclick = () => {
const updatedEnttity = { ...ds, ...customLatLng }; const updatedEnttity = { ...ds, ...customLatLng };
this.saveMarkerLocation(updatedEnttity).subscribe(() => { this.saveMarkerLocation(updatedEnttity).subscribe(() => {
@ -141,9 +145,9 @@ export default abstract class LeafletMap {
} }
datasourcesList.append(dsItem); datasourcesList.append(dsItem);
}); });
datasourcesList.append(document.createElement('br'));
const deleteBtn = document.createElement('a'); const deleteBtn = document.createElement('a');
deleteBtn.appendChild(document.createTextNode('Delete position')); deleteBtn.appendChild(document.createTextNode('Discard changes'));
deleteBtn.setAttribute('color', 'red');
deleteBtn.onclick = () => { deleteBtn.onclick = () => {
this.map.removeLayer(newMarker); this.map.removeLayer(newMarker);
} }
@ -196,10 +200,14 @@ export default abstract class LeafletMap {
const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map); const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map);
const datasourcesList = document.createElement('div'); const datasourcesList = document.createElement('div');
const customLatLng = {[this.options.polygonKeyName]: this.convertToPolygonFormat(mousePositionOnMap)}; const customLatLng = {[this.options.polygonKeyName]: this.convertToPolygonFormat(mousePositionOnMap)};
const header = document.createElement('p');
header.appendChild(document.createTextNode('Select entity:'));
header.setAttribute('style', 'font-size: 14px; margin: 8px 0');
datasourcesList.append(header);
this.datasources.forEach(ds => { this.datasources.forEach(ds => {
const dsItem = document.createElement('p'); const dsItem = document.createElement('p');
dsItem.appendChild(document.createTextNode(ds.entityName)); dsItem.appendChild(document.createTextNode(ds.entityName));
dsItem.setAttribute('style', 'font-size: 14px'); dsItem.setAttribute('style', 'font-size: 14px; margin: 8px 0; cursor: pointer');
dsItem.onclick = () => { dsItem.onclick = () => {
const updatedEnttity = { ...ds, ...customLatLng }; const updatedEnttity = { ...ds, ...customLatLng };
this.savePolygonLocation(updatedEnttity).subscribe(() => { this.savePolygonLocation(updatedEnttity).subscribe(() => {
@ -209,9 +217,9 @@ export default abstract class LeafletMap {
} }
datasourcesList.append(dsItem); datasourcesList.append(dsItem);
}); });
datasourcesList.append(document.createElement('br'));
const deleteBtn = document.createElement('a'); const deleteBtn = document.createElement('a');
deleteBtn.appendChild(document.createTextNode('Delete position')); deleteBtn.appendChild(document.createTextNode('Discard changes'));
deleteBtn.setAttribute('color', 'red');
deleteBtn.onclick = () => { deleteBtn.onclick = () => {
this.map.removeLayer(newPolygon); this.map.removeLayer(newPolygon);
} }
@ -350,13 +358,13 @@ export default abstract class LeafletMap {
} }
convertPosition(expression: object): L.LatLng { convertPosition(expression: object): L.LatLng {
if (!expression) return null; if (!expression) return null;
const lat = expression[this.options.latKeyName]; const lat = expression[this.options.latKeyName];
const lng = expression[this.options.lngKeyName]; const lng = expression[this.options.lngKeyName];
if (!isDefinedAndNotEmptyStr(lat) || isNaN(lat) || !isDefinedAndNotEmptyStr(lng) || isNaN(lng)) { if (!isDefinedAndNotNull(lat) || isString(lat) || isNaN(lat) || !isDefinedAndNotNull(lng) || isString(lng) || isNaN(lng)) {
return null; return null;
} }
return L.latLng(lat, lng) as L.LatLng; return L.latLng(lat, lng) as L.LatLng;
} }
convertPositionPolygon(expression: (LatLngTuple | LatLngTuple[] | LatLngTuple[][])[]) { convertPositionPolygon(expression: (LatLngTuple | LatLngTuple[] | LatLngTuple[][])[]) {
@ -449,7 +457,7 @@ export default abstract class LeafletMap {
// Markers // Markers
updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) { updateMarkers(markersData: FormattedData[], updateBounds = true, callback?) {
const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata)); const rawMarkers = markersData.filter(mdata => !!this.convertPosition(mdata));
const toDelete = new Set(Array.from(this.markers.keys())); const toDelete = new Set(Array.from(this.markers.keys()));
const createdMarkers: Marker[] = []; const createdMarkers: Marker[] = [];
const updatedMarkers: Marker[] = []; const updatedMarkers: Marker[] = [];
@ -644,8 +652,8 @@ export default abstract class LeafletMap {
const keys: string[] = []; const keys: string[] = [];
this.polygonsData = deepClone(polyData); this.polygonsData = deepClone(polyData);
polyData.forEach((data: FormattedData) => { polyData.forEach((data: FormattedData) => {
if (data && isDefinedAndNotEmptyStr(data[this.options.polygonKeyName])) { if (data && isDefinedAndNotNull(data[this.options.polygonKeyName]) && !isEmptyStr(data[this.options.polygonKeyName])) {
if (typeof (data[this.options.polygonKeyName]) === 'string') { if (isString((data[this.options.polygonKeyName]))) {
data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]); data[this.options.polygonKeyName] = JSON.parse(data[this.options.polygonKeyName]);
} }
data[this.options.polygonKeyName] = this.convertPositionPolygon(data[this.options.polygonKeyName]); data[this.options.polygonKeyName] = this.convertPositionPolygon(data[this.options.polygonKeyName]);

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

@ -22,13 +22,12 @@
background-repeat: no-repeat; background-repeat: no-repeat;
} }
//.leaflet-div-icon, .tb-marker-label,
//.tb-marker-label, .tb-marker-label:before {
//.tb-marker-label:before { border: none;
// border: none; background: none;
// background: none; box-shadow: none;
// box-shadow: none; }
//}
.leaflet-container{ .leaflet-container{
background-color: white; background-color: white;

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

@ -24,7 +24,7 @@ import { WidgetContext } from '@home/models/widget-component.models';
import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models'; import { DataSet, DatasourceType, widgetType } from '@shared/models/widget.models';
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { WidgetSubscriptionOptions } from '@core/api/widget-api.models'; import { WidgetSubscriptionOptions } from '@core/api/widget-api.models';
import { isDefinedAndNotEmptyStr } from '@core/utils'; import { isDefinedAndNotNull, isEmptyStr } from '@core/utils';
const maxZoom = 4;// ? const maxZoom = 4;// ?
@ -213,7 +213,7 @@ export class ImageMap extends LeafletMap {
convertPosition(expression): L.LatLng { convertPosition(expression): L.LatLng {
const xPos = expression[this.options.xPosKeyName]; const xPos = expression[this.options.xPosKeyName];
const yPos = expression[this.options.yPosKeyName]; const yPos = expression[this.options.yPosKeyName];
if (!isDefinedAndNotEmptyStr(xPos) || isNaN(xPos) || !isDefinedAndNotEmptyStr(yPos) || isNaN(yPos)) { if (!isDefinedAndNotNull(xPos) || isEmptyStr(xPos) || isNaN(xPos) || !isDefinedAndNotNull(yPos) || isEmptyStr(yPos) || isNaN(yPos)) {
return null; return null;
} }
Object.assign(expression, this.posFunction(xPos, yPos)); Object.assign(expression, this.posFunction(xPos, yPos));