@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
338 lines (334 loc) • 16.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component } from '@angular/core';
import * as i5 from '@angular/forms';
import { FormGroup } from '@angular/forms';
import * as i4 from '@angular/router';
import * as i2 from '@ngx-formly/core';
import * as i3 from '@c8y/ngx-components/protocol-lwm2m/services';
import { SecurityMode, BindingMode } from '@c8y/ngx-components/protocol-lwm2m/model';
import * as i1 from '@c8y/ngx-components';
import { gettext, Permissions, CommonModule, CoreModule } from '@c8y/ngx-components';
class Lwm2mBootstrapParametersComponent {
constructor(alertService, permissions, builder, lwm2mBootstrapParametersSvc, route) {
this.alertService = alertService;
this.permissions = permissions;
this.builder = builder;
this.lwm2mBootstrapParametersSvc = lwm2mBootstrapParametersSvc;
this.route = route;
this.form = new FormGroup({});
this.model = {};
this.options = {
formState: {
disabled: false,
mainModel: this.model
}
};
this.writePermissionMissingAlert = {
text: gettext('You do not have write permissions. This form is read-only.'),
type: 'info'
};
this.DISABLED_HINT_TEXT = gettext('Change the security mode to enable this field.');
this.pattern = /^([a-fA-F0-9]{2})+$/;
this.deviceId = this.route?.snapshot?.parent?.params?.id;
}
async ngOnInit() {
const parameters = await this.getBootstrapParameters();
const { bindingMode, bootstrapId, bootstrapKey, bootstrapShortServerId, defaultMaximumPeriod, defaultMinimumPeriod, securityMode, endpoint, generateBootstrapServerConfig, lwm2mShortServerId, serverUri, registrationLifeTime, serverPublicKey, securityInstanceOffset, publicKeyOrId, secretKey } = parameters;
const leftFields = [
{
key: 'endpoint',
id: 'bs-endpoint',
type: 'string',
defaultValue: endpoint,
templateOptions: {
label: gettext('Endpoint'),
placeholder: 'urn:imei:012345678901234',
readonly: true
}
},
{
key: 'securityMode',
id: 'bs-securityMode',
type: 'select',
defaultValue: securityMode || SecurityMode.NO_SEC,
templateOptions: {
label: gettext('Security mode'),
options: [
{ label: SecurityMode.NO_SEC, value: SecurityMode.NO_SEC },
{ label: SecurityMode.PSK, value: SecurityMode.PSK }
],
required: true
}
},
{
key: 'bootstrapId',
id: 'bs-bootstrapId',
type: 'string',
templateOptions: {
label: gettext('Bootstrap PSK ID'),
description: this.DISABLED_HINT_TEXT,
required: true
},
hooks: {
onInit: (field) => {
field.formControl.patchValue(bootstrapId);
}
},
expressionProperties: {
'templateOptions.disabled': (model, formState, field) => this.disablePSKField(formState, field)
}
},
{
key: 'bootstrapKey',
id: 'bs-bootstrapKey',
type: 'string',
templateOptions: {
label: gettext('Bootstrap pre-shared key'),
description: this.DISABLED_HINT_TEXT,
placeholder: '0123456789abcdef',
required: true,
pattern: this.pattern
},
hooks: {
onInit: (field) => {
field.formControl.patchValue(bootstrapKey);
}
},
expressionProperties: {
'templateOptions.disabled': (model, formState, field) => this.disablePSKField(formState, field)
}
},
{
key: 'securityInstanceOffset',
id: 'bs-securityInstanceOffset',
type: 'number',
defaultValue: securityInstanceOffset,
templateOptions: {
label: gettext('Security instance offset'),
placeholder: '0',
min: 0
}
},
{
key: 'bootstrapShortServerId',
id: 'bs-bootstrapShortServerId',
type: 'number',
defaultValue: bootstrapShortServerId,
templateOptions: {
label: gettext('LWM2M bootstrap short server ID'),
placeholder: '0',
min: 0
}
},
{
key: 'registrationLifeTime',
id: 'bs-registrationLifeTime',
type: 'number',
defaultValue: registrationLifeTime,
templateOptions: {
label: gettext('Registration lifetime'),
description: gettext('in seconds'),
placeholder: '600',
min: 0
}
},
{
key: 'bindingMode',
id: 'bs-bindingMode',
type: 'select',
defaultValue: bindingMode || BindingMode.U,
templateOptions: {
label: gettext('Binding mode'),
options: [
{ label: gettext('UDP'), value: BindingMode.U },
{ label: gettext('UDP with queue mode'), value: BindingMode.UQ }
]
}
}
];
const rightFields = [
{
key: 'serverPublicKey',
id: 'bs-serverPublicKey',
type: 'string',
defaultValue: serverPublicKey,
templateOptions: {
label: gettext('Server public key'),
placeholder: 'AAAAB3NzaC1yc2E…'
}
},
{
key: 'serverUri',
id: 'bs-serverUri',
type: 'string',
defaultValue: serverUri,
templateOptions: {
label: gettext('LWM2M server URI'),
placeholder: 'coaps://<LWM2M-server-domain>:<coaps-port>'
}
},
{
key: 'publicKeyOrId',
id: 'bs-publicKeyOrId',
type: 'string',
templateOptions: {
label: gettext('LWM2M PSK ID'),
description: this.DISABLED_HINT_TEXT,
required: true
},
hooks: {
onInit: (field) => {
field.formControl.patchValue(publicKeyOrId);
}
},
expressionProperties: {
'templateOptions.disabled': (model, formState, field) => this.disablePSKField(formState, field)
}
},
{
key: 'secretKey',
id: 'bs-secretKey',
type: 'string',
templateOptions: {
label: gettext('LWM2M pre-shared key'),
description: this.DISABLED_HINT_TEXT,
placeholder: '0123456789abcdef',
required: true,
pattern: this.pattern
},
hooks: {
onInit: (field) => {
field.formControl.patchValue(secretKey);
}
},
expressionProperties: {
'templateOptions.disabled': (model, formState, field) => this.disablePSKField(formState, field)
}
},
{
key: 'lwm2mShortServerId',
id: 'bs-lwm2mShortServerId',
type: 'number',
defaultValue: lwm2mShortServerId,
templateOptions: {
label: gettext('LWM2M short server ID'),
placeholder: '0',
min: 0
}
},
{
key: 'generateBootstrapServerConfig',
id: 'bs-generateBootstrapServerConfig',
type: 'select',
defaultValue: generateBootstrapServerConfig || false,
templateOptions: {
label: gettext('Generate bootstrap server config'),
options: [
{ label: gettext('Yes'), value: true },
{ label: gettext('No'), value: false }
]
}
},
{
key: 'defaultMinimumPeriod',
id: 'bs-defaultMinimumPeriod',
type: 'number',
defaultValue: defaultMinimumPeriod,
templateOptions: {
label: gettext('Default minimum period'),
description: gettext('in seconds'),
placeholder: '10',
min: 0
}
},
{
key: 'defaultMaximumPeriod',
id: 'bs-defaultMaximumPeriod',
type: 'number',
defaultValue: defaultMaximumPeriod,
templateOptions: {
label: gettext('Default maximum period'),
description: gettext('in seconds'),
placeholder: '60',
min: 0
}
}
];
this.fields = [
{
fieldGroupClassName: 'card-block d-grid grid__col--6-6',
fieldGroup: [
{
fieldGroupClassName: 'form-group p-24 p-t-8 p-b-8 m-b-0',
fieldGroup: leftFields
},
{
fieldGroupClassName: 'form-group p-24 p-t-8 p-b-8 m-b-0',
fieldGroup: rightFields
}
]
}
];
this.builder.buildForm(this.form, this.fields, this.model, this.options);
const userHasWritePermission = this.permissions.hasRole(Permissions.ROLE_INVENTORY_ADMIN);
if (Object.keys(parameters).length === 0 || !userHasWritePermission) {
this.form.disable();
this.options.formState.disabled = true;
}
if (!userHasWritePermission) {
this.alertService.info(this.writePermissionMissingAlert.text);
}
}
ngOnDestroy() {
// alertService checks if given alert exists.
// save to remove it without additional checks
this.alertService.remove(this.writePermissionMissingAlert);
}
disablePSKField(formState, field) {
if (formState.disabled) {
delete field.templateOptions.description;
return true;
}
else if (!formState.mainModel.securityMode ||
formState.mainModel.securityMode === SecurityMode.NO_SEC) {
field.templateOptions.description = this.DISABLED_HINT_TEXT;
field.formControl.patchValue(null);
return true;
}
delete field.templateOptions.description;
return false;
}
async save() {
try {
await this.lwm2mBootstrapParametersSvc.update({ ...this.model, ...{ id: this.deviceId } });
this.alertService.success(gettext('Bootstrap parameters updated'));
// disables save button
this.form.markAsPristine();
this.form.updateValueAndValidity();
}
catch (error) {
this.alertService.addServerFailure({ ...error });
}
}
async getBootstrapParameters() {
try {
return (await this.lwm2mBootstrapParametersSvc.detail(this.deviceId))
.data;
}
catch (error) {
this.alertService.addServerFailure({ ...error });
return {};
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mBootstrapParametersComponent, deps: [{ token: i1.AlertService }, { token: i1.Permissions }, { token: i2.FormlyFormBuilder }, { token: i3.Lwm2mBootstrapParametersService }, { token: i4.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: Lwm2mBootstrapParametersComponent, isStandalone: true, selector: "c8y-lwm2m-bootstrap-parameters", ngImport: i0, template: "<form (ngSubmit)=\"save()\">\n <div class=\"card content-fullpage fit-h\">\n <div class=\"card-header separator grid__col--fullspan\">\n <h1 class=\"card-title\">{{ 'LWM2M bootstrap parameters' | translate }}</h1>\n </div>\n <div class=\"inner-scroll\">\n <formly-form\n [form]=\"form\"\n [fields]=\"fields\"\n [model]=\"model\"\n [options]=\"options\"\n ></formly-form>\n </div>\n <div\n [hidden]=\"options.formState.disabled\"\n class=\"card-footer separator grid__col--fullspan sticky-bottom\"\n >\n <button\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n class=\"btn btn-primary\"\n [disabled]=\"form.invalid || !form.dirty\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n</form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.C8yTranslatePipe, name: "translate" }, { kind: "ngmodule", type: CoreModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: Lwm2mBootstrapParametersComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-lwm2m-bootstrap-parameters', imports: [CommonModule, CoreModule], standalone: true, template: "<form (ngSubmit)=\"save()\">\n <div class=\"card content-fullpage fit-h\">\n <div class=\"card-header separator grid__col--fullspan\">\n <h1 class=\"card-title\">{{ 'LWM2M bootstrap parameters' | translate }}</h1>\n </div>\n <div class=\"inner-scroll\">\n <formly-form\n [form]=\"form\"\n [fields]=\"fields\"\n [model]=\"model\"\n [options]=\"options\"\n ></formly-form>\n </div>\n <div\n [hidden]=\"options.formState.disabled\"\n class=\"card-footer separator grid__col--fullspan sticky-bottom\"\n >\n <button\n title=\"{{ 'Save' | translate }}\"\n type=\"submit\"\n class=\"btn btn-primary\"\n [disabled]=\"form.invalid || !form.dirty\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n</form>\n" }]
}], ctorParameters: () => [{ type: i1.AlertService }, { type: i1.Permissions }, { type: i2.FormlyFormBuilder }, { type: i3.Lwm2mBootstrapParametersService }, { type: i4.ActivatedRoute }] });
/**
* Generated bundle index. Do not edit.
*/
export { Lwm2mBootstrapParametersComponent };
//# sourceMappingURL=c8y-ngx-components-protocol-lwm2m-components-bootstrap-parameters.mjs.map