dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP on tooltips

Browse Source
This commit is contained in:
Artem Halushko 2020-03-17 18:58:45 +02:00
parent 4336762831
commit 700a6fa1ff
4 changed files with 21 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -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])

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

@ -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>

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

@ -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) {