File

libs/time/src/lib/auto-update-timespan/auto-update-timespan.component.ts

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

Inputs

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.

Outputs

onChangeTimespan
Type : EventEmitter<Timespan>

Methods

Private startTimer
startTimer()
Returns : void
Public toggleUpdateTimeinterval
toggleUpdateTimeinterval()
Returns : void
Public updateTimespan
updateTimespan()
Returns : void

Properties

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>

./auto-update-timespan.component.css

Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""