File

actility-device-registration/actility-device-registration.component.ts

Metadata

selector	`c8y-actility-registration`
templateUrl	`actility-device-registration.component.html`

Index

Properties

Public bsModalRef
connections$
deviceProtocols$
errorMessages$
errors$
fields
finalStepLabels
form
load$
model
registrationStepLabels
state
stepper
unsubscribe$

Constructor

constructor(bsModalRef: BsModalRef, registrationService: ActilityDeviceRegistrationService)

Parameters :

Name	Type	Optional
bsModalRef	`BsModalRef`	No
registrationService	`ActilityDeviceRegistrationService`	No

Methods

getActilityDeviceToSend

getActilityDeviceToSend()

Returns : ActilityDeviceRegistration

getConnections$

getConnections$()

Returns : any

getConnectivityPlans$

getConnectivityPlans$(name)

Parameters :

Name	Optional
name	No

Returns : any

getDeviceProfiles$

getDeviceProfiles$(name)

Parameters :

Name	Optional
name	No

Returns : any

getDeviceProtocols$

getDeviceProtocols$()

Returns : any

ngOnDestroy

ngOnDestroy()

Returns : void

Async register

register(event: literal type)

Parameters :

Name	Type	Optional
event	`literal type`	No

Returns : any

Properties

Public bsModalRef

Type : BsModalRef

connections$

Default value : this.getConnections$()

deviceProtocols$

Default value : this.getDeviceProtocols$()

errorMessages$

Default value :

this.errors$.pipe(
    map(errors => errors.map(error => error.message)),
    map(messages => uniq(messages))
  )

errors$

Default value : new BehaviorSubject<Error[]>([])

fields

Type : FormlyFieldConfig[]

Default value :

[
    {
      key: 'connection',
      type: 'typeahead',
      templateOptions: {
        label: gettext('Connection'),
        required: true,
        c8yForOptions: this.connections$,
        displayProperty: 'name',
        valueProperties: ['name']
      }
    },
    {
      key: 'deviceProfile',
      type: 'typeahead',
      templateOptions: {
        label: gettext('Device profile'),
        required: true,
        displayProperty: 'name',
        placeholder: 'IWM-LR3',
        valueProperties: ['id', 'name', 'typeMAC']
      },
      hooks: {
        onInit: field => {
          const connectionControl = field.form.get('connection');
          connectionControl.valueChanges
            .pipe(
              takeUntil(this.unsubscribe$),
              mergeMap(() => this.getDeviceProfiles$(this.form.get('connection').value.name))
            )
            .subscribe(
              profiles => {
                field.templateOptions.c8yForOptions = of(profiles);
                field.formControl.setValue(null);
              },
              error => {
                field.form.controls.deviceProfile.setErrors({ deviceProfile: true });
                field.validators.deviceProfile.message = error.message;
              }
            );
        }
      },
      validators: {
        deviceProfile: {
          expression: (control: AbstractControl) => {
            return control.status === 'VALID';
          },
          message: () => ''
        }
      }
    },
    {
      key: 'deviceType',
      type: 'typeahead',
      templateOptions: {
        label: gettext('Device protocol'),
        required: true,
        c8yForOptions: this.deviceProtocols$,
        displayProperty: 'name',
        valueProperties: ['id', 'name']
      }
    },
    {
      key: 'devEUI',
      type: 'input',
      templateOptions: {
        placeholder: '0018A20000000004',
        label: gettext('Device EUI'),
        required: true,
        pattern: '^([a-fA-F0-9]{16})$'
      },
      validation: {
        messages: {
          pattern: gettext('Must be a valid 16 digit hexadecimal number.')
        }
      }
    },
    {
      key: 'applicationEUI',
      type: 'input',
      templateOptions: {
        placeholder: '70B3D53260000003',
        label: gettext('Application EUI'),
        required: true,
        pattern: '^([a-fA-F0-9]{16})$'
      },
      validation: {
        messages: {
          pattern: gettext('Must be a valid 16 digit hexadecimal number.')
        }
      }
    },
    {
      key: 'applicationKey',
      type: 'input',
      templateOptions: {
        label: gettext('Application key'),
        placeholder: '258DB54023EA74F0D55085F7351737D0',
        required: true,
        pattern: '^([a-fA-F0-9]{32})$'
      },
      validation: {
        messages: {
          pattern: gettext('Must be a valid 32 digit hexadecimal number.')
        }
      }
    },
    {
      key: 'connectivityPlan',
      type: 'typeahead',
      templateOptions: {
        label: gettext('Connectivity plan'),
        description: gettext('Only connectivity plans with free slots are displayed'),
        required: true,
        placeholder: 'Dev-ope testing CP',
        displayProperty: 'name',
        valueProperties: ['id', 'ref', 'name', 'grantedConnections', 'usedConnections']
      },
      hooks: {
        onInit: field => {
          const connectionControl = field.form.get('connection');
          connectionControl.valueChanges
            .pipe(
              takeUntil(this.unsubscribe$),
              mergeMap(() => this.getConnectivityPlans$(this.form.get('connection').value.name))
            )
            .subscribe(
              profiles => {
                field.templateOptions.c8yForOptions = of(profiles);
                field.formControl.setValue(null);
              },
              error => {
                field.form.controls.connectivityPlan.setErrors({ connectivityPlan: true });
                field.validators.connectivityPlan.message = error.message;
              }
            );
        }
      },
      validators: {
        connectivityPlan: {
          expression: (control: AbstractControl) => {
            return control.status === 'VALID';
          },
          message: () => ''
        }
      }
    }
  ]

