@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
332 lines (323 loc) • 14.6 kB
JavaScript
import * as i1 from '@c8y/ngx-components';
import { gettext, CommonModule, FormsModule, DynamicFormsModule, CoreModule } from '@c8y/ngx-components';
import { Subject, filter, tap, takeUntil } from 'rxjs';
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import * as i2 from '@ngx-formly/core';
import { FormlyModule } from '@ngx-formly/core';
class BaseObjectMapping {
constructor(config) {
this.destroy$ = new Subject();
if (config.formlyFieldConfig) {
config.formlyFieldConfig.expressions = {
hide: field => {
return !field.parent.get(`has${config.formlyFieldConfig.key}`).formControl.getRawValue();
}
};
config.formlyFieldConfig.hooks = {
onInit: field => {
field.parent
.get(`has${config.formlyFieldConfig.key}`)
.formControl.patchValue(!!field.parent.model[`${config.formlyFieldConfig.key}`]);
field.options.fieldChanges
.pipe(filter((changes) => {
return (changes.type === 'valueChanges' && changes.field === field.parent.fieldGroup[0]);
}), tap((changes) => {
if (changes.value === 'undefined') {
field.parent
.get(`has${config.formlyFieldConfig.key}`)
.formControl.patchValue(!!field.parent.model[`${config.formlyFieldConfig.key}`]);
const formField = field.parent.get(config.formlyFieldConfig.key).formControl;
if (formField) {
formField.markAsPristine();
formField.markAsUntouched();
}
}
}), takeUntil(this.destroy$))
.subscribe();
},
onDestroy: () => {
this.destroy$.next();
this.destroy$.complete();
}
};
}
config.buttonType = config.buttonType || 'switch';
const buttonConfig = config.buttonType !== 'none'
? {
className: 'list-group-item',
key: `has${config.formlyFieldConfig ? config.formlyFieldConfig.key : 'Switch'}`,
type: config.buttonType,
props: {
label: gettext(config.label),
icon: config.icon,
description: config.tooltip,
switchMode: config.buttonType === 'switch'
},
expressions: {
'props.disabled': config.disabled || (() => false)
}
}
: undefined;
if (config.formlyFieldConfig) {
config.formlyFieldConfig.expressions = {
hide: field => {
return !field.parent.get(`has${config.formlyFieldConfig.key}`).formControl.getRawValue();
}
};
config.formlyFieldConfig.hooks = {
onInit: field => {
field.parent
.get(`has${config.formlyFieldConfig.key}`)
.formControl.patchValue(!!field.parent.model[`${config.formlyFieldConfig.key}`]);
field.options.fieldChanges
.pipe(filter((changes, _index) => {
return (changes.type === 'valueChanges' && changes.field === field.parent.fieldGroup[0]);
}), tap(changes => {
if (changes.value === 'undefined') {
field.parent
.get(`has${config.formlyFieldConfig.key}`)
.formControl.patchValue(!!field.parent.model[`${config.formlyFieldConfig.key}`]);
const formField = field.parent.get(config.formlyFieldConfig.key).formControl;
if (formField) {
formField.markAsPristine();
formField.markAsUntouched();
}
}
}), takeUntil(this.destroy$))
.subscribe();
},
onDestroy: () => {
this.destroy$.next();
this.destroy$.complete();
}
};
}
this.formlyFieldCfg = {
fieldGroup: [buttonConfig, config.formlyFieldConfig]
};
}
getFormlyFieldConfig() {
return this.formlyFieldCfg;
}
}
class MeasurementObjectMapping extends BaseObjectMapping {
constructor(_injector = null, measurementKey = 'measurementMapping', smallFormGroup = false, tooltip, fieldGroup) {
super({
icon: 'line-chart',
label: gettext('Send measurement'),
tooltip,
formlyFieldConfig: {
key: measurementKey,
className: 'tight-grid p-t-16',
fieldGroup: fieldGroup || [
{
key: 'type',
type: 'string',
props: {
label: gettext('Type'),
required: true,
smallFormGroup
},
className: 'col-md-3 col-sm-6'
},
{
key: 'series',
type: 'string',
props: {
label: gettext('Series'),
required: true,
smallFormGroup
},
className: 'col-md-3 col-sm-6'
},
{
key: 'unit',
type: 'string',
props: {
label: gettext('Unit'),
required: true,
smallFormGroup
},
className: 'col-md-3 col-sm-6'
}
]
}
});
}
}
class EventObjectMapping extends BaseObjectMapping {
constructor(_injector = null, eventKey = 'eventMapping', smallFormGroup = false, tooltip, fieldGroup) {
super({
icon: 'online1',
label: gettext('Send event'),
tooltip,
formlyFieldConfig: {
key: eventKey,
className: 'tight-grid p-t-16',
fieldGroup: fieldGroup || [
{
key: 'fragmentType',
type: 'string',
props: {
label: gettext('Fragment type'),
required: true,
smallFormGroup
},
className: 'col-md-3 col-sm-6'
},
{
key: 'innerType',
type: 'string',
props: {
label: gettext('Inner type'),
required: true,
smallFormGroup
},
className: 'col-md-3 col-sm-6'
},
{
key: 'text',
type: 'string',
props: {
label: gettext('Text'),
required: true,
smallFormGroup
},
className: 'col-md-3 col-sm-6'
},
{
key: 'type',
type: 'string',
props: {
label: gettext('Type'),
required: true,
smallFormGroup
},
className: 'col-md-3 col-sm-6'
}
]
}
});
}
}
class AlarmObjectMapping extends BaseObjectMapping {
constructor(_injector = null, alarmKey = 'alarmMapping', smallFormGroup = false, tooltip, fieldGroup) {
super({
icon: 'bell',
label: gettext('Raise alarm'),
tooltip,
formlyFieldConfig: {
key: alarmKey,
className: 'tight-grid p-t-16',
fieldGroup: fieldGroup || [
{
key: 'severity',
type: 'select',
props: {
label: gettext('Severity'),
options: [...Object.values(ALARM_SEVERITY).map(value => ({ label: value, value }))],
required: true,
smallFormGroup
},
className: 'col-md-3 col-sm-6'
},
{
key: 'status',
type: 'select',
props: {
label: gettext('Status'),
options: [...Object.values(ALARM_STATUS).map(value => ({ label: value, value }))],
required: true
},
className: 'col-md-3 col-sm-6'
},
{
key: 'text',
type: 'string',
props: {
label: gettext('Text'),
required: true
},
className: 'col-md-3 col-sm-6'
},
{
key: 'type',
type: 'string',
props: {
label: gettext('Type'),
required: true
},
className: 'col-md-3 col-sm-6'
}
]
}
});
}
}
const ALARM_SEVERITY = {
WARNING: gettext('WARNING'),
MINOR: gettext('MINOR'),
MAJOR: gettext('MAJOR'),
CRITICAL: gettext('CRITICAL')
};
const ALARM_STATUS = {
ACTIVE: gettext('ACTIVE'),
ACKNOWLEDGED: gettext('ACKNOWLEDGED'),
CLEARED: gettext('CLEARED')
};
class ObjectMappingComponent {
constructor(injector) {
this.injector = injector;
this.model = {};
this.onUpdate = new EventEmitter();
this.form = new FormGroup({});
this.fields = [];
this.options = {
formState: {
disabled: false
}
};
}
ngOnInit() {
this.fillFormlyForm();
}
ngAfterViewInit() {
if (this.fields?.length > 0) {
this.options.detectChanges(this.fields[0]);
}
}
onChange(_event) {
const { dirty, valid, touched } = this.form;
this.onUpdate.emit({ dirty, valid, touched });
}
fillFormlyForm() {
if (this.objectMappingTypes && this.objectMappingTypes.length > 0) {
this.objectMappingTypes.forEach(functionalityType => {
const instance = new functionalityType(this.injector);
if (instance instanceof BaseObjectMapping) {
this.fields.push(instance.getFormlyFieldConfig());
}
});
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ObjectMappingComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.14", type: ObjectMappingComponent, isStandalone: true, selector: "c8y-device-protocol-object-mappings", inputs: { model: ["data", "model"], objectMappingTypes: "objectMappingTypes" }, outputs: { onUpdate: "onUpdate" }, ngImport: i0, template: "<div class=\"form m-b-16 object-mappings\">\n <div class=\"legend form-block\">{{ 'Functionalities' | translate }}</div>\n <formly-form\n [model]=\"model\"\n [form]=\"form\"\n [fields]=\"fields\"\n [options]=\"options\"\n (modelChange)=\"onChange($event)\"\n data-cy=\"device-protocol-object-mappings--formly-form\"\n ></formly-form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: DynamicFormsModule }, { kind: "component", type: i2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: CoreModule }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: ObjectMappingComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-device-protocol-object-mappings', standalone: true, imports: [CommonModule, FormsModule, DynamicFormsModule, FormlyModule, CoreModule], template: "<div class=\"form m-b-16 object-mappings\">\n <div class=\"legend form-block\">{{ 'Functionalities' | translate }}</div>\n <formly-form\n [model]=\"model\"\n [form]=\"form\"\n [fields]=\"fields\"\n [options]=\"options\"\n (modelChange)=\"onChange($event)\"\n data-cy=\"device-protocol-object-mappings--formly-form\"\n ></formly-form>\n</div>\n" }]
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { model: [{
type: Input,
args: ['data']
}], objectMappingTypes: [{
type: Input
}], onUpdate: [{
type: Output
}] } });
/**
* Generated bundle index. Do not edit.
*/
export { ALARM_SEVERITY, ALARM_STATUS, AlarmObjectMapping, BaseObjectMapping, EventObjectMapping, MeasurementObjectMapping, ObjectMappingComponent };
//# sourceMappingURL=c8y-ngx-components-device-protocol-object-mappings.mjs.map