File
Metadata
selector |
n52-auto-update-timespan |
styleUrls |
./auto-update-timespan.component.css |
templateUrl |
./auto-update-timespan.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
Outputs
|
|
Constructor
constructor(timeSrvc: Time)
|
|
Parameters :
Name |
Type |
Optional |
timeSrvc |
Time
|
No
|
|
currentTimespan
|
Type : Timespan
|
|
current Timespan to calculate new timespan
|
refreshInterval
|
Type : number
|
|
refresh interval in seconds
|
timeInterval
|
Type : number
|
|
optional timeinterval in seconds to be added to current timespan. If not set, the refreshInterval is selected.
|
Methods
Private
startTimer
|
startTimer()
|
|
|
Public
toggleUpdateTimeinterval
|
toggleUpdateTimeinterval()
|
|
|
Public
updateTimespan
|
updateTimespan()
|
|
|
Private
timer
|
Default value : false
|
|
Public
toggleAutoUpdate
|
Default value : false
|
|
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Required, Time, Timespan } from '@helgoland/core';
@Component({
selector: 'n52-auto-update-timespan',
templateUrl: './auto-update-timespan.component.html',
styleUrls: ['./auto-update-timespan.component.css']
})
export class AutoUpdateTimespanComponent {
/**
* optional timeinterval in seconds to be added to current timespan. If not set, the refreshInterval is selected.
*/
@Input()
public timeInterval: number;
/**
* current Timespan to calculate new timespan
*/
@Input()
public currentTimespan: Timespan;
/**
* refresh interval in seconds
*/
@Required @Input()
public refreshInterval: number;
@Output()
public onChangeTimespan: EventEmitter<Timespan> = new EventEmitter();
public toggleAutoUpdate = false;
private timer = false;
constructor(
protected timeSrvc: Time
) { }
public toggleUpdateTimeinterval() {
this.toggleAutoUpdate = !this.toggleAutoUpdate;
this.startTimer();
}
public updateTimespan() {
const stepSeconds = this.timeInterval || this.refreshInterval;
this.onChangeTimespan.emit(this.timeSrvc.stepForwardCustom(this.currentTimespan, stepSeconds * 1000));
}
private startTimer() {
if (this.toggleAutoUpdate) {
if (!this.timer) {
this.updateTimespan();
this.timer = true;
setTimeout(() => {
this.timer = false;
this.startTimer();
}, this.refreshInterval * 1000);
}
}
}
}
<div>
<button (click)="toggleUpdateTimeinterval()">Auto Refresh</button>{{toggleAutoUpdate}}
</div>
Legend
Html element with directive