File

libs/control/src/lib/refresh-button/refresh-button.component.ts

Implements

OnChanges OnInit

Metadata

selector n52-refresh-button
templateUrl ./refresh-button.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(settings: SettingsService)
Parameters :
Name Type Optional
settings SettingsService<Settings> No

Inputs

refreshInterval
Type : number
toggled
Type : boolean

Outputs

refreshing
Type : EventEmitter<boolean>

Methods

Private evaluteRefreshing
evaluteRefreshing()
Returns : void
Public ngOnChanges
ngOnChanges(changes: SimpleChanges)
Parameters :
Name Type Optional
changes SimpleChanges No
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

Properties

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>
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""