Artem Halushko
7 years ago
10 changed files with 378 additions and 131 deletions
@ -1,2 +1,4 @@ |
|||||
<div class="map" #map ></div> |
<div class="map" #map ></div> |
||||
<tb-history-selector [settings]="ctx.settings"></tb-history-selector> |
<div>{{historicalData?.lenth}}</div> |
||||
|
<tb-history-selector *ngIf="historicalData" [settings]="ctx.settings" [intervals]="intervals" |
||||
|
(onTimeUpdated)="timeUpdated($event)"></tb-history-selector> |
||||
|
|||||
@ -1,22 +1,161 @@ |
|||||
import { Component, OnInit, Input } from '@angular/core'; |
import { Component, OnInit, OnChanges, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core'; |
||||
|
import { interval } from 'rxjs'; |
||||
|
import { filter, tap } from 'rxjs/operators'; |
||||
|
|
||||
@Component({ |
@Component({ |
||||
selector: 'tb-history-selector', |
selector: 'tb-history-selector', |
||||
templateUrl: './history-selector.component.html', |
templateUrl: './history-selector.component.html', |
||||
styleUrls: ['./history-selector.component.scss'] |
styleUrls: ['./history-selector.component.scss'] |
||||
}) |
}) |
||||
export class HistorySelectorComponent implements OnInit { |
export class HistorySelectorComponent implements OnInit, OnChanges { |
||||
|
|
||||
@Input() settings |
@Input() settings |
||||
|
@Input() intervals = []; |
||||
|
|
||||
animationTime |
@Output() onTimeUpdated = new EventEmitter(); |
||||
|
|
||||
|
animationTime; |
||||
|
minTimeIndex = 0; |
||||
|
maxTimeIndex = 0; |
||||
|
speed = 1; |
||||
|
index = 0; |
||||
|
playing = false; |
||||
|
interval; |
||||
|
|
||||
constructor() { } |
|
||||
|
constructor(private cd: ChangeDetectorRef) { } |
||||
|
|
||||
ngOnInit(): void { |
ngOnInit(): void { |
||||
console.log(this.settings); |
} |
||||
|
|
||||
|
ngOnChanges() { |
||||
|
this.maxTimeIndex = this.intervals?.length - 1; |
||||
|
} |
||||
|
|
||||
|
play() { |
||||
|
this.playing = true; |
||||
|
this.interval = interval(1000 / this.speed) |
||||
|
.pipe( |
||||
|
filter(() => this.playing), |
||||
|
tap(() => this.index++)).subscribe(() => { |
||||
|
if (this.index < this.maxTimeIndex) { |
||||
|
this.cd.detectChanges(); |
||||
|
this.onTimeUpdated.emit(this.intervals[this.index]); |
||||
|
} |
||||
|
else { |
||||
|
this.interval.complete(); |
||||
|
} |
||||
|
}, err => { |
||||
|
console.log(err); |
||||
|
}, () => { |
||||
|
this.index = this.minTimeIndex; |
||||
|
this.playing = false; |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
pause() { |
||||
|
this.playing = false; |
||||
|
} |
||||
|
/* |
||||
|
setSpeed() { |
||||
|
if (this.interval) this.interval.unsubscribe(); |
||||
|
this.interval = interval(1000 / this.speed) |
||||
|
.pipe( |
||||
|
takeWhile(() => this.index < this.maxTimeIndex), |
||||
|
filter(() => this.play), |
||||
|
tap(() => this.index++)) |
||||
|
.subscribe(() => { |
||||
|
console.log(this.intervals); |
||||
|
|
||||
|
this.onTimeUpdated.emit(this.intervals[this.index]); |
||||
|
|
||||
|
}, err => { |
||||
|
console.log(err); |
||||
|
}, () => { |
||||
|
this.index = this.minTimeIndex; |
||||
|
this.play = false; |
||||
|
}) |
||||
|
}*/ |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
/* |
||||
|
|
||||
|
playMove(play) { |
||||
|
if (play && this.isPlaying) return; |
||||
|
if (play || this.isPlaying) this.isPlaying = true; |
||||
|
if (this.isPlaying) { |
||||
|
moveInc(1); |
||||
|
this.timeout = $timeout(function () { |
||||
|
this.playMove(); |
||||
|
}, 1000 / this.speed) |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
moveNext() { |
||||
|
this.stopPlay(); |
||||
|
if (this.staticSettings.usePointAsAnchor) { |
||||
|
let newIndex = this.maxTimeIndex; |
||||
|
for (let index = this.index + 1; index < this.maxTimeIndex; index++) { |
||||
|
if (this.trips.some(function (trip) { |
||||
|
return calculateCurrentDate(trip.timeRange, index).hasAnchor; |
||||
|
})) { |
||||
|
newIndex = index; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
this.moveToIndex(newIndex); |
||||
|
} else moveInc(1); |
||||
|
}; |
||||
|
|
||||
|
movePrev() { |
||||
|
this.stopPlay(); |
||||
|
if (this.staticSettings.usePointAsAnchor) { |
||||
|
let newIndex = this.minTimeIndex; |
||||
|
for (let index = this.index - 1; index > this.minTimeIndex; index--) { |
||||
|
if (this.trips.some(function (trip) { |
||||
|
return calculateCurrentDate(trip.timeRange, index).hasAnchor; |
||||
|
})) { |
||||
|
newIndex = index; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
this.moveToIndex(newIndex); |
||||
|
} else moveInc(-1); |
||||
|
}; |
||||
|
|
||||
|
moveStart = function () { |
||||
|
this.stopPlay(); |
||||
|
this.moveToIndex(this.minTimeIndex); |
||||
|
}; |
||||
|
|
||||
|
moveEnd = function () { |
||||
|
this.stopPlay(); |
||||
|
this.moveToIndex(this.maxTimeIndex); |
||||
|
}; |
||||
|
|
||||
|
stopPlay = function () { |
||||
|
if (this.isPlaying) { |
||||
|
this.isPlaying = false; |
||||
|
$timeout.cancel(this.timeout); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
moveInc(inc) { |
||||
|
let newIndex = this.index + inc; |
||||
|
this.moveToIndex(newIndex); |
||||
|
} |
||||
|
|
||||
|
moveToIndex(newIndex) { |
||||
|
if (newIndex > this.maxTimeIndex || newIndex < this.minTimeIndex) return; |
||||
|
this.index = newIndex; |
||||
|
this.animationTime = this.minTime + this.index * this.staticSettings.normalizationStep; |
||||
|
recalculateTrips(); |
||||
|
} |
||||
|
*/ |
||||
|
recalculateTrips() { |
||||
|
|
||||
} |
} |
||||
|
|
||||
} |
} |
||||
|
|||||
Loading…
Reference in new issue