@c8y/ngx-components 1017.0.47 → 1017.0.49
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 { __awaiter } from 'tslib';
|
|
12
12
|
import * as i3 from '@angular/forms';
|
|
@@ -15,15 +15,16 @@ import { get, isEmpty } from 'lodash-es';
|
|
|
15
15
|
import * as i1 from '@angular/router';
|
|
16
16
|
import * as i2 from '@c8y/client';
|
|
17
17
|
import * as i5 from '@ngx-translate/core';
|
|
18
|
-
import * as i6 from '@
|
|
19
|
-
import
|
|
20
|
-
import {
|
|
18
|
+
import * as i6 from '@c8y/ngx-components/datapoint-library/services';
|
|
19
|
+
import * as i7 from '@angular/common';
|
|
20
|
+
import { BehaviorSubject, pipe } from 'rxjs';
|
|
21
|
+
import { tap, switchMap, shareReplay, map } from 'rxjs/operators';
|
|
21
22
|
|
|
22
23
|
const pathToDatapointLibrary = 'datapointlibrary';
|
|
23
24
|
const DATAPOINT_LIBRARY_CONFIG = new InjectionToken('DatapointLibraryOptions');
|
|
24
25
|
|
|
25
26
|
class DatapointLibraryDetailsComponent {
|
|
26
|
-
constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, config) {
|
|
27
|
+
constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, parser, config) {
|
|
27
28
|
this.activatedRoute = activatedRoute;
|
|
28
29
|
this.inventory = inventory;
|
|
29
30
|
this.formBuilder = formBuilder;
|
|
@@ -31,6 +32,7 @@ class DatapointLibraryDetailsComponent {
|
|
|
31
32
|
this.router = router;
|
|
32
33
|
this.translate = translate;
|
|
33
34
|
this.colorService = colorService;
|
|
35
|
+
this.parser = parser;
|
|
34
36
|
this.config = config;
|
|
35
37
|
this.path = pathToDatapointLibrary;
|
|
36
38
|
this.isLoading = true;
|
|
@@ -89,7 +91,8 @@ class DatapointLibraryDetailsComponent {
|
|
|
89
91
|
navigateBackToList() {
|
|
90
92
|
return this.router.navigate([pathToDatapointLibrary]);
|
|
91
93
|
}
|
|
92
|
-
datapointUpdate(
|
|
94
|
+
datapointUpdate(tmpDatapoint) {
|
|
95
|
+
const datapoint = this.parser.parseDatapoint(tmpDatapoint);
|
|
93
96
|
this.datapoint = datapoint;
|
|
94
97
|
const { fragment, series, description, unit, target, label, color, yellowRangeMin, yellowRangeMax, redRangeMin, redRangeMax, min, max } = datapoint.c8y_Kpi;
|
|
95
98
|
this.formGroup.patchValue({
|
|
@@ -223,13 +226,13 @@ class DatapointLibraryDetailsComponent {
|
|
|
223
226
|
return cleanedupValues;
|
|
224
227
|
}
|
|
225
228
|
}
|
|
226
|
-
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 });
|
|
227
|
-
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" }] });
|
|
229
|
+
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 });
|
|
230
|
+
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" }] });
|
|
228
231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryDetailsComponent, decorators: [{
|
|
229
232
|
type: Component,
|
|
230
233
|
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" }]
|
|
231
234
|
}], ctorParameters: function () {
|
|
232
|
-
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: [{
|
|
235
|
+
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: [{
|
|
233
236
|
type: Optional
|
|
234
237
|
}, {
|
|
235
238
|
type: Inject,
|
|
@@ -238,12 +241,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImpor
|
|
|
238
241
|
} });
|
|
239
242
|
|
|
240
243
|
class DatapointLibraryListComponent {
|
|
241
|
-
constructor(inventory, router, modalService, translateService, alertService) {
|
|
244
|
+
constructor(inventory, router, modalService, translateService, alertService, parser) {
|
|
242
245
|
this.inventory = inventory;
|
|
243
246
|
this.router = router;
|
|
244
247
|
this.modalService = modalService;
|
|
245
248
|
this.translateService = translateService;
|
|
246
249
|
this.alertService = alertService;
|
|
250
|
+
this.parser = parser;
|
|
247
251
|
this.listClass = '';
|
|
248
252
|
this.isLoading = true;
|
|
249
253
|
this.reload$ = new BehaviorSubject(null);
|
|
@@ -252,6 +256,7 @@ class DatapointLibraryListComponent {
|
|
|
252
256
|
}), switchMap(() => this.getDatapoints()), tap(() => {
|
|
253
257
|
this.isLoading = false;
|
|
254
258
|
}), shareReplay());
|
|
259
|
+
this.parsePipe = pipe(map((data) => this.parser.parseDatapoints(data)));
|
|
255
260
|
}
|
|
256
261
|
getDatapoints() {
|
|
257
262
|
return this.inventory.list({ pageSize: 20, fragmentType: 'c8y_Kpi', withTotalPages: true });
|
|
@@ -283,12 +288,12 @@ class DatapointLibraryListComponent {
|
|
|
283
288
|
this.reload$.next();
|
|
284
289
|
}
|
|
285
290
|
}
|
|
286
|
-
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 });
|
|
287
|
-
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:
|
|
291
|
+
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 });
|
|
292
|
+
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" }] });
|
|
288
293
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryListComponent, decorators: [{
|
|
289
294
|
type: Component,
|
|
290
|
-
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" }]
|
|
291
|
-
}], ctorParameters: function () { return [{ type: i2.InventoryService }, { type: i1.Router }, { type: i3$1.ModalService }, { type: i5.TranslateService }, { type: i3$1.AlertService }]; } });
|
|
295
|
+
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" }]
|
|
296
|
+
}], ctorParameters: function () { return [{ type: i2.InventoryService }, { type: i1.Router }, { type: i3$1.ModalService }, { type: i5.TranslateService }, { type: i3$1.AlertService }, { type: i6.DatapointParserService }]; } });
|
|
292
297
|
|
|
293
298
|
class DatapointLibraryModule {
|
|
294
299
|
static forRoot(config = {}) {
|