File

widgets/implementations/alarms/alarm-widget-alarms-reload.component.ts

Implements

OnInit AfterViewInit OnChanges OnDestroy

Metadata

selector	`c8y-alarm-widget-alarms-reload`
templateUrl	`./alarm-widget-alarms-reload.component.html`

Index

Constructor

constructor(alarmsViewService: AlarmsViewService, cdRef: ChangeDetectorRef, translateService: TranslateService, widgetGlobalAutoRefreshService: WidgetGlobalAutoRefreshService)

Parameters :

Name	Type	Optional
alarmsViewService	`AlarmsViewService`	No
cdRef	`ChangeDetectorRef`	No
translateService	`TranslateService`	No
widgetGlobalAutoRefreshService	`WidgetGlobalAutoRefreshService`	No

Inputs

config

Type : AlarmListWidgetConfig

Alarm widgets config.

isDisabled

Type : boolean

Default value : false

isIntervalRefresh

Type : boolean

State of this boolean depends on an Application Options "alarmsRefreshType" setting.

isLoading

Type : BehaviorSubject<boolean>

Current isLoading state. Based on it next countdown cycle is being started.

isScrolling

Type : boolean

Indicates whether the alarm list is being scrolled or not.

refreshInterval

Type : number

Current refresh interval set in a widget config.

Outputs

onCountdownEnded

Type : EventEmitter

Indicates that a countdown cycle has ended.

onRealTimeToggleChanged

Type : EventEmitter<boolean>

Emitted to indicate that the widgets realtime button state has changed.

Methods

autoRefreshList

autoRefreshList()

Stops the countdown and triggers a refresh action. This function is responsible for halting the countdown interval component's operation. After stopping the countdown, it emits an onCountdownEnded event. This event is used to inform external components that the countdown has ended, typically prompting them to reload or refresh their data.

Returns : void

countdownEnded

countdownEnded()

Wrapper method where it's name better describes a context where it was called.

Returns : void

disableCountdown

disableCountdown()

Disables and hides the countdown timer.

This method stops the ongoing countdown process by unsubscribing from countdownSubscription and stopping the countdownIntervalComponent if it exists. It then hides the countdown timer by setting hideCountdown to true. This method encapsulates the logic required to halt and conceal the countdown timer.

Returns : void

enableCountdown

enableCountdown()

Enables and starts the countdown timer.

This method makes the countdown visible (hideCountdown is set to false) and then starts the countdown process. It ensures the countdown timer is updated immediately by triggering change detection with cdRef.detectChanges() before starting the countdown. This method encapsulates the logic required to initiate the countdown timer.

Returns : void

getRealtimeIconTitle

getRealtimeIconTitle()

Sets the tooltip message for a new realtime alarm indicator.

Returns : string

Tooltip message.

handleScrolling

handleScrolling()

Manages the countdown timer's visibility and state in response to user scrolling.

This method toggles the countdown timer based on the user's scrolling behavior. It uses the disableCountdown and enableCountdown methods for handling the countdown state.

If the user is scrolling down while the countdown is visible (isScrolling is true and hideCountdown is false), disableCountdown is called to stop and hide the countdown, and isIntervalRefreshToggleOn is set to false.
If the user has stopped scrolling, the countdown subscription is closed, and the countdown is hidden (!isScrolling, countdownSubscription?.closed, hideCountdown), enableCountdown is called to show and restart the countdown, and isIntervalRefreshToggleOn is set to true.

Returns : void

ngAfterViewInit

ngAfterViewInit()

Returns : void

ngOnChanges

ngOnChanges(changes: SimpleChanges)

Parameters :

Name	Type	Optional
changes	`SimpleChanges`	No

Returns : void

ngOnDestroy

ngOnDestroy()

Returns : void

ngOnInit

ngOnInit()

Returns : void

onToggleCountdownButtonState

onToggleCountdownButtonState($event: MouseEvent)

Handles the toggle state of the countdown on button click.

This method is triggered by a mouse event, typically a click on the countdown toggle button. It toggles isIntervalRefreshToggleOn to reflect the current state of the countdown timer.

If isIntervalRefreshToggleOn is set to false, indicating that the countdown should be stopped, disableCountdown is called, and manuallyDisabledCountdown is set to true.
If isIntervalRefreshToggleOn is true and the countdown subscription is closed, indicating that the countdown can be started, enableCountdown is called, and manuallyDisabledCountdown is set to false.

Parameters :

Name	Type	Optional	Description
$event	`MouseEvent`	No	The MouseEvent that triggered this method.

Returns : void

reload

reload()

Returns : void

startCountdown

startCountdown()

This function listens for changes in the isLoading observable, filtering out any truthy values. Once a falsy value is detected (indicating that loading has finished), it attempts to start the countdown.

