libs/control/src/lib/refresh-button/refresh-button.component.ts
selector | n52-refresh-button |
templateUrl | ./refresh-button.component.html |
Properties |
|
Methods |
|
Inputs |
Outputs |
constructor(settings: SettingsService
|
||||||
Parameters :
|
refreshInterval | |
Type : number
|
|
toggled | |
Type : boolean
|
|
refreshing | |
Type : EventEmitter<boolean>
|
|
Private evaluteRefreshing |
evaluteRefreshing()
|
Returns :
void
|
Public ngOnChanges | ||||||
ngOnChanges(changes: SimpleChanges)
|
||||||
Parameters :
Returns :
void
|
Public ngOnInit |
ngOnInit()
|
Returns :
void
|
Private refresh |
refresh()
|
Returns :
void
|
Private startRefreshInterval |
startRefreshInterval()
|
Returns :
void
|
Private stopRefreshInterval |
stopRefreshInterval()
|
Returns :
void
|
Public toggle |
toggle()
|
Returns :
void
|
Private interval |
Type : NodeJS.Timer
|
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Settings, SettingsService } from '@helgoland/core';
@Component({
selector: 'n52-refresh-button',
templateUrl: './refresh-button.component.html'
})
export class RefreshButtonComponent implements OnChanges, OnInit {
@Input()
public refreshInterval: number;
@Input()
public toggled: boolean;
@Output()
public refreshing: EventEmitter<boolean> = new EventEmitter();
private interval: NodeJS.Timer;
constructor(
protected settings: SettingsService<Settings>
) {
if (!this.refreshInterval) {
this.refreshInterval = this.settings.getSettings().refreshDataInterval
? this.settings.getSettings().refreshDataInterval : 60;
}
}
public ngOnInit(): void {
this.evaluteRefreshing();
}
public ngOnChanges(changes: SimpleChanges): void {
if (changes.toggled) {
this.evaluteRefreshing();
}
}
public toggle() {
this.toggled = !this.toggled;
if (this.toggled) { this.refresh(); }
this.evaluteRefreshing();
}
private evaluteRefreshing() {
if (this.toggled) {
this.startRefreshInterval();
} else {
this.stopRefreshInterval();
}
}
private startRefreshInterval() {
this.interval = setInterval(() => this.refresh(), this.refreshInterval * 1000);
}
private stopRefreshInterval() {
clearInterval(this.interval);
}
private refresh() {
this.refreshing.emit(true);
}
}
<button type="button" class="btn" (click)="toggle()" [ngClass]="toggled ? 'btn-primary' : 'btn-light'">
<i class="fa fa-refresh" aria-hidden="true"></i>
<span *ngIf="toggled">active</span>
</button>