finalStepLabels

Type : object

Default value :

{
    custom: gettext('Close')
  }

form

Default value : new FormGroup({})

load$

Default value :

this.connections$.pipe(
    catchError((error: Error) => of(error)),
    switchMap(connections => {
      if (
        connections instanceof Error &&
        connections.name === ErrorName.NoConnectivitySettingsError
      ) {
        return of([connections]);
      }

      return forkJoin([
        of(connections),
        this.deviceProtocols$.pipe(catchError((error: Error) => of(error)))
      ]);
    }),
    map(results => results.filter(result => result instanceof Error)),
    switchMap(errors => (errors.length === 0 ? of([]) : throwError(errors)))
  )

model

Default value : {} as ActilityDeviceRegistration

registrationStepLabels

Type : object

Default value :

{
    next: gettext('Register')
  }

state

Type : State

Default value : 'loadPending'

stepper

Type : C8yStepper

unsubscribe$

Type : Subject<void>

Default value : new Subject()

<c8y-modal [headerClasses]="'dialog-header'" [customFooter]="true">
  <ng-container c8y-modal-title>
    <span [c8yIcon]="'c8y-device-connect'"></span>
    <h4>{{ 'Actility LoRa registration' | translate }}</h4>
  </ng-container>

  <ng-container *ngIf="state === 'loadPending'; else registrationForm">
    <div class="p-16 text-center">
      <c8y-loading></c8y-loading>
    </div>
  </ng-container>

  <!--Formly schema is rendered-->
  <ng-template #registrationForm>
    <c8y-stepper
      [hideStepProgress]="true"
      linear
      *ngIf="(errorMessages$ | async).length === 0; else errorMessagesPresent"
    >
      <cdk-step [stepControl]="form">
        <div class="p-b-16">
          <p
            class="
              p-l-24 p-r-24 p-t-16 p-b-16
              m-b-0
              sticky-top
              separator-bottom
              lead
              text-center
              bg-component
            "
          >
          {{ 'Register a single Actility device' | translate }}
          </p>
          <formly-form
            [form]="form"
            [fields]="fields"
            [model]="model"
            class="formly-group-array-cols d-block p-l-24 p-r-24"
          ></formly-form>
        </div>

        <c8y-stepper-buttons
          [labels]="registrationStepLabels"
          (onNext)="register($event)"
          (onCancel)="bsModalRef.hide()"
          [showButtons]="{ cancel: true, next: true }"
          [pending]="state === 'registrationPending'"
          [disabled]="!form?.valid"
          class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
        ></c8y-stepper-buttons>
      </cdk-step>
      <cdk-step state="final">
        <!--success scenario-->
        <div class="p-16 text-center" *ngIf="state === 'registrationPending'">
          <c8y-loading></c8y-loading>
        </div>
        <div class="m-24">
          <c8y-operation-result
            *ngIf="state === 'registrationSuccess'"
            text="{{ 'Device registered' | translate }}"
            [size]="84"
            [vertical]="true"
            type="success"
            class="lead m-b-0"
          ></c8y-operation-result>
        </div>
        <c8y-stepper-buttons
          class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
          (onCustom)="bsModalRef.hide()"
          [showButtons]="{ custom: true }"
          [labels]="finalStepLabels"
        ></c8y-stepper-buttons>
      </cdk-step>
    </c8y-stepper>
  </ng-template>

  <!--Failure scenario-->
  <ng-template #errorMessagesPresent>
    <div class="m-24">
      <c8y-operation-result
        *ngIf="state === 'registrationError'"
        text="{{ 'Failed to register' | translate }}"
        [size]="84"
        [vertical]="true"
        type="error"
        class="lead"
      ></c8y-operation-result>
      <div
        *ngFor="let msg of errorMessages$ | async"
        class="m-b-8"
        [ngClass]="{
          'text-center': state === 'registrationError',
          'alert alert-danger': state === 'loadError'
        }"
      >
        <span [innerHTML]="msg | translate"></span>
      </div>
    </div>
    <div class="modal-footer">
      <button
        title="{{ 'Close' | translate }}"
        (click)="bsModalRef.hide()"
        type="button"
        class="btn btn-default"
        translate
      >
        Close
      </button>
    </div>
  </ng-template>
</c8y-modal>

File

Metadata

Index

Properties

Methods

Constructor

Methods

Properties

results matching ""

No results matching ""