register-device/device-registration-view.component.ts
OnInit
OnDestroy
| selector | c8y-device-registration-view |
| templateUrl | device-registration-view.component.html |
Properties |
Methods |
constructor(registerDeviceService: RegisterDeviceService, bootstrapRealtimeService: DeviceBootstrapRealtimeService, tenantUiService: TenantUiService, modalService: ModalService, translateService: TranslateService, optionsService: OptionsService)
|
|||||||||||||||||||||
|
Parameters :
|
| accept | ||||||
accept(request: IDeviceRegistration)
|
||||||
|
Parameters :
Returns :
void
|
| acceptAll |
acceptAll()
|
|
Returns :
void
|
| canAcceptAll |
canAcceptAll()
|
|
Returns :
boolean
|
| Async delete | ||||||
delete(id: string)
|
||||||
|
Parameters :
Returns :
any
|
| displayMode | ||||||
displayMode(listClass: "interact-list" | "interact-grid")
|
||||||
|
Parameters :
Returns :
void
|
| loadAll |
loadAll()
|
|
Returns :
void
|
| ngOnDestroy |
ngOnDestroy()
|
|
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| Async setIsManagementTenant |
setIsManagementTenant()
|
|
Returns :
any
|
| Async setRequireSecurityToken |
setRequireSecurityToken()
|
|
Returns :
any
|
| shouldShowSecurityTokenInput | ||||||
shouldShowSecurityTokenInput(data: IDeviceRegistration)
|
||||||
|
Parameters :
Returns :
boolean
|
| showTokenInputBasedOnSecurityMode |
showTokenInputBasedOnSecurityMode()
|
|
Returns :
boolean
|
| updateList | ||||
updateList(data)
|
||||
|
Parameters :
Returns :
void
|
| deviceRequests$ |
Type : Observable<literal type>
|
| gridOrList |
Type : "interact-list" | "interact-grid"
|
Default value : 'interact-grid'
|
| isLoading |
Default value : false
|
| isManagementTenant |
Default value : false
|
| limit$ |
Type : Observable<IDeviceRegistrationLimit>
|
| limitReachedInfo$ |
Type : Observable<string>
|
| requireSecurityToken |
Default value : false
|
| status |
Default value : DeviceRegistrationStatus
|
| Readonly statusProps |
Type : object
|
Default value : {
[DeviceRegistrationStatus.WAITING_FOR_CONNECTION]: {
label: gettext('Waiting for connection'),
icon: 'unlink',
cls: 'text-danger'
},
[DeviceRegistrationStatus.PENDING_ACCEPTANCE]: {
label: gettext('Pending acceptance'),
icon: 'circle',
cls: 'text-info'
},
[DeviceRegistrationStatus.ACCEPTED]: {
label: gettext('Accepted'),
icon: 'check-circle',
cls: 'text-success'
},
[DeviceRegistrationStatus.BLOCKED]: {
label: gettext('Blocked'),
icon: 'ban',
cls: 'text-danger'
}
}
|
<ng-container *ngIf="deviceRequests$ | async as deviceRequestList">
<c8y-title>
{{ 'Device registration' | translate }}
<small *ngIf="deviceRequestList.data.length === 1">1 {{ 'new device' | translate }}</small>
<small *ngIf="deviceRequestList.data.length > 1">
{{ deviceRequestList.data.length }} {{ 'new devices' | translate }}
</small>
</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
[icon]="'exchange'"
[label]="'Devices' | translate"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'c8y-device-connect'"
[label]="'Device registration' | translate"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
<c8y-action-bar-item
[placement]="'left'"
itemClass="navbar-form hidden-xs"
>
<c8y-list-display-switch (onListClassChange)="displayMode($event)"></c8y-list-display-switch>
</c8y-action-bar-item>
<ng-container *ngIf="limit$ | async as limitStatus">
<c8y-action-bar-item
[placement]="'right'"
[priority]="10"
>
<button
class="btn btn-link"
title="{{ 'Accept all' | translate }}"
type="button"
*c8yIfAllowed="['ROLE_DEVICE_CONTROL_ADMIN']"
(click)="acceptAll()"
[disabled]="canAcceptAll() || limitStatus?.isReached"
>
<i [c8yIcon]="'check'"></i>
{{ 'Accept all' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item
[placement]="'right'"
[priority]="9"
>
<button
class="btn btn-link"
title="{{ 'Reload' | translate }}"
type="button"
(click)="loadAll()"
[disabled]="isLoading"
>
<i
[c8yIcon]="'refresh'"
[ngClass]="{ 'icon-spin': isLoading }"
></i>
{{ 'Reload' | translate }}
</button>
</c8y-action-bar-item>
<c8y-action-bar-item
[placement]="'right'"
*c8yIfAllowed="['ROLE_DEVICE_CONTROL_ADMIN']"
>
<c8y-register-device-dropdown></c8y-register-device-dropdown>
</c8y-action-bar-item>
<c8y-help
src="/docs/device-management-application/registering-devices/#registering-devices"
></c8y-help>
<ng-container *ngIf="deviceRequestList.data.length > 0; else noData">
<div
class="card-group"
[ngClass]="gridOrList"
>
<!-- START interact-list sticky header START -->
<div
class="page-sticky-header hidden-xs"
*ngIf="gridOrList === 'interact-list'"
>
<div class="d-flex">
<div class="card-header p-l-40">
<p translate>Device</p>
</div>
<div class="card-block card-column-30 p-l-0 m-l-8">
<p translate>Status</p>
</div>
<div
class="card-block card-column-30 p-0"
*ngIf="showTokenInputBasedOnSecurityMode()"
>
<p translate>Security token</p>
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
popover="{{
'Security token is required if the connected device uses it.' | translate
}}"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</div>
<div class="card-footer card-column-50">
<div
class="d-contents"
*ngIf="isManagementTenant; else noManagement"
>
<div class="card-column-50">
{{ 'Created' | translate }}
</div>
<div class="card-column-30">
{{ 'By`user`' | translate }}
</div>
<div class="card-column-20">
{{ 'Tenant ID' | translate }}
</div>
</div>
<ng-template #noManagement>
<div class="d-contents">
<div class="card-column-50">
{{ 'Created' | translate }}
</div>
<div class="card-column-50">
{{ 'By`user`' | translate }}
</div>
</div>
</ng-template>
</div>
<div
class="card-actions-group"
style="min-width: 176px"
>
<div class="btn btn-xs invisible">
<!--EMPTY by design-->
</div>
</div>
</div>
</div>
<!-- END interact-list sticky header END -->
<div
class="col-xs-12 col-sm-6 col-md-4 col-lg-3"
*ngIf="limitStatus?.isReached"
>
<p
class="alert alert-warning center-block"
role="alert"
>
<strong>
{{ limitReachedInfo$ | async }}
</strong>
<br />
<span translate>Please contact your platform administrator.</span>
</p>
</div>
<ng-container *ngFor="let singleRequest of deviceRequestList.data">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card">
<div class="card-header separator">
<div class="card-icon">
<i
[class]="statusProps[singleRequest.status].cls"
[c8yIcon]="statusProps[singleRequest.status].icon"
></i>
</div>
<p
class="card-title text-truncate"
title="{{ singleRequest.id }}"
>
{{ singleRequest.id }}
</p>
</div>
<div class="card-block text-center card-column-30">
<span
class="text-label-small"
translate
>
Status
</span>
<p>
<i
class="icon-spin text-primary"
c8yIcon="refresh"
*ngIf="singleRequest.status === status.WAITING_FOR_CONNECTION"
></i>
{{ statusProps[singleRequest.status].label | translate }}
</p>
</div>
<ng-container *c8yIfAllowed="['ROLE_DEVICE_CONTROL_ADMIN']">
<div
class="card-block text-center card-column-30 p-t-0"
[ngClass]="{ 'p-b-0': !shouldShowSecurityTokenInput(singleRequest) }"
*ngIf="showTokenInputBasedOnSecurityMode()"
>
<ng-container *ngIf="shouldShowSecurityTokenInput(singleRequest)">
<span
class="text-label-small"
*ngIf="gridOrList !== 'interact-list'"
translate
>
Security token
</span>
<input
class="form-control"
type="text"
[(ngModel)]="singleRequest.securityToken"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'A1e3gh5ds' }"
[required]="requireSecurityToken"
/>
</ng-container>
</div>
<div
class="card-actions-group d-flex a-i-center j-c-center"
style="min-width: 176px"
>
<button
class="btn btn-sm"
title="{{
singleRequest.status === status.PENDING_ACCEPTANCE
? ('Remove' | translate)
: ('Cancel' | translate)
}}"
type="button"
[ngClass]="{
'btn-danger': singleRequest.status === status.PENDING_ACCEPTANCE,
'btn-default': singleRequest.status !== status.PENDING_ACCEPTANCE
}"
(click)="delete(singleRequest.id)"
[disabled]="isLoading"
>
<span *ngIf="singleRequest.status === status.PENDING_ACCEPTANCE">
{{ 'Remove' | translate }}
</span>
<span *ngIf="singleRequest.status !== status.PENDING_ACCEPTANCE">
{{ 'Cancel' | translate }}
</span>
</button>
<button
class="btn btn-primary btn-sm"
title="{{ 'Accept' | translate }}"
type="button"
(click)="accept(singleRequest)"
*ngIf="singleRequest.status === status.PENDING_ACCEPTANCE"
[disabled]="
isLoading ||
limitStatus?.isReached ||
(!singleRequest.securityToken && requireSecurityToken)
"
>
{{ 'Accept' | translate }}
</button>
</div>
</ng-container>
<div class="card-footer separator text-center card-column-50">
<small
class="d-contents"
*ngIf="isManagementTenant; else noManagement"
>
<div
class="d-contents"
*ngIf="singleRequest.creationTime && singleRequest.owner"
>
<span class="card-column-50">
<span
class="text-label-small m-l-4 m-r-4"
translate
>
Created on`date`
</span>
<span data-cy="device-registration--creation-date">
{{ singleRequest.creationTime | c8yDate }}
</span>
</span>
<span class="card-column-30 text-truncate">
<span
class="text-label-small m-l-4 m-r-4"
translate
>
by`user`
</span>
<span
title="{{ singleRequest.owner }}"
data-cy="device-registration--created-by"
>
{{ singleRequest.owner }}
</span>
</span>
<span class="card-column-20">
<span
class="text-label-small m-l-4 m-r-4"
translate
>
in`tenant`
</span>
<span>{{ singleRequest.tenantId }}</span>
</span>
</div>
<div
class="d-contents"
*ngIf="!singleRequest.creationTime || !singleRequest.owner"
>
<div class="card-column-50"></div>
<div class="card-column-30"></div>
<span
class="text-label-small"
translate
>
Created in`tenant`
</span>
<div class="card-column-20">
<span>
{{ singleRequest.tenantId }}
</span>
</div>
</div>
</small>
<ng-template #noManagement>
<small class="d-contents">
<span class="card-column-50">
<span
class="text-label-small m-l-4 m-r-4"
translate
>
Created on`date`
</span>
<span data-cy="device-registration--creation-date">
{{ singleRequest.creationTime | c8yDate }}
</span>
</span>
<span class="card-column-50 text-truncate">
<span
class="text-label-small m-l-4 m-r-4"
translate
>
by`user`
</span>
<span
title="{{ singleRequest.owner }}"
data-cy="device-registration--created-by"
>
{{ singleRequest.owner }}
</span>
</span>
</small>
</ng-template>
</div>
</div>
</div>
</ng-container>
</div>
<c8y-load-more
[paging]="deviceRequestList.paging"
[hidden]="true"
(onLoad)="updateList($event)"
></c8y-load-more>
</ng-container>
<ng-template #noData>
<div class="c8y-empty-state m-t-40 text-center">
<h1 class="c8y-icon c8y-icon-device-connect c8y-icon-duocolor"></h1>
<ng-container *ngIf="limitStatus?.isReached; else limitNotReached">
<h3>
{{ limitReachedInfo$ | async }}
</h3>
<p translate>Please contact your platform administrator.</p>
</ng-container>
<ng-template #limitNotReached>
<h3 translate>No pending registrations to display.</h3>
<p
*c8yIfAllowed="['ROLE_DEVICE_CONTROL_ADMIN']"
translate
>
Use the "Register device" dropdown in the top right corner.
</p>
</ng-template>
</div>
</ng-template>
</ng-container>
</ng-container>