@if (formGroup) {
<form
class="row d-flex flex-wrap"
[formGroup]="formGroup"
>
<div class="col-md-6">
<fieldset class="c8y-fieldset">
<legend>{{ 'Order`of items on a list, noun`' | translate }}</legend>
<c8y-form-group class="m-b-8">
@for (order of orderList; track order; let i = $index) {
<div
class="d-flex p-b-8 p-t-4 a-i-center"
data-cy="c8y-alarm-list-widget-config--order-elements"
>
<label
class="c8y-radio gap-4"
title="{{ ALARM_ORDER_LABELS[order] | translate }}"
>
<input
type="radio"
[value]="order"
formControlName="order"
/>
<span class="a-s-center"></span>
<span class="text-truncate">{{ ALARM_ORDER_LABELS[order] | translate }}</span>
</label>
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
[popover]="order | sortingDescriptionPopoverMessage | translate"
placement="right"
triggers="focus"
container="body"
type="button"
[adaptivePosition]="true"
></button>
</div>
}
</c8y-form-group>
</fieldset>
</div>
<div class="col-md-6 col-xs-12">
<fieldset
class="c8y-fieldset"
formGroupName="severities"
>
<legend>{{ 'Severities' | translate }}</legend>
<c8y-form-group
[hasError]="formGroup.controls.severities.hasError('required')"
[ngClass]="{
'm-b-8': !formGroup.controls.severities.hasError('required')
}"
data-cy="c8y-alarm-list-widget-config--severities-elements"
>
@for (severityOption of severityList; track severityOption) {
<label
class="c8y-checkbox m-t-0 gap-4"
[title]="SEVERITY_LABELS[severityOption] | translate"
>
<input
type="checkbox"
[formControlName]="severityOption"
[name]="severityOption"
/>
<span class="a-s-center"></span>
@let severityIcon = severityOption | severityIcon;
<i
class="a-s-center m-r-4 icon-20 {{ severityIcon.iconClass }}"
[c8yIcon]="severityIcon.c8yIcon"
></i>
<span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>
</label>
}
<c8y-messages>
@if (formGroup.controls.severities.hasError('required')) {
<c8y-message>
{{ 'Select at least one severity.' | translate }}
</c8y-message>
}
</c8y-messages>
</c8y-form-group>
</fieldset>
@if (showDateFilter) {
<fieldset class="c8y-fieldset">
<legend>{{ 'Date filter' | translate }}</legend>
<c8y-form-group class="m-b-8">
<c8y-alarms-date-filter
[updateQueryParams]="false"
[DEFAULT_INTERVAL]="config.interval || 'none'"
formControlName="dateFilter"
(dateFilterChange)="onDateFilterChange($event)"
></c8y-alarms-date-filter>
</c8y-form-group>
</fieldset>
}
</div>
<div class="col-md-6 col-xs-12">
<fieldset
class="c8y-fieldset"
formGroupName="status"
>
<legend data-cy="c8y-alarm-list-widget-config-status-label">
{{ 'Status' | translate }}
</legend>
<c8y-form-group
[hasError]="formGroup.controls.status.hasError('required')"
[ngClass]="{
'm-b-8': !formGroup.controls.status.hasError('required')
}"
data-cy="c8y-alarm-list-widget-config--status-elements"
>
@for (statusOption of statusList; track statusOption) {
<label
class="c8y-checkbox m-t-0 gap-4"
[title]="STATUS_LABELS[statusOption] | translate"
>
<input
type="checkbox"
[formControlName]="statusOption"
[name]="statusOption"
/>
<span class="a-s-center"></span>
<i
class="a-s-center m-l-4 m-r-4 text-gray-dark c8y-icon icon-20"
[c8yIcon]="
statusOption === CLEARED_STATUS_VALUE
? C8Y_ALERT_IDLE_ICON
: statusOption === ACKNOWLEDGE_STATUS_VALUE
? BELL_SLASH_ICON
: BELL_ICON
"
></i>
<span>{{ STATUS_LABELS[statusOption] | translate }}</span>
</label>
}
<c8y-messages>
@if (formGroup.controls.status.hasError('required')) {
<c8y-message>
{{ 'Select at least one status.' | translate }}
</c8y-message>
}
</c8y-messages>
</c8y-form-group>
</fieldset>
</div>
<div class="col-md-6 col-xs-12">
<fieldset
class="c8y-fieldset"
data-cy="c8y-alarm-list-widget-config--child-devices-section"
>
<legend>{{ 'Child devices' | translate }}</legend>
<c8y-form-group class="m-b-8">
<label
class="c8y-switch"
[title]="'Show alarms from child devices' | translate"
data-cy="c8y-alarm-list-widget-config--child-devices-label"
>
<input
type="checkbox"
formControlName="showAlarmsForChildren"
data-cy="c8y-alarm-list-widget-config--showAlarmsForChildren-checkbox"
/>
<span></span>
<span>{{ 'Show alarms' | translate }}</span>
<span class="sr-only">{{ 'Show alarms' | translate }}</span>
</label>
</c8y-form-group>
</fieldset>
</div>
<div class="col-xs-12">
<fieldset class="c8y-fieldset">
<legend>{{ 'Types' | translate }}</legend>
<c8y-form-group
class="m-b-8"
formArrayName="types"
>
@for (type of types.controls; track type; let i = $index) {
<div
class="input-group m-b-4"
data-cy="c8y-alarm-list-widget-config--types-elements"
>
<input
class="form-control"
type="text"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Alarm' }"
[formControlName]="i"
/>
<div class="input-group-btn">
<button
class="btn-dot btn-dot--danger m-l-auto"
[title]="'Remove' | translate"
type="button"
(click)="removeType(i)"
data-cy="c8y-alarm-list-widget-config--types-remove-type"
[disabled]="types.controls?.length === 1 && !type.value"
>
<i c8yIcon="minus-circle"></i>
</button>
</div>
@if (i === types.controls.length - 1) {
<div class="input-group-btn">
<button
class="btn-dot btn-dot--primary m-l-auto"
[title]="'Add alarm type' | translate"
type="button"
(click)="addType()"
data-cy="c8y-alarm-list-widget-config--types-add-type"
>
<i c8yIcon="plus-circle"></i>
</button>
</div>
}
</div>
}
</c8y-form-group>
</fieldset>
</div>
</form>
}
<ng-template #alarmListPreview>
@if ((config$ | async)?.displayMode !== 'dashboard') {
<c8y-local-controls
[controls]="controls"
[displayMode]="(config$ | async)?.displayMode"
[config]="config$ | async"
[disabled]="true"
></c8y-local-controls>
}
<c8y-alarms-list
[alarms]="alarms$ | async"
[isInPreviewMode]="true"
[isInitialLoading]="isLoading"
[navigationOptions]="{
allowNavigationToAlarmsView: false,
alwaysNavigateToAllAlarms: false,
includeClearedQueryParams: false,
queryParamsHandling: 'merge'
}"
data-cy="c8y-alarm-list-widget-config--preview-alarm-list"
></c8y-alarms-list>
</ng-template>
<ng-template #dateSelectionHelpTemplate>
<div [innerHTML]="dateSelectionHelp"></div>
</ng-template>