tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

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

Updated example delete marker/polygon for map
pull/3314/head
Igor Kulikov 6 years ago
committed by GitHub
parent
2b82223c8f cb64c860ec
commit
bf920c0b2d
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 31 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      application/src/main/data/json/system/widget_bundles/input_widgets.json
  2. 4
      ui-ngx/src/app/core/utils.ts
  3. 42
      ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
  4. 13
      ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.scss
  5. 4
      ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts

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;
}
export function isDefinedAndNotEmptyStr(value: any): boolean {
return typeof value !== 'undefined' && value !== '';
export function isEmptyStr(value: any): boolean {
return value === '';
}
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
} from '@home/components/widget/lib/maps/maps-utils';
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 {
@ -127,10 +127,14 @@ export default abstract class LeafletMap {
const newMarker = L.marker(mousePositionOnMap, { icon }).addTo(this.map);
const datasourcesList = document.createElement('div');
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 => {
const dsItem = document.createElement('p');
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 = () => {
const updatedEnttity = { ...ds, ...customLatLng };
this.saveMarkerLocation(updatedEnttity).subscribe(() => {
@ -141,9 +145,9 @@ export default abstract class LeafletMap {
}
datasourcesList.append(dsItem);
});
datasourcesList.append(document.createElement('br'));
const deleteBtn = document.createElement('a');
deleteBtn.appendChild(document.createTextNode('Delete position'));
deleteBtn.setAttribute('color', 'red');
deleteBtn.appendChild(document.createTextNode('Discard changes'));
deleteBtn.onclick = () => {
this.map.removeLayer(newMarker);
}
@ -196,10 +200,14 @@ export default abstract class LeafletMap {
const newPolygon = L.polygon(mousePositionOnMap).addTo(this.map);
const datasourcesList = document.createElement('div');
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 => {
const dsItem = document.createElement('p');
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 = () => {
const updatedEnttity = { ...ds, ...customLatLng };
this.savePolygonLocation(updatedEnttity).subscribe(() => {
@ -209,9 +217,9 @@ export default abstract class LeafletMap {
}
datasourcesList.append(dsItem);
});
datasourcesList.append(document.createElement('br'));
const deleteBtn = document.createElement('a');
deleteBtn.appendChild(document.createTextNode('Delete position'));
deleteBtn.setAttribute('color', 'red');
deleteBtn.appendChild(document.createTextNode('Discard changes'));
deleteBtn.onclick = () => {
this.map.removeLayer(newPolygon);
}
@ -350,13 +358,13 @@ export default abstract class LeafletMap {
}
convertPosition(expression: object): L.LatLng {
if (!expression) return null;
const lat = expression[this.options.latKeyName];
const lng = expression[this.options.lngKeyName];
if (!isDefinedAndNotEmptyStr(lat) || isNaN(lat) || !isDefinedAndNotEmptyStr(lng) || isNaN(lng)) {
return null;
}
return L.latLng(lat, lng) as L.LatLng;
if (!expression) return null;
const lat = expression[this.options.latKeyName];
const lng = expression[this.options.lngKeyName];
if (!isDefinedAndNotNull(lat) || isString(lat) || isNaN(lat) || !isDefinedAndNotNull(lng) || isString(lng) || isNaN(lng)) {
return null;
}
return L.latLng(lat, lng) as L.LatLng;
}
convertPositionPolygon(expression: (LatLngTuple | LatLngTuple[] | LatLngTuple[][])[]) {
@ -449,7 +457,7 @@ export default abstract class LeafletMap {
// Markers
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 createdMarkers: Marker[] = [];
const updatedMarkers: Marker[] = [];
@ -644,8 +652,8 @@ export default abstract class LeafletMap {
const keys: string[] = [];
this.polygonsData = deepClone(polyData);
polyData.forEach((data: FormattedData) => {
if (data && isDefinedAndNotEmptyStr(data[this.options.polygonKeyName])) {
if (typeof (data[this.options.polygonKeyName]) === 'string') {
if (data && isDefinedAndNotNull(data[this.options.polygonKeyName]) && !isEmptyStr(data[this.options.polygonKeyName])) {
if (isString((data[this.options.polygonKeyName]))) {
data[this.options.polygonKeyName] = JSON.parse(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;
}
//.leaflet-div-icon,
//.tb-marker-label,
//.tb-marker-label:before {
// border: none;
// background: none;
// box-shadow: none;
//}
.tb-marker-label,
.tb-marker-label:before {
border: none;
background: none;
box-shadow: none;
}
.leaflet-container{
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 { DataKeyType } from '@shared/models/telemetry/telemetry.models';
import { WidgetSubscriptionOptions } from '@core/api/widget-api.models';
import { isDefinedAndNotEmptyStr } from '@core/utils';
import { isDefinedAndNotNull, isEmptyStr } from '@core/utils';
const maxZoom = 4;// ?
@ -213,7 +213,7 @@ export class ImageMap extends LeafletMap {
convertPosition(expression): L.LatLng {
const xPos = expression[this.options.xPosKeyName];
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;
}
Object.assign(expression, this.posFunction(xPos, yPos));

Write Preview
Loading…
Cancel
Save