datapoint-selector/datapoint-attributes-form/datapoint-attributes-form.component.ts
ControlValueAccessor
Validator
OnInit
AfterViewInit
| providers |
)
)
|
| selector | c8y-datapoint-attributes-form |
| imports |
FormsModule
ReactiveFormsModule
C8yTranslateDirective
FormGroupComponent
RequiredInputPlaceholderDirective
MessagesComponent
MessageDirective
NgClass
NgTemplateOutlet
PopoverDirective
C8yTranslatePipe
KeyValuePipe
|
| templateUrl | ./datapoint-attributes-form.component.html |
Properties |
Methods |
Inputs |
constructor(formValidations: DatapointAttributesFormValidationService)
|
||||||
|
Parameters :
|
| selectableAxisTypes |
Type : AxisTypes[]
|
Default value : []
|
| selectableChartLineTypes |
Type : ChartLineTypes[]
|
Default value : []
|
| selectableChartRenderTypes |
Type : ChartRenderTypes[]
|
Default value : []
|
| showChart |
Type : boolean
|
Default value : true
|
| showErrorsImmediately |
Type : boolean
|
Default value : false
|
|
Displays all errors even if the form was not touched yet. |
| showFormIfTemplateWasSelected |
Type : boolean
|
Default value : false
|
| showRange |
Type : boolean
|
Default value : true
|
| showRedRange |
Type : boolean
|
Default value : true
|
| showTarget |
Type : boolean
|
Default value : true
|
| showYellowRange |
Type : boolean
|
Default value : true
|
| ngAfterViewInit |
ngAfterViewInit()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| registerOnChange | ||||||
registerOnChange(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| registerOnTouched | ||||||
registerOnTouched(fn: any)
|
||||||
|
Parameters :
Returns :
void
|
| setDisabledState | ||||||
setDisabledState(isDisabled: boolean)
|
||||||
|
Parameters :
Returns :
void
|
| validate | ||||||
validate(_control: AbstractControl)
|
||||||
|
Parameters :
Returns :
ValidationErrors
|
| writeValue | ||||||
writeValue(obj: any)
|
||||||
|
Parameters :
Returns :
void
|
| AXIS_TYPES |
Type : Array<unknown>
|
Default value : Array.from(AXIS_TYPES)
|
| chart |
Type : FormGroup
|
| CHART_LINE_TYPES |
Type : Array<unknown>
|
Default value : Array.from(CHART_LINE_TYPES)
|
| CHART_RENDER_TYPES |
Type : Array<unknown>
|
Default value : Array.from(CHART_RENDER_TYPES)
|
| customValidationErrorMessages |
Type : literal type
|
Default value : {}
|
| display |
Type : FormGroup
|
| formGroup |
Type : FormGroup
|
| range |
Type : FormGroup
|
| rawValue |
Type : any
|
Default value : {}
|
| redRange |
Type : FormGroup
|
| shouldForceInitialValidation |
Type : unknown
|
Default value : true
|
| showChartForm |
Type : boolean
|
| showOnlyDisplayForm |
Type : boolean
|
| yellowRange |
Type : FormGroup
|
<div [formGroup]="formGroup">
@if (!rawValue?.__template || showFormIfTemplateWasSelected) {
@if (formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target) {
<fieldset class="c8y-fieldset">
<legend translate>Details</legend>
<div class="row">
@if (formGroup.controls?.label) {
<div class="col-md-6">
<c8y-form-group class="form-group-sm">
<label translate>Label</label>
<input
class="form-control"
name="label"
formControlName="label"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'Temperature' }"
/>
<c8y-messages
[show]="formGroup.controls.label.touched && formGroup.controls.label.errors"
>
@for (item of customValidationErrorMessages['label'] | keyvalue; track item.key) {
<c8y-message
[name]="item.key"
[text]="item.value"
></c8y-message>
}
</c8y-messages>
</c8y-form-group>
</div>
}
@if (formGroup.controls?.unit) {
<div class="col-md-6">
<c8y-form-group class="form-group-sm">
<label translate>Unit</label>
<input
class="form-control"
name="unit"
formControlName="unit"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'ºC' }"
/>
<c8y-messages
[show]="formGroup.controls.unit.touched && formGroup.controls.unit.errors"
>
@for (item of customValidationErrorMessages['unit'] | keyvalue; track item.key) {
<c8y-message
[name]="item.key"
[text]="item.value"
></c8y-message>
}
</c8y-messages>
</c8y-form-group>
</div>
}
@if (formGroup.controls?.target && showTarget) {
<div class="col-md-6">
<c8y-form-group
class="form-group-sm"
[ngClass]="{
'has-error':
(range?.touched || formGroup.controls.target.touched) &&
formGroup.controls?.target?.errors
}"
>
<label translate>Target</label>
<input
class="form-control"
name="target"
type="number"
formControlName="target"
[placeholder]="'e.g. {{ example }}' | translate: { example: 25 }"
/>
<c8y-messages
[show]="
(range?.touched || formGroup.controls.target.touched) &&
formGroup.controls.target.errors
"
>
@for (
item of customValidationErrorMessages['target'] | keyvalue;
track item.key
) {
<c8y-message
[name]="item.key"
[text]="item.value"
></c8y-message>
}
</c8y-messages>
</c8y-form-group>
</div>
}
</div>
</fieldset>
}
@if (range && showRange) {
<fieldset class="c8y-fieldset">
<legend translate>Range</legend>
<div
class="row"
formGroupName="range"
>
<div class="col-md-6">
<c8y-form-group
class="form-group-sm"
[ngClass]="{ 'has-error': range?.touched && range?.controls?.min?.errors }"
>
<label translate>Min</label>
<input
class="form-control"
name="min"
type="number"
formControlName="min"
[placeholder]="'e.g. {{ example }}' | translate: { example: 0 }"
/>
<c8y-messages [show]="range?.touched && range.controls?.min?.errors"></c8y-messages>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group
class="form-group-sm"
[ngClass]="{ 'has-error': range?.touched && range?.controls?.max?.errors }"
>
<label translate>Max</label>
<input
class="form-control"
name="max"
type="number"
formControlName="max"
[placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
/>
<c8y-messages [show]="range?.touched && range.controls?.max?.errors">
@for (item of customValidationErrorMessages['max'] | keyvalue; track item.key) {
<c8y-message
[name]="item.key"
[text]="item.value"
></c8y-message>
}
</c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
}
@if (yellowRange && showYellowRange) {
<fieldset
class="c8y-fieldset"
formGroupName="yellowRange"
>
<legend translate>Yellow range</legend>
<div class="row">
<div class="col-md-6">
<c8y-form-group
class="form-group-sm"
[ngClass]="{
'has-error':
(range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors
}"
>
<label translate>Min</label>
<input
class="form-control"
name="min"
type="number"
formControlName="min"
[placeholder]="'e.g. {{ example }}' | translate: { example: 50 }"
/>
<c8y-messages
[show]="
(range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors
"
></c8y-messages>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group
class="form-group-sm"
[ngClass]="{
'has-error':
(range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors
}"
>
<label translate>Max</label>
<input
class="form-control"
name="max"
type="number"
formControlName="max"
[placeholder]="'e.g. {{ example }}' | translate: { example: 75 }"
/>
<c8y-messages
[show]="
(range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors
"
></c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
}
@if (redRange && showRedRange) {
<fieldset
class="c8y-fieldset"
formGroupName="redRange"
>
<legend translate>Red range</legend>
<div class="row">
<div class="col-md-6">
<c8y-form-group
class="form-group-sm"
[ngClass]="{
'has-error':
(range?.touched || redRange?.touched) && redRange?.controls?.min?.errors
}"
>
<label translate>Min</label>
<input
class="form-control"
name="min"
type="number"
formControlName="min"
[placeholder]="'e.g. {{ example }}' | translate: { example: 75 }"
/>
<c8y-messages
[show]="(range?.touched || redRange?.touched) && redRange.controls?.min?.errors"
></c8y-messages>
</c8y-form-group>
</div>
<div class="col-md-6">
<c8y-form-group
class="form-group-sm"
[ngClass]="{
'has-error':
(range?.touched || redRange?.touched) && redRange?.controls?.max?.errors
}"
>
<label translate>Max</label>
<input
class="form-control"
name="max"
type="number"
formControlName="max"
[placeholder]="'e.g. {{ example }}' | translate: { example: 100 }"
/>
<c8y-messages
[show]="(range?.touched || redRange?.touched) && redRange.controls?.max?.errors"
></c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
}
}
@if (showChartForm) {
<fieldset
class="c8y-fieldset"
formGroupName="chart"
>
<legend translate>Chart</legend>
<div class="tight-grid">
@if (selectableChartRenderTypes?.length !== 0) {
<div class="col-xs-6 col-sm-4">
<c8y-form-group class="form-group-sm">
<ng-container *ngTemplateOutlet="displayHelpButton"></ng-container>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="renderType"
>
@for (type of CHART_RENDER_TYPES; track type.val) {
<option [ngValue]="type.val">
{{ type.text | translate }}
</option>
}
</select>
</div>
</c8y-form-group>
</div>
}
@if (selectableChartLineTypes?.length !== 0) {
<div class="col-xs-6 col-sm-4">
<c8y-form-group class="form-group-sm">
<label
for="chartType"
translate
>
Chart type
</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="lineType"
>
@for (type of CHART_LINE_TYPES; track type.val) {
<option [ngValue]="type.val">
{{ type.text | translate }}
</option>
}
</select>
<span></span>
</div>
</c8y-form-group>
</div>
}
@if (selectableAxisTypes?.length !== 0) {
<div class="col-xs-6 col-sm-4">
<c8y-form-group class="form-group-sm">
<label
for="yAxis"
translate
>
Y-axis
</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="yAxisType"
>
@for (type of AXIS_TYPES; track type.val) {
<option [ngValue]="type.val">
{{ type.text | translate }}
</option>
}
</select>
<span></span>
</div>
</c8y-form-group>
</div>
}
</div>
</fieldset>
}
@if (showOnlyDisplayForm) {
<fieldset
class="c8y-fieldset"
formGroupName="display"
>
<legend>
<ng-container *ngTemplateOutlet="displayHelpButton"></ng-container>
</legend>
<div class="tight-grid">
<div class="col-xs-6 col-sm-4">
<c8y-form-group class="form-group-sm">
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="renderType"
>
@for (type of CHART_RENDER_TYPES; track type.val) {
<option [ngValue]="type.val">
{{ type.text | translate }}
</option>
}
</select>
</div>
</c8y-form-group>
</div>
</div>
</fieldset>
}
</div>
<ng-template #displayHelpButton>
<label>
{{ 'Display' | translate }}
<button
class="btn-help btn-help--sm"
[attr.aria-label]="'Help' | translate"
popover="{{ 'Value displayed when data is aggregated' | translate }}"
placement="right"
triggers="focus"
type="button"
></button>
</label>
</ng-template>