File
Description
Component for configuring live mode settings
Stateless component that emits changes immediately
Index
Properties
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Accessors
|
|
|
|
context
|
Type : GlobalContextState | null
|
|
settings
|
Type : Partial | null
|
Outputs
|
contextChange
|
Type : Partial<GlobalContextState>
|
|
form
|
Type : ReturnType<unknown>
|
|
Readonly
REFRESH_POPOVER_MESSAGE
|
Type : unknown
|
Default value : gettext(
'The update method is determined by the widget type. Some widgets support real-time updates via WebSocket connection, while others use periodic refreshes.'
)
|
|
Readonly
TIME_RANGE_PICKER_POPOVER
|
Type : unknown
|
Default value : gettext(
'Sets a rolling time window relative to the current time. As time progresses, the window automatically shifts to maintain the selected duration, always showing the most recent data.'
)
|
Accessors
|
settings
|
getsettings()
|
setsettings(value: Partial | null)
|
Parameters :
| Name |
Type |
Optional |
| value |
Partial<GlobalContextSettings> | null
|
No
|
|
|
context
|
setcontext(value: GlobalContextState | null)
|
Parameters :
| Name |
Type |
Optional |
| value |
GlobalContextState | null
|
No
|
|
@if (form) {
@let SHOW_TIME_CONTEXT = settings.showTimeContext;
@let SHOW_AUTO_REFRESH = settings.showAutoRefresh;
<form [formGroup]="form">
<div class="content-flex-82">
<div class="col-5">
@if (SHOW_TIME_CONTEXT) {
<fieldset class="c8y-fieldset">
<legend>
<div class="standalone btn-icon-dot__item time-context m-r-4">
<i [c8yIcon]="'calendar'"></i>
</div>
{{ 'Date & time' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="TIME_RANGE_PICKER_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</legend>
<c8y-form-group class="m-b-4 p-t-16 p-b-16">
<c8y-date-time-context-picker
formControlName="dateTimeContext"
[config]="{ showDateTo: false, showDateFrom: true }"
></c8y-date-time-context-picker>
</c8y-form-group>
</fieldset>
}
</div>
<div class="col-3">
@if (SHOW_AUTO_REFRESH) {
<fieldset class="c8y-fieldset">
<legend class="d-flex">
<div class="standalone btn-icon-dot__item auto-refresh m-r-4">
<i [c8yIcon]="'refresh'"></i>
</div>
{{ 'Auto refresh' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="REFRESH_POPOVER_MESSAGE | translate"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</legend>
<c8y-form-group class="m-b-8 form-group-sm p-t-16 p-b-16">
<div class="d-flex gap-8 a-i-center">
<label class="c8y-switch c8y-switch--inline">
<input
type="checkbox"
#arInput
formControlName="isAutoRefreshEnabled"
/>
<span></span>
<span>
{{ 'Auto refresh enabled' | translate }}
</span>
</label>
</div>
</c8y-form-group>
</fieldset>
}
</div>
</div>
</form>
}