@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
208 lines (202 loc) • 15.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, Optional, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { Validators, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@c8y/ngx-components/context-dashboard';
import * as i1$1 from '@c8y/ngx-components';
import { CoreModule, gettext, DynamicComponentAlert, MeasurementRealtimeService, RangeDisplayModule } from '@c8y/ngx-components';
import * as i3 from '@c8y/ngx-components/datapoint-selector';
import { DatapointSelectorModule } from '@c8y/ngx-components/datapoint-selector';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { BehaviorSubject } from 'rxjs';
import { filter, map, distinctUntilChanged, switchMap, shareReplay } from 'rxjs/operators';
import { defaultWidgetIds } from '@c8y/ngx-components/widgets/definitions';
import { NgIf, NgClass, AsyncPipe } from '@angular/common';
class LinearGaugeWidgetConfigComponent {
constructor(formBuilder, form, widgetConfig) {
this.formBuilder = formBuilder;
this.form = form;
this.widgetConfig = widgetConfig;
this.datapointSelectionConfig = {};
this.defaultFormOptions = {
showRedRange: true,
showYellowRange: true,
showRange: true,
showTarget: true
};
this.limits = {
numberOfDecimalPlacesMax: 10,
numberOfDecimalPlacesMin: 0
};
}
onBeforeSave(config) {
if (this.formGroup.valid) {
Object.assign(config, this.formGroup.value);
return true;
}
return false;
}
ngOnInit() {
if (this.widgetConfig.context?.id) {
this.datapointSelectionConfig.contextAsset = this.widgetConfig?.context;
}
this.initForm();
if (this.config?.datapoints) {
this.formGroup.patchValue({ datapoints: this.config.datapoints });
}
if (typeof this.config?.fractionSize === 'number' && !Number.isNaN(this.config?.fractionSize)) {
this.formGroup.patchValue({ fractionSize: this.config.fractionSize });
}
}
initForm() {
this.formGroup = this.createForm();
this.form.form.addControl('config', this.formGroup);
this.formGroup.patchValue(this.config);
}
createForm() {
return this.formBuilder.group({
fractionSize: [
2,
[
Validators.required,
Validators.min(this.limits.numberOfDecimalPlacesMin),
Validators.max(this.limits.numberOfDecimalPlacesMax)
]
],
datapoints: this.formBuilder.control(new Array(), [Validators.required])
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinearGaugeWidgetConfigComponent, deps: [{ token: i1.FormBuilder }, { token: i1.NgForm }, { token: i2.WidgetConfigComponent }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinearGaugeWidgetConfigComponent, isStandalone: true, selector: "c8y-linear-gauge-widget-config", inputs: { config: "config" }, ngImport: i0, template: "<div class=\"p-l-24 p-r-24\">\n <form\n class=\"no-card-context\"\n [formGroup]=\"formGroup\"\n >\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-datapoint-selection-list\n class=\"bg-inherit p-t-8 d-block\"\n name=\"datapoints\"\n [defaultFormOptions]=\"defaultFormOptions\"\n [config]=\"datapointSelectionConfig\"\n [minActiveCount]=\"1\"\n [maxActiveCount]=\"1\"\n formControlName=\"datapoints\"\n ></c8y-datapoint-selection-list>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group class=\"p-t-8\">\n <label translate>Decimal places</label>\n <input\n class=\"form-control\"\n name=\"fractionSize\"\n type=\"number\"\n formControlName=\"fractionSize\"\n step=\"1\"\n />\n <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: DatapointSelectorModule }, { kind: "component", type: i3.DatapointSelectionListComponent, selector: "c8y-datapoint-selection-list", inputs: ["actions", "allowDragAndDrop", "config", "defaultFormOptions", "maxActiveCount", "minActiveCount", "resolveContext", "listTitle"], outputs: ["isValid", "change"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i1$1.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "component", type: i1$1.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "component", type: i1$1.MessagesComponent, selector: "c8y-messages", inputs: ["show", "defaults", "helpMessage"] }, { kind: "directive", type: i1$1.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinearGaugeWidgetConfigComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-linear-gauge-widget-config', standalone: true, imports: [DatapointSelectorModule, ReactiveFormsModule, CoreModule], template: "<div class=\"p-l-24 p-r-24\">\n <form\n class=\"no-card-context\"\n [formGroup]=\"formGroup\"\n >\n <div class=\"row\">\n <div class=\"col-md-6\">\n <c8y-datapoint-selection-list\n class=\"bg-inherit p-t-8 d-block\"\n name=\"datapoints\"\n [defaultFormOptions]=\"defaultFormOptions\"\n [config]=\"datapointSelectionConfig\"\n [minActiveCount]=\"1\"\n [maxActiveCount]=\"1\"\n formControlName=\"datapoints\"\n ></c8y-datapoint-selection-list>\n </div>\n\n <div class=\"col-md-6\">\n <c8y-form-group class=\"p-t-8\">\n <label translate>Decimal places</label>\n <input\n class=\"form-control\"\n name=\"fractionSize\"\n type=\"number\"\n formControlName=\"fractionSize\"\n step=\"1\"\n />\n <c8y-messages [show]=\"formGroup.controls.fractionSize.errors\"></c8y-messages>\n </c8y-form-group>\n </div>\n </div>\n </form>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i1.NgForm }, { type: i2.WidgetConfigComponent }], propDecorators: { config: [{
type: Input
}] } });
class LinearGaugeWidgetViewComponent {
constructor(measurementRealtime, dashboard, dynamicComponent) {
this.measurementRealtime = measurementRealtime;
this.dashboard = dashboard;
this.dynamicComponent = dynamicComponent;
this.activeDatapoint$ = new BehaviorSubject(null);
const activeDatapoint = this.activeDatapoint$.pipe(filter(dp => !!dp), map(dp => this.assignContextFromContextDashboard(dp)), distinctUntilChanged());
this.rangeDisplayConfig$ = activeDatapoint.pipe(switchMap(dp => this.getRangeDisplayConfig$(dp)), shareReplay({ refCount: true, bufferSize: 1 }));
this.rangeDisplayConfig$
.pipe(map(data => this.getErrorType(data)), distinctUntilChanged(), takeUntilDestroyed())
.subscribe(inRange => this.updateAlertStatus(inRange));
}
ngOnChanges() {
const activeDp = this.config.datapoints.find(dp => dp.__active);
this.activeDatapoint$.next(activeDp);
}
getRangeDisplayConfig$(dp) {
return this.measurementRealtime
.latestValueOfSpecificMeasurement$(dp.fragment, dp.series, dp.__target, 1, true)
.pipe(map(m => {
if (!m) {
return null;
}
const date = m.time;
const measurement = m[dp.fragment][dp.series];
return {
current: measurement.value,
fractionSize: this.config.fractionSize || 1,
max: dp.max,
min: dp.min,
redRangeMax: dp.redRangeMax,
redRangeMin: dp.redRangeMin,
target: dp.target,
time: date,
yellowRangeMax: dp.yellowRangeMax,
yellowRangeMin: dp.yellowRangeMin,
unit: measurement.unit || dp.unit,
orientation: this.getOrientation()
};
}));
}
assignContextFromContextDashboard(datapoint) {
if (!this.dashboard?.isDeviceTypeDashboard) {
return datapoint;
}
const context = this.dashboard?.context;
if (context?.id) {
const { name, id } = context;
datapoint.__target = { name, id };
}
return datapoint;
}
getOrientation() {
return this.dynamicComponent?.componentId === defaultWidgetIds.LINEAR_GAUGE
? 'horizontal'
: 'vertical';
}
getErrorType(data) {
if (!data) {
return 'NOT_FOUND';
}
if (!this.isInRange(data)) {
return 'OUT_OF_RANGE';
}
return 'NONE';
}
isInRange(data) {
if (!Number.isFinite(data.max) || !Number.isFinite(data.min)) {
// default range is 0-100
return data.current <= 100 && data.current >= 0;
}
return data.current <= data.max && data.current >= data.min;
}
updateAlertStatus(errorType) {
if (!this.alerts) {
return;
}
this.alerts.clear();
let msg;
if (errorType === 'OUT_OF_RANGE') {
msg = gettext('Current value out of defined range.');
}
else if (errorType === 'NOT_FOUND') {
msg = gettext('Configured data point not available on the selected device.');
}
if (!msg) {
return;
}
this.alerts.addAlerts(new DynamicComponentAlert({
type: 'warning',
text: msg
}));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinearGaugeWidgetViewComponent, deps: [{ token: i1$1.MeasurementRealtimeService }, { token: i2.ContextDashboardComponent, optional: true }, { token: i1$1.DynamicComponentComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LinearGaugeWidgetViewComponent, isStandalone: true, selector: "c8y-linear-gauge-widget-view", inputs: { config: "config" }, providers: [MeasurementRealtimeService], usesOnChanges: true, ngImport: i0, template: "<div\n class=\"p-l-16 p-r-16 p-b-16 fit-h d-flex d-col flex-center\"\n *ngIf=\"rangeDisplayConfig$ | async as rangeDisplayConfig\"\n [ngClass]=\"{\n 'p-t-40 j-c-center': rangeDisplayConfig.orientation === 'horizontal',\n }\"\n>\n <c8y-range-display [config]=\"rangeDisplayConfig\" [ngClass]=\"{'flex-grow': rangeDisplayConfig.orientation == 'vertical'}\"></c8y-range-display>\n</div>\n", dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: RangeDisplayModule }, { kind: "component", type: i1$1.RangeDisplayComponent, selector: "c8y-range-display", inputs: ["config", "display"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinearGaugeWidgetViewComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-linear-gauge-widget-view', providers: [MeasurementRealtimeService], standalone: true, imports: [NgIf, NgClass, AsyncPipe, RangeDisplayModule], template: "<div\n class=\"p-l-16 p-r-16 p-b-16 fit-h d-flex d-col flex-center\"\n *ngIf=\"rangeDisplayConfig$ | async as rangeDisplayConfig\"\n [ngClass]=\"{\n 'p-t-40 j-c-center': rangeDisplayConfig.orientation === 'horizontal',\n }\"\n>\n <c8y-range-display [config]=\"rangeDisplayConfig\" [ngClass]=\"{'flex-grow': rangeDisplayConfig.orientation == 'vertical'}\"></c8y-range-display>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1$1.MeasurementRealtimeService }, { type: i2.ContextDashboardComponent, decorators: [{
type: Optional
}] }, { type: i1$1.DynamicComponentComponent, decorators: [{
type: Optional
}] }], propDecorators: { config: [{
type: Input
}] } });
/**
* @deprecated
*/
class LinearGaugeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinearGaugeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LinearGaugeModule, imports: [LinearGaugeWidgetViewComponent, LinearGaugeWidgetConfigComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinearGaugeModule, imports: [LinearGaugeWidgetViewComponent, LinearGaugeWidgetConfigComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LinearGaugeModule, decorators: [{
type: NgModule,
args: [{
imports: [LinearGaugeWidgetViewComponent, LinearGaugeWidgetConfigComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { LinearGaugeModule, LinearGaugeWidgetConfigComponent, LinearGaugeWidgetViewComponent };
//# sourceMappingURL=c8y-ngx-components-widgets-implementations-linear-gauge.mjs.map