diff --git a/ui-ngx/package-lock.json b/ui-ngx/package-lock.json index 86dd99528b..b5810613f3 100644 --- a/ui-ngx/package-lock.json +++ b/ui-ngx/package-lock.json @@ -1816,8 +1816,7 @@ "@types/geojson": { "version": "7946.0.7", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", - "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==", - "dev": true + "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==" }, "@types/glob": { "version": "7.1.1", @@ -1881,11 +1880,18 @@ "version": "1.5.12", "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.5.12.tgz", "integrity": "sha512-61HRMIng+bWvnnAIqUWLBlrd/TQZc4gU+gN1JL4K47EDtwIrcMEhWgi7PdcpbG1YmpH4F0EfOimkvV82gJIl9w==", - "dev": true, "requires": { "@types/geojson": "*" } }, + "@types/leaflet-markercluster": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@types/leaflet-markercluster/-/leaflet-markercluster-1.0.3.tgz", + "integrity": "sha1-ZBUb5FP2SQ6HUVAEgt65YQZOeCw=", + "requires": { + "@types/leaflet": "*" + } + }, "@types/leaflet-polylinedecorator": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/@types/leaflet-polylinedecorator/-/leaflet-polylinedecorator-1.6.0.tgz", @@ -7670,9 +7676,9 @@ "integrity": "sha1-RGf0n5jRv9VpWb2cZwUgPdJgEnc=" }, "leaflet.gridlayer.googlemutant": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.9.0.tgz", - "integrity": "sha512-hkLEHLcdcCaq1OKgUla5ar6fCaUK6yBYIY9HyAclPcMwhnpJTnLmYYPbVJbq3Niz0YiO75gls4A6D6jkBJXpuw==" + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/leaflet.gridlayer.googlemutant/-/leaflet.gridlayer.googlemutant-0.8.0.tgz", + "integrity": "sha512-Ain+jgDKRhlM6qNDDj2QFJa9vXUqV096N0PmpHO3DoNLS4I7EynTQCJXN+9qY4C51ZpV4Q4CI+apNv5XiP5aUA==" }, "leaflet.markercluster": { "version": "1.4.1", diff --git a/ui-ngx/package.json b/ui-ngx/package.json index 1eb53444fa..8a0d155524 100644 --- a/ui-ngx/package.json +++ b/ui-ngx/package.json @@ -39,6 +39,7 @@ "@ngx-share/core": "^7.1.4", "@ngx-translate/core": "^12.1.2", "@ngx-translate/http-loader": "^4.0.0", + "@types/leaflet-markercluster": "^1.0.3", "ace-builds": "^1.4.11", "angular-gridster2": "^9.1.0", "angular2-hotkeys": "^2.2.0", @@ -62,7 +63,7 @@ "leaflet-geometryutil": "^0.9.3", "leaflet-polylinedecorator": "^1.6.0", "leaflet-providers": "^1.9.1", - "leaflet.gridlayer.googlemutant": "^0.9.0", + "leaflet.gridlayer.googlemutant": "0.8.0", "leaflet.markercluster": "^1.4.1", "material-design-icons": "^3.0.1", "messageformat": "^2.3.0", diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index 1f57ea2910..d657a39a57 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -525,7 +525,6 @@ export function parseFunction(source: any, params: string[] = ['def']): Function export function parseTemplate(template: string, data: object, translateFn?: (key: string) => string) { let res = ''; - let variables = ''; try { if (template.match(//g, 'a>').replace(/name=(\'|")(.*?)(\'|")/g, `class='tb-custom-action' id='$2'`); @@ -536,27 +535,26 @@ export function parseTemplate(template: string, data: object, translateFn?: (key template = template.replace(match, translateFn(match.match(translateRegexp)[1])); }); } - /* - const expressions = template.match(/\{(.*?)\}/g); - if (expressions) { - const clearMatches = template.match(/\$\{([^}]*?)\}/g); - for (const key in data) { - if (!key.includes('|')) - variables += `var ${key} = '${clearMatches[key] ? padValue(data[key], +clearMatches[key]) : data[key]}';`; - } - template = template.replace(/\:\d+\}/g, '}'); - const interpolator = new Interpolator({delimeter: ['${', '}']}); - interpolator.parse(template, data); - res = safeExecute(parseFunction(variables + ' return' + '`' + template + '`')); + const formatted = template.match(/\$\{([^}]*)\:\d*\}/g); + if (formatted) + formatted.forEach(value => { + const [variable, digits] = value.replace('${', '').replace('}', '').split(':'); + data[variable] = padValue(data[variable], +digits) + template = template.replace(value, '${' + variable + '}'); + }); + const variables = template.match(/\$\{.*?\}/g); + if (variables) { + variables.forEach(variable => { + variable = variable.replace('${', '').replace('}', ''); + if (!data[variable]) + data[variable] = ''; + }) } - else res = template;*/ - const compiled = _.template(template, { - interpolate: /${([\s\S]+?)}/g - }); - res = compiled(data) + const compiled = _.template(template); + res = compiled(data); } catch (ex) { - console.log(ex, variables, template) + console.log(ex, template) } return res; } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts index da870813f3..c940fc7a05 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts @@ -14,12 +14,10 @@ /// limitations under the License. /// -import L, { LatLngTuple, LatLngBounds, Point } from 'leaflet'; +import L, { LatLngTuple, LatLngBounds, Point, MarkerClusterGroupOptions, markerClusterGroup} from 'leaflet'; import 'leaflet-providers'; -import 'leaflet.markercluster/dist/MarkerCluster.css'; -import 'leaflet.markercluster/dist/MarkerCluster.Default.css'; -import LM from 'leaflet.markercluster/dist/leaflet.markercluster'; +import 'leaflet.markercluster/dist/leaflet.markercluster'; import { MapSettings, MarkerSettings, FormattedData, UnitedMapSettings, PolygonSettings, PolylineSettings } from './map-models'; import { Marker } from './markers'; @@ -43,7 +41,7 @@ export default abstract class LeafletMap { bounds: L.LatLngBounds; newMarker: L.Marker; datasources: FormattedData[]; - markersCluster: LM.markerClusterGroup; + markersCluster; constructor(public $container: HTMLElement, options: UnitedMapSettings) { this.options = options; @@ -67,7 +65,7 @@ export default abstract class LeafletMap { setTimeout(options.initCallback, 0); } if (useClusterMarkers) { - const clusteringSettings: LM.MarkerClusterGroupOptions = { + const clusteringSettings: MarkerClusterGroupOptions = { zoomToBoundsOnClick: zoomOnClick, showCoverageOnHover, removeOutsideVisibleBounds, @@ -80,7 +78,7 @@ export default abstract class LeafletMap { if (maxZoom && maxZoom >= 0 && maxZoom < 19) { clusteringSettings.disableClusteringAtZoom = Math.floor(maxZoom); } - this.markersCluster = LM.markerClusterGroup(clusteringSettings); + this.markersCluster = markerClusterGroup(clusteringSettings); this.ready$.subscribe(map => map.addLayer(this.markersCluster)); } } @@ -208,7 +206,7 @@ export default abstract class LeafletMap { }); this.map.fitBounds(bounds, { padding: padding || [50, 50], animate: false }); } - this.bounds = this.bounds.extend(bounds); + this.bounds = bounds; } } @@ -259,7 +257,9 @@ export default abstract class LeafletMap { private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings) { this.ready$.subscribe(() => { const newMarker = new Marker(this.convertPosition(data), settings, data, dataSources, this.dragMarker); - this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()), settings.draggableMarker && this.markers.size > 2); + console.log(this.bounds); + + this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()), settings.draggableMarker && this.markers.size < 2); this.markers.set(key, newMarker); if (this.options.useClusterMarkers) { this.markersCluster.addLayer(newMarker.leafletMarker); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts index 41d683fe63..967960bf11 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts @@ -48,6 +48,7 @@ import { UtilsService } from '@core/services/utils.service'; 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; @@ -83,6 +84,7 @@ export class MapWidgetController implements MapWidgetInterface { } public static getProvidersSchema(mapProvider: MapProviders) { + console.log("MapWidgetController -> getProvidersSchema -> mapProvider", mapProvider) mapProviderSchema.schema.properties.provider.default = mapProvider; return mergeSchemes([mapProviderSchema, ...Object.keys(providerSets)?.map( @@ -94,8 +96,10 @@ export class MapWidgetController implements MapWidgetInterface { addToSchema(schema, this.getProvidersSchema(mapProvider)); if (mapProvider !== 'image-map') { addGroupInfo(schema, 'Map Provider Settings'); - addToSchema(schema, mergeSchemes([commonMapSettingsSchema, addCondition(mapPolygonSchema, 'model.showPolygon === true')])); + addToSchema(schema, commonMapSettingsSchema); addGroupInfo(schema, 'Common Map Settings'); + addToSchema(schema, addCondition(mapPolygonSchema, 'model.showPolygon === true')); + addGroupInfo(schema, 'Polygon Settings'); if (drawRoutes) { addToSchema(schema, routeMapSettingsSchema); addGroupInfo(schema, 'Route Map Settings'); @@ -127,8 +131,10 @@ export class MapWidgetController implements MapWidgetInterface { } translate = (key: string, defaultTranslation?: string): string => { - return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key) - || this.ctx.$injector.get(TranslateService).instant(key)); + if (key) + return (this.ctx.$injector.get(UtilsService).customTranslation(key, defaultTranslation || key) + || this.ctx.$injector.get(TranslateService).instant(key)); + else return ''; } getDescriptors(name: string): { [name: string]: ($event: Event) => void } { @@ -156,24 +162,25 @@ export class MapWidgetController implements MapWidgetInterface { } setMarkerLocation = (e) => { + console.log("setMarkerLocation -> e", e) const attributeService = this.ctx.$injector.get(AttributeService); - forkJoin( - this.data.filter(data => !!e[data.dataKey.name]) - .map(data => { - const entityId: EntityId = { - entityType: data.datasource.entityType, - id: data.datasource.entityId - }; - return attributeService.saveEntityAttributes( - entityId, - AttributeScope.SHARED_SCOPE, - [{ - key: data.dataKey.name, - value: e[data.dataKey.name] - }] - ); - })).subscribe(res => { - }); + + const entityId: EntityId = { + entityType: e.$datasource.entityType, + id: e.$datasource.entityId + }; + const keys = e.$datasource.dataKeys.map(key => { + return { + key: key.name, + value: e[key.name] + } + }) + return attributeService.saveEntityAttributes( + entityId, + AttributeScope.SHARED_SCOPE, + keys + ).subscribe(res => { + }); } initSettings(settings: UnitedMapSettings): UnitedMapSettings { @@ -214,8 +221,7 @@ export class MapWidgetController implements MapWidgetInterface { if (this.settings.draggableMarker) { this.map.setDataSources(parseData(this.data)); } - else - this.map.updateMarkers(parseData(this.data)); + this.map.updateMarkers(parseData(this.data)); } resize() { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts index 4ac437830c..da12edac03 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/maps-utils.ts @@ -17,7 +17,6 @@ import L from 'leaflet'; import _ from 'lodash'; import { MarkerSettings, PolylineSettings, PolygonSettings } from './map-models'; -import { parseWithTranslation } from '@app/core/utils'; export function createTooltip(target: L.Layer, settings: MarkerSettings | PolylineSettings | PolygonSettings, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts index 64e3a39543..e363466f75 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/schemes.ts @@ -335,12 +335,7 @@ export const commonMapSettingsSchema = colorFunction: { title: 'Color function: f(data, dsData, dsIndex)', type: 'string' - }, - showPolygon: { - title: 'Show polygon', - type: 'boolean', - default: false - }, + }, markerImage: { title: 'Custom marker image', type: 'string' @@ -439,8 +434,7 @@ export const commonMapSettingsSchema = type: 'image' } ] - }, - 'showPolygon', + } ] }; @@ -450,6 +444,11 @@ export const mapPolygonSchema = title: 'Map Polygon Configuration', type: 'object', properties: { + showPolygon: { + title: 'Show polygon', + type: 'boolean', + default: false + }, polygonKeyName: { title: 'Polygon key name', type: 'string', @@ -491,6 +490,7 @@ export const mapPolygonSchema = required: [] }, form: [ + 'showPolygon', 'polygonKeyName', { key: 'polygonColor', diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html index 2b070052a5..b973284b53 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.html @@ -17,7 +17,7 @@ -->
- {{label }} + {{label}}
diff --git a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts index 5d2f8bfa2e..618cd651d4 100644 --- a/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts @@ -100,8 +100,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { timeUpdated(time: number) { const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]); this.activeTrip = currentPosition[0]; - this.minTime = moment(this.historicalData[0][this.historicalData.length - 1]?.time).format('YYYY-MM-DD HH:mm:ss') - this.maxTime = moment(this.historicalData[0][0]?.time).format('YYYY-MM-DD HH:mm:ss') + this.minTime = moment(this.intervals[this.intervals.length - 1]).format('YYYY-MM-DD HH:mm:ss') + this.maxTime = moment(this.intervals[0]).format('YYYY-MM-DD HH:mm:ss') this.calcLabel(); this.calcTooltip(); if (this.mapWidget) { diff --git a/ui-ngx/src/tsconfig.app.json b/ui-ngx/src/tsconfig.app.json index 379870e6c3..b4c56f2b40 100644 --- a/ui-ngx/src/tsconfig.app.json +++ b/ui-ngx/src/tsconfig.app.json @@ -2,7 +2,11 @@ "extends": "../tsconfig.json", "compilerOptions": { "outDir": "../out-tsc/app", - "types": ["node", "jquery", "flot", "tooltipster", "tinycolor2", "js-beautify", "react", "react-dom", "jstree", "raphael", "canvas-gauges"] + "typeRoots": [ + "node_modules/@types" + ], + "types": ["node", "jquery", "flot", "tooltipster", "tinycolor2", "js-beautify", + "react", "react-dom", "jstree", "raphael", "canvas-gauges", "leaflet", "leaflet-markercluster"] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true