IMPORTANT: If the widget's configuration (refreshInterval, check template) is not set prior to executing countdownIntervalComponent?.start, the countdown interval will not start!

Returns : void

toggleRealtimeState

toggleRealtimeState()

Toggles the real-time state of the component.

This method switches the isRealtimeToggleOn state between true and false. When the state is toggled, it emits the current state through onRealTimeToggleChanged event. It also updates the realtimeIconTitle based on the new state.

Returns : void

Properties

countdownIntervalComponent

Type : CountdownIntervalComponent

Decorators :


                            @ViewChild(CountdownIntervalComponent, {static: false})

countdownSubscription

Type : Subscription

Holds the subscription to a countdown observable.

globalAutoRefreshEnabled

Type : boolean

hideCountdown

Type : boolean

Controls the visibility of the countdown timer component in the current component's UI.

isIntervalRefreshToggleOn

Type : boolean

Indicates the current state of an interval refresh toggle button.

isNewAlarmMessageCleared

Default value : true

Indicates whether the countdown has been cleared already.

isRealtimeToggleOn

Type : boolean

Indicates the current state of an realtime toggle button.

manuallyDisabledCountdown

Default value : false

Indicates whether the countdown has been manually disabled by the user.

Readonly REALTIME_UPDATE_ALARMS_MESSAGE

Default value : this.alarmsViewService.REALTIME_UPDATE_ALARMS_MESSAGE

realtimeIconTitle

Type : string

Tooltip for a new realtime alarm indicator.

toggleCountdownButtonTooltipText

Type : string

<div
  class="m-l-auto d-flex p-t-4 p-b-4"
  *ngIf="!globalAutoRefreshEnabled"
>
  <div class="m-l-auto d-flex a-i-center">
    <label
      class="m-b-0 m-r-8 text-label-small text-truncate flex-no-shrink"
      title=" {{ 'Auto refresh' | translate }}"
      *ngIf="isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled"
    >
      {{ 'Auto refresh' | translate }}
    </label>
    <div class="input-group">
      <label
        class="toggle-countdown"
        [class.toggle-countdown-disabled]="isDisabled"
        [attr.aria-label]="toggleCountdownButtonTooltipText"
        [tooltip]="toggleCountdownButtonTooltipText"
        placement="bottom"
        *ngIf="isIntervalRefresh && refreshInterval && config.isAutoRefreshEnabled"
        [adaptivePosition]="false"
        [container]="'body'"
        [delay]="500"
      >
        <input
          type="checkbox"
          data-cy="c8y-alarms-widget--interval-toggle-button"
          (click)="onToggleCountdownButtonState($event)"
        />
        <c8y-countdown-interval
          *ngIf="isIntervalRefreshToggleOn"
          [countdownInterval]="refreshInterval"
          (countdownEnded)="countdownEnded()"
        ></c8y-countdown-interval>
        <i
          c8yIcon="pause"
          *ngIf="!isIntervalRefreshToggleOn"
        ></i>
      </label>

      <div class="input-group-btn">
        <button
          class="btn btn-default"
          [attr.aria-label]="'Refresh' | translate"
          [tooltip]="
            !isNewAlarmMessageCleared
              ? (REALTIME_UPDATE_ALARMS_MESSAGE | translate)
              : ('Refresh' | translate)
          "
          placement="bottom"
          type="button"
          [adaptivePosition]="false"
          [container]="'body'"
          [delay]="500"
          [disabled]="isDisabled || (isLoading | async)"
          (click)="reload()"
          data-cy="c8y-alarms-widget--reload-button"
        >
          <span
            class="tag tag--info m-r-8"
            *ngIf="!isNewAlarmMessageCleared"
          >
            {{ 'New alarms' | translate }}
          </span>
          <i
            c8yIcon="refresh"
            [ngClass]="{ 'icon-spin': isLoading | async }"
          ></i>
        </button>
      </div>
      <div
        class="input-group-btn input-group-btn--last"
        *ngIf="!isIntervalRefresh"
      >
        <button
          class="c8y-realtime btn btn-default"
          [attr.aria-label]="realtimeIconTitle"
          [tooltip]="realtimeIconTitle"
          placement="bottom"
          type="button"
          [container]="'body'"
          (click)="toggleRealtimeState()"
          [disabled]="isDisabled"
        >
          <span
            class="c8y-pulse m-0"
            [ngClass]="{
              active: isRealtimeToggleOn,
              inactive: !isRealtimeToggleOn
            }"
          ></span>
        </button>
      </div>
    </div>
  </div>
</div>

File

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Constructor

Inputs

Outputs

Methods

Properties

results matching ""

No results matching ""