@if (deviceRequests$ | async; as deviceRequestList) {
<c8y-title>
{{ 'Device registration' | translate }}
@if (deviceRequestList.data.length === 1) {
<small>1 {{ 'new device' | translate }}</small>
}
@if (deviceRequestList.data.length > 1) {
<small> {{ 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>
@if (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>
@if (deviceRequestList.data.length > 0) {
<div
class="card-group"
[ngClass]="gridOrList"
>
<!-- START interact-list sticky header START -->
@if (gridOrList === 'interact-list') {
<div 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>
@if (showTokenInputBasedOnSecurityMode()) {
<div class="card-block card-column-30 p-0">
<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">
@if (isManagementTenant) {
<div class="d-contents">
<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>
} @else {
<div class="d-contents">
<div class="card-column-50">
{{ 'Created' | translate }}
</div>
<div class="card-column-50">
{{ 'By`user`' | translate }}
</div>
</div>
}
</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 -->
@if (limitStatus?.isReached) {
<div 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>
}
@for (singleRequest of deviceRequestList.data; track singleRequest.id) {
<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>
@if (singleRequest.status === status.WAITING_FOR_CONNECTION) {
<i
class="icon-spin text-primary"
c8yIcon="refresh"
></i>
}
{{ statusProps[singleRequest.status].label | translate }}
</p>
</div>
<ng-container *c8yIfAllowed="['ROLE_DEVICE_CONTROL_ADMIN']">
@if (showTokenInputBasedOnSecurityMode()) {
<div
class="card-block text-center card-column-30 p-t-0"
[ngClass]="{ 'p-b-0': !shouldShowSecurityTokenInput(singleRequest) }"
>
@if (shouldShowSecurityTokenInput(singleRequest)) {
@if (gridOrList !== 'interact-list') {
<span
class="text-label-small"
translate
>
Security token
</span>
}
<input
class="form-control"
type="text"
[(ngModel)]="singleRequest.securityToken"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'A1e3gh5ds' }"
[required]="requireSecurityToken"
/>
}
</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"
>
@if (singleRequest.status === status.PENDING_ACCEPTANCE) {
<span>{{ 'Remove' | translate }}</span>
} @else {
<span>{{ 'Cancel' | translate }}</span>
}
</button>
@if (singleRequest.status === status.PENDING_ACCEPTANCE) {
<button
class="btn btn-primary btn-sm"
title="{{ 'Accept' | translate }}"
type="button"
(click)="accept(singleRequest)"
[disabled]="
isLoading ||
limitStatus?.isReached ||
(!singleRequest.securityToken && requireSecurityToken)
"
>
{{ 'Accept' | translate }}
</button>
}
</div>
</ng-container>
<div class="card-footer separator text-center card-column-50">
@if (isManagementTenant) {
<small class="d-contents">
@if (singleRequest.creationTime && singleRequest.owner) {
<div 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-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>
} @else {
<div class="d-contents">
<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>
} @else {
<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>
}
</div>
</div>
</div>
}
</div>
<c8y-load-more
[paging]="deviceRequestList.paging"
[hidden]="true"
(onLoad)="updateList($event)"
></c8y-load-more>
} @else {
<div class="c8y-empty-state m-t-40 text-center">
<h1 class="c8y-icon c8y-icon-device-connect c8y-icon-duocolor"></h1>
@if (limitStatus?.isReached) {
<h3>
{{ limitReachedInfo$ | async }}
</h3>
<p translate>Please contact your platform administrator.</p>
} @else {
<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>
}
</div>
}
}
}