lint anf typed leaflet AddMarker

ui-ngx/proxy.conf.js

@@ -18,7 +18,7 @@ const ruleNodeUiforwardPort = 8080;
 
 const PROXY_CONFIG = {
   "/api": {
-    "target": "http://localhost:8080",
+    "target": "http://64.225.65.220:8080",
     "secure": false,
   },
   "/static/rulenode": {
@@ -26,7 +26,7 @@ const PROXY_CONFIG = {
     "secure": false,
   },
   "/api/ws": {
-    "target": "ws://localhost:8080",
+    "target": "ws://64.225.65.220:8080",
     "ws": true,
   },
 };

ui-ngx/src/app/core/schema-utils.ts

@@ -18,7 +18,7 @@
 export function initSchema() {
     return {
         schema: {
-            type: "object",
+            type: 'object',
             properties: {},
             required: []
         },
@@ -29,8 +29,8 @@ export function initSchema() {
 
 export function addGroupInfo(schema, title: string) {
     schema.groupInfoes.push({
-        "formIndex": schema.groupInfoes?.length || 0,
-        "GroupTitle": title
+        formIndex: schema.groupInfoes?.length || 0,
+        GroupTitle: title
     });
 }
 
@@ -66,7 +66,7 @@ export function addCondition(schema, condition: String) {
         if (typeof element === 'string') {
             return {
                 key: element,
-                condition: condition
+                condition
             }
         }
         if (typeof element == 'object') {

ui-ngx/src/app/core/utils.ts

@@ -222,8 +222,8 @@ function scrollParents(node: Node): Node[] {
 }
 
 function hashCode(str) {
-  var hash = 0;
-  var i, char;
+  let hash = 0;
+  let i, char;
   if (str.length == 0) return hash;
   for (i = 0; i < str.length; i++) {
     char = str.charCodeAt(i);
@@ -450,21 +450,22 @@ export function aspectCache(imageUrl: string): Observable<number> {
 
 
 export function parseArray(input: any[]): any[] {
-  let alliases: any = _(input).groupBy(el => el?.datasource?.aliasName).values().value();
+  const alliases: any = _(input).groupBy(el => el?.datasource?.aliasName).values().value();
   return alliases.map((alliasArray, dsIndex) =>
     alliasArray[0].data.map((el, i) => {
       const obj = {
         aliasName: alliasArray[0]?.datasource?.aliasName,
         entityName: alliasArray[0]?.datasource?.entityName,
         $datasource: alliasArray[0]?.datasource,
-        dsIndex: dsIndex,
-        time: el[0]
+        dsIndex,
+        time: el[0],
+        deviceType: null
       };
       alliasArray.forEach(el => {
         obj[el?.dataKey?.label] = el?.data[i][1];
         obj[el?.dataKey?.label + '|ts'] = el?.data[0][0];
         if (el?.dataKey?.label == 'type') {
-          obj['deviceType'] = el?.data[0][1];
+          obj.deviceType = el?.data[0][1];
         }
       });
       return obj;
@@ -478,13 +479,14 @@ export function parseData(input: any[]): any[] {
       aliasName: alliasArray[0]?.datasource?.aliasName,
       entityName: alliasArray[0]?.datasource?.entityName,
       $datasource: alliasArray[0]?.datasource,
-      dsIndex: i
+      dsIndex: i,
+      deviceType: null
     };
     alliasArray.forEach(el => {
       obj[el?.dataKey?.label] = el?.data[0][1];
       obj[el?.dataKey?.label + '|ts'] = el?.data[0][0];
       if (el?.dataKey?.label == 'type') {
-        obj['deviceType'] = el?.data[0][1];
+        obj.deviceType = el?.data[0][1];
       }
     });
     return obj;
@@ -493,7 +495,7 @@ export function parseData(input: any[]): any[] {
 
 export function safeExecute(func: Function, params = []) {
   let res = null;
-  if (func && typeof (func) == "function") {
+  if (func && typeof (func) == 'function') {
     try {
       res = func(...params);
     }
@@ -523,17 +525,17 @@ export function parseTemplate(template: string, data: object) {
   let res = '';
   try {
     let variables = '';
-    let expressions = template
+    const expressions = template
       .match(/\{(.*?)\}/g) // find expressions
-      .map(exp => exp.replace(/{|}/g, '')) // remove brackets 
+      .map(exp => exp.replace(/{|}/g, '')) // remove brackets
       .map(exp => exp.split(':'))
-      .filter(arr => !!arr[1]) //filter expressions without format
+      .filter(arr => !!arr[1]) // filter expressions without format
       .reduce((res, current) => {
         res[current[0]] = current[1];
         return res;
       }, {});
 
-    for (let key in data) {
+    for (const key in data) {
       if (!key.includes('|'))
         variables += `let ${key} = '${expressions[key] ? padValue(data[key], +expressions[key]) : data[key]}';`;
     }

ui-ngx/src/app/modules/home/components/widget/lib/canvas-digital-gauge.ts

@@ -243,9 +243,9 @@ export class CanvasDigitalGauge extends BaseGauge {
       options.neonColorsRange = [];
     }
     for (let i = 0; i < options.levelColors.length; i++) {
-      let levelColor: any = options.levelColors[i];
+      const levelColor: any = options.levelColors[i];
       if (levelColor !== null) {
-        let percentage = isColorProperty ? inc * i : CanvasDigitalGauge.normalizeValue(levelColor.value, options.minValue, options.maxValue);
+        const percentage = isColorProperty ? inc * i : CanvasDigitalGauge.normalizeValue(levelColor.value, options.minValue, options.maxValue);
         let tColor = tinycolor(isColorProperty ? levelColor : levelColor.color);
         options.colorsRange.push({
           pct: percentage,
@@ -274,7 +274,7 @@ export class CanvasDigitalGauge extends BaseGauge {
   }
 
   static normalizeValue (value: number, min: number, max: number): number {
-    let normalValue = (value - min) / (max - min);
+    const normalValue = (value - min) / (max - min);
     if (normalValue <= 0) {
       return 0;
     }

ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts

@@ -28,8 +28,8 @@ import { CanvasDigitalGauge, CanvasDigitalGaugeOptions } from '@home/components/
 import { DatePipe } from '@angular/common';
 import {DataKey, Datasource, DatasourceType, JsonSettingsSchema, widgetType} from '@shared/models/widget.models';
 import GenericOptions = CanvasGauges.GenericOptions;
-import {IWidgetSubscription, WidgetSubscriptionOptions} from "@core/api/widget-api.models";
-import {DataKeyType} from "@shared/models/telemetry/telemetry.models";
+import {IWidgetSubscription, WidgetSubscriptionOptions} from '@core/api/widget-api.models';
+import {DataKeyType} from '@shared/models/telemetry/telemetry.models';
 
 const tinycolor = tinycolor_;
 
@@ -202,55 +202,55 @@ export class TbCanvasDigitalGauge {
   }
 
   settingLevelColorsSubscribe(options) {
-    let levelColorsDatasource: Datasource[] = [];
-    let predefineLevelColors: colorLevelSetting[] = [];
+    const levelColorsDatasource: Datasource[] = [];
+    const predefineLevelColors: colorLevelSetting[] = [];
 
     function setLevelColor(levelSetting, color) {
       if (levelSetting.valueSource === 'predefinedValue' && isFinite(levelSetting.value)) {
         predefineLevelColors.push({
           value: levelSetting.value,
-          color: color
+          color
         })
       } else if (levelSetting.entityAlias && levelSetting.attribute) {
-        let entityAliasId = this.ctx.aliasController.getEntityAliasId(levelSetting.entityAlias);
+        const entityAliasId = this.ctx.aliasController.getEntityAliasId(levelSetting.entityAlias);
         if (!entityAliasId) {
           return;
         }
 
-        let datasource = levelColorsDatasource.find((datasource) => {
+        const datasource = levelColorsDatasource.find((datasource) => {
           return datasource.entityAliasId === entityAliasId;
         });
 
-        let dataKey: DataKey = {
+        const dataKey: DataKey = {
           type: DataKeyType.attribute,
           name: levelSetting.attribute,
           label: levelSetting.attribute,
           settings: [{
-            color: color,
+            color,
             index: predefineLevelColors.length
           }],
           _hash: Math.random()
         };
 
         if (datasource) {
-          let findDataKey = datasource.dataKeys.find((dataKey) => {
+          const findDataKey = datasource.dataKeys.find((dataKey) => {
             return dataKey.name === levelSetting.attribute;
           });
 
           if (findDataKey) {
             findDataKey.settings.push({
-              color: color,
+              color,
               index: predefineLevelColors.length
             });
           } else {
             datasource.dataKeys.push(dataKey)
           }
         } else {
-          let datasource: Datasource = {
+          const datasource: Datasource = {
             type: DatasourceType.entity,
             name: levelSetting.entityAlias,
             aliasName: levelSetting.entityAlias,
-            entityAliasId: entityAliasId,
+            entityAliasId,
             dataKeys: [dataKey]
           };
           levelColorsDatasource.push(datasource);
@@ -261,7 +261,7 @@ export class TbCanvasDigitalGauge {
     }
 
     for (let i = 0; i < options.length; i++) {
-      let levelColor = options[i];
+      const levelColor = options[i];
       if (levelColor.from) {
         setLevelColor.call(this, levelColor.from, levelColor.color);
       }
@@ -282,20 +282,20 @@ export class TbCanvasDigitalGauge {
   }
 
   subscribeLevelColorsAttributes(datasources: Datasource[]) {
-    let TbCanvasDigitalGauge = this;
-    let levelColorsSourcesSubscriptionOptions: WidgetSubscriptionOptions = {
-      datasources: datasources,
+    const TbCanvasDigitalGauge = this;
+    const levelColorsSourcesSubscriptionOptions: WidgetSubscriptionOptions = {
+      datasources,
       useDashboardTimewindow: false,
       type: widgetType.latest,
       callbacks: {
         onDataUpdated: (subscription) => {
           for (let i = 0; i < subscription.data.length; i++) {
-            let keyData = subscription.data[i];
+            const keyData = subscription.data[i];
             if (keyData && keyData.data && keyData.data[0]) {
-              let attrValue = keyData.data[0][1];
+              const attrValue = keyData.data[0][1];
               if (isFinite(attrValue)) {
                 for (let i = 0; i < keyData.dataKey.settings.length; i++) {
-                  let setting = keyData.dataKey.settings[i];
+                  const setting = keyData.dataKey.settings[i];
                   this.localSettings.levelColors[setting.index] = {
                     value: attrValue,
                     color: setting.color

ui-ngx/src/app/modules/home/components/widget/lib/maps/add-marker.ts

@@ -0,0 +1,12 @@
+import * as L from 'leaflet'
+
+declare module 'leaflet' {
+
+    namespace Control {
+        class AddMarker extends L.Control { }
+    }
+
+    namespace control {
+        function addMarker(options): Control.AddMarker;
+    }
+}

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

@@ -14,7 +14,8 @@
 /// limitations under the License.
 ///
 
-import * as L from 'leaflet';
+import L from 'leaflet';
+import './add-marker';
 
 import 'leaflet-providers';
 import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -67,34 +68,34 @@ export default abstract class LeafletMap {
 
     addMarkerControl() {
         if (this.options.draggebleMarker)
-            L.Control['AddMarker'] = L.Control.extend({
-                onAdd: function (map) {
-                    let img = L.DomUtil.create('img') as any;
+            L.Control.AddMarker  = L.Control.extend({
+                onAdd (map) {
+                    const img = L.DomUtil.create('img') as any;
                     img.src = `assets/add_location.svg`;
                     img.style.width = '32px';
                     img.style.height = '32px';
                     img.onclick = this.dragMarker;
                     return img;
                 },
-                addHooks: function () {
+                addHooks () {
                     L.DomEvent.on(window as any, 'onclick', this.enableDragMode, this);
                 },
-                onRemove: function (map) {
+                onRemove (map) {
                 },
                 dragMarker: ($event) => {
                     this.dragMode = !this.dragMode;
                 }
-            });
+            } as any);
 
-        L.control['addmarker'] = function (opts) {
-            return new L.Control['AddMarker'](opts);
+        L.control.addMarker = function (opts) {
+            return new L.Control.AddMarker(opts);
         }
-        L.control['addmarker']({ position: 'topright' }).addTo(this.map);
+        L.control.addMarker({ position: 'topright' }).addTo(this.map);
     }
 
-    inited() {///!!!!
+    /*inited() {/// !!!!
         return !!this.map;
-    }
+    }*/
 
     public setMap(map: L.Map) {
         this.map = map;
@@ -158,7 +159,7 @@ export default abstract class LeafletMap {
         }
     }
 
-    //Markers
+    // Markers
     updateMarkers(markersData) {
         markersData.forEach(data => {
             if (data.rotationAngle) {
@@ -188,7 +189,7 @@ export default abstract class LeafletMap {
 
     private updateMarker(key, data, dataSources, settings: MarkerSettings) {
         const marker: Marker = this.markers.get(key);
-        let location = this.convertPosition(data)
+        const location = this.convertPosition(data)
         if (!location.equals(marker.location)) {
             marker.updateMarkerPosition(location);
         }
@@ -203,12 +204,12 @@ export default abstract class LeafletMap {
 
     }
 
-    //polyline
+    // polyline
 
     updatePolylines(polyData: Array<Array<any>>) {
         polyData.forEach(data => {
             if (data.length) {
-                let dataSource = polyData.map(arr => arr[0]);
+                const dataSource = polyData.map(arr => arr[0]);
                 if (this.poly) {
                     this.updatePolyline(data, dataSource, this.options);
                 }
@@ -237,7 +238,7 @@ export default abstract class LeafletMap {
         });
     }
 
-    //polygon
+    // polygon
 
     updatePolygons(polyData: Array<Array<any>>) {
         polyData.forEach((data: any) => {

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, MapOptions } from './map-models';
 import LeafletMap from './leaflet-map';
 import {
     openstreetMapSettingsSchema,
@@ -39,12 +39,6 @@ import { AttributeService } from '@app/core/public-api';
 
 export class MapWidgetController implements MapWidgetInterface {
 
-    map: LeafletMap;
-    provider: MapProviders;
-    schema;
-    data;
-    settings;
-
     constructor(public mapProvider: MapProviders, private drawRoutes, public ctx: WidgetContext, $element) {
         if (this.map) {
             this.map.map.remove();
@@ -57,7 +51,7 @@ export class MapWidgetController implements MapWidgetInterface {
         }
         this.settings = this.initSettings(ctx.settings);
 
-        let MapClass = providerSets[this.provider]?.MapClass;
+        const MapClass = providerSets[this.provider]?.MapClass;
         if (!MapClass) {
             return;
         }
@@ -65,13 +59,64 @@ export class MapWidgetController implements MapWidgetInterface {
         this.map.saveMarkerLocation = this.setMarkerLocation;
     }
 
+    map: LeafletMap;
+    provider: MapProviders;
+    schema;
+    data;
+    settings;
+
+    public static dataKeySettingsSchema(): Object {
+        return {};
+    }
+
+    public static getProvidersSchema() {
+        return mergeSchemes([mapProviderSchema,
+            ...Object.values(providerSets)?.map(
+                setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]);
+    }
+
+    public static settingsSchema(mapProvider, drawRoutes): Object {
+        const schema = initSchema();
+        addToSchema(schema, this.getProvidersSchema());
+        addGroupInfo(schema, 'Map Provider Settings');
+        addToSchema(schema, commonMapSettingsSchema);
+        addGroupInfo(schema, 'Common Map Settings');
+
+        if (drawRoutes) {
+            addToSchema(schema, routeMapSettingsSchema);
+            addGroupInfo(schema, 'Route Map Settings');
+        } else if (mapProvider !== 'image-map') {
+            const clusteringSchema = mergeSchemes([markerClusteringSettingsSchemaLeaflet, markerClusteringSettingsSchema])
+            addToSchema(schema, clusteringSchema);
+            addGroupInfo(schema, 'Markers Clustering Settings');
+        }
+        return schema;
+    }
+
+    public static actionSources(): Object {
+        return {
+            markerClick: {
+                name: 'widget-action.marker-click',
+                multiple: false
+            },
+            polygonClick: {
+                name: 'widget-action.polygon-click',
+                multiple: false
+            },
+            tooltipAction: {
+                name: 'widget-action.tooltip-tag-action',
+                multiple: true
+            }
+        };
+    }
+
     onInit() {
     }
 
     setMarkerLocation = (e) => {
-        let s = this.ctx.$injector.get(AttributeService);
-        console.log("MapWidgetController -> setMarkerLocation -> s", s, s.saveEntityAttributes)
-        let attributeService = this.ctx.$scope.$injector.get(this.ctx.servicesMap.get('attributeService'));
+        const s = this.ctx.$injector.get(AttributeService);
+        console.log('MapWidgetController -> setMarkerLocation -> s', s, s.saveEntityAttributes)
+        const attributeService = this.ctx.$scope.$injector.get(this.ctx.servicesMap.get('attributeService'));
         forkJoin(
             this.data.filter(data => !!e[data.dataKey.name])
                 .map(data => {
@@ -88,7 +133,7 @@ export class MapWidgetController implements MapWidgetInterface {
                         }]
                     );
                 })).subscribe(res => {
-                    console.log("MapWidgetController -> setMarkerLocation -> res", res)
+                    console.log('MapWidgetController -> setMarkerLocation -> res', res)
                 });
     }
 
@@ -114,7 +159,7 @@ export class MapWidgetController implements MapWidgetInterface {
             markerImageFunction: parseFunction(settings.markerImageFunction, ['data', 'images', 'dsData', 'dsIndex']),
             labelColor: this.ctx.widgetConfig.color,
             tooltipPattern: settings.tooltipPattern ||
-                "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${" + settings.latKeyName + ":7}<br/><b>Longitude:</b> ${" + settings.lngKeyName + ":7}",
+                '<b>${entityName}</b><br/><br/><b>Latitude:</b> ${' + settings.latKeyName + ':7}<br/><b>Longitude:</b> ${' + settings.lngKeyName + ':7}',
             defaultCenterPosition: getDefCenterPosition(settings?.defaultCenterPosition),
             useDraggableMarker: true,
             currentImage: (settings.useMarkerImage && settings.markerImage?.length) ? {
@@ -138,7 +183,7 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     onResize() {
-        this.map.onResize();//not work
+        this.map.onResize();// not work
     }
 
     resize() {
@@ -146,51 +191,6 @@ export class MapWidgetController implements MapWidgetInterface {
         this.map.onResize();
     }
 
-    public static dataKeySettingsSchema(): Object {
-        return {};
-    }
-
-    public static getProvidersSchema() { 
-        return mergeSchemes([mapProviderSchema,
-            ...Object.values(providerSets)?.map(
-                setting => addCondition(setting?.schema, `model.provider === '${setting.name}'`))]);
-    }
-
-    public static settingsSchema(mapProvider, drawRoutes): Object {
-        let schema = initSchema();
-        addToSchema(schema, this.getProvidersSchema());
-        addGroupInfo(schema, "Map Provider Settings");
-        addToSchema(schema, commonMapSettingsSchema);
-        addGroupInfo(schema, "Common Map Settings");
-
-        if (drawRoutes) {
-            addToSchema(schema, routeMapSettingsSchema);
-            addGroupInfo(schema, "Route Map Settings");
-        } else if (mapProvider !== 'image-map') {
-            let clusteringSchema = mergeSchemes([markerClusteringSettingsSchemaLeaflet, markerClusteringSettingsSchema])
-            addToSchema(schema, clusteringSchema);
-            addGroupInfo(schema, "Markers Clustering Settings");
-        }
-        return schema;
-    }
-
-    public static actionSources(): Object {
-        return {
-            'markerClick': {
-                name: 'widget-action.marker-click',
-                multiple: false
-            },
-            'polygonClick': {
-                name: 'widget-action.polygon-click',
-                multiple: false
-            },
-            'tooltipAction': {
-                name: 'widget-action.tooltip-tag-action',
-                multiple: true
-            }
-        };
-    }
-
     onDestroy() {
     }
 }
@@ -202,27 +202,27 @@ const providerSets = {
     'openstreet-map': {
         MapClass: OpenStreetMap,
         schema: openstreetMapSettingsSchema,
-        name: "openstreet-map",
+        name: 'openstreet-map',
     },
     'tencent-map': {
         MapClass: TencentMap,
         schema: tencentMapSettingsSchema,
-        name: "tencent-map"
+        name: 'tencent-map'
     },
     'google-map': {
         MapClass: GoogleMap,
         schema: googleMapSettingsSchema,
-        name: "google-map"
+        name: 'google-map'
     },
-    'here': {
+    here: {
         MapClass: HEREMap,
         schema: hereMapSettingsSchema,
-        name: "here"
+        name: 'here'
     },
     'image-map': {
         MapClass: ImageMap,
         schema: imageMapSettingsSchema,
-        name: "image-map"
+        name: 'image-map'
     }
 }
 
@@ -235,16 +235,16 @@ const defaultSettings = {
     lngKeyName: 'longitude',
     polygonKeyName: 'coordinates',
     showLabel: false,
-    label: "${entityName}",
+    label: '${entityName}',
     showTooltip: false,
     useDefaultCenterPosition: false,
-    showTooltipAction: "click",
+    showTooltipAction: 'click',
     autocloseTooltip: false,
     showPolygon: true,
     labelColor: '#000000',
-    color: "#FE7569",
-    polygonColor: "#0000ff",
-    polygonStrokeColor: "#fe0001",
+    color: '#FE7569',
+    polygonColor: '#0000ff',
+    polygonStrokeColor: '#fe0001',
     polygonOpacity: 0.5,
     polygonStrokeOpacity: 1,
     polygonStrokeWeight: 1,

ui-ngx/src/app/modules/home/components/widget/lib/maps/markers.ts

@@ -30,7 +30,7 @@ export class Marker {
     dataSources;
 
     constructor(private map: L.Map, location: L.LatLngExpression, public settings: MarkerSettings, data?, dataSources?, onClickListener?, onDragendListener?) {
-        //this.map = map;
+        // this.map = map;
         this.location = location;
         this.setDataSources(data, dataSources);
         this.leafletMarker = L.marker(location, {
@@ -108,7 +108,7 @@ export class Marker {
             return;
         }
 
-        let currentImage = this.settings.useMarkerImageFunction ?
+        const currentImage = this.settings.useMarkerImageFunction ?
             safeExecute(this.settings.markerImageFunction,
                 [this.data, this.settings.markerImages, this.dataSources, this.data.dsIndex]) : this.settings.currentImage;
 
@@ -117,8 +117,8 @@ export class Marker {
             aspectCache(currentImage.url).subscribe(
                 (aspect) => {
                     if (aspect) {
-                        var width;
-                        var height;
+                        let width;
+                        let height;
                         if (aspect > 1) {
                             width = currentImage.size;
                             height = currentImage.size / aspect;
@@ -126,15 +126,15 @@ export class Marker {
                             width = currentImage.size * aspect;
                             height = currentImage.size;
                         }
-                        var icon = L.icon({
+                        const icon = L.icon({
                             iconUrl: currentImage.url,
                             iconSize: [width, height],
                             iconAnchor: [width / 2, height],
                             popupAnchor: [0, -height]
                         });
-                        var iconInfo = {
+                        const iconInfo = {
                             size: [width, height],
-                            icon: icon
+                            icon
                         };
                         onMarkerIconReady(iconInfo);
                     } else {
@@ -148,8 +148,8 @@ export class Marker {
     }
 
     createDefaultMarkerIcon(color, onMarkerIconReady) {
-        var pinColor = color.substr(1);
-        var icon = L.icon({
+        const pinColor = color.substr(1);
+        const icon = L.icon({
             iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
             iconSize: [21, 34],
             iconAnchor: [10, 34],
@@ -158,9 +158,9 @@ export class Marker {
             shadowSize: [40, 37],
             shadowAnchor: [12, 35]
         });
-        var iconInfo = {
+        const iconInfo = {
             size: [21, 34],
-            icon: icon
+            icon
         };
         onMarkerIconReady(iconInfo);
     }

ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts

@@ -22,7 +22,7 @@ export class Polygon {
     leafletPoly: L.Polygon;
     tooltip;
 
-    constructor(public map, coordinates, dataSources, settings, onClickListener?) {     
+    constructor(public map, coordinates, dataSources, settings, onClickListener?) {
         this.leafletPoly = L.polygon(coordinates, {
             fill: true,
             fillColor: settings.polygonColor,
@@ -45,10 +45,10 @@ export class Polygon {
     }
 
     updatePolygonColor(settings, color) {
-        let style = {
+        const style = {
             fill: true,
             fillColor: color,
-            color: color,
+            color,
             weight: settings.polygonStrokeWeight,
             fillOpacity: settings.polygonOpacity,
             opacity: settings.polygonStrokeOpacity

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/google-map.ts

@@ -20,7 +20,7 @@ import LeafletMap from '../leaflet-map';
 import { MapOptions } from '../map-models';
 import 'leaflet.gridlayer.googlemutant';
 
-var googleLoaded = false;
+let googleLoaded = false;
 
 
 export class GoogleMap extends LeafletMap {
@@ -29,7 +29,7 @@ export class GoogleMap extends LeafletMap {
         super($container, options);
         this.loadGoogle(() => {
             const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
-            var roads = (L.gridLayer as any).googleMutant({
+            const roads = (L.gridLayer as any).googleMutant({
                 type: options?.gmDefaultMapType || 'roadmap'
             }).addTo(map);
             super.setMap(map);
@@ -43,7 +43,7 @@ export class GoogleMap extends LeafletMap {
         }
         else {
             googleLoaded = true;
-            let script = document.createElement('script');
+            const script = document.createElement('script');
             script.onload = () => {
                 callback();
             }

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/here-map.ts

@@ -20,15 +20,15 @@ import { MapOptions } from '../map-models';
 
 export class HEREMap extends LeafletMap {
     constructor($container, options: MapOptions) {
-        console.log("HEREMap -> constructor -> options", options)
+        console.log('HEREMap -> constructor -> options', options)
         const defaultCredentials =
         {
-            app_id: "AhM6TzD9ThyK78CT3ptx",
-            app_code: "p6NPiITB3Vv0GMUFnkLOOg"
+            app_id: 'AhM6TzD9ThyK78CT3ptx',
+            app_code: 'p6NPiITB3Vv0GMUFnkLOOg'
         }
         super($container, options);
         const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
-        var tileLayer = (L.tileLayer as any).provider(options.mapProvider || "HERE.normalDay", options.credentials || defaultCredentials);
+        const tileLayer = (L.tileLayer as any).provider(options.mapProvider || 'HERE.normalDay', options.credentials || defaultCredentials);
         tileLayer.addTo(map);
         super.setMap(map);
         super.initSettings(options);

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

@@ -19,7 +19,7 @@ import LeafletMap from '../leaflet-map';
 import { MapOptions } from '../map-models';
 import { aspectCache } from '@app/core/utils';
 
-const maxZoom = 4;//?
+const maxZoom = 4;// ?
 
 export class ImageMap extends LeafletMap {
 
@@ -102,12 +102,12 @@ export class ImageMap extends LeafletMap {
 
     initMap(updateImage?) {
         if (!this.map && this.aspect > 0) {
-            var center = this.pointToLatLng(this.width / 2, this.height / 2);
+            const center = this.pointToLatLng(this.width / 2, this.height / 2);
             this.map = L.map(this.$container, {
                 minZoom: 1,
-                maxZoom: maxZoom,
+                maxZoom,
                 scrollWheelZoom: !this.options.disableScrollZooming,
-                center: center,
+                center,
                 zoom: 1,
                 crs: L.CRS.Simple,
                 attributionControl: false

ui-ngx/src/app/modules/home/components/widget/lib/maps/providers/openstreet-map.ts

@@ -22,7 +22,7 @@ export class OpenStreetMap extends LeafletMap {
     constructor($container, options: MapOptions) {
         super($container, options);
         const map = L.map($container).setView(options?.defaultCenterPosition, options?.defaultZoomLevel);
-        var tileLayer = (L.tileLayer as any).provider("OpenStreetMap.Mapnik");
+        const tileLayer = (L.tileLayer as any).provider('OpenStreetMap.Mapnik');
         tileLayer.addTo(map);
         super.setMap(map);
         super.initSettings(options);

ui-ngx/src/app/modules/home/components/widget/trip-animation/trip-animation.component.ts

@@ -16,7 +16,7 @@
 
 import L from 'leaflet';
 import _ from 'lodash';
-import tinycolor from "tinycolor2";
+import tinycolor from 'tinycolor2';
 import { interpolateOnPointSegment } from 'leaflet-geometryutil';
 
 import { Component, OnInit, Input, ViewChild, AfterViewInit, ChangeDetectorRef, SecurityContext } from '@angular/core';
@@ -27,6 +27,7 @@ import { initSchema, addToSchema, addGroupInfo } from '@app/core/schema-utils';
 import { tripAnimationSchema } from '../lib/maps/schemes';
 import { DomSanitizer } from '@angular/platform-browser';
 import { WidgetConfig } from '@app/shared/public-api';
+import { WidgetContext } from '@app/modules/home/models/widget-component.models';
 
 
 @Component({
@@ -36,7 +37,9 @@ import { WidgetConfig } from '@app/shared/public-api';
 })
 export class TripAnimationComponent implements OnInit, AfterViewInit {
 
-  @Input() ctx: WidgetConfig;
+  constructor(private cd: ChangeDetectorRef,private sanitizer: DomSanitizer) { }
+
+  @Input() ctx: WidgetContext;
 
   @ViewChild('map') mapContainer;
 
@@ -51,7 +54,14 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   visibleTooltip = false;
   activeTrip;
 
-  constructor(private cd: ChangeDetectorRef,private sanitizer: DomSanitizer) { }
+  static getSettingsSchema() {
+    const schema = initSchema();
+    addToSchema(schema, TbMapWidgetV2.getProvidersSchema());
+    addGroupInfo(schema, 'Map Provider Settings');
+    addToSchema(schema, tripAnimationSchema);
+    addGroupInfo(schema, 'Trip Animation Settings');
+    return schema;
+  }
 
   ngOnInit(): void {
     this.widgetConfig = this.ctx.widgetConfig;
@@ -63,7 +73,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       rotationAngle: 0
     }
     this.settings = { ...settings, ...this.ctx.settings };
-    let subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
+    const subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
     if (subscription) subscription.callbacks.onDataUpdated = (updated) => {
       this.historicalData = parseArray(this.ctx.data);
       this.activeTrip = this.historicalData[0][0];
@@ -75,7 +85,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    let ctxCopy = _.cloneDeep(this.ctx);
+    const ctxCopy: WidgetContext = _.cloneDeep(this.ctx);
     ctxCopy.settings.showLabel = false;
     ctxCopy.settings.showTooltip = false;
     this.mapWidget = new MapWidgetController(MapProviders.openstreet, false, ctxCopy, this.mapContainer.nativeElement);
@@ -104,8 +114,8 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
 
   showHideTooltip() {
     console.log(this.activeTrip);
-      let tooltipText: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooolTipFunction) : 
-     // this.mainTooltip = this.sanitizer.sanitize(SecurityContext.HTML, parseTemplate(tooltipText, this.activeTrip)) 
+      const tooltipText: string = this.settings.useTooltipFunction ? safeExecute(this.settings.tooolTipFunction) :
+     // this.mainTooltip = this.sanitizer.sanitize(SecurityContext.HTML, parseTemplate(tooltipText, this.activeTrip))
       this.visibleTooltip = !this.visibleTooltip;
   }
 
@@ -141,16 +151,6 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
       j++;
     }
     return result;
-  };
-
-  static getSettingsSchema() {
-    let schema = initSchema();
-    addToSchema(schema, TbMapWidgetV2.getProvidersSchema());
-    addGroupInfo(schema, "Map Provider Settings");
-    addToSchema(schema, tripAnimationSchema);
-    addGroupInfo(schema, "Trip Animation Settings");
-    return schema;
-  }
-}
+  }}
 
 export let TbTripAnimationWidget = TripAnimationComponent;

ui-ngx/src/app/shared/components/dialog/json-object-edit-dialog.component.ts

@@ -14,13 +14,13 @@
 /// limitations under the License.
 ///
 
-import {Component, Inject, OnInit} from "@angular/core";
-import {DialogComponent} from "@shared/components/dialog.component";
-import {Store} from "@ngrx/store";
-import {AppState} from "@core/core.state";
-import {Router} from "@angular/router";
-import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-import {FormBuilder, FormGroup} from "@angular/forms";
+import {Component, Inject, OnInit} from '@angular/core';
+import {DialogComponent} from '@shared/components/dialog.component';
+import {Store} from '@ngrx/store';
+import {AppState} from '@core/core.state';
+import {Router} from '@angular/router';
+import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {FormBuilder, FormGroup} from '@angular/forms';
 
 export interface JsonObjectEdittDialogData {
   jsonValue: Object;

ui-ngx/src/app/shared/components/directives/tb-json-to-string.directive.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import {Directive, ElementRef, forwardRef, HostListener, Renderer2, SkipSelf} from "@angular/core";
+import {Directive, ElementRef, forwardRef, HostListener, Renderer2, SkipSelf} from '@angular/core';
 import {
   ControlValueAccessor,
   FormControl, FormGroupDirective,
@@ -22,8 +22,8 @@ import {
   NG_VALUE_ACCESSOR, NgForm,
   ValidationErrors,
   Validator
-} from "@angular/forms";
-import {ErrorStateMatcher} from "@angular/material/core";
+} from '@angular/forms';
+import {ErrorStateMatcher} from '@angular/material/core';
 
 @Directive({
   selector: '[tb-json-to-string]',

ui-ngx/src/app/shared/components/value-input.component.ts

@@ -17,12 +17,12 @@
 import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgForm } from '@angular/forms';
 import { ValueType, valueTypesMap } from '@shared/models/constants';
-import { isObject } from "@core/utils";
-import { MatDialog } from "@angular/material/dialog";
+import { isObject } from '@core/utils';
+import { MatDialog } from '@angular/material/dialog';
 import {
   JsonObjectEditDialogComponent,
   JsonObjectEdittDialogData
-} from "@shared/components/dialog/json-object-edit-dialog.component";
+} from '@shared/components/dialog/json-object-edit-dialog.component';
 
 @Component({
   selector: 'tb-value-input',
@@ -79,7 +79,7 @@ export class ValueInputComponent implements OnInit, ControlValueAccessor {
       (res) => {
         if (res) {
           this.modelValue = res;
-          this.inputForm.control.patchValue({'value': this.modelValue});
+          this.inputForm.control.patchValue({value: this.modelValue});
         }
       }
     );

ui-ngx/src/app/shared/pipe/tbJson.pipe.ts

@@ -15,7 +15,7 @@
 ///
 
 import {Pipe, PipeTransform} from '@angular/core';
-import {isObject, isNumber} from "@core/utils";
+import {isObject, isNumber} from '@core/utils';
 
 @Pipe({name: 'tbJson'})
 export class TbJsonPipe implements PipeTransform {

ui-ngx/src/app/shared/pipe/template.pipe.ts

@@ -20,7 +20,7 @@ import { parseTemplate } from '@app/core/utils';
 @Pipe({ name: 'tbParseTemplate' })
 export class TbTemplatePipe implements PipeTransform {
   transform(template, data): string {
-    console.log("TbTemplatePipe -> transform -> template, data", template, data)
+    console.log('TbTemplatePipe -> transform -> template, data', template, data)
     return parseTemplate(template, data);
   }
 }

ui-ngx/src/app/shared/shared.module.ts

@@ -104,7 +104,7 @@ import { TbErrorComponent } from '@shared/components/tb-error.component';
 import { EntityTypeListComponent } from '@shared/components/entity/entity-type-list.component';
 import { EntitySubTypeListComponent } from '@shared/components/entity/entity-subtype-list.component';
 import { TruncatePipe } from '@shared/pipe/truncate.pipe';
-import { TbJsonPipe } from "@shared/pipe/tbJson.pipe";
+import { TbJsonPipe } from '@shared/pipe/tbJson.pipe';
 import { ColorPickerDialogComponent } from '@shared/components/dialog/color-picker-dialog.component';
 import { MatChipDraggableDirective } from '@shared/components/mat-chip-draggable.directive';
 import { ColorInputComponent } from '@shared/components/color-input.component';
@@ -125,8 +125,8 @@ import { TbCheatSheetComponent } from '@shared/components/cheatsheet.component';
 import { TbHotkeysDirective } from '@shared/components/hotkeys.directive';
 import { NavTreeComponent } from '@shared/components/nav-tree.component';
 import { LedLightComponent } from '@shared/components/led-light.component';
-import { TbJsonToStringDirective } from "@shared/components/directives/tb-json-to-string.directive";
-import { JsonObjectEditDialogComponent } from "@shared/components/dialog/json-object-edit-dialog.component";
+import { TbJsonToStringDirective } from '@shared/components/directives/tb-json-to-string.directive';
+import { JsonObjectEditDialogComponent } from '@shared/components/dialog/json-object-edit-dialog.component';
 import { HistorySelectorComponent } from './components/time/history-selector/history-selector.component';
 import { TbTemplatePipe } from './pipe/public-api';
 

ui-ngx/src/polyfills.ts

@@ -94,7 +94,7 @@ import { TbAnalogueLinearGauge } from '@home/components/widget/lib/analogue-line
 import { TbCanvasDigitalGauge } from '@home/components/widget/lib/digital-gauge';
 import { TbMapWidgetV2 } from '@home/components/widget/lib/maps/map-widget2';
 import { TbTripAnimationWidget } from '@app/modules/home/components/widget/trip-animation/trip-animation.component';
- 
+
 import * as tinycolor_ from 'tinycolor2';
 
 const tinycolor = tinycolor_;