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>
|
|
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: 'remove',
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-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 }}"
(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="flex-row">
<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-40 p-0" *ngIf="showTokenInputBasedOnSecurityMode()">
<p translate>Security token</p>
<button
class="btn btn-clean"
popover="{{
'Security token is required if the connected device uses it.' | translate
}}"
placement="right"
container="body"
triggers="click focus"
[outsideClick]="true"
>
<i [c8yIcon]="'question-circle-o'" class="text-info"></i>
</button>
</div>
<div class="card-footer card-column-40">
<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 translate>
You reached the limit of {{ limitStatus.limit }} devices. No more devices can be
registered.
</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">{{ 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-40 p-t-0 p-b-0" *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 flex-item-v-center" style="min-width: 176px">
<button
class="btn btn-danger btn-xs"
title="{{ 'Remove' | translate }}"
(click)="delete(singleRequest.id)"
[disabled]="isLoading"
>
{{ 'Remove' | translate }}
</button>
<button
class="btn btn-primary btn-xs"
title="{{ 'Accept' | translate }}"
(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-40">
<small *ngIf="isManagementTenant; else noManagement" class="d-contents">
<div class="d-contents" *ngIf="singleRequest.creationTime && singleRequest.owner">
<span class="text-label-small" translate>Created on`date`</span>
<span class="card-column-50">
{{ singleRequest.creationTime | c8yDate }}
</span>
<span class="text-label-small m-l-4 m-r-4" translate>by`user`</span>
<span class="card-column-30">{{ singleRequest.owner }}</span>
<span class="text-label-small m-l-4 m-r-4" translate>in`tenant`</span>
<span class="card-column-20">{{ singleRequest.tenantId }}</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="text-label-small m-l-4 m-r-4" translate>Created on`date`</span>
<span class="card-column-50">
{{ singleRequest.creationTime | c8yDate }}
</span>
<span class="text-label-small m-l-4 m-r-4" translate>by`user`</span>
<span class="card-column-50">{{ singleRequest.owner }}</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 translate>
You reached the limit of {{ limitStatus.limit }} devices. No more devices can be
registered.
</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>