Web SDK documentation
  1. Components
  2. DatapointAttributesFormComponent

File

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

Implements

ControlValueAccessor Validator

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

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

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
Default value : AXIS_TYPES
chart
Type : FormGroup
CHART_LINE_TYPES
Default value : CHART_LINE_TYPES
CHART_RENDER_TYPES
Default value : CHART_RENDER_TYPES
customValidationErrorMessages
Type : literal type
Default value : {}
formGroup
Type : FormGroup
range
Type : FormGroup
rawValue
Type : any
Default value : {}
redRange
Type : FormGroup
yellowRange
Type : FormGroup 
<div [formGroup]="formGroup" *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
            type="number"
            class="form-control"
            name="target"
            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
            type="number"
            class="form-control"
            name="min"
            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
            type="number"
            class="form-control"
            name="max"
            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
            type="number"
            class="form-control"
            name="min"
            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
            type="number"
            class="form-control"
            name="max"
            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
            type="number"
            class="form-control"
            name="min"
            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
            type="number"
            class="form-control"
            name="max"
            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>

  <fieldset class="c8y-fieldset" *ngIf="chart && showChart" formGroupName="chart">
    <legend translate>Chart</legend>
    <div class="tight-grid">
      <div class="col-xs-6 col-sm-4">
        <c8y-form-group>
          <label for="display">
            {{ 'Display' | translate }}
            <button
              class="btn-clean text-info"
              popover="{{ 'Value displayed when data is aggregated' | translate }}"
              [placement]="'right'"
              [triggers]="'focus'"
              [container]="'body'"
            >
              <i c8yIcon="question-circle-o"></i>
            </button>
          </label>
          <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">
        <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">
        <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>
</div>

results matching ""

    No results matching ""