add typing

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<L.Map> = new BehaviorSubject(null);
     ready$: Observable<L.Map> = 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: `<div class="arrow" style="transform: rotate(${data.rotationAngle}deg)"><div>`
-                })
-            }
-            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: `<div class="arrow" style="transform: rotate(${data.rotationAngle}deg)"><div>`
+                    })
+                }
+                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<Array<any>>) {
         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);
         });
     }
 }

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;
-}
+    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;

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 {};

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);
 }
 

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];

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();
     }

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,
         }
     }
 

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(() => {

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',

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;

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');

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);

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];

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<number> = new EventEmitter();
+  @Output() timeUpdated: EventEmitter<number> = 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]);
   }
 }