global-context/features/refresh/auto-refresh/auto-refresh-control.component.ts

Description

Auto-refresh toggle control with countdown timer.

Displays a toggle button that enables/disables automatic refresh with a visual countdown showing time until next refresh. Integrates with Angular forms via ControlValueAccessor.

Implements

AfterViewInit OnDestroy ControlValueAccessor

Example

Metadata

changeDetection ChangeDetectionStrategy.OnPush

providers )

selector c8y-auto-refresh-control

standalone true

imports

CountdownIntervalModule

C8yTranslatePipe

TooltipModule

IconDirective

AsyncPipe

templateVariables

`autoRefreshTooltip`	`(isEnabled ? DISABLE_AUTO_REFRESH : ENABLE_AUTO_REFRESH) \| translate`
`countdownInterval`	`(autoRefreshSeconds$ \| async) ?? DEFAULT_INTERVAL_VALUE`

templateUrl ./auto-refresh-control.component.html

Relationships

Used by

No results matching.

Depends on

CountdownIntervalModule
C8yTranslatePipe
TooltipModule
IconDirective
AsyncPipe
)
AfterViewInit
OnDestroy
ControlValueAccessor

@let autoRefreshTooltip = (isEnabled ? DISABLE_AUTO_REFRESH : ENABLE_AUTO_REFRESH) | translate;
@let countdownInterval = (autoRefreshSeconds$ | async) ?? DEFAULT_INTERVAL_VALUE;

<button
  [class.btn]="disableCounter"
  [class.btn-link]="disableCounter"
  [class.c8y-realtime]="disableCounter"
  [class.toggle-countdown]="!disableCounter"
  [attr.aria-label]="autoRefreshTooltip"
  [tooltip]="tooltipTpl"
  placement="bottom"
  container="body"
  [delay]="500"
  (click)="toggleIntervalRefresh(); $event.stopPropagation()"
  [adaptivePosition]="false"
  [disabled]="isLoading"
  mode
  data-cy="global-date-context--Auto-refresh-toggle"
>
  <div class="d-flex a-i-center">
    @if (!disableCounter) {
      <c8y-countdown-interval
        #countdown
        [hidden]="!isEnabled"
        [countdownInterval]="countdownInterval"
        [config]="countdownIntervalConfig"
      ></c8y-countdown-interval>
    }

    @if (!isEnabled) {
      <i
        class="icon-20 text-primary"
        [c8yIcon]="'pause-circle'"
        data-cy="global-date-context--Auto-refresh-toggle-pause"
      ></i>
    } @else if (disableCounter) {
      <span class="c8y-pulse m-0 active"></span>
    }
  </div>
</button>

<ng-template #tooltipTpl>
  {{ autoRefreshTooltip }}
</ng-template>