File
Implements
Methods
|
accept
|
accept(request: IDeviceRegistration)
|
Parameters :
| Name |
Type |
Optional |
| request |
IDeviceRegistration
|
No
|
|
|
canAcceptAll
|
canAcceptAll()
|
|
|
|
Async
delete
|
delete(id: string)
|
Parameters :
| Name |
Type |
Optional |
| id |
string
|
No
|
|
|
displayMode
|
displayMode(listClass: "interact-list" | "interact-grid")
|
Parameters :
| Name |
Type |
Optional |
| listClass |
"interact-list" | "interact-grid"
|
No
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
Async
setIsManagementTenant
|
setIsManagementTenant()
|
|
|
|
Async
setRequireSecurityToken
|
setRequireSecurityToken()
|
|
|
|
shouldShowSecurityTokenInput
|
shouldShowSecurityTokenInput(data: IDeviceRegistration)
|
Parameters :
| Name |
Type |
Optional |
| data |
IDeviceRegistration
|
No
|
|
|
showTokenInputBasedOnSecurityMode
|
showTokenInputBasedOnSecurityMode()
|
|
|
|
updateList
|
updateList(data)
|
|
|
|
deviceRequests$
|
Type : Observable<literal type>
|
|
gridOrList
|
Type : "interact-list" | "interact-grid"
|
Default value : 'interact-grid'
|
|
isLoading
|
Type : boolean
|
Default value : false
|
|
isManagementTenant
|
Type : boolean
|
Default value : false
|
|
limit$
|
Type : Observable<IDeviceRegistrationLimit>
|
|
limitReachedInfo$
|
Type : Observable<string>
|
|
requireSecurityToken
|
Type : boolean
|
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
*c8yIfAllowed="['ROLE_DEVICE_CONTROL_ADMIN']"
class="btn btn-link"
title="{{ 'Accept all' | translate }}"
(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="/users-guide/device-management/#connecting-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 *ngIf="gridOrList === 'interact-list'" class="page-sticky-header hidden-xs">
<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"
type="button"
popover="{{
'Security token is required if the connected device uses it.' | translate
}}"
placement="right"
container="body"
[attr.aria-label]="'Help' | translate"
triggers="focus"
>
<i [c8yIcon]="'question-circle-o'"></i>
</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 *ngIf="limitStatus?.isReached" class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<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
[c8yIcon]="statusProps[singleRequest.status].icon"
[class]="statusProps[singleRequest.status].cls"
></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
*ngIf="singleRequest.status === status.WAITING_FOR_CONNECTION"
c8yIcon="refresh"
class="icon-spin text-primary"
></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 *ngIf="gridOrList !== 'interact-list'" class="text-label-small" translate>
Security token
</span>
<input
[(ngModel)]="singleRequest.securityToken"
type="text"
class="form-control"
[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"
[ngClass]="{
'btn-danger': singleRequest.status === status.PENDING_ACCEPTANCE,
'btn-default': singleRequest.status !== status.PENDING_ACCEPTANCE
}"
title="{{
singleRequest.status === status.PENDING_ACCEPTANCE
? ('Remove' | translate)
: ('Cancel' | translate)
}}"
type="button"
(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 *ngIf="isManagementTenant; else noManagement" class="d-contents">
<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 data-cy="device-registration--created-by" title="{{ singleRequest.owner }}">
{{ 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 data-cy="device-registration--created-by" title="{{ singleRequest.owner }}">
{{ 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>