Web SDK documentation
  1. Components
  2. ContextControlsComponent

File

global-context/integration/context-controls/context-controls.component.ts

Metadata

selector c8y-context-controls
standalone true
imports ReactiveFormsModule DateTimeContextPickerComponent AggregationPickerComponent AutoRefreshControlComponent IconDirective C8yTranslatePipe TooltipModule
template 
<form
  class="d-flex gap-16 p-l-16 p-r-16 p-b-8 inner-scroll h-auto min-width-0 widget-controls"
  [formGroup]="form"
>
  <div class="input-group w-auto">
    @if (visibleControls().includes('aggregation')) {
      <c8y-aggregation-picker
        formControlName="aggregation"
        [disabledAggregations]="disabledAggregations()"
        [resetToDefault]="true"
      >
      </c8y-aggregation-picker>
    }

    @if (visibleControls().includes('autoRefresh')) {
      <c8y-auto-refresh-control
        formControlName="isAutoRefreshEnabled"
        [autoRefreshSeconds]="autoRefreshSeconds()"
        [isLoading]="isLoading()"
        (refresh)="onRefresh()"
      >
      </c8y-auto-refresh-control>
    }

    @if (visibleControls().includes('time')) {
      <c8y-date-time-context-picker
        style="margin-left: -1px"
        formControlName="dateTimeContext"
        [config]="dateTimePickerConfig()"
      >
      </c8y-date-time-context-picker>
    }

    @if (visibleControls().includes('refresh')) {
      <div class="input-group-btn">
        <button
          class="btn btn-default"
          [attr.aria-label]="'Refresh' | translate"
          [tooltip]="'Refresh' | translate"
          placement="bottom"
          container="body"
          type="button"
          [delay]="500"
          [disabled]="isLoading()"
          (click)="onRefresh()"
          data-cy="widget-controls--refresh-button"
        >
          <i [class.icon-spin]="isLoading()" [c8yIcon]="'refresh'"></i>
        </button>
      </div>
    }
  </div>
</form>

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor()

Inputs

config
Type : GlobalContextState
Required :  true
controls
Type : PresetName | PresetDefinition
Default value : PRESET_NAME.DEFAULT
displayMode
Type : DisplayMode
Default value : GLOBAL_CONTEXT_DISPLAY_MODE.DASHBOARD
isLoading
Type : boolean
Default value : false

Outputs

configChange
Type : { context: GlobalContextState; diff: GlobalContextState }
refresh
Type : void

Methods

onRefresh
onRefresh()
Returns : void

Properties

autoRefreshSeconds
Type : unknown
Default value : computed( () => this.config().refreshInterval || GLOBAL_CONTEXT_DEFAULTS.REFRESH_INTERVAL )
dateTimePickerConfig
Type : unknown
Default value : computed(() => { const refreshOption = this.config().refreshOption; return refreshOption === REFRESH_OPTION.HISTORY ? { showDateFrom: true, showDateTo: true } : { showDateFrom: true, showDateTo: false }; })
disabledAggregations
Type : unknown
Default value : computed((): AggregationOptionStatus => { const dateCtx = this.config().dateTimeContext; if (!dateCtx) return {}; const [from, to] = this.parseDateRange(dateCtx); return this.aggregationValidationService.getDisabledAggregations([from, to]); })
form
Type : FormGroup
visibleControls
Type : unknown
Default value : computed(() => { const controlsInput = this.controls(); const presetDef = typeof controlsInput === 'string' ? CONTROL_PRESETS[controlsInput] : controlsInput; const baseControls = presetDef[this.displayMode()]; const refreshOption = this.config().refreshOption || REFRESH_OPTION.LIVE; const filteredControls = applyModeConstraints(baseControls, refreshOption); // Normalize LIVE_TIME/HISTORY_TIME to 'time' for template return filteredControls.map(c => c === CONTEXT_FEATURE.LIVE_TIME || c === CONTEXT_FEATURE.HISTORY_TIME ? 'time' : c ); })

Visible controls for the template. LIVE_TIME and HISTORY_TIME are normalized to 'time' for template simplicity.

results matching ""

    No results matching ""