@c8y/ngx-components 1017.0.137 → 1017.0.139
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 +6 -3
- package/datapoint-library/datapoint-library.module.d.ts +3 -1
- package/datapoint-selector/datapoint-selector-modal/datapoint-selector-modal.component.d.ts +3 -0
- package/datapoint-selector/datapoint-selector.component.d.ts +2 -1
- package/esm2020/datapoint-library/datapoint-library-details/datapoint-library-details.component.mjs +37 -10
- package/esm2020/datapoint-library/datapoint-library.module.mjs +23 -4
- package/esm2020/datapoint-selector/datapoint-selector-modal/datapoint-selector-modal.component.mjs +14 -5
- package/esm2020/datapoint-selector/datapoint-selector.component.mjs +8 -5
- package/fesm2015/c8y-ngx-components-datapoint-library.mjs +61 -14
- package/fesm2015/c8y-ngx-components-datapoint-library.mjs.map +1 -1
- package/fesm2015/c8y-ngx-components-datapoint-selector.mjs +17 -6
- package/fesm2015/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
- package/fesm2020/c8y-ngx-components-datapoint-library.mjs +59 -14
- package/fesm2020/c8y-ngx-components-datapoint-library.mjs.map +1 -1
- package/fesm2020/c8y-ngx-components-datapoint-selector.mjs +17 -6
- package/fesm2020/c8y-ngx-components-datapoint-selector.mjs.map +1 -1
- package/locales/locales.pot +3 -0
- package/package.json +2 -2
|
@@ -4,10 +4,12 @@ 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 i8
|
|
7
|
+
import * as i8 from 'ngx-bootstrap/dropdown';
|
|
8
8
|
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i9 from 'ngx-bootstrap/popover';
|
|
10
10
|
import { PopoverModule } from 'ngx-bootstrap/popover';
|
|
11
|
+
import * as i10 from 'ngx-bootstrap/tooltip';
|
|
12
|
+
import { TooltipModule } from 'ngx-bootstrap/tooltip';
|
|
11
13
|
import { __awaiter } from 'tslib';
|
|
12
14
|
import * as i3 from '@angular/forms';
|
|
13
15
|
import { Validators } from '@angular/forms';
|
|
@@ -16,7 +18,9 @@ import * as i1 from '@angular/router';
|
|
|
16
18
|
import * as i2 from '@c8y/client';
|
|
17
19
|
import * as i5 from '@ngx-translate/core';
|
|
18
20
|
import * as i6 from '@c8y/ngx-components/datapoint-library/services';
|
|
19
|
-
import * as i7 from '@
|
|
21
|
+
import * as i7 from '@c8y/ngx-components/datapoint-selector';
|
|
22
|
+
import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
|
|
23
|
+
import * as i7$1 from '@angular/common';
|
|
20
24
|
import { BehaviorSubject, pipe } from 'rxjs';
|
|
21
25
|
import { tap, switchMap, shareReplay, map } from 'rxjs/operators';
|
|
22
26
|
|
|
@@ -24,7 +28,7 @@ const pathToDatapointLibrary = 'datapointlibrary';
|
|
|
24
28
|
const DATAPOINT_LIBRARY_CONFIG = new InjectionToken('DatapointLibraryOptions');
|
|
25
29
|
|
|
26
30
|
class DatapointLibraryDetailsComponent {
|
|
27
|
-
constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, parser, config) {
|
|
31
|
+
constructor(activatedRoute, inventory, formBuilder, alertService, router, translate, colorService, parser, datapointSelectorService, config) {
|
|
28
32
|
this.activatedRoute = activatedRoute;
|
|
29
33
|
this.inventory = inventory;
|
|
30
34
|
this.formBuilder = formBuilder;
|
|
@@ -33,11 +37,12 @@ class DatapointLibraryDetailsComponent {
|
|
|
33
37
|
this.translate = translate;
|
|
34
38
|
this.colorService = colorService;
|
|
35
39
|
this.parser = parser;
|
|
40
|
+
this.datapointSelectorService = datapointSelectorService;
|
|
36
41
|
this.config = config;
|
|
37
42
|
this.path = pathToDatapointLibrary;
|
|
38
43
|
this.isLoading = true;
|
|
39
44
|
this.rangeConfig = {};
|
|
40
|
-
this.initForm();
|
|
45
|
+
this.formGroup = this.initForm();
|
|
41
46
|
}
|
|
42
47
|
ngOnInit() {
|
|
43
48
|
this.routeSub = this.activatedRoute.parent.data.subscribe(data => {
|
|
@@ -88,6 +93,31 @@ class DatapointLibraryDetailsComponent {
|
|
|
88
93
|
const kpiValues = this.extractKpiValuesFromFormValue(this.formGroup.value);
|
|
89
94
|
this.rangeConfig = Object.assign({ orientation: 'horizontal' }, kpiValues);
|
|
90
95
|
}
|
|
96
|
+
pickDatapoint() {
|
|
97
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
98
|
+
try {
|
|
99
|
+
const datapoints = yield this.datapointSelectorService.selectDataPoints({
|
|
100
|
+
finishWithFirstSelection: true,
|
|
101
|
+
ignoreDatapointTemplates: true,
|
|
102
|
+
guessDatapointUnit: false
|
|
103
|
+
});
|
|
104
|
+
if (datapoints.length) {
|
|
105
|
+
const datapoint = datapoints[0];
|
|
106
|
+
this.formGroup.patchValue({
|
|
107
|
+
fragment: datapoint.fragment,
|
|
108
|
+
series: datapoint.series,
|
|
109
|
+
color: datapoint.color,
|
|
110
|
+
label: datapoint.label
|
|
111
|
+
});
|
|
112
|
+
this.formGroup.markAsTouched();
|
|
113
|
+
this.formGroup.markAsDirty();
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
catch (_e) {
|
|
117
|
+
// modal closed
|
|
118
|
+
}
|
|
119
|
+
});
|
|
120
|
+
}
|
|
91
121
|
navigateBackToList() {
|
|
92
122
|
return this.router.navigate([pathToDatapointLibrary]);
|
|
93
123
|
}
|
|
@@ -177,7 +207,7 @@ class DatapointLibraryDetailsComponent {
|
|
|
177
207
|
min: [undefined, []],
|
|
178
208
|
max: [undefined, []]
|
|
179
209
|
}, { validators: [C8yValidators.minMaxValidator(), C8yValidators.requireBothMinAndMax()] });
|
|
180
|
-
|
|
210
|
+
return this.formBuilder.group({
|
|
181
211
|
color: ['', [Validators.required, Validators.minLength(4)]],
|
|
182
212
|
label: ['', [Validators.required, Validators.minLength(1), Validators.maxLength(120)]],
|
|
183
213
|
description: ['', []],
|
|
@@ -226,13 +256,13 @@ class DatapointLibraryDetailsComponent {
|
|
|
226
256
|
return cleanedupValues;
|
|
227
257
|
}
|
|
228
258
|
}
|
|
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" }] });
|
|
259
|
+
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: i7.DatapointSelectorService }, { token: DATAPOINT_LIBRARY_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
260
|
+
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 <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=\"d-flex a-i-center gap-8\">\n <c8y-form-group class=\"flex-grow\">\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]=\"formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group class=\"flex-grow\">\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 class=\"flex-no-grow\">\n <button\n class=\"btn btn-default p-l-8 p-r-8\"\n (click)=\"pickDatapoint()\"\n type=\"button\"\n [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n [delay]=\"500\"\n [attr.aria-label]=\"'Load fragment and series from an existing data point' | translate\"\n >\n <i c8yIcon=\"eyedropper\"></i>\n </button>\n </div>\n </div>\n\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-help\"\n type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\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\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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7$1.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: i9.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "directive", type: i10.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i3$1.C8yTranslatePipe, name: "translate" }] });
|
|
231
261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryDetailsComponent, decorators: [{
|
|
232
262
|
type: Component,
|
|
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" }]
|
|
263
|
+
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 <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=\"d-flex a-i-center gap-8\">\n <c8y-form-group class=\"flex-grow\">\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]=\"formGroup.controls?.fragment?.touched && formGroup.controls?.fragment?.errors\"\n ></c8y-messages>\n </c8y-form-group>\n\n <c8y-form-group class=\"flex-grow\">\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 class=\"flex-no-grow\">\n <button\n class=\"btn btn-default p-l-8 p-r-8\"\n (click)=\"pickDatapoint()\"\n type=\"button\"\n [tooltip]=\"'Load fragment and series from an existing data point' | translate\"\n [delay]=\"500\"\n [attr.aria-label]=\"'Load fragment and series from an existing data point' | translate\"\n >\n <i c8yIcon=\"eyedropper\"></i>\n </button>\n </div>\n </div>\n\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-help\"\n type=\"button\"\n [attr.aria-label]=\"'Help' | translate\"\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\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" }]
|
|
234
264
|
}], ctorParameters: function () {
|
|
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: [{
|
|
265
|
+
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: i7.DatapointSelectorService }, { type: undefined, decorators: [{
|
|
236
266
|
type: Optional
|
|
237
267
|
}, {
|
|
238
268
|
type: Inject,
|
|
@@ -289,7 +319,7 @@ class DatapointLibraryListComponent {
|
|
|
289
319
|
}
|
|
290
320
|
}
|
|
291
321
|
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
|
|
322
|
+
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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7$1.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.BsDropdownMenuDirective, selector: "[bsDropdownMenu],[dropdownMenu]", exportAs: ["bs-dropdown-menu"] }, { kind: "directive", type: i8.BsDropdownToggleDirective, selector: "[bsDropdownToggle],[dropdownToggle]", exportAs: ["bs-dropdown-toggle"] }, { kind: "directive", type: i8.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$1.AsyncPipe, name: "async" }] });
|
|
293
323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryListComponent, decorators: [{
|
|
294
324
|
type: Component,
|
|
295
325
|
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" }]
|
|
@@ -333,12 +363,29 @@ class DatapointLibraryModule {
|
|
|
333
363
|
}
|
|
334
364
|
}
|
|
335
365
|
DatapointLibraryModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
|
|
336
|
-
DatapointLibraryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, declarations: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent], imports: [A11yModule,
|
|
337
|
-
|
|
366
|
+
DatapointLibraryModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, declarations: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent], imports: [A11yModule,
|
|
367
|
+
CoreModule,
|
|
368
|
+
BsDropdownModule,
|
|
369
|
+
PopoverModule,
|
|
370
|
+
TooltipModule,
|
|
371
|
+
DatapointSelectorModule], exports: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent] });
|
|
372
|
+
DatapointLibraryModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, imports: [A11yModule,
|
|
373
|
+
CoreModule,
|
|
374
|
+
BsDropdownModule,
|
|
375
|
+
PopoverModule,
|
|
376
|
+
TooltipModule,
|
|
377
|
+
DatapointSelectorModule] });
|
|
338
378
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.0.6", ngImport: i0, type: DatapointLibraryModule, decorators: [{
|
|
339
379
|
type: NgModule,
|
|
340
380
|
args: [{
|
|
341
|
-
imports: [
|
|
381
|
+
imports: [
|
|
382
|
+
A11yModule,
|
|
383
|
+
CoreModule,
|
|
384
|
+
BsDropdownModule,
|
|
385
|
+
PopoverModule,
|
|
386
|
+
TooltipModule,
|
|
387
|
+
DatapointSelectorModule
|
|
388
|
+
],
|
|
342
389
|
declarations: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent],
|
|
343
390
|
exports: [DatapointLibraryListComponent, DatapointLibraryDetailsComponent]
|
|
344
391
|
}]
|