From 97e99dc338b2b6088af753a1319e0eaa34185a7a Mon Sep 17 00:00:00 2001 From: Adsumus Date: Thu, 19 Mar 2020 21:07:38 +0200 Subject: [PATCH] add typing --- .../components/widget/lib/maps/leaflet-map.ts | 68 +++++----- .../components/widget/lib/maps/map-models.ts | 121 +++++++++++++----- .../components/widget/lib/maps/map-widget2.ts | 4 +- .../components/widget/lib/maps/maps-utils.ts | 7 +- .../components/widget/lib/maps/markers.ts | 23 ++-- .../components/widget/lib/maps/polygon.ts | 19 +-- .../components/widget/lib/maps/polyline.ts | 61 +++++---- .../widget/lib/maps/providers/google-map.ts | 4 +- .../widget/lib/maps/providers/here-map.ts | 5 +- .../widget/lib/maps/providers/image-map.ts | 4 +- .../lib/maps/providers/openstreet-map.ts | 4 +- .../widget/lib/maps/providers/tencent-map.ts | 4 +- .../trip-animation.component.ts | 7 +- .../history-selector.component.ts | 15 ++- 14 files changed, 209 insertions(+), 137 deletions(-) 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 9ce53d3013..3178c78b96 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 @@ -21,7 +21,7 @@ import 'leaflet.markercluster/dist/MarkerCluster.css' import 'leaflet.markercluster/dist/MarkerCluster.Default.css' import 'leaflet.markercluster/dist/leaflet.markercluster' -import { MapOptions, MarkerSettings } from './map-models'; +import { MapSettings, MarkerSettings, FormattedData } from './map-models'; import { Marker } from './markers'; import { Observable, of, BehaviorSubject, Subject } from 'rxjs'; import { filter } from 'rxjs/operators'; @@ -38,15 +38,15 @@ export default abstract class LeafletMap { map: L.Map; map$: BehaviorSubject = new BehaviorSubject(null); ready$: Observable = this.map$.pipe(filter(map => !!map)); - options: MapOptions; + options: MapSettings & MarkerSettings; isMarketCluster: boolean; bounds: L.LatLngBounds; - constructor($container: HTMLElement, options: MapOptions) { + constructor($container: HTMLElement, options: MapSettings & MarkerSettings) { this.options = options; } - public initSettings(options: MapOptions) { + public initSettings(options: MapSettings) { const { initCallback, defaultZoomLevel, dontFitMapBounds, @@ -56,7 +56,7 @@ export default abstract class LeafletMap { credentials, defaultCenterPosition, draggebleMarker, - markerClusteringSetting }: MapOptions = options; + markerClusteringSetting }: MapSettings = options; if (disableScrollZooming) { this.map.scrollWheelZoom.disable(); } @@ -86,16 +86,12 @@ export default abstract class LeafletMap { } } as any); - L.control.addMarker = function (opts) { + L.control.addMarker = (opts) => { return new L.Control.AddMarker(opts); } L.control.addMarker({ position: 'topright' }).addTo(this.map); } - /*inited() {/// !!!! - return !!this.map; - }*/ - public setMap(map: L.Map) { this.map = map; if (this.options.useDefaultCenterPosition) { @@ -117,10 +113,6 @@ export default abstract class LeafletMap { } - getContainer() { - return this.map; - } - createLatLng(lat: number, lng: number): L.LatLng { return L.latLng(lat, lng); } @@ -147,8 +139,13 @@ export default abstract class LeafletMap { return this.map.getCenter(); } - convertPosition(expression: any): L.LatLng { - return L.latLng(expression[this.options.latKeyName], expression[this.options.lngKeyName]) as L.LatLng; + convertPosition(expression: object): L.LatLng { + const lat = expression[this.options.latKeyName]; + const lng = expression[this.options.lngKeyName]; + if (isNaN(lat) || isNaN(lng)) + return null; + else + return L.latLng(lat, lng) as L.LatLng; } convertToCustomFormat(position: L.LatLng): object { @@ -161,24 +158,26 @@ export default abstract class LeafletMap { // Markers updateMarkers(markersData) { markersData.forEach(data => { - if (data.rotationAngle) { - this.options.icon = L.divIcon({ - html: `
` - }) - } - else { - this.options.icon = null; - } - if (this.markers.get(data.aliasName)) { - this.updateMarker(data.aliasName, data, markersData, this.options as MarkerSettings) - } - else { - this.createMarker(data.aliasName, data, markersData, this.options as MarkerSettings); + if (this.convertPosition(data)) { + if (data.rotationAngle) { + this.options.icon = L.divIcon({ + html: `
` + }) + } + else { + this.options.icon = null; + } + if (this.markers.get(data.aliasName)) { + this.updateMarker(data.aliasName, data, markersData, this.options) + } + else { + this.createMarker(data.aliasName, data, markersData, this.options as MarkerSettings); + } } }); } - private createMarker(key, data, dataSources, settings: MarkerSettings) { + private createMarker(key, data: FormattedData, dataSources, settings: MarkerSettings) { this.ready$.subscribe(() => { const newMarker = new Marker(this.map, this.convertPosition(data), settings, data, dataSources); this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng())); @@ -219,10 +218,11 @@ export default abstract class LeafletMap { }) } - createPolyline(data, dataSources, settings) { + createPolyline(data: any[], dataSources, settings) { if (data.length) this.ready$.subscribe(() => { - this.poly = new Polyline(this.map, data.map(data => this.convertPosition(data)), data, dataSources, settings); + this.poly = new Polyline(this.map, + data.map(el => this.convertPosition(el)).filter(el => !!el), data, dataSources, settings); const bounds = this.bounds.extend(this.poly.leafletPoly.getBounds()); if (bounds.isValid()) { this.map.fitBounds(bounds); @@ -237,7 +237,7 @@ export default abstract class LeafletMap { }); } - // polygon + // Polygon updatePolygons(polyData: Array>) { polyData.forEach((data: any) => { @@ -268,7 +268,7 @@ export default abstract class LeafletMap { updatePolygon(data, dataSources, settings) { this.ready$.subscribe(() => { - // this.polygon.updatePolygon(settings, data, dataSources); + // this.polygon.updatePolygon(settings, data, dataSources); }); } } \ No newline at end of file diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts index e16cc64a0d..9f9a637122 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts @@ -1,40 +1,43 @@ /// /// Copyright © 2016-2020 The Thingsboard Authors /// -/// Licensed under the Apache License, Version 2.0 (the "License"); +/// Licensed under the Apache License; Version 2.0 (the "License"); /// you may not use this file except in compliance with the License. /// You may obtain a copy of the License at /// /// http://www.apache.org/licenses/LICENSE-2.0 /// -/// Unless required by applicable law or agreed to in writing, software -/// distributed under the License is distributed on an "AS IS" BASIS, -/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// Unless required by applicable law or agreed to in writing; software +/// distributed under the License is distributed on an "AS IS" BASIS; +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND; either express or implied. /// See the License for the specific language governing permissions and /// limitations under the License. /// -import { LatLngExpression, LatLngTuple } from 'leaflet'; +import { LatLngTuple } from 'leaflet'; -export interface MapOptions { +export type GenericFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; +export type MarkerImageFunction = (data: FormattedData, dsData: FormattedData[], dsIndex: number) => string; + +export type MapSettings = { polygonKeyName: any; draggebleMarker: any; - initCallback?: Function, - defaultZoomLevel?: number, - dontFitMapBounds?: boolean, - disableScrollZooming?: boolean, - minZoomLevel?: number, - latKeyName?: string, - lngKeyName?: string, - xPosKeyName?: string, - yPosKeyName?: string, - mapProvider: MapProviders, + initCallback?: () => any; + defaultZoomLevel?: number; + dontFitMapBounds?: boolean; + disableScrollZooming?: boolean; + minZoomLevel?: number; + latKeyName?: string; + lngKeyName?: string; + xPosKeyName?: string; + yPosKeyName?: string; + mapProvider: MapProviders; mapUrl?: string; - credentials?: any, // declare credentials format - defaultCenterPosition?: LatLngTuple, - markerClusteringSetting?, - useDefaultCenterPosition?: boolean, - gmDefaultMapType?: string, + credentials?: any; // declare credentials format + defaultCenterPosition?: LatLngTuple; + markerClusteringSetting?; + useDefaultCenterPosition?: boolean; + gmDefaultMapType?: string; useLabelFunction: string; icon?: any; } @@ -47,15 +50,73 @@ export enum MapProviders { tencent = 'tencent-map' } -export interface MarkerSettings extends MapOptions { +export type MarkerSettings = { tooltipPattern?: any; icon?: any; - showLabel?: boolean, - draggable?: boolean, - showTooltip?: boolean, - color?: string, + showLabel?: boolean; + label: string; + labelColor: string; + labelText: string; + useLabelFunction: boolean; + draggable?: boolean; + showTooltip?: boolean; + color?: string; + autocloseTooltip: boolean; + displayTooltipAction: string; currentImage?: string; - useMarkerImageFunction?: boolean, - markerImages?: string[], - markerImageFunction?: Function; -} \ No newline at end of file + useMarkerImageFunction?: boolean; + markerImages?: string[]; + + labelFunction: GenericFunction; + markerImageFunction?: MarkerImageFunction; +} + +export interface FormattedData { + aliasName: string; + entityName: string; + $datasource: string; + dsIndex: number; + deviceType: string +} + +export type PolygonSettings = { + showPolygon: boolean; + showTooltip: any; + polygonStrokeOpacity: number; + polygonOpacity: number; + polygonStrokeWeight: number; + polygonStrokeColor: string; + polygonColor: string; + autocloseTooltip: boolean; + displayTooltipAction: string; +} + +export type PolylineSettings = { + usePolylineDecorator: any; + autocloseTooltip: boolean; + displayTooltipAction: string; + useColorFunction: any; + color: string; + useStrokeOpacityFunction: any; + strokeOpacity: number; + useStrokeWeightFunction: any; + strokeWeight: number; + decoratorOffset: string | number; + endDecoratorOffset: string | number; + decoratorRepeat: string | number; + decoratorSymbol: any; + decoratorSymbolSize: any; + useDecoratorCustomColor: any; + decoratorCustomColor: any; + + + colorFunction(colorFunction: any, arg1: any[]): string; + strokeOpacityFunction(strokeOpacityFunction: any, arg1: any[]): number; + strokeWeightFunction(strokeWeightFunction: any, arg1: any[]): number; +} + +export interface HistorySelectSettings { + buttonColor: string; +} + +export type UnitedMapSettings = MapSettings & PolygonSettings & MarkerSettings & PolygonSettings; \ No newline at end of file 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 72a62537be..d47915f03e 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 @@ -14,7 +14,7 @@ /// limitations under the License. /// -import { MapProviders, MapOptions } from './map-models'; +import { MapProviders, MapSettings, MarkerSettings, PolygonSettings, UnitedMapSettings } from './map-models'; import LeafletMap from './leaflet-map'; import { openstreetMapSettingsSchema, @@ -63,7 +63,7 @@ export class MapWidgetController implements MapWidgetInterface { provider: MapProviders; schema; data; - settings; + settings:UnitedMapSettings; public static dataKeySettingsSchema(): Object { return {}; 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 30b893bd39..f705d1ac57 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 @@ -16,12 +16,13 @@ import L from 'leaflet'; import _ from 'lodash'; +import { MarkerSettings, PolylineSettings, PolygonSettings } from './map-models'; -export function createTooltip(target: L.Layer, settings): L.Popup { +export function createTooltip(target: L.Layer, settings: MarkerSettings | PolylineSettings | PolygonSettings): L.Popup { const popup = L.popup(); popup.setContent(''); target.bindPopup(popup, { autoClose: settings.autocloseTooltip, closeOnClick: false }); - if (settings.displayTooltipAction == 'hover') { + if (settings.displayTooltipAction === 'hover') { target.off('click'); target.on('mouseover', function () { this.openPopup(); @@ -40,6 +41,6 @@ export function getRatio(firsMoment: number, secondMoment: number, intermediateM export function findAngle(startPoint, endPoint) { let angle = -Math.atan2(endPoint.latitude - startPoint.latitude, endPoint.longitude - startPoint.longitude); angle = angle * 180 / Math.PI; - return parseInt(angle.toFixed(2)); + return parseInt(angle.toFixed(2), 10); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts index fc822e75ec..365a09c0bd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts @@ -15,23 +15,20 @@ /// import L from 'leaflet'; -import { MarkerSettings } from './map-models'; +import { MarkerSettings, FormattedData } from './map-models'; import { aspectCache, safeExecute, parseTemplate } from '@app/core/utils'; import { createTooltip } from './maps-utils'; export class Marker { leafletMarker: L.Marker; - - tooltipOffset; - tooltip; - location; - data; - dataSources; + tooltipOffset: [number, number]; + tooltip: L.Popup; + location: L.LatLngExpression; + data: FormattedData; + dataSources: FormattedData[]; constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data?, dataSources?, onClickListener?, onDragendListener?) { - // this.map = map; - this.location = location; this.setDataSources(data, dataSources); this.leafletMarker = L.marker(location, { draggable: settings.draggable @@ -58,12 +55,12 @@ export class Marker { } } - setDataSources(data, dataSources) { + setDataSources(data: FormattedData, dataSources: FormattedData[]) { this.data = data; this.dataSources = dataSources; } - updateMarkerTooltip(data) { + updateMarkerTooltip(data: FormattedData) { this.tooltip.setContent(parseTemplate(this.settings.tooltipPattern, data)); } @@ -71,7 +68,7 @@ export class Marker { this.leafletMarker.setLatLng(position); } - updateMarkerLabel(settings) { + updateMarkerLabel(settings: MarkerSettings) { this.leafletMarker.unbindTooltip(); if (settings.showLabel) { @@ -90,7 +87,7 @@ export class Marker { }); } - updateMarkerIcon(settings) { + updateMarkerIcon(settings: MarkerSettings) { this.createMarkerIcon((iconInfo) => { this.leafletMarker.setIcon(iconInfo.icon); this.tooltipOffset = [0, -iconInfo.size[1] + 10]; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts index dd0f614832..e38eaae1c6 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts @@ -14,15 +14,16 @@ /// limitations under the License. /// -import L from 'leaflet'; +import L, { LatLngExpression } from 'leaflet'; import { createTooltip } from './maps-utils'; +import { PolygonSettings } from './map-models'; export class Polygon { leafletPoly: L.Polygon; tooltip; - constructor(public map, coordinates, dataSources, settings, onClickListener?) { + constructor(public map, coordinates, dataSources, settings: PolygonSettings, onClickListener?) { this.leafletPoly = L.polygon(coordinates, { fill: true, fillColor: settings.polygonColor, @@ -33,7 +34,7 @@ export class Polygon { }).addTo(this.map); if (settings.showTooltip) { - this.tooltip = createTooltip(this.leafletPoly, settings); + this.tooltip = createTooltip(this.leafletPoly, settings); } if (onClickListener) { this.leafletPoly.on('click', onClickListener); @@ -44,11 +45,13 @@ export class Polygon { this.map.removeLayer(this.leafletPoly); } - updatePolygonColor(settings, color) { - const style = { + updatePolygonColor(settings) { + console.log('Polygon -> updatePolygonColor -> settings', settings) + const style: L.PathOptions = { + fill: true, - fillColor: color, - color, + fillColor: settings.color, + color: settings.color, weight: settings.polygonStrokeWeight, fillOpacity: settings.polygonOpacity, opacity: settings.polygonStrokeOpacity @@ -60,7 +63,7 @@ export class Polygon { return this.leafletPoly.getLatLngs(); } - setPolygonLatLngs(latLngs) { + setPolygonLatLngs(latLngs: LatLngExpression[]) { this.leafletPoly.setLatLngs(latLngs); this.leafletPoly.redraw(); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts index eba4550384..e65e080eaa 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts @@ -18,51 +18,62 @@ import L, { PolylineDecoratorOptions } from 'leaflet'; import 'leaflet-polylinedecorator'; import { safeExecute } from '@app/core/utils'; +import { PolylineSettings, PolygonSettings } from './map-models'; export class Polyline { leafletPoly: L.Polyline; + polylineDecorator: L.PolylineDecorator; dataSources; data; - constructor(private map: L.Map, locations, data, dataSources, settings) { + constructor(private map: L.Map, locations, data, dataSources, settings: PolylineSettings) { this.dataSources = dataSources; this.data = data; this.leafletPoly = L.polyline(locations, - this.getPolyStyle(settings, data, dataSources) + this.getPolyStyle(settings) ).addTo(this.map); if (settings.usePolylineDecorator) { - L.polylineDecorator(this.leafletPoly, { - patterns: [ - { - offset: settings.decoratorOffset, - endOffset: settings.endDecoratorOffset, - repeat: settings.decoratorRepeat, - symbol: L.Symbol[settings.decoratorSymbol]({ - pixelSize: settings.decoratorSymbolSize, - polygon: false, - pathOptions: { - color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings, data, dataSources).color, - stroke: true - } - }) - } - ], - interactive: false, - } as PolylineDecoratorOptions).addTo(this.map); + this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map); } } + getDecoratorSettings(settings: PolylineSettings): PolylineDecoratorOptions { + return { + patterns: [ + { + offset: settings.decoratorOffset, + endOffset: settings.endDecoratorOffset, + repeat: settings.decoratorRepeat, + symbol: L.Symbol[settings.decoratorSymbol]({ + pixelSize: settings.decoratorSymbolSize, + polygon: false, + pathOptions: { + color: settings.useDecoratorCustomColor ? settings.decoratorCustomColor : this.getPolyStyle(settings).color, + stroke: true + } + }) + } + ], + interactive: false, + } as PolylineDecoratorOptions + } + updatePolyline(settings, data, dataSources) { - this.leafletPoly.setStyle(this.getPolyStyle(settings, data, dataSources)); + this.leafletPoly.setStyle(this.getPolyStyle(settings)); + this.setPolylineLatLngs(data); + this.polylineDecorator.setPaths(this.leafletPoly); } - getPolyStyle(settings, data, dataSources): L.PolylineOptions { + getPolyStyle(settings: PolylineSettings): L.PolylineOptions { return { - color: settings.useColorFunction ? safeExecute(settings.colorFunction, [data, dataSources, data[0]?.dsIndex]) : settings.color, - opacity: settings.useStrokeOpacityFunction ? safeExecute(settings.strokeOpacityFunction, [data, dataSources, data[0]?.dsIndex]) : settings.strokeOpacity, - weight: settings.useStrokeWeightFunction ? safeExecute(settings.strokeWeightFunction, [data, dataSources, data[0]?.dsIndex]) : settings.strokeWeight, + color: settings.useColorFunction ? + safeExecute(settings.colorFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.color, + opacity: settings.useStrokeOpacityFunction ? + safeExecute(settings.strokeOpacityFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.strokeOpacity, + weight: settings.useStrokeWeightFunction ? + safeExecute(settings.strokeWeightFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.strokeWeight, } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts index de308b5fff..0b0d269ce1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts @@ -17,14 +17,14 @@ import L from 'leaflet'; import LeafletMap from '../leaflet-map'; -import { MapOptions } from '../map-models'; +import { MapSettings, UnitedMapSettings } from '../map-models'; import 'leaflet.gridlayer.googlemutant'; let googleLoaded = false; export class GoogleMap extends LeafletMap { - constructor($container, options: MapOptions) { + constructor($container, options: UnitedMapSettings) { super($container, options); this.loadGoogle(() => { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts index 9d4d5df1ef..60221b62a3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts @@ -16,11 +16,10 @@ import L from 'leaflet'; import LeafletMap from '../leaflet-map'; -import { MapOptions } from '../map-models'; +import { MapSettings, UnitedMapSettings } from '../map-models'; export class HEREMap extends LeafletMap { - constructor($container, options: MapOptions) { - console.log('HEREMap -> constructor -> options', options) + constructor($container, options: UnitedMapSettings) { const defaultCredentials = { app_id: 'AhM6TzD9ThyK78CT3ptx', diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts index 25f6651838..6796604c3f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/image-map.ts @@ -16,7 +16,7 @@ import L from 'leaflet'; import LeafletMap from '../leaflet-map'; -import { MapOptions } from '../map-models'; +import { MapSettings, UnitedMapSettings } from '../map-models'; import { aspectCache } from '@app/core/utils'; const maxZoom = 4;// ? @@ -28,7 +28,7 @@ export class ImageMap extends LeafletMap { width = 0; height = 0; - constructor(private $container: HTMLElement, options: MapOptions) { + constructor(private $container: HTMLElement, options: UnitedMapSettings) { super($container, options); aspectCache(options.mapUrl).subscribe(aspect => { this.aspect = aspect; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts index c6997f55a2..0412b0450d 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts @@ -16,10 +16,10 @@ import L from 'leaflet'; import LeafletMap from '../leaflet-map'; -import { MapOptions } from '../map-models'; +import { MapSettings, UnitedMapSettings } from '../map-models'; export class OpenStreetMap extends LeafletMap { - constructor($container, options: MapOptions) { + constructor($container, options: UnitedMapSettings) { super($container, options); const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); const tileLayer = (L.tileLayer as any).provider('OpenStreetMap.Mapnik'); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts index 14f7f71e0d..980846796c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/tencent-map.ts @@ -17,10 +17,10 @@ import L from 'leaflet'; import LeafletMap from '../leaflet-map'; -import { MapOptions } from '../map-models'; +import { MapSettings, UnitedMapSettings } from '../map-models'; export class TencentMap extends LeafletMap { - constructor($container, options: MapOptions) { + constructor($container, options: UnitedMapSettings) { super($container, options); const txUrl = 'http://rt{s}.map.gtimg.com/realtimerender?z={z}&x={x}&y={y}&type=vector&style=0'; const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel); 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 b0368b5d84..07e2c2d697 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 @@ -97,7 +97,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { timeUpdated(time: number) { const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]); this.activeTrip = currentPosition[0]; - console.log("TripAnimationComponent -> timeUpdated -> this.interpolatedData", this.interpolatedData) if (this.settings.showPolygon) { this.mapWidget.map.updatePolygons(this.interpolatedData); } @@ -120,11 +119,11 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { } showHideTooltip() { - const tooltipText: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooolTipFunction, [this.activeTrip, this.historicalData, 0]) + const tooltipText: string = this.settings.useTooltipFunction ? + safeExecute(this.settings.tooolTipFunction, [this.activeTrip, this.historicalData, 0]) : this.settings.tooltipPattern; this.mainTooltip = this.sanitizer.sanitize(SecurityContext.HTML, parseTemplate(tooltipText, this.activeTrip)) - console.log("TripAnimationComponent -> showHideTooltip -> this.mainTooltip", this.mainTooltip) this.visibleTooltip = !this.visibleTooltip; } @@ -132,7 +131,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit { const result = {}; - for (let i = 1, j = 0; i < originData.length, j < interpolatedIntervals.length;) { + for (let i = 1, j = 0; i < originData.length && j < interpolatedIntervals.length;) { const currentTime = interpolatedIntervals[j]; while (originData[i].time < currentTime) i++; const before = originData[i - 1]; diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts index 1c9942139a..2ab3acc283 100644 --- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts +++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts @@ -17,6 +17,7 @@ import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'; import { interval, Subscription, Subscriber, SubscriptionLike, Observer } from 'rxjs'; import { filter, tap } from 'rxjs/operators'; +import { HistorySelectSettings } from '@app/modules/home/components/widget/lib/maps/map-models'; @Component({ selector: 'tb-history-selector', @@ -25,10 +26,10 @@ import { filter, tap } from 'rxjs/operators'; }) export class HistorySelectorComponent implements OnInit, OnChanges { - @Input() settings + @Input() settings: HistorySelectSettings @Input() intervals = []; - @Output() onTimeUpdated: EventEmitter = new EventEmitter(); + @Output() timeUpdated: EventEmitter = new EventEmitter(); animationTime; minTimeIndex = 0; @@ -58,7 +59,7 @@ export class HistorySelectorComponent implements OnInit, OnChanges { tap(() => this.index++)).subscribe(() => { if (this.index < this.maxTimeIndex) { this.cd.detectChanges(); - this.onTimeUpdated.emit(this.intervals[this.index]); + this.timeUpdated.emit(this.intervals[this.index]); } else { this.interval.complete(); @@ -70,12 +71,12 @@ export class HistorySelectorComponent implements OnInit, OnChanges { this.playing = false; this.interval = null; this.cd.detectChanges(); - }); + }); } reeneble() { if (this.playing) { - let position = this.index; + const position = this.index; this.interval.complete(); this.index = position; this.play(); @@ -85,7 +86,7 @@ export class HistorySelectorComponent implements OnInit, OnChanges { pause() { this.playing = false; this.cd.detectChanges(); - this.onTimeUpdated.emit(this.intervals[this.index]); + this.timeUpdated.emit(this.intervals[this.index]); } moveNext() { @@ -113,6 +114,6 @@ export class HistorySelectorComponent implements OnInit, OnChanges { } changeIndex() { - this.onTimeUpdated.emit(this.intervals[this.index]); + this.timeUpdated.emit(this.intervals[this.index]); } }