global-context/features/configuration/history-mode-configuration-controls/history-mode-configuration-controls.component.ts
Component for configuring history mode settings Stateless component that emits changes immediately
| changeDetection | ChangeDetectionStrategy.OnPush |
||||||||||||||
| host | { |
||||||||||||||
| selector | c8y-history-mode-configuration-controls |
||||||||||||||
| standalone | true |
||||||||||||||
| imports |
C8yTranslatePipe
TooltipModule
PopoverModule
|
||||||||||||||
| templateVariables |
|
||||||||||||||
| templateUrl | ./history-mode-configuration-controls.component.html |
C8yTranslatePipe
I18nModule
TooltipModule
ReactiveFormsModule
IconDirective
FormsModule
PopoverModule
FormGroupComponent
MessagesComponent
MessageDirective
DateTimePickerModule
NgClass
AggregationPickerComponent
AutoAggregationOptionsComponent
@if (currentForm) {
@let SHOW_TIME_CONTEXT = settings.showTimeContext;
@let SHOW_AGGREGATION = settings.showAggregation;
<form [formGroup]="currentForm">
<div class="content-flex-100">
<div
class="flex-grow"
[ngClass]="{ 'm-b-8': !SHOW_AGGREGATION }"
>
@if (SHOW_TIME_CONTEXT) {
@let dateTimeContext = currentForm.get('dateTimeContext');
@let tempDateFromValue = dateTimeContext.get('dateFrom')?.value;
@let tempDateToValue = dateTimeContext.get('dateTo')?.value;
@let fromErrors = dateFromErrors();
@let toErrors = dateToErrors();
<fieldset class="c8y-fieldset">
<legend>
<div class="standalone btn-icon-dot__item time-context m-r-4">
<i
class=""
[c8yIcon]="'calendar'"
></i>
</div>
{{ 'Date & time range' | 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="content-flex-71 d-flex a-i-center m-b-0 p-t-16">
<c8y-form-group
[class.has-error]="fromErrors"
class="form-group-sm d-flex a-i-center col-5 gap-8 flex-wrap"
>
<label
class="m-b-sm-0 text-nowrap"
style="min-width: 30px"
[title]="'From`date`' | translate"
for="dateFrom"
translate
>
From`date`
</label>
<c8y-date-time-picker
[class.has-error]="fromErrors"
id="dateFrom"
[maxDate]="tempDateToValue"
[placeholder]="'From`date`' | translate"
[formControl]="dateTimeContext.get('dateFrom')"
></c8y-date-time-picker>
<c8y-messages [show]="fromErrors">
<c8y-message
name="dateAfterRangeMax"
[text]="errorMessages.dateAfterRangeMax | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
<c8y-message
name="invalidDateRange"
[text]="errorMessages.invalidDateRange | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group
[class.has-error]="toErrors"
class="form-group-sm d-flex flex-wrap col-7 gap-8 a-i-center"
>
<label
class="m-b-sm-0 text-nowrap"
style="min-width: 30px"
[title]="'To`date`' | translate"
for="dateTo"
translate
>
To`date`
</label>
<c8y-date-time-picker
[class.has-error]="toErrors"
id="dateTo"
[minDate]="tempDateFromValue"
[placeholder]="'To`date`' | translate"
[formControl]="dateTimeContext.get('dateTo')"
></c8y-date-time-picker>
<button
class="btn btn-sm btn-default"
[title]="'Set to current time' | translate"
type="button"
(click)="setDateToNow()"
>
<i
class="m-r-4"
[c8yIcon]="'clock-o'"
></i>
{{ 'Now' | translate }}
</button>
<c8y-messages [show]="toErrors">
<c8y-message
name="dateBeforeRangeMin"
[text]="errorMessages.dateBeforeRangeMin | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="errorMessages.invalidDateTime | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</c8y-form-group>
</fieldset>
}
</div>
<div class="flex-grow">
@if (SHOW_AGGREGATION) {
<fieldset class="c8y-fieldset">
<legend>
<div class="standalone btn-icon-dot__item aggregation m-r-4">
<i [c8yIcon]="'input'"></i>
</div>
{{ 'Aggregation' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="AGGREGATION_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</legend>
<c8y-form-group class="p-t-16 m-b-4 p-b-16">
<c8y-aggregation-picker
formControlName="aggregation"
[layout]="'radio'"
[resetToDefault]="true"
[showAutoMode]="isTimeSeriesMigrated()"
[autoModeActive]="isAutoModeActive()"
[autoModeDisabled]="autoModeDisabled()"
[disabledAggregations]="disabledAggregations()"
(autoModeChange)="onAutoModeChange($event)"
>
<c8y-auto-aggregation-options
autoAggregationOptions
[datapointsControl]="currentForm.controls.autoAggregationDatapoints"
[keepDataOnZoomInControl]="currentForm.controls.autoAggregationKeepDataOnZoomIn"
[lastAppliedDatapoints]="lastAppliedDatapoints()"
></c8y-auto-aggregation-options>
</c8y-aggregation-picker>
</c8y-form-group>
</fieldset>
}
</div>
</div>
</form>
}