@c8y/ngx-components 1017.0.47 → 1017.0.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/datapoint-library/datapoint-library-details/datapoint-library-details.component.d.ts +4 -2
- package/datapoint-library/datapoint-library-list.component.d.ts +4 -1
- package/datapoint-library/services/datapoint-parser.service.d.ts +9 -0
- package/datapoint-library/services/index.d.ts +1 -0
- package/esm2020/datapoint-library/datapoint-library-details/datapoint-library-details.component.mjs +12 -8
- package/esm2020/datapoint-library/datapoint-library-list.component.mjs +15 -11
- package/esm2020/datapoint-library/services/c8y-ngx-components-datapoint-library-services.mjs +5 -0
- package/esm2020/datapoint-library/services/datapoint-parser.service.mjs +43 -0
- package/esm2020/datapoint-library/services/index.mjs +2 -0
- package/fesm2015/c8y-ngx-components-datapoint-library-services.mjs +50 -0
- package/fesm2015/c8y-ngx-components-datapoint-library-services.mjs.map +1 -0
- package/fesm2015/c8y-ngx-components-datapoint-library.mjs +21 -16
- package/fesm2015/c8y-ngx-components-datapoint-library.mjs.map +1 -1
- package/fesm2020/c8y-ngx-components-datapoint-library-services.mjs +50 -0
- package/fesm2020/c8y-ngx-components-datapoint-library-services.mjs.map +1 -0
- package/fesm2020/c8y-ngx-components-datapoint-library.mjs +21 -16
- package/fesm2020/c8y-ngx-components-datapoint-library.mjs.map +1 -1
- package/package.json +10 -2
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as i6$1 from '@angular/cdk/a11y';
|
|
2
2
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
3
3
|
import * as i0 from '@angular/core';
|
|
4
4
|
import { InjectionToken, Component, Optional, Inject, NgModule } from '@angular/core';
|
|
5
5
|
import * as i3$1 from '@c8y/ngx-components';
|
|
6
6
|
import { gettext, HumanizePipe, C8yValidators, hookRoute, ViewContext, hookNavigator, NavigatorNode, CoreModule } from '@c8y/ngx-components';
|
|
7
|
-
import * as
|
|
7
|
+
import * as i8$1 from 'ngx-bootstrap/dropdown';
|
|
8
8
|
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i8 from 'ngx-bootstrap/popover';
|
|
10
10
|
import { PopoverModule } from 'ngx-bootstrap/popover';
|
|
11
11
|
import * as i3 from '@angular/forms';
|
|
12
12
|
import { Validators } from '@angular/forms';
|
|
@@ -14,15 +14,16 @@ import * as i1 from '@angular/router';
|
|
|
14
14
|
import * as i2 from '@c8y/client';
|
|
15
15
|
import * as i5 from '@ngx-translate/core';
|
|
16
16
|
import { get, isEmpty } from 'lodash-es';
|
|
17
|
-
import * as i6 from '@
|
|
18
|
-
import
|
|
19
|
-
import {
|
|
17
|
+
import * as i6 from '@c8y/ngx-components/datapoint-library/services';
|
|
18
|
+
import * as i7 from '@angular/common';
|
|
19
|
+
import { BehaviorSubject, pipe } from 'rxjs';
|
|
20
|
+
import { tap, switchMap, shareReplay, map } from 'rxjs/operators';
|
|
20
21
|
|
|
21
22
|
const pathToDatapointLibrary = 'datapointlibrary';
|
|
22
23
|
const DATAPOINT_LIBRARY_CONFIG = new InjectionToken('DatapointLibraryOptions');
|
|
23
24
|
|
|
24
25
|
class DatapointLibraryDetailsComponent {
|
|
25
|
-
constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, config) {
|
|
26
|
+
constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, parser, config) {
|
|
26
27
|
this.activatedRoute = activatedRoute;
|
|
27
28
|
this.inventory = inventory;
|
|
28
29
|
this.formBuilder = formBuilder;
|
|
@@ -30,6 +31,7 @@ class DatapointLibraryDetailsComponent {
|
|
|
30
31
|
this.router = router;
|
|
31
32
|
this.translate = translate;
|
|
32
33
|
this.colorService = colorService;
|
|
34
|
+
this.parser = parser;
|
|
33
35
|
this.config = config;
|
|
34
36
|
this.path = pathToDatapointLibrary;
|
|
35
37
|
this.isLoading = true;
|
|
@@ -85,7 +87,8 @@ class DatapointLibraryDetailsComponent {
|
|
|
85
87
|
navigateBackToList() {
|
|
86
88
|
return this.router.navigate([pathToDatapointLibrary]);
|
|
87
89
|
}
|
|
88
|
-
datapointUpdate(
|
|
90
|
+
datapointUpdate(tmpDatapoint) {
|
|
91
|
+
const datapoint = this.parser.parseDatapoint(tmpDatapoint);
|
|
89
92
|
this.datapoint = datapoint;
|
|
90
93
|
const { fragment, series, description, unit, target, label, color, yellowRangeMin, yellowRangeMax, redRangeMin, redRangeMax, min, max } = datapoint.c8y_Kpi;
|
|
91
94
|
this.formGroup.patchValue({
|
|
@@ -215,12 +218,12 @@ class DatapointLibraryDetailsComponent {
|
|
|
215
218
|
return cleanedupValues;
|
|
216
219
|
}
|
|
217
220
|
}
|
|
218
|
-
DatapointLibraryDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryDetailsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.InventoryService }, { token: i3.FormBuilder }, { token: i3$1.AlertService }, { token: i1.Router }, { token: i5.TranslateService }, { token: i3$1.ColorService }, { token: DATAPOINT_LIBRARY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
219
|
-
DatapointLibraryDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointLibraryDetailsComponent, selector: "c8y-datapoint-library-details", ngImport: i0, template: "<c8y-title *ngIf=\"!isLoading\">\n {{ formGroup.value?.label }}\n <small *ngIf=\"formGroup.value?.fragment && formGroup.value?.series\">\n {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}\n </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Configuration' | translate\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-data-points'\"\n [label]=\"'Data point library' | translate\"\n [path]=\"path\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-data-points'\"\n [label]=\"formGroup.value?.label\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<form\n (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n (change)=\"formChange()\"\n [formGroup]=\"formGroup\"\n class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n novalidate\n>\n <div class=\"card-header large-padding separator grid__col--fullspan\">\n <div class=\"card-title\">\n {{ formGroup.value?.label }}\n </div>\n </div>\n <div *ngIf=\"!isLoading\" class=\"d-contents\">\n <div class=\"inner-scroll bg-level-0 flex-grow\">\n <div class=\"card-block large-padding\">\n <div class=\"d-flex\">\n <c8y-form-group>\n <label translate>Color</label>\n <div class=\"data-point-color form-control\">\n <div class=\"c8y-colorpicker\">\n <input\n [attr.aria-label]=\"'Color picker' | translate\"\n type=\"color\"\n name=\"color\"\n formControlName=\"color\"\n />\n <span [style.background-color]=\"formGroup.value?.color\"></span>\n </div>\n </div>\n </c8y-form-group>\n <c8y-form-group class=\"flex-grow p-l-8\">\n <label translate>Label</label>\n <input\n class=\"form-control\"\n formControlName=\"label\"\n name=\"label\"\n [placeholder]=\"'e.g. Temperature' | translate\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n <!-- TODO: add description to data point library templates -->\n <c8y-form-group>\n <label translate>Description</label>\n <textarea\n class=\"form-control\"\n formControlName=\"description\"\n name=\"description\"\n [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n rows=\"3\"\n ></textarea>\n </c8y-form-group>\n\n <div class=\"row\">\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label translate>Fragment</label>\n <input\n class=\"form-control\"\n name=\"fragment\"\n formControlName=\"fragment\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"\n formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label translate>Series</label>\n <input\n class=\"form-control\"\n formControlName=\"series\"\n name=\"series\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"config?.showCheckboxForGlobalFragment\">\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label class=\"c8y-checkbox\">\n <input name=\"c8y_Global\" formControlName=\"c8y_Global\" type=\"checkbox\" />\n <span></span>\n <span translate>Globally available</span>\n <button\n class=\"btn btn-clean\"\n [popover]=\"\n 'Will make this entry available to all users on the tenant if checked.'\n | translate\n \"\n container=\"body\"\n type=\"button\"\n [outsideClick]=\"true\"\n >\n <i [c8yIcon]=\"'question-circle-o'\" class=\"text-info\"></i>\n </button>\n </label>\n </c8y-form-group>\n </div>\n </div>\n </div>\n </div>\n <div class=\"inner-scroll bg-level-1\">\n <div class=\"card-block large-padding\">\n <fieldset class=\"c8y-fieldset\">\n <legend translate>Preview</legend>\n <c8y-range-display [config]=\"rangeConfig\" class=\"m-b-16 d-block\"></c8y-range-display>\n </fieldset>\n <fieldset class=\"c8y-fieldset\">\n <legend translate>Range</legend>\n <div class=\"row\" formGroupName=\"range\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n />\n <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n </c8y-form-group>\n </div>\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n />\n <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\"></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group>\n <label translate>Unit</label>\n <input\n class=\"form-control\"\n name=\"unit\"\n formControlName=\"unit\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || formGroup.controls?.target?.touched) &&\n formGroup.controls?.target?.errors\n }\"\n >\n <label translate>Target</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"target\"\n formControlName=\"target\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || formGroup.controls?.target?.touched) &&\n formGroup.controls?.target?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\">\n <legend translate>Yellow range</legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\">\n <legend translate>Red range</legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n />\n <c8y-messages\n [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n />\n <c8y-messages\n [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n </div>\n <div class=\"card-footer separator grid__col--fullspan\">\n <button (click)=\"cancel()\" class=\"btn btn-default\" [title]=\"'Cancel' | translate\" type=\"button\">\n {{ 'Cancel' | translate }}\n </button>\n <button\n *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n [disabled]=\"formGroup.invalid || formGroup.pristine\"\n class=\"btn btn-primary btn-form\"\n [title]=\"'Save' | translate\"\n type=\"submit\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n", dependencies: [{ kind: "component", type: i3$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i3$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i3$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3$1.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i7.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i3$1.C8yTranslatePipe, name: "translate" }] });
|
|
221
|
+
DatapointLibraryDetailsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryDetailsComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.InventoryService }, { token: i3.FormBuilder }, { token: i3$1.AlertService }, { token: i1.Router }, { token: i5.TranslateService }, { token: i3$1.ColorService }, { token: i6.DatapointParserService }, { token: DATAPOINT_LIBRARY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
222
|
+
DatapointLibraryDetailsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointLibraryDetailsComponent, selector: "c8y-datapoint-library-details", ngImport: i0, template: "<c8y-title *ngIf=\"!isLoading\">\n {{ formGroup.value?.label }}\n <small *ngIf=\"formGroup.value?.fragment && formGroup.value?.series\">\n {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}\n </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Configuration' | translate\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-data-points'\"\n [label]=\"'Data point library' | translate\"\n [path]=\"path\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-data-points'\"\n [label]=\"formGroup.value?.label\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<form\n (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n (change)=\"formChange()\"\n [formGroup]=\"formGroup\"\n class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n novalidate\n>\n <div class=\"card-header large-padding separator grid__col--fullspan\">\n <div class=\"card-title\">\n {{ formGroup.value?.label }}\n </div>\n </div>\n <div *ngIf=\"!isLoading\" class=\"d-contents\">\n <div class=\"inner-scroll bg-level-0 flex-grow\">\n <div class=\"card-block large-padding\">\n <div class=\"d-flex\">\n <c8y-form-group>\n <label translate>Color</label>\n <div class=\"data-point-color form-control\">\n <div class=\"c8y-colorpicker\">\n <input\n [attr.aria-label]=\"'Color picker' | translate\"\n type=\"color\"\n name=\"color\"\n formControlName=\"color\"\n />\n <span [style.background-color]=\"formGroup.value?.color\"></span>\n </div>\n </div>\n </c8y-form-group>\n <c8y-form-group class=\"flex-grow p-l-8\">\n <label translate>Label</label>\n <input\n class=\"form-control\"\n formControlName=\"label\"\n name=\"label\"\n [placeholder]=\"'e.g. Temperature' | translate\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n <!-- TODO: add description to data point library templates -->\n <c8y-form-group>\n <label translate>Description</label>\n <textarea\n class=\"form-control\"\n formControlName=\"description\"\n name=\"description\"\n [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n rows=\"3\"\n ></textarea>\n </c8y-form-group>\n\n <div class=\"row\">\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label translate>Fragment</label>\n <input\n class=\"form-control\"\n name=\"fragment\"\n formControlName=\"fragment\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"\n formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label translate>Series</label>\n <input\n class=\"form-control\"\n formControlName=\"series\"\n name=\"series\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"config?.showCheckboxForGlobalFragment\">\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label class=\"c8y-checkbox\">\n <input name=\"c8y_Global\" formControlName=\"c8y_Global\" type=\"checkbox\" />\n <span></span>\n <span translate>Globally available</span>\n <button\n class=\"btn btn-clean\"\n [popover]=\"\n 'Will make this entry available to all users on the tenant if checked.'\n | translate\n \"\n container=\"body\"\n type=\"button\"\n [outsideClick]=\"true\"\n >\n <i [c8yIcon]=\"'question-circle-o'\" class=\"text-info\"></i>\n </button>\n </label>\n </c8y-form-group>\n </div>\n </div>\n </div>\n </div>\n <div class=\"inner-scroll bg-level-1\">\n <div class=\"card-block large-padding\">\n <fieldset class=\"c8y-fieldset\">\n <legend translate>Preview</legend>\n <c8y-range-display [config]=\"rangeConfig\" class=\"m-b-16 d-block\"></c8y-range-display>\n </fieldset>\n <fieldset class=\"c8y-fieldset\">\n <legend translate>Range</legend>\n <div class=\"row\" formGroupName=\"range\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n />\n <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n </c8y-form-group>\n </div>\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n />\n <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\"></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group>\n <label translate>Unit</label>\n <input\n class=\"form-control\"\n name=\"unit\"\n formControlName=\"unit\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || formGroup.controls?.target?.touched) &&\n formGroup.controls?.target?.errors\n }\"\n >\n <label translate>Target</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"target\"\n formControlName=\"target\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || formGroup.controls?.target?.touched) &&\n formGroup.controls?.target?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\">\n <legend translate>Yellow range</legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\">\n <legend translate>Red range</legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n />\n <c8y-messages\n [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n />\n <c8y-messages\n [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n </div>\n <div class=\"card-footer separator grid__col--fullspan\">\n <button (click)=\"cancel()\" class=\"btn btn-default\" [title]=\"'Cancel' | translate\" type=\"button\">\n {{ 'Cancel' | translate }}\n </button>\n <button\n *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n [disabled]=\"formGroup.invalid || formGroup.pristine\"\n class=\"btn btn-primary btn-form\"\n [title]=\"'Save' | translate\"\n type=\"submit\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n", dependencies: [{ kind: "component", type: i3$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "directive", type: i3$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "component", type: i3$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i3$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i3$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults"] }, { kind: "directive", type: i3$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i3$1.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i8.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i3$1.C8yTranslatePipe, name: "translate" }] });
|
|
220
223
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryDetailsComponent, decorators: [{
|
|
221
224
|
type: Component,
|
|
222
225
|
args: [{ selector: 'c8y-datapoint-library-details', template: "<c8y-title *ngIf=\"!isLoading\">\n {{ formGroup.value?.label }}\n <small *ngIf=\"formGroup.value?.fragment && formGroup.value?.series\">\n {{ formGroup.value?.fragment }} / {{ formGroup.value?.series }}\n </small>\n</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Configuration' | translate\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-data-points'\"\n [label]=\"'Data point library' | translate\"\n [path]=\"path\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-data-points'\"\n [label]=\"formGroup.value?.label\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<form\n (ngSubmit)=\"formGroup.valid && save(formGroup.value)\"\n (change)=\"formChange()\"\n [formGroup]=\"formGroup\"\n class=\"card content-fullpage card--grid grid__col--6-6--md grid__row--fit-auto\"\n novalidate\n>\n <div class=\"card-header large-padding separator grid__col--fullspan\">\n <div class=\"card-title\">\n {{ formGroup.value?.label }}\n </div>\n </div>\n <div *ngIf=\"!isLoading\" class=\"d-contents\">\n <div class=\"inner-scroll bg-level-0 flex-grow\">\n <div class=\"card-block large-padding\">\n <div class=\"d-flex\">\n <c8y-form-group>\n <label translate>Color</label>\n <div class=\"data-point-color form-control\">\n <div class=\"c8y-colorpicker\">\n <input\n [attr.aria-label]=\"'Color picker' | translate\"\n type=\"color\"\n name=\"color\"\n formControlName=\"color\"\n />\n <span [style.background-color]=\"formGroup.value?.color\"></span>\n </div>\n </div>\n </c8y-form-group>\n <c8y-form-group class=\"flex-grow p-l-8\">\n <label translate>Label</label>\n <input\n class=\"form-control\"\n formControlName=\"label\"\n name=\"label\"\n [placeholder]=\"'e.g. Temperature' | translate\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.label?.touched && formGroup.controls?.label?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n <!-- TODO: add description to data point library templates -->\n <c8y-form-group>\n <label translate>Description</label>\n <textarea\n class=\"form-control\"\n formControlName=\"description\"\n name=\"description\"\n [placeholder]=\"'e.g. Ambient Temperature in Celsius' | translate\"\n rows=\"3\"\n ></textarea>\n </c8y-form-group>\n\n <div class=\"row\">\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label translate>Fragment</label>\n <input\n class=\"form-control\"\n name=\"fragment\"\n formControlName=\"fragment\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'c8y_Temperature' }\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"\n formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label translate>Series</label>\n <input\n class=\"form-control\"\n formControlName=\"series\"\n name=\"series\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 'T' }\"\n type=\"text\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.series?.touched && formGroup.controls?.series?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\" *ngIf=\"config?.showCheckboxForGlobalFragment\">\n <div class=\"col-sm-6\">\n <c8y-form-group>\n <label class=\"c8y-checkbox\">\n <input name=\"c8y_Global\" formControlName=\"c8y_Global\" type=\"checkbox\" />\n <span></span>\n <span translate>Globally available</span>\n <button\n class=\"btn btn-clean\"\n [popover]=\"\n 'Will make this entry available to all users on the tenant if checked.'\n | translate\n \"\n container=\"body\"\n type=\"button\"\n [outsideClick]=\"true\"\n >\n <i [c8yIcon]=\"'question-circle-o'\" class=\"text-info\"></i>\n </button>\n </label>\n </c8y-form-group>\n </div>\n </div>\n </div>\n </div>\n <div class=\"inner-scroll bg-level-1\">\n <div class=\"card-block large-padding\">\n <fieldset class=\"c8y-fieldset\">\n <legend translate>Preview</legend>\n <c8y-range-display [config]=\"rangeConfig\" class=\"m-b-16 d-block\"></c8y-range-display>\n </fieldset>\n <fieldset class=\"c8y-fieldset\">\n <legend translate>Range</legend>\n <div class=\"row\" formGroupName=\"range\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.min?.errors }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 0 }\"\n />\n <c8y-messages [show]=\"range?.touched && range.controls?.min?.errors\"></c8y-messages>\n </c8y-form-group>\n </div>\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{ 'has-error': range?.touched && range?.controls?.max?.errors }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n />\n <c8y-messages [show]=\"range?.touched && range.controls?.max?.errors\"></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group>\n <label translate>Unit</label>\n <input\n class=\"form-control\"\n name=\"unit\"\n formControlName=\"unit\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: '\u00BAC' }\"\n />\n <c8y-messages\n [show]=\"formGroup.controls?.unit?.touched && formGroup.controls?.unit?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || formGroup.controls?.target?.touched) &&\n formGroup.controls?.target?.errors\n }\"\n >\n <label translate>Target</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"target\"\n formControlName=\"target\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 25 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || formGroup.controls?.target?.touched) &&\n formGroup.controls?.target?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"yellowRange\">\n <legend translate>Yellow range</legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || yellowRange?.touched) && yellowRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 50 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || yellowRange?.touched) && yellowRange.controls?.min?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || yellowRange?.touched) && yellowRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n />\n <c8y-messages\n [show]=\"\n (range?.touched || yellowRange?.touched) && yellowRange.controls?.max?.errors\n \"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n\n <fieldset class=\"c8y-fieldset\" formGroupName=\"redRange\">\n <legend translate>Red range</legend>\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || redRange?.touched) && redRange?.controls?.min?.errors\n }\"\n >\n <label translate>Min</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"min\"\n formControlName=\"min\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 75 }\"\n />\n <c8y-messages\n [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.min?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group\n [ngClass]=\"{\n 'has-error':\n (range?.touched || redRange?.touched) && redRange?.controls?.max?.errors\n }\"\n >\n <label translate>Max</label>\n <input\n type=\"number\"\n class=\"form-control\"\n name=\"max\"\n formControlName=\"max\"\n [placeholder]=\"'e.g. {{ example }}' | translate: { example: 100 }\"\n />\n <c8y-messages\n [show]=\"(range?.touched || redRange?.touched) && redRange.controls?.max?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n </div>\n <div class=\"card-footer separator grid__col--fullspan\">\n <button (click)=\"cancel()\" class=\"btn btn-default\" [title]=\"'Cancel' | translate\" type=\"button\">\n {{ 'Cancel' | translate }}\n </button>\n <button\n *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN', 'ROLE_INVENTORY_UPDATE']; allowAny: true\"\n [disabled]=\"formGroup.invalid || formGroup.pristine\"\n class=\"btn btn-primary btn-form\"\n [title]=\"'Save' | translate\"\n type=\"submit\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n</form>\n" }]
|
|
223
|
-
}], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.InventoryService }, { type: i3.FormBuilder }, { type: i3$1.AlertService }, { type: i1.Router }, { type: i5.TranslateService }, { type: i3$1.ColorService }, { type: undefined, decorators: [{
|
|
226
|
+
}], ctorParameters: function () { return [{ type: i1.ActivatedRoute }, { type: i2.InventoryService }, { type: i3.FormBuilder }, { type: i3$1.AlertService }, { type: i1.Router }, { type: i5.TranslateService }, { type: i3$1.ColorService }, { type: i6.DatapointParserService }, { type: undefined, decorators: [{
|
|
224
227
|
type: Optional
|
|
225
228
|
}, {
|
|
226
229
|
type: Inject,
|
|
@@ -228,12 +231,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
228
231
|
}] }]; } });
|
|
229
232
|
|
|
230
233
|
class DatapointLibraryListComponent {
|
|
231
|
-
constructor(inventory, router, modalService, translateService, alertService) {
|
|
234
|
+
constructor(inventory, router, modalService, translateService, alertService, parser) {
|
|
232
235
|
this.inventory = inventory;
|
|
233
236
|
this.router = router;
|
|
234
237
|
this.modalService = modalService;
|
|
235
238
|
this.translateService = translateService;
|
|
236
239
|
this.alertService = alertService;
|
|
240
|
+
this.parser = parser;
|
|
237
241
|
this.listClass = '';
|
|
238
242
|
this.isLoading = true;
|
|
239
243
|
this.reload$ = new BehaviorSubject(null);
|
|
@@ -242,6 +246,7 @@ class DatapointLibraryListComponent {
|
|
|
242
246
|
}), switchMap(() => this.getDatapoints()), tap(() => {
|
|
243
247
|
this.isLoading = false;
|
|
244
248
|
}), shareReplay());
|
|
249
|
+
this.parsePipe = pipe(map((data) => this.parser.parseDatapoints(data)));
|
|
245
250
|
}
|
|
246
251
|
getDatapoints() {
|
|
247
252
|
return this.inventory.list({ pageSize: 20, fragmentType: 'c8y_Kpi', withTotalPages: true });
|
|
@@ -271,12 +276,12 @@ class DatapointLibraryListComponent {
|
|
|
271
276
|
this.reload$.next();
|
|
272
277
|
}
|
|
273
278
|
}
|
|
274
|
-
DatapointLibraryListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryListComponent, deps: [{ token: i2.InventoryService }, { token: i1.Router }, { token: i3$1.ModalService }, { token: i5.TranslateService }, { token: i3$1.AlertService }], target: i0.ɵɵFactoryTarget.Component });
|
|
275
|
-
DatapointLibraryListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointLibraryListComponent, selector: "c8y-datapoint-library-list", ngImport: i0, template: "<c8y-title>Data point library</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item [icon]=\"'c8y-tools'\" [label]=\"'Configuration' | translate\"></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Data point library' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\" [priority]=\"1\">\n <button (click)=\"addDatapointEntry()\" class=\"btn btn-link\" [title]=\"'Add data point' | translate\">\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" [priority]=\"0\">\n <button\n (click)=\"reload()\"\n class=\"btn btn-link\"\n [disabled]=\"isLoading\"\n [title]=\"'Reload' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n <c8y-list-display-switch\n (onListClassChange)=\"listClass = $event\"\n [listLength]=\"(datapoints$ | async)?.data?.length\"\n ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/cockpit/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add a data point using the button below.' | translate\"\n>\n <p>\n <button\n (click)=\"addDatapointEntry()\"\n class=\"btn btn-primary\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div *ngIf=\"isLoading\" class=\"d-flex j-c-center\">\n <c8y-loading></c8y-loading>\n</div>\n\n<div\n class=\"card-group\"\n [ngClass]=\"listClass\"\n *ngIf=\"!isLoading && (datapoints$ | async) as datapoints\"\n>\n <div class=\"page-sticky-header hidden-xs\" *ngIf=\"datapoints.data.length\">\n <div class=\"d-flex\">\n <div class=\"card-header\">\n <div class=\"card-icon\"></div>\n <p translate>Label</p>\n </div>\n <div class=\"card-actions\"></div>\n <div class=\"card-block p-l-0\">\n <div class=\"col-sm-3 p-l-16\">\n <p translate>Fragment</p>\n </div>\n <div class=\"col-sm-2\">\n <p translate>Series</p>\n </div>\n <div class=\"col-sm-1\">\n <span translate>Unit</span>\n </div>\n <div class=\"col-sm-2\">\n <span translate>Target</span>\n </div>\n <div class=\"col-sm-4\">\n <span translate>Range</span>\n </div>\n </div>\n </div>\n </div>\n <div\n *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'\"\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n >\n <div class=\"card pointer\" (click)=\"editDatapointEntry(datapoint)\">\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown settings pull-right\" dropdown #datapointOptionsDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\">\n <button\n [title]=\"'Actions' | translate\"\n type=\"button\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu\" *dropdownMenu>\n <li>\n <button\n [title]=\"'Edit' | translate\"\n type=\"button\"\n (click)=\"editDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"pencil\"></i>\n {{ 'Edit' | translate }}\n </button>\n </li>\n <li>\n <button\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"removeDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"delete\"></i>\n {{ 'Remove' | translate }}\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"card-header separator\">\n <div class=\"card-icon\">\n <i c8yIcon=\"circle\" [style.color]=\"datapoint.c8y_Kpi?.color\"></i>\n </div>\n <div class=\"card-title text-truncate\" [title]=\"datapoint.c8y_Kpi?.label\">\n {{ datapoint.c8y_Kpi?.label }}\n </div>\n </div>\n <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n <div class=\"col-sm-3 col-md-2\">\n <c8y-range-display [config]=\"datapoint.c8y_Kpi\" [display]=\"'compact'\"></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label class=\"text-label-small m-r-4\" translate>Fragment</label>\n <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n {{ datapoint.c8y_Kpi?.fragment }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <label class=\"text-label-small m-r-4\" translate>Series</label>\n <span [title]=\"datapoint.c8y_Kpi?.series\">\n {{ datapoint.c8y_Kpi?.series }}\n </span>\n </div>\n <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n <span *ngIf=\"datapoint.c8y_Kpi?.unit\">\n <label class=\"text-label-small m-r-4\" translate>Unit</label>\n <span [title]=\"datapoint.c8y_Kpi?.unit\">\n {{ datapoint.c8y_Kpi?.unit }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <span *ngIf=\"datapoint.c8y_Kpi?.target\">\n <label class=\"text-label-small m-r-4\" translate>Target</label>\n <span [title]=\"datapoint.c8y_Kpi?.target\">\n {{ datapoint.c8y_Kpi?.target }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-4 card-hidden-grid\">\n <c8y-range-display [config]=\"datapoint.c8y_Kpi\" [display]=\"'inline'\"></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type:
|
|
279
|
+
DatapointLibraryListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryListComponent, deps: [{ token: i2.InventoryService }, { token: i1.Router }, { token: i3$1.ModalService }, { token: i5.TranslateService }, { token: i3$1.AlertService }, { token: i6.DatapointParserService }], target: i0.ɵɵFactoryTarget.Component });
|
|
280
|
+
DatapointLibraryListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.0.6", type: DatapointLibraryListComponent, selector: "c8y-datapoint-library-list", ngImport: i0, template: "<c8y-title>Data point library</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item [icon]=\"'c8y-tools'\" [label]=\"'Configuration' | translate\"></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Data point library' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\" [priority]=\"1\">\n <button (click)=\"addDatapointEntry()\" class=\"btn btn-link\" [title]=\"'Add data point' | translate\">\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" [priority]=\"0\">\n <button\n (click)=\"reload()\"\n class=\"btn btn-link\"\n [disabled]=\"isLoading\"\n [title]=\"'Reload' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n <c8y-list-display-switch\n (onListClassChange)=\"listClass = $event\"\n [listLength]=\"(datapoints$ | async)?.data?.length\"\n ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/cockpit/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add a data point using the button below.' | translate\"\n>\n <p>\n <button\n (click)=\"addDatapointEntry()\"\n class=\"btn btn-primary\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div *ngIf=\"isLoading\" class=\"d-flex j-c-center\">\n <c8y-loading></c8y-loading>\n</div>\n\n<div\n class=\"card-group\"\n [ngClass]=\"listClass\"\n *ngIf=\"!isLoading && (datapoints$ | async) as datapoints\"\n>\n <div class=\"page-sticky-header hidden-xs\" *ngIf=\"datapoints.data.length\">\n <div class=\"d-flex\">\n <div class=\"card-header\">\n <div class=\"card-icon\"></div>\n <p translate>Label</p>\n </div>\n <div class=\"card-actions\"></div>\n <div class=\"card-block p-l-0\">\n <div class=\"col-sm-3 p-l-16\">\n <p translate>Fragment</p>\n </div>\n <div class=\"col-sm-2\">\n <p translate>Series</p>\n </div>\n <div class=\"col-sm-1\">\n <span translate>Unit</span>\n </div>\n <div class=\"col-sm-2\">\n <span translate>Target</span>\n </div>\n <div class=\"col-sm-4\">\n <span translate>Range</span>\n </div>\n </div>\n </div>\n </div>\n <div\n *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n >\n <div class=\"card pointer\" (click)=\"editDatapointEntry(datapoint)\">\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown settings pull-right\" dropdown #datapointOptionsDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\">\n <button\n [title]=\"'Actions' | translate\"\n type=\"button\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu\" *dropdownMenu>\n <li>\n <button\n [title]=\"'Edit' | translate\"\n type=\"button\"\n (click)=\"editDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"pencil\"></i>\n {{ 'Edit' | translate }}\n </button>\n </li>\n <li>\n <button\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"removeDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"delete\"></i>\n {{ 'Remove' | translate }}\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"card-header separator\">\n <div class=\"card-icon\">\n <i c8yIcon=\"circle\" [style.color]=\"datapoint.c8y_Kpi?.color\"></i>\n </div>\n <div class=\"card-title text-truncate\" [title]=\"datapoint.c8y_Kpi?.label\">\n {{ datapoint.c8y_Kpi?.label }}\n </div>\n </div>\n <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n <div class=\"col-sm-3 col-md-2\">\n <c8y-range-display [config]=\"datapoint.c8y_Kpi\" [display]=\"'compact'\"></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label class=\"text-label-small m-r-4\" translate>Fragment</label>\n <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n {{ datapoint.c8y_Kpi?.fragment }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <label class=\"text-label-small m-r-4\" translate>Series</label>\n <span [title]=\"datapoint.c8y_Kpi?.series\">\n {{ datapoint.c8y_Kpi?.series }}\n </span>\n </div>\n <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n <span *ngIf=\"datapoint.c8y_Kpi?.unit\">\n <label class=\"text-label-small m-r-4\" translate>Unit</label>\n <span [title]=\"datapoint.c8y_Kpi?.unit\">\n {{ datapoint.c8y_Kpi?.unit }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <span *ngIf=\"datapoint.c8y_Kpi?.target\">\n <label class=\"text-label-small m-r-4\" translate>Target</label>\n <span [title]=\"datapoint.c8y_Kpi?.target\">\n {{ datapoint.c8y_Kpi?.target }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-4 card-hidden-grid\">\n <c8y-range-display [config]=\"datapoint.c8y_Kpi\" [display]=\"'inline'\"></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i6$1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: i3$1.ActionBarItemComponent, selector: "c8y-action-bar-item", inputs: ["placement", "priority", "itemClass", "injector", "groupId"] }, { kind: "component", type: i3$1.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i3$1.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i3$1.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i3$1.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i3$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.IfAllowedDirective, selector: "[c8yIfAllowed]", inputs: ["c8yIfAllowed", "c8yIfAllowedAllowAny"] }, { kind: "directive", type: i3$1.ForOfDirective, selector: "[c8yFor]", inputs: ["c8yForOf", "c8yForLoadMore", "c8yForPipe", "c8yForNotFound", "c8yForMaxIterations", "c8yForLoadingTemplate", "c8yForLoadNextLabel", "c8yForRealtime", "c8yForRealtimeOptions", "c8yForComparator", "c8yForEnableVirtualScroll", "c8yForVirtualScrollElementSize", "c8yForVirtualScrollStrategy", "c8yForVirtualScrollContainerHeight"], outputs: ["c8yForCount"] }, { kind: "component", type: i3$1.LoadingComponent, selector: "c8y-loading" }, { kind: "component", type: i3$1.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "component", type: i3$1.HelpComponent, selector: "c8y-help", inputs: ["src", "isCollapsed", "priority", "icon"] }, { kind: "component", type: i3$1.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }, { kind: "component", type: i3$1.ListDisplaySwitchComponent, selector: "c8y-list-display-switch", inputs: ["listKey", "listLength", "filterPipe"], outputs: ["onListClassChange"] }, { kind: "directive", type: i8$1.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i8$1.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i8$1.BsDropdownDirective, selector: "[bsDropdown], [dropdown]", inputs: ["placement", "triggers", "container", "dropup", "autoClose", "isAnimated", "insideClick", "isDisabled", "isOpen"], outputs: ["isOpenChange", "onShown", "onHidden"], exportAs: ["bs-dropdown"] }, { kind: "pipe", type: i3$1.C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] });
|
|
276
281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryListComponent, decorators: [{
|
|
277
282
|
type: Component,
|
|
278
|
-
args: [{ selector: 'c8y-datapoint-library-list', template: "<c8y-title>Data point library</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item [icon]=\"'c8y-tools'\" [label]=\"'Configuration' | translate\"></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Data point library' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\" [priority]=\"1\">\n <button (click)=\"addDatapointEntry()\" class=\"btn btn-link\" [title]=\"'Add data point' | translate\">\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" [priority]=\"0\">\n <button\n (click)=\"reload()\"\n class=\"btn btn-link\"\n [disabled]=\"isLoading\"\n [title]=\"'Reload' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n <c8y-list-display-switch\n (onListClassChange)=\"listClass = $event\"\n [listLength]=\"(datapoints$ | async)?.data?.length\"\n ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/cockpit/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add a data point using the button below.' | translate\"\n>\n <p>\n <button\n (click)=\"addDatapointEntry()\"\n class=\"btn btn-primary\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div *ngIf=\"isLoading\" class=\"d-flex j-c-center\">\n <c8y-loading></c8y-loading>\n</div>\n\n<div\n class=\"card-group\"\n [ngClass]=\"listClass\"\n *ngIf=\"!isLoading && (datapoints$ | async) as datapoints\"\n>\n <div class=\"page-sticky-header hidden-xs\" *ngIf=\"datapoints.data.length\">\n <div class=\"d-flex\">\n <div class=\"card-header\">\n <div class=\"card-icon\"></div>\n <p translate>Label</p>\n </div>\n <div class=\"card-actions\"></div>\n <div class=\"card-block p-l-0\">\n <div class=\"col-sm-3 p-l-16\">\n <p translate>Fragment</p>\n </div>\n <div class=\"col-sm-2\">\n <p translate>Series</p>\n </div>\n <div class=\"col-sm-1\">\n <span translate>Unit</span>\n </div>\n <div class=\"col-sm-2\">\n <span translate>Target</span>\n </div>\n <div class=\"col-sm-4\">\n <span translate>Range</span>\n </div>\n </div>\n </div>\n </div>\n <div\n *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'\"\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n >\n <div class=\"card pointer\" (click)=\"editDatapointEntry(datapoint)\">\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown settings pull-right\" dropdown #datapointOptionsDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\">\n <button\n [title]=\"'Actions' | translate\"\n type=\"button\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu\" *dropdownMenu>\n <li>\n <button\n [title]=\"'Edit' | translate\"\n type=\"button\"\n (click)=\"editDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"pencil\"></i>\n {{ 'Edit' | translate }}\n </button>\n </li>\n <li>\n <button\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"removeDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"delete\"></i>\n {{ 'Remove' | translate }}\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"card-header separator\">\n <div class=\"card-icon\">\n <i c8yIcon=\"circle\" [style.color]=\"datapoint.c8y_Kpi?.color\"></i>\n </div>\n <div class=\"card-title text-truncate\" [title]=\"datapoint.c8y_Kpi?.label\">\n {{ datapoint.c8y_Kpi?.label }}\n </div>\n </div>\n <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n <div class=\"col-sm-3 col-md-2\">\n <c8y-range-display [config]=\"datapoint.c8y_Kpi\" [display]=\"'compact'\"></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label class=\"text-label-small m-r-4\" translate>Fragment</label>\n <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n {{ datapoint.c8y_Kpi?.fragment }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <label class=\"text-label-small m-r-4\" translate>Series</label>\n <span [title]=\"datapoint.c8y_Kpi?.series\">\n {{ datapoint.c8y_Kpi?.series }}\n </span>\n </div>\n <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n <span *ngIf=\"datapoint.c8y_Kpi?.unit\">\n <label class=\"text-label-small m-r-4\" translate>Unit</label>\n <span [title]=\"datapoint.c8y_Kpi?.unit\">\n {{ datapoint.c8y_Kpi?.unit }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <span *ngIf=\"datapoint.c8y_Kpi?.target\">\n <label class=\"text-label-small m-r-4\" translate>Target</label>\n <span [title]=\"datapoint.c8y_Kpi?.target\">\n {{ datapoint.c8y_Kpi?.target }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-4 card-hidden-grid\">\n <c8y-range-display [config]=\"datapoint.c8y_Kpi\" [display]=\"'inline'\"></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
279
|
-
}], ctorParameters: function () { return [{ type: i2.InventoryService }, { type: i1.Router }, { type: i3$1.ModalService }, { type: i5.TranslateService }, { type: i3$1.AlertService }]; } });
|
|
283
|
+
args: [{ selector: 'c8y-datapoint-library-list', template: "<c8y-title>Data point library</c8y-title>\n<c8y-breadcrumb>\n <c8y-breadcrumb-item [icon]=\"'c8y-tools'\" [label]=\"'Configuration' | translate\"></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-tools'\"\n [label]=\"'Data point library' | translate\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n<c8y-action-bar-item [placement]=\"'right'\" *c8yIfAllowed=\"['ROLE_INVENTORY_ADMIN']\" [priority]=\"1\">\n <button (click)=\"addDatapointEntry()\" class=\"btn btn-link\" [title]=\"'Add data point' | translate\">\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'right'\" [priority]=\"0\">\n <button\n (click)=\"reload()\"\n class=\"btn btn-link\"\n [disabled]=\"isLoading\"\n [title]=\"'Reload' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"refresh\" [ngClass]=\"{ 'icon-spin': isLoading }\"></i>\n {{ 'Reload' | translate }}\n </button>\n</c8y-action-bar-item>\n\n<c8y-action-bar-item [placement]=\"'left'\" itemClass=\"navbar-form hidden-xs\">\n <c8y-list-display-switch\n (onListClassChange)=\"listClass = $event\"\n [listLength]=\"(datapoints$ | async)?.data?.length\"\n ></c8y-list-display-switch>\n</c8y-action-bar-item>\n\n<c8y-help src=\"/users-guide/cockpit/#data-point-library\"></c8y-help>\n\n<!-- empty state\n-->\n<c8y-ui-empty-state\n *ngIf=\"(datapoints$ | async)?.data?.length === 0\"\n [icon]=\"'c8y-data-points'\"\n [title]=\"'No data points to display.' | translate\"\n [subtitle]=\"'Add a data point using the button below.' | translate\"\n>\n <p>\n <button\n (click)=\"addDatapointEntry()\"\n class=\"btn btn-primary\"\n [title]=\"'Add data point' | translate\"\n type=\"button\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add data point' | translate }}\n </button>\n </p>\n</c8y-ui-empty-state>\n\n<!-- loading indicator -->\n<div *ngIf=\"isLoading\" class=\"d-flex j-c-center\">\n <c8y-loading></c8y-loading>\n</div>\n\n<div\n class=\"card-group\"\n [ngClass]=\"listClass\"\n *ngIf=\"!isLoading && (datapoints$ | async) as datapoints\"\n>\n <div class=\"page-sticky-header hidden-xs\" *ngIf=\"datapoints.data.length\">\n <div class=\"d-flex\">\n <div class=\"card-header\">\n <div class=\"card-icon\"></div>\n <p translate>Label</p>\n </div>\n <div class=\"card-actions\"></div>\n <div class=\"card-block p-l-0\">\n <div class=\"col-sm-3 p-l-16\">\n <p translate>Fragment</p>\n </div>\n <div class=\"col-sm-2\">\n <p translate>Series</p>\n </div>\n <div class=\"col-sm-1\">\n <span translate>Unit</span>\n </div>\n <div class=\"col-sm-2\">\n <span translate>Target</span>\n </div>\n <div class=\"col-sm-4\">\n <span translate>Range</span>\n </div>\n </div>\n </div>\n </div>\n <div\n *c8yFor=\"let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe\"\n class=\"col-sm-6 col-md-4 col-lg-3 col-xs-12\"\n >\n <div class=\"card pointer\" (click)=\"editDatapointEntry(datapoint)\">\n <div class=\"card-actions\" (click)=\"$event.stopPropagation()\">\n <div class=\"dropdown settings pull-right\" dropdown #datapointOptionsDropdown=\"bs-dropdown\" [cdkTrapFocus]=\"datapointOptionsDropdown.isOpen\">\n <button\n [title]=\"'Actions' | translate\"\n type=\"button\"\n class=\"dropdown-toggle c8y-dropdown\"\n dropdownToggle\n >\n <i c8yIcon=\"ellipsis-v\"></i>\n </button>\n <ul class=\"dropdown-menu\" *dropdownMenu>\n <li>\n <button\n [title]=\"'Edit' | translate\"\n type=\"button\"\n (click)=\"editDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"pencil\"></i>\n {{ 'Edit' | translate }}\n </button>\n </li>\n <li>\n <button\n [title]=\"'Remove' | translate\"\n type=\"button\"\n (click)=\"removeDatapointEntry(datapoint)\"\n >\n <i c8yIcon=\"delete\"></i>\n {{ 'Remove' | translate }}\n </button>\n </li>\n </ul>\n </div>\n </div>\n\n <div class=\"card-header separator\">\n <div class=\"card-icon\">\n <i c8yIcon=\"circle\" [style.color]=\"datapoint.c8y_Kpi?.color\"></i>\n </div>\n <div class=\"card-title text-truncate\" [title]=\"datapoint.c8y_Kpi?.label\">\n {{ datapoint.c8y_Kpi?.label }}\n </div>\n </div>\n <div class=\"card-block bg-level-1 p-b-24 card-hidden-list\">\n <div class=\"col-sm-3 col-md-2\">\n <c8y-range-display [config]=\"datapoint.c8y_Kpi\" [display]=\"'compact'\"></c8y-range-display>\n </div>\n </div>\n <div class=\"card-block\">\n <div class=\"col-sm-3 text-truncate\">\n <span>\n <label class=\"text-label-small m-r-4\" translate>Fragment</label>\n <span [title]=\"datapoint.c8y_Kpi?.fragment\">\n {{ datapoint.c8y_Kpi?.fragment }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <label class=\"text-label-small m-r-4\" translate>Series</label>\n <span [title]=\"datapoint.c8y_Kpi?.series\">\n {{ datapoint.c8y_Kpi?.series }}\n </span>\n </div>\n <div class=\"col-sm-1 text-truncate card-hidden-grid\">\n <span *ngIf=\"datapoint.c8y_Kpi?.unit\">\n <label class=\"text-label-small m-r-4\" translate>Unit</label>\n <span [title]=\"datapoint.c8y_Kpi?.unit\">\n {{ datapoint.c8y_Kpi?.unit }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-2 text-truncate\">\n <span *ngIf=\"datapoint.c8y_Kpi?.target\">\n <label class=\"text-label-small m-r-4\" translate>Target</label>\n <span [title]=\"datapoint.c8y_Kpi?.target\">\n {{ datapoint.c8y_Kpi?.target }}\n </span>\n </span>\n </div>\n <div class=\"col-sm-4 card-hidden-grid\">\n <c8y-range-display [config]=\"datapoint.c8y_Kpi\" [display]=\"'inline'\"></c8y-range-display>\n </div>\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
284
|
+
}], ctorParameters: function () { return [{ type: i2.InventoryService }, { type: i1.Router }, { type: i3$1.ModalService }, { type: i5.TranslateService }, { type: i3$1.AlertService }, { type: i6.DatapointParserService }]; } });
|
|
280
285
|
|
|
281
286
|
class DatapointLibraryModule {
|
|
282
287
|
static forRoot(config = {}) {
|