Web SDK documentation
  1. Components
  2. DatapointAttributesFormComponent

File

datapoint-selector/datapoint-attributes-form/datapoint-attributes-form.component.ts

Implements

ControlValueAccessor Validator OnInit

Metadata

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

Index

Properties
Methods
Inputs

Constructor

constructor(formValidations: DatapointAttributesFormValidationService)
Parameters :
Name Type Optional
formValidations DatapointAttributesFormValidationService No

Inputs

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

Methods

ngOnInit
ngOnInit()
Returns : void
registerOnChange
registerOnChange(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
registerOnTouched
registerOnTouched(fn: any)
Parameters :
Name Type Optional
fn any No
Returns : void
setDisabledState
setDisabledState(isDisabled: boolean)
Parameters :
Name Type Optional
isDisabled boolean No
Returns : void
validate
validate(_control: AbstractControl)
Parameters :
Name Type Optional
_control AbstractControl No
Returns : ValidationErrors
writeValue
writeValue(obj: any)
Parameters :
Name Type Optional
obj any No
Returns : void

Properties

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 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"
            >
              <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 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"
            >
              <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 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
              "
            >
              <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 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">
              <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 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>

    <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 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>
  </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 class="form-group-sm">
          <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 class="form-group-sm">
          <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 class="form-group-sm">
          <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 class="form-group-sm">
          <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"
    ></button>
  </label>
</ng-template>

results matching ""

    No results matching ""