Web SDK documentation
  1. Components
  2. AlarmsIntervalRefreshComponent

File

alarms/alarms-interval-refresh.component.ts

Implements

OnInit AfterViewInit OnDestroy

Metadata

selector c8y-alarms-interval-refresh
templateUrl ./alarms-interval-refresh.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(fb: FormBuilder, alarmsViewService: AlarmsViewService)
Parameters :
Name Type Optional
fb FormBuilder No
alarmsViewService AlarmsViewService No

Inputs

alarmsListLoading$
Type : BehaviorSubject<boolean>

Controls the loading state of the alarms list reload button.
isDisabled
Type : boolean
Default value : false
isIntervalToggleEnabled
Type : boolean
  • Set the value of isIntervalEnabled in response to user interactions with the alarm list scroll.
  • This input setter allows you to control the isIntervalEnabled property, which is used to manage the state
  • of a toggle button. When a user scrolls through the alarms list, you can update the isIntervalEnabled value
  • using this setter.
  • @param value - A boolean value representing the new state of the isIntervalEnabled property.
    • true indicates that the interval is enabled.
    • false indicates that the interval is disabled.

Outputs

onCountdownEnded
Type : EventEmitter

Event emitter for notifying when a countdown timer has completed.

Methods

getTooltip
getTooltip()
Returns : any
ngAfterViewInit
ngAfterViewInit()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
resetCountdown
resetCountdown()
Returns : void
trackUserClickOnIntervalToggle
trackUserClickOnIntervalToggle(target: EventTarget)
Parameters :
Name Type Optional
target EventTarget No
Returns : void

Properties

countdownIntervalComponent
Type : CountdownIntervalComponent
Decorators :
@ViewChild(CountdownIntervalComponent)
Readonly DISABLE_AUTO_REFRESH
Default value : gettext('Disable auto refresh')
Readonly ENABLE_AUTO_REFRESH
Default value : gettext('Enable auto refresh')
Readonly refreshIntervalsInMilliseconds
Default value : this.alarmsViewService.DEFAULT_INTERVAL_VALUES
Readonly SECONDS_UNTIL_REFRESH
Default value : gettext('{{ seconds }} s')
toggleIntervalForm
Default value : this.initForm()

Accessors

isIntervalToggleEnabled
getisIntervalToggleEnabled()

This getter allows you to access the current state of the isIntervalEnabled property, which reflects the state of a toggle button. It retrieves the value from the associated form control, providing the current state of the toggle button.

Returns : boolean
setisIntervalToggleEnabled(value: boolean)
  • Set the value of isIntervalEnabled in response to user interactions with the alarm list scroll.
  • This input setter allows you to control the isIntervalEnabled property, which is used to manage the state
  • of a toggle button. When a user scrolls through the alarms list, you can update the isIntervalEnabled value
  • using this setter.
  • @param value - A boolean value representing the new state of the isIntervalEnabled property.
    • true indicates that the interval is enabled.
    • false indicates that the interval is disabled.
Parameters :
Name Type Optional Description
value boolean No
  • A boolean value representing the new state of the isIntervalEnabled property.
    • true indicates that the interval is enabled.
    • false indicates that the interval is disabled.
Returns : void 
<form
  class="d-flex a-i-center fit-w fit-h"
  [formGroup]="toggleIntervalForm"
>
  <label class="m-b-0 m-r-8 text-normal text-muted flex-no-shrink">
    {{ 'Auto refresh' | translate }}
  </label>
  <div class="input-group">
    <label
      class="toggle-countdown"
      [class.toggle-countdown-disabled]="isDisabled"
      [attr.aria-label]="getTooltip() | translate"
      [tooltip]="getTooltip() | translate"
      placement="bottom"
      [adaptivePosition]="false"
      [delay]="500"
    >
      <input
        type="checkbox"
        data-cy="c8y-alarms-interval-toggle"
        formControlName="intervalToggle"
        (click)="trackUserClickOnIntervalToggle($event.target)"
      />
      <c8y-countdown-interval
        *ngIf="isIntervalToggleEnabled"
        [countdownInterval]="toggleIntervalForm.value.refreshInterval"
        (countdownEnded)="onCountdownEnded.emit()"
      ></c8y-countdown-interval>
      <i
        c8yIcon="pause"
        *ngIf="!isIntervalToggleEnabled"
      ></i>
    </label>
    <div
      class="c8y-select-wrapper"
      *ngIf="!isDisabled"
    >
      <select
        class="form-control text-12"
        [attr.aria-label]="'Refresh interval in seconds' | translate"
        [tooltip]="'Refresh interval in seconds' | translate"
        placement="bottom"
        [adaptivePosition]="false"
        [delay]="500"
        [container]="'body'"
        formControlName="refreshInterval"
        data-cy="c8y-alarms-interval-selector"
      >
        <option
          [disabled]="isDisabled"
          *ngFor="let refreshInterval of refreshIntervalsInMilliseconds"
          [ngValue]="refreshInterval"
        >
          {{ SECONDS_UNTIL_REFRESH | translate: { seconds: refreshInterval / 1000 } }}
        </option>
      </select>
      <span></span>
    </div>
    <div class="input-group-btn">
      <button
        class="btn btn-default"
        style="border-left: 0"
        [attr.aria-label]="'Refresh' | translate"
        [tooltip]="'Refresh' | translate"
        placement="bottom"
        type="button"
        [adaptivePosition]="false"
        [delay]="500"
        [disabled]="isDisabled || (alarmsListLoading$ | async)"
        (click)="onCountdownEnded.emit()"
        data-cy="c8y-alarms-reload-button"
      >
        <i
          c8yIcon="refresh"
          [ngClass]="{ 'icon-spin': alarmsListLoading$ | async }"
        ></i>
      </button>
    </div>
  </div>
</form>

results matching ""

    No results matching ""