register-device/bulk/bulk-device-registration-modal.component.ts
selector | bulk-device-registration |
templateUrl | bulk-device-registration-modal.component.html |
Properties |
Methods |
constructor(router: Router, jsonschema: C8yJSONSchema, deviceRegistrationService: DeviceRegistrationBulkService, registerDeviceService: RegisterDeviceService, bsModalRef: BsModalRef)
|
||||||||||||||||||
Parameters :
|
cancel |
cancel()
|
Returns :
void
|
complete |
complete()
|
Returns :
void
|
download | |||||||||
download(headers: string[], fileName: string)
|
|||||||||
Parameters :
Returns :
void
|
downloadFull |
downloadFull()
|
Returns :
void
|
downloadSimple |
downloadSimple()
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Returns :
void
|
upload |
upload()
|
Returns :
void
|
failedResult |
Type : BulkFailedResult
|
form |
Default value : new FormGroup({})
|
message |
Type : string
|
model |
Type : object
|
Default value : {}
|
pending |
Type : boolean
|
result |
Type : IDeviceRegistrationBulkResult
|
stepper |
Type : C8yStepper
|
Decorators :
@ViewChild(C8yStepper, {static: true})
|
success |
Type : boolean
|
template |
Type : FormlyFieldConfig[]
|
<c8y-modal [headerClasses]="'dialog-header'" [customFooter]="true">
<ng-container c8y-modal-title>
<span c8yIcon="upload"></span>
<h4>{{ 'Bulk device registration' | translate }}</h4>
</ng-container>
<c8y-stepper [hideStepProgress]="true" linear>
<cdk-step [stepControl]="form">
<div class="sticky-top bg-component separator-bottom">
<p
class="
p-l-24 p-r-24 p-t-16 p-b-16
m-b-0
sticky-top
separator-bottom
text-16 text-medium text-center
bg-component
"
translate
>
Register general devices in bulk
</p>
<c8y-form-group class="p-24 p-t-16 p-b-8 m-b-0">
<formly-form [form]="form" [fields]="template" [model]="model"></formly-form>
</c8y-form-group>
</div>
<div class="bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24">
<div>
<p class="m-b-8 text-medium" translate>Simple registration</p>
<p class="small m-b-8" translate>
Creates all registration requests at once, then each one needs to go through regular
acceptance process.
</p>
</div>
<a
title="{{ 'Download template' | translate }}"
class="btn btn-default btn-sm"
target="_self"
(click)="downloadSimple()"
>
<i c8yIcon="download"></i>
<span translate>Download template</span>
</a>
</div>
<div class="bg-gray-white separator-bottom p-t-16 p-b-16 p-l-24 p-r-24">
<div>
<p class="m-b-8 text-medium" translate>Full registration</p>
<p class="small m-b-8" translate>
Creates all device credentials and devices using provided list of property values.
Devices can start communicating with the platform immediately.
</p>
</div>
<a
title="{{ 'Download template' | translate }}"
class="btn btn-default btn-sm"
target="_self"
(click)="downloadFull()"
>
<i c8yIcon="download"></i>
<span translate>Download template</span>
</a>
</div>
<c8y-stepper-buttons
class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
[showButtons]="{ cancel: true, next: true }"
[disabled]="form.invalid"
[pending]="pending"
(onCancel)="cancel()"
(onNext)="upload()"
[labels]="{ next: 'Upload' }"
></c8y-stepper-buttons>
</cdk-step>
<cdk-step state="final">
<div class="m-24">
<div *ngIf="success; else warning">
<c8y-operation-result
text="{{ message | translate }}"
[size]="84"
[vertical]="true"
type="success"
class="lead"
></c8y-operation-result>
</div>
<ng-template #warning>
<c8y-operation-result
text="{{ message | translate }}"
[size]="84"
[vertical]="true"
type="error"
class="lead"
></c8y-operation-result>
</ng-template>
<c8y-list-group class="separator-top m-t-16">
<ng-container *ngIf="result; else failedResponse">
<c8y-li *ngIf="success; else fail">
<c8y-li-icon class="text-success" icon="check-circle"></c8y-li-icon>
<p>All devices processed successfully.</p>
<c8y-li-collapse>
<pre><code>{{ result | json }}</code></pre>
</c8y-li-collapse>
</c8y-li>
<ng-template #fail>
<c8y-li>
<c8y-li-icon class="text-danger" icon="ban"></c8y-li-icon>
<p
ngNonBindable
[translateParams]="{ count: result?.numberOfFailed, total: result?.numberOfAll }"
translate
>
Failed to process {{ count }} out of {{ total }}.
</p>
<c8y-li-collapse>
<pre><code>{{ result | json }}</code></pre>
</c8y-li-collapse>
</c8y-li>
</ng-template>
</ng-container>
<ng-template #failedResponse>
<c8y-li>
<c8y-li-icon class="text-danger" [icon]="'ban'"></c8y-li-icon>
<small>{{ failedResult?.message | translate }}</small>
<c8y-li-collapse>
<pre><code>{{ failedResult | json }}</code></pre>
</c8y-li-collapse>
</c8y-li>
</ng-template>
</c8y-list-group>
</div>
<c8y-stepper-buttons
class="sticky-bottom d-block p-t-16 p-b-16 separator-top bg-white"
[showButtons]="{ next: true }"
(onNext)="complete()"
[labels]="{ next: success ? 'Close' : 'Cancel' }"
></c8y-stepper-buttons>
</cdk-step>
</c8y-stepper>
</c8y-modal>