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> <mat-icon class="material-icons" [ngStyle]="{'color': settings.buttonColor}">skip_previous</mat-icon>
</button> </button>
<div fxLayout="column" fxFlex="100"> <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> </mat-slider>
<div class="panel-timer"> <div class="panel-timer">
<span *ngIf="this.currentTime">{{ this.currentTime | date:'medium'}}</span> <span *ngIf="this.currentTime">{{ this.currentTime | date:'medium'}}</span>
@ -47,7 +47,7 @@
pause_circle_outline pause_circle_outline
</mat-icon> </mat-icon>
</button> </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-option [value]="speedValue" *ngFor="let speedValue of speeds">{{speedValue}} </mat-option>
</mat-select> </mat-select>
</div> </div>

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

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