WIP on tooltips

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

@@ -92,7 +92,7 @@ export default abstract class LeafletMap {
         L.control['addmarker']({ position: 'topright' }).addTo(this.map);
     }
 
-    inited() {
+    inited() {///!!!!
         return !!this.map;
     }
 

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

@@ -34,6 +34,8 @@ import { parseFunction, parseArray, parseData } from '@app/core/utils';
 import { initSchema, addToSchema, mergeSchemes, addCondition, addGroupInfo } from '@app/core/schema-utils';
 import { AttributeScope, EntityId } from '@app/shared/public-api';
 import { forkJoin } from 'rxjs';
+import { WidgetContext } from '@app/modules/home/models/widget-component.models';
+import { AttributeService } from '@app/core/public-api';
 
 export class MapWidgetController implements MapWidgetInterface {
 
@@ -43,7 +45,7 @@ export class MapWidgetController implements MapWidgetInterface {
     data;
     settings;
 
-    constructor(public mapProvider: MapProviders, private drawRoutes, public ctx, $element) {
+    constructor(public mapProvider: MapProviders, private drawRoutes, public ctx: WidgetContext, $element) {
         if (this.map) {
             this.map.map.remove();
             delete this.map;
@@ -67,6 +69,8 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     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'));
         forkJoin(
             this.data.filter(data => !!e[data.dataKey.name])

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

@@ -17,7 +17,7 @@
 -->
 <div class="trip-animation-widget">
     <div class="trip-animation-label-container" *ngIf="settings.showLabel">
-    {{settings.label | tbParseTemplate: activeTrip}}
+        {{settings.label | tbParseTemplate: activeTrip}}
     </div>
     <div class="trip-animation-container" layout="column">
         <div class="map" #map></div>
@@ -28,7 +28,7 @@
             </button>
         </div>
         <div class="trip-animation-tooltip md-whiteframe-z4" layout="column"
-            [ngClass]="{ 'trip-animation-tooltip-hidden':!settings.showTooltip}" [innerHTML]="mainTooltip"
+            [ngClass]="{'trip-animation-tooltip-hidden':!visibleTooltip}" [innerHTML]="mainTooltip"
             [ngStyle]="{'background-color': settings.tooltipColor, 'opacity': settings.tooltipOpacity, 'color': settings.tooltipFontColor}">
         </div>
     </div>

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

@@ -19,12 +19,14 @@ import _ from 'lodash';
 import tinycolor from "tinycolor2";
 import { interpolateOnPointSegment } from 'leaflet-geometryutil';
 
-import { Component, OnInit, Input, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, AfterViewInit, ChangeDetectorRef, SecurityContext } from '@angular/core';
 import { MapWidgetController, TbMapWidgetV2 } from '../lib/maps/map-widget2';
 import { MapProviders } from '../lib/maps/map-models';
-import { parseArray } from '@app/core/utils';
+import { parseArray, parseTemplate, safeExecute } from '@app/core/utils';
 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';
 
 
 @Component({
@@ -34,7 +36,7 @@ import { tripAnimationSchema } from '../lib/maps/schemes';
 })
 export class TripAnimationComponent implements OnInit, AfterViewInit {
 
-  @Input() ctx;
+  @Input() ctx: WidgetConfig;
 
   @ViewChild('map') mapContainer;
 
@@ -45,10 +47,11 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   interpolatedData = [];
   widgetConfig;
   settings;
-  mainTooltip;
+  mainTooltip = '';
+  visibleTooltip = false;
   activeTrip;
 
-  constructor(private cd: ChangeDetectorRef) { }
+  constructor(private cd: ChangeDetectorRef,private sanitizer: DomSanitizer) { }
 
   ngOnInit(): void {
     this.widgetConfig = this.ctx.widgetConfig;
@@ -74,6 +77,7 @@ export class TripAnimationComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     let ctxCopy = _.cloneDeep(this.ctx);
     ctxCopy.settings.showLabel = false;
+    ctxCopy.settings.showTooltip = false;
     this.mapWidget = new MapWidgetController(MapProviders.openstreet, false, ctxCopy, this.mapContainer.nativeElement);
   }
 
@@ -99,6 +103,10 @@ 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)) 
+      this.visibleTooltip = !this.visibleTooltip;
   }
 
   interpolateArray(originData, interpolatedIntervals) {