datapoint-selector/datapoint-attributes-form/datapoint-attributes-form.component.ts
ControlValueAccessor
Validator
OnInit
providers |
{
provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => DatapointAttributesFormComponent), multi: true
}
{
provide: NG_VALIDATORS, useExisting: forwardRef(() => DatapointAttributesFormComponent), multi: true
}
|
selector | c8y-datapoint-attributes-form |
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
|
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
|
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<>
|
Default value : Array.from(AXIS_TYPES)
|
chart |
Type : FormGroup
|
CHART_LINE_TYPES |
Type : Array<>
|
Default value : Array.from(CHART_LINE_TYPES)
|
CHART_RENDER_TYPES |
Type : Array<>
|
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 |
Default value : true
|
showChartForm |
Type : boolean
|
showOnlyDisplayForm |
Type : boolean
|
yellowRange |
Type : FormGroup
|
<div [formGroup]="formGroup">
<ng-container *ngIf="!rawValue?.__template || showFormIfTemplateWasSelected">
<fieldset
class="c8y-fieldset"
*ngIf="formGroup.controls?.label || formGroup.controls?.unit || formGroup.controls?.target"
>
<legend translate>Details</legend>
<div class="row">
<div
class="col-md-6"
*ngIf="formGroup.controls?.label"
>
<c8y-form-group>
<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"
>
<c8y-message
*ngFor="let item of customValidationErrorMessages['label'] | keyvalue"
[name]="item.key"
[text]="item.value"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<div
class="col-md-6"
*ngIf="formGroup.controls?.unit"
>
<c8y-form-group>
<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"
>
<c8y-message
*ngFor="let item of customValidationErrorMessages['unit'] | keyvalue"
[name]="item.key"
[text]="item.value"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
<div
class="col-md-6"
*ngIf="formGroup.controls?.target && showTarget"
>
<c8y-form-group
[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
"
>
<c8y-message
*ngFor="let item of customValidationErrorMessages['target'] | keyvalue"
[name]="item.key"
[text]="item.value"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
<fieldset
class="c8y-fieldset"
*ngIf="range && showRange"
>
<legend translate>Range</legend>
<div
class="row"
formGroupName="range"
>
<div class="col-md-6">
<c8y-form-group
[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
[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">
<c8y-message
*ngFor="let item of customValidationErrorMessages['max'] | keyvalue"
[name]="item.key"
[text]="item.value"
></c8y-message>
</c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
<fieldset
class="c8y-fieldset"
formGroupName="yellowRange"
*ngIf="yellowRange && showYellowRange"
>
<legend translate>Yellow range</legend>
<div class="row">
<div class="col-md-6">
<c8y-form-group
[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
[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>
<fieldset
class="c8y-fieldset"
formGroupName="redRange"
*ngIf="redRange && showRedRange"
>
<legend translate>Red range</legend>
<div class="row">
<div class="col-md-6">
<c8y-form-group
[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
[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>
</ng-container>
<fieldset
class="c8y-fieldset"
*ngIf="showChartForm"
formGroupName="chart"
>
<legend translate>Chart</legend>
<div class="tight-grid">
<div
class="col-xs-6 col-sm-4"
*ngIf="selectableChartRenderTypes?.length !== 0"
>
<c8y-form-group>
<ng-container *ngTemplateOutlet="displayHelpButton"></ng-container>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="renderType"
>
<option
*ngFor="let type of CHART_RENDER_TYPES"
[ngValue]="type.val"
>
{{ type.text | translate }}
</option>
</select>
</div>
</c8y-form-group>
</div>
<div
class="col-xs-6 col-sm-4"
*ngIf="selectableChartLineTypes?.length !== 0"
>
<c8y-form-group>
<label
for="chartType"
translate
>
Chart type
</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="lineType"
>
<option
*ngFor="let type of CHART_LINE_TYPES"
[ngValue]="type.val"
>
{{ type.text | translate }}
</option>
</select>
<span></span>
</div>
</c8y-form-group>
</div>
<div
class="col-xs-6 col-sm-4"
*ngIf="selectableAxisTypes?.length !== 0"
>
<c8y-form-group>
<label
for="yAxis"
translate
>
Y-axis
</label>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="yAxisType"
>
<option
*ngFor="let type of AXIS_TYPES"
[ngValue]="type.val"
>
{{ type.text | translate }}
</option>
</select>
<span></span>
</div>
</c8y-form-group>
</div>
</div>
</fieldset>
<fieldset
class="c8y-fieldset"
*ngIf="showOnlyDisplayForm"
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>
<div class="c8y-select-wrapper">
<select
class="form-control"
formControlName="renderType"
>
<option
*ngFor="let type of CHART_RENDER_TYPES"
[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 }}"
triggers="focus"
type="button"
[placement]="'right'"
[container]="'body'"
></button>
</label>
</ng-template>