File

datapoint-library/datapoint-library-details/datapoint-library-details.component.ts

Implements

OnInit OnDestroy

Metadata

Index

Properties
Methods

Constructor

constructor(activatedRoute: ActivatedRoute, inventory: InventoryService, formBuilder: FormBuilder, alertService: AlertService, router: Router, translate: TranslateService, colorService: ColorService, config: DatapointLibraryOptions)
Parameters :
Name Type Optional
activatedRoute ActivatedRoute No
inventory InventoryService No
formBuilder FormBuilder No
alertService AlertService No
router Router No
translate TranslateService No
colorService ColorService No
config DatapointLibraryOptions No

Methods

cancel
cancel()
Returns : void
formChange
formChange()
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
ngOnInit
ngOnInit()
Returns : void
Async save
save(value)
Parameters :
Name Optional
value No
Returns : any

Properties

Public config
Type : DatapointLibraryOptions
Decorators :
@Optional()
@Inject(DATAPOINT_LIBRARY_CONFIG)
datapoint
Type : IManagedObject
formGroup
Type : FormGroup
isLoading
Default value : true
path
Default value : pathToDatapointLibrary
range
Type : FormGroup
rangeConfig
Type : object
Default value : {}
redRange
Type : FormGroup
routeSub
Type : Subscription
yellowRange
Type : FormGroup
<c8y-title *ngIf="!isLoading">
  {{ formGroup.value?.label }}
  <small *ngIf="formGroup.value?.fragment && formGroup.value?.series"
    >{{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}</small
  >
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-data-points'"
    [label]="'Data point library' | translate"
    [path]="path"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<form
  (ngSubmit)="formGroup.valid && save(formGroup.value)"
  (change)="formChange()"
  [formGroup]="formGroup"
  class="card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto"
  novalidate
>
  <div class="card-header large-padding separator grid__col--fullspan">
    <h4 class="card-title">
      {{ formGroup.value?.label }}
    </h4>
  </div>
  <div *ngIf="!isLoading" class="d-contents">
    <div class="inner-scroll bg-white flex-grow">
      <div class="card-block large-padding">
        <div class="d-flex">
          <c8y-form-group>
            <label translate>Color</label>
            <div class="data-point-color form-control">
              <div class="c8y-colorpicker">
                <input type="color" name="color" formControlName="color" />
                <span [style.background-color]="formGroup.value?.color"></span>
              </div>
            </div>
          </c8y-form-group>
          <c8y-form-group class="flex-grow p-l-8">
            <label translate>Label</label>
            <input
              class="form-control"
              formControlName="label"
              name="label"
              [placeholder]="'e.g. Temperature' | translate"
              type="text"
            />
            <c8y-messages [show]="formGroup.controls?.label?.touched && formGroup.controls?.label?.errors">
            </c8y-messages>
          </c8y-form-group>
        </div>
        <!-- TODO: add description to data point library templates -->
        <c8y-form-group>
          <label translate>Description</label>
          <textarea
            class="form-control"
            formControlName="description"
            name="description"
            [placeholder]="'e.g. Ambient Temperature in Celsius' | translate"
            rows="3"
          ></textarea>
        </c8y-form-group>

        <div class="row">
          <div class="col-sm-6">
            <c8y-form-group>
              <label translate>Fragment</label>
              <input
                class="form-control"
                name="fragment"
                formControlName="fragment"
                [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }"
                type="text"
              />
              <c8y-messages [show]="formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors">
              </c8y-messages>
            </c8y-form-group>
          </div>

          <div class="col-sm-6">
            <c8y-form-group>
              <label translate>Series</label>
              <input
                class="form-control"
                formControlName="series"
                name="series"
                [placeholder]="'e.g. {{ example }}' | translate: { example: 'T' }"
                type="text"
              />
              <c8y-messages [show]="formGroup.controls?.series?.touched && formGroup.controls?.series?.errors">
              </c8y-messages>
            </c8y-form-group>
          </div>
        </div>
        <div class="row" *ngIf="config?.showCheckboxForGlobalFragment">
          <div class="col-sm-6">
            <c8y-form-group>
              <label class="c8y-checkbox">
                <input
                  name="c8y_Global"
                  formControlName="c8y_Global"
                  type="checkbox"
                />
                <span></span>
                <span translate>Globally available</span>
                <button
                  class="btn btn-clean"
                  [popover]="'Will make this entry available to all users on the tenant if checked.' | translate"
                  container="body"
                  type="button"
                  [outsideClick]="true"
                >
                  <i [c8yIcon]="'question-circle-o'" class="text-info"></i>
                </button>
              </label>
            </c8y-form-group>
          </div>
        </div>
      </div>
    </div>
    <div class="inner-scroll bg-gray-white">
      <div class="card-block large-padding">
        <fieldset class="c8y-fieldset">
          <legend translate>Preview</legend>
          <c8y-range-display [config]="rangeConfig" class="m-b-16 d-block"></c8y-range-display>
        </fieldset>
        <fieldset class="c8y-fieldset">
          <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-messages>
              </c8y-form-group>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              <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-messages>
              </c8y-form-group>
            </div>

            <div class="col-md-6">
              <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-messages>
              </c8y-form-group>
            </div>
          </div>
        </fieldset>

        <fieldset class="c8y-fieldset" formGroupName="yellowRange">
          <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">
          <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>
      </div>
    </div>
  </div>
  <div class="card-footer separator grid__col--fullspan">
    <button (click)="cancel()" class="btn btn-default" [title]="'Cancel' | translate" type="button">
      {{ 'Cancel' | translate }}
    </button>
    <button
      *c8yIfAllowed="['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true"
      [disabled]="formGroup.invalid || formGroup.pristine"
      class="btn btn-primary btn-form"
      [title]="'Save' | translate"
      type="submit"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</form>

results matching ""

    No results matching ""