@if (controlsAvailable) {
<ng-container
[ngTemplateOutlet]="dateTimePicker"
[ngTemplateOutletContext]="{
date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]
}"
></ng-container>
} @else {
<c8y-action-bar-item
[groupId]="'timeContext'"
[inGroupPriority]="1"
[placement]="'left'"
itemClass="navbar-form"
>
<ng-container
[ngTemplateOutlet]="dateTimePicker"
[ngTemplateOutletContext]="{
date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]
}"
></ng-container>
</c8y-action-bar-item>
}
<ng-template
#dateTimePicker
let-date="date"
>
<form
class="d-flex gap-8 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8"
[formGroup]="form"
>
<ng-container>
@if (date) {
<div
class="dropdown flex-grow"
#dropdown="bs-dropdown"
dropdown
[insideClick]="true"
>
<button
class="dropdown-toggle form-control l-h-tight d-flex a-i-center"
attr.aria-label="{{ date[0] | c8yDate: DATE_FORMAT }} — {{
date[1] | c8yDate: DATE_FORMAT
}}"
tooltip="{{ date[0] | c8yDate: DATE_FORMAT }} — {{ date[1] | c8yDate: DATE_FORMAT }}"
placement="top"
container="body"
data-cy="widget-time-context--date-picker-dropdown-button"
[adaptivePosition]="false"
[delay]="500"
dropdownToggle
>
<i
class="m-r-8"
c8yIcon="schedule1"
></i>
<div class="d-col text-left fit-w">
<span
class="text-muted fit-w text-10 l-h-1"
data-cy="widget-time-context--selected-interval"
>
{{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}
</span>
<span
class="text-bold text-12 fit-w l-h-1 text-truncate"
data-cy="widget-time-context--selected-time-range"
>
{{ date[0] | c8yDate: DATE_FORMAT }} — {{ date[1] | c8yDate: DATE_FORMAT }}
</span>
</div>
<span class="caret m-r-16 m-l-4"></span>
</button>
<ul
class="dropdown-menu dropdown-menu-wide dropdown-menu--date-range"
*dropdownMenu
>
<c8y-interval-picker
class="d-contents"
formControlName="currentDateContextInterval"
></c8y-interval-picker>
@if (form.controls.currentDateContextInterval.value === 'custom') {
<div class="p-l-16 p-r-16">
<c8y-form-group
[ngClass]="form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''"
>
<label
[title]="'From`date`' | translate"
for="temporaryUserSelectedFromDate"
translate
>
From`date`
</label>
<c8y-date-time-picker
id="temporaryUserSelectedFromDate"
[maxDate]="form.value.temporaryUserSelectedToDate"
[config]="timePickerConfig"
[placeholder]="'From`date`' | translate"
[formControl]="form.controls.temporaryUserSelectedFromDate"
[ngClass]="
form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''
"
></c8y-date-time-picker>
<c8y-messages [show]="form.controls.temporaryUserSelectedFromDate.errors">
<c8y-message
name="dateAfterRangeMax"
[text]="'This date is after the latest allowed date.' | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="'This date is invalid.' | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
<c8y-form-group
[ngClass]="form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''"
>
<label
[title]="'To`date`' | translate"
for="temporaryUserSelectedToDate"
translate
>
To`date`
</label>
<c8y-date-time-picker
id="temporaryUserSelectedToDate"
[minDate]="form.value.temporaryUserSelectedFromDate"
[config]="timePickerConfig"
[placeholder]="'To`date`' | translate"
[formControl]="form.controls.temporaryUserSelectedToDate"
[ngClass]="form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''"
></c8y-date-time-picker>
<c8y-messages [show]="form.controls.temporaryUserSelectedToDate.errors">
<c8y-message
name="dateBeforeRangeMin"
[text]="'This date is before the earliest allowed date.' | translate"
></c8y-message>
<c8y-message
name="invalidDateTime"
[text]="'This date is invalid.' | translate"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<div class="p-16 d-flex gap-8 separator-top">
<button
class="btn btn-default btn-sm flex-grow"
title="{{ 'Reset' | translate }}"
type="button"
(click)="dropdown.isOpen = false"
[disabled]="form.value.realtime"
translate
>
Reset
</button>
<button
class="btn btn-primary btn-sm flex-grow"
title="{{ 'Apply' | translate }}"
type="button"
(click)="applyDatetimeContext(); dropdown.isOpen = false"
[disabled]="
(form.pristine && form.untouched) || form.invalid || form.value.realtime
"
translate
>
Apply
</button>
</div>
}
</ul>
</div>
}
</ng-container>
<div class="input-group w-auto">
<c8y-realtime-control
class="form-control p-0 flex-no-grow w-auto"
formControlName="realtime"
></c8y-realtime-control>
@if (enableAutoAggregation && isTimeSeriesMigrated()) {
<c8y-aggregation-picker
formControlName="aggregation"
[showAutoMode]="true"
[autoModeActive]="isAutoModeActive()"
[autoPoints]="form.value.autoAggregationDatapoints"
[autoKeepPointCount]="form.value.autoAggregationKeepDataOnZoomIn"
[disabledAggregations]="disabledAggregations"
(autoModeChange)="onAutoModeChange($event)"
>
<div
class="d-col"
autoAggregationOptions
>
<div class="d-flex a-i-center gap-8">
<label class="m-b-0 m-r-8">
{{ 'Points per chart' | translate }}
</label>
<input
class="form-control input-sm"
style="width: 80px"
[attr.title]="
'Enter a value between {{ min }} and {{ max }}.'
| translate
: {
min: AUTO_AGGREGATION_DATAPOINTS.MIN,
max: AUTO_AGGREGATION_DATAPOINTS.MAX
}
"
[attr.aria-label]="'Points per chart' | translate"
type="number"
[min]="AUTO_AGGREGATION_DATAPOINTS.MIN"
[max]="AUTO_AGGREGATION_DATAPOINTS.MAX"
[step]="AUTO_AGGREGATION_DATAPOINTS.STEP"
[formControl]="form.controls.autoAggregationDatapoints"
/>
</div>
<label
class="c8y-switch m-b-0 m-t-8 text-nowrap"
[title]="'Keep point count on zoom' | translate"
>
<input
type="checkbox"
[formControl]="form.controls.autoAggregationKeepDataOnZoomIn"
data-cy="time-context--auto-aggregation-keep-data-on-zoom-in"
/>
<span></span>
<span class="text-12">{{ 'Keep point count on zoom' | translate }}</span>
<button
class="btn-help btn-help--sm m-l-4"
[attr.aria-label]="'Help' | translate"
[popover]="KEEP_DATA_ON_ZOOM_IN_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
></button>
</label>
</div>
</c8y-aggregation-picker>
} @else if (
enableAutoAggregation || (controlsAvailable ? controlsAvailable.aggregation : true)
) {
<c8y-aggregation-picker
formControlName="aggregation"
[disabledAggregations]="disabledAggregations"
></c8y-aggregation-picker>
}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="AGGREGATION_POPOVER | translate"
placement="top"
triggers="focus"
container="body"
type="button"
></button>
</div>
</form>
</ng-template>