trip-animation.component.ts
3.11 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import { Component, OnInit, Input, ViewChild, AfterViewInit, ChangeDetectorRef } 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 { interpolateArray } from '../lib/maps/maps-utils';
import tinycolor from "tinycolor2";
import { initSchema, addToSchema, addGroupInfo } from '@app/core/schema-utils';
import { tripAnimationSchema } from '../lib/maps/schemes';
import L from 'leaflet';
@Component({
selector: 'trip-animation',
templateUrl: './trip-animation.component.html',
styleUrls: ['./trip-animation.component.scss']
})
export class TripAnimationComponent implements OnInit, AfterViewInit {
@Input() ctx;
@ViewChild('map') mapContainer;
mapWidget: MapWidgetController;
historicalData;
intervals;
normalizationStep = 1000;
interpolatedData = [];
widgetConfig;
settings;
constructor(private cd: ChangeDetectorRef) { }
ngOnInit(): void {
this.widgetConfig = this.ctx.widgetConfig;
const settings = {
normalizationStep: 1000,
buttonColor: tinycolor(this.widgetConfig.color).setAlpha(0.54).toRgbString(),
disabledButtonColor: tinycolor(this.widgetConfig.color).setAlpha(0.3).toRgbString(),
rotationAngle: 0
}
this.settings = { ...settings, ...this.ctx.settings };
//this.ctx.settings = settings;
console.log("TripAnimationComponent -> ngOnInit -> this.ctx.settings", this.ctx.settings)
let subscription = this.ctx.subscriptions[Object.keys(this.ctx.subscriptions)[0]];
if (subscription) subscription.callbacks.onDataUpdated = (updated) => {
this.historicalData = parseArray(this.ctx.data);
this.historicalData.forEach(ds => ds.forEach(el => {
el.longitude += (Math.random() - 0.5)
el.latitude += (Math.random() - 0.5)
}));
this.calculateIntervals();
this.timeUpdated(this.intervals[0]);
this.cd.detectChanges();
this.mapWidget.map.map.invalidateSize();
}
}
ngAfterViewInit() {
this.mapWidget = new MapWidgetController(MapProviders.openstreet, false, this.ctx, this.mapContainer.nativeElement);
}
timeUpdated(time) {
const currentPosition = this.interpolatedData.map(dataSource => dataSource[time]);
this.mapWidget.map.updateMarkers(currentPosition);
}
calculateIntervals() {
this.historicalData.forEach((dataSource, index) => {
this.intervals = [];
for (let time = dataSource[0]?.time; time < dataSource[dataSource.length - 1]?.time; time += this.normalizationStep) {
this.intervals.push(time);
}
this.intervals.push(dataSource[dataSource.length - 1]?.time);
this.interpolatedData[index] = interpolateArray(dataSource, this.intervals);
});
}
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;