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

UI: Fixed bug trip animation widget after change speed or change time to the time slider

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2021-01-20 19:19:47 +02:00
parent c1223b0c10
commit 758ce9f03e
2 changed files with 31 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
View File

@ -24,7 +24,7 @@
<mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_previous</mat-icon>
</button>
<div fxLayout="column" fxFlex="100">
<mat-slider [(ngModel)]="index" [min]="minTimeIndex" [max]="maxTimeIndex" (change)="changeIndex()">
<mat-slider [(ngModel)]="index" [min]="minTimeIndex" [max]="maxTimeIndex" (input)="changeIndex($event.value)">
</mat-slider>
<div class="panel-timer">
<span *ngIf="this.currentTime">{{ this.currentTime | date:'medium'}}</span>
@ -47,7 +47,7 @@
pause_circle_outline
</mat-icon>
</button>
<mat-select [(ngModel)]="speed" (selectionChange)="reeneble()" class="speed-select" aria-label="Speed selector">
<mat-select [(ngModel)]="speed" (selectionChange)="reInit()" class="speed-select" aria-label="Speed selector">
<mat-option [value]="speedValue" *ngFor="let speedValue of speeds">{{speedValue}} </mat-option>
</mat-select>
</div>

58
ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.ts
View File

@ -14,7 +14,7 @@
/// limitations under the License.
///
import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
import { interval } from 'rxjs';
import { filter } from 'rxjs/operators';
import { HistorySelectSettings } from '@app/modules/home/components/widget/lib/maps/map-models';
@ -24,9 +24,9 @@ import { HistorySelectSettings } from '@app/modules/home/components/widget/lib/m
templateUrl: './history-selector.component.html',
styleUrls: ['./history-selector.component.scss']
})
export class HistorySelectorComponent implements OnInit, OnChanges {
export class HistorySelectorComponent implements OnChanges {
@Input() settings: HistorySelectSettings
@Input() settings: HistorySelectSettings;
@Input() minTime: number;
@Input() maxTime: number;
@Input() step = 1000;
@ -47,9 +47,6 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
constructor(private cd: ChangeDetectorRef) { }
ngOnInit(): void {
}
ngOnChanges() {
this.maxTimeIndex = Math.ceil((this.maxTime - this.minTime) / this.step);
this.currentTime = this.minTime === Infinity ? null : this.minTime;
@ -57,34 +54,34 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
play() {
this.playing = true;
if (!this.interval)
if (!this.interval) {
this.interval = interval(1000 / this.speed)
.pipe(
filter(() => this.playing)).subscribe(() => {
this.index++;
this.currentTime = this.minTime + this.index * this.step;
if (this.index <= this.maxTimeIndex) {
this.cd.detectChanges();
this.timeUpdated.emit(this.currentTime);
}
else {
this.interval.complete();
}
}, err => {
console.error(err);
}, () => {
this.currentTime = this.index = this.minTimeIndex;
this.playing = false;
this.interval = null;
filter(() => this.playing)
).subscribe(() => {
this.index++;
this.currentTime = this.minTime + this.index * this.step;
if (this.index <= this.maxTimeIndex) {
this.cd.detectChanges();
});
this.timeUpdated.emit(this.currentTime);
} else {
this.playing = false;
this.interval.complete();
this.cd.detectChanges();
}
}, err => {
console.error(err);
}, () => {
this.interval = null;
});
}
}
reeneble() {
if (this.playing) {
const position = this.index;
reInit() {
if (this.interval) {
this.interval.complete();
this.index = position;
}
if (this.playing) {
this.play();
}
}
@ -138,8 +135,9 @@ export class HistorySelectorComponent implements OnInit, OnChanges {
this.pause();
}
changeIndex() {
this.currentTime = this.minTime + this.index * this.step;
changeIndex(index: number) {
this.index = index;
this.currentTime = this.minTime + index * this.step;
this.timeUpdated.emit(this.currentTime);
}
}