File

sigfox-device-registration/sigfox-device-registration.component.ts

Metadata

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

Index

Properties

Public bsModalRef
connections$
errorMessages$
errors$
fields
finalStepLabels
form
load$
model
Readonly PAGING
protocols$
registrationStepLabels
state
stepper
unsubscribe$

Constructor

constructor(bsModalRef: BsModalRef, sigfoxService: SigfoxProviderService, translateService: TranslateService)

Parameters :

Name	Type	Optional
bsModalRef	`BsModalRef`	No
sigfoxService	`SigfoxProviderService`	No
translateService	`TranslateService`	No

Methods

Async create

create(event: literal type)

Parameters :

Name	Type	Optional
event	`literal type`	No

Returns : any

getConnections$

getConnections$()

Returns : any

getContracts$

getContracts$(name)

Parameters :

Name	Optional
name	No

Returns : any

getProtocols$

getProtocols$()

Returns : any

getSigfoxDeviceToSend

getSigfoxDeviceToSend()

Returns : SigfoxDevice

ngOnDestroy

ngOnDestroy()

Returns : void

Properties

Public bsModalRef

Type : BsModalRef

connections$

Default value : this.getConnections$()

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: 'id',
      type: 'string',
      templateOptions: {
        placeholder: 'FED987',
        label: gettext('ID'),
        required: true,
        pattern: '(0x){0,1}[0-9A-F]+(h){0,1}'
      },
      validation: {
        messages: {
          pattern: gettext('Must be a valid hexadecimal number.')
        }
      }
    },
    {
      key: 'pac',
      type: 'string',
      templateOptions: {
        placeholder: 'FEDCBA9876543210',
        label: gettext('PAC'),
        required: true,
        pattern: '^([a-fA-F0-9]{16})$'
      },
      validation: {
        messages: {
          pattern: gettext('Must be a valid 16 digit hexadecimal number.')
        }
      }
    },
    {
      key: 'connection',
      type: 'typeahead',
      templateOptions: {
        label: gettext('Connection'),
        required: true,
        c8yForOptions: this.connections$,
        displayProperty: 'name',
        valueProperties: ['name']
      }
    },
    {
      key: 'contract',
      type: 'typeahead',
      templateOptions: {
        label: gettext('Contract'),
        required: true,
        placeholder: 'Free contract_25',
        displayProperty: 'name',
        valueProperties: ['id'],
        description: gettext('Only active contracts with free slots are displayed.')
      },
      hooks: {
        onInit: field => {
          const connectionControl = field.form.get('connection');
          connectionControl.valueChanges
          .pipe(
            takeUntil(this.unsubscribe$),
            mergeMap(() => this.getContracts$(this.form.get('connection').value.name))
          )
          .subscribe(
            profiles => {
              field.templateOptions.c8yForOptions = of(profiles);
              field.formControl.setValue(null);
            },
            error => {
              field.form.controls.contract.setErrors({ contract: true });
              field.validators.contract.message = error.message;
            }
          );
        }
      },
      validators: {
        contract: {
          expression: (control: AbstractControl) => {
            return control.status === 'VALID';
          },
          message: () => '',
        },
      }
    },
    {
      key: 'deviceType',
      type: 'typeahead',
      templateOptions: {
        label: gettext('Device protocol'),
        required: true,
        c8yForOptions: this.protocols$,
        displayProperty: 'name',
        valueProperties: ['id', 'name']
      }
    },
    {
      key: 'productCertificate',
      type: 'string',
      templateOptions: {
        placeholder: 'P_001F_EDCB_01',
        label: gettext('Product certificate key'),
        pattern: 'P_[0-9A-F]{4}_[0-9A-F]{4}_[0-9A-F]{2}',
        description: gettext(
          'If no product certificate key is specified, the device is considered a prototype.'
        )
      },
      validation: {
        messages: {
          pattern: (error, field: FormlyFieldConfig) =>
            this.translateService.instant(
              gettext('Must be a valid product certificate key, e.g. {{ example }}'),
              { example: 'P_001F_EDCB_01' }
            )
        }
      }
    }
  ]

finalStepLabels

Type : object

Default value :

{
    back: 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.protocols$.pipe(catchError((error: Error) => of(error)))
      ]);
    }),
    map(results => {
      return results.filter(result => {
        return result instanceof Error;
      });
    }),
    switchMap(errors => {
      return errors.length === 0 ? of([]) : throwError(errors);
    })
  )

model

Type : SigfoxDeviceFormly

Default value : {} as any

Readonly PAGING

Type : object

Default value :

{
    withTotalPages: true,
    pageSize: 10
  }

protocols$

Default value : this.getProtocols$()

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>{{ 'Sigfox 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 Sigfox device' | translate }}
          </p>
          <formly-form
            [form]="form"
            [fields]="fields"
            [model]="model"
            class="d-block p-l-24 p-r-24 p-t-16"
          ></formly-form>
        </div>
        <c8y-stepper-buttons
          [labels]="registrationStepLabels"
          (onNext)="create($event)"
          (onCancel)="bsModalRef.hide()"
          [showButtons]="{ cancel: true, next: true }"
          [pending]="state === 'registrationPending'"
          [disabled]="!form.valid"
          class="modal-footer sticky-bottom 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 ""