Web SDK documentation
  1. Components
  2. DeviceRegistrationViewComponent

File

register-device/device-registration-view.component.ts

Implements

OnInit OnDestroy

Metadata

selector c8y-device-registration-view
templateUrl device-registration-view.component.html

Index

Properties
Methods

Constructor

constructor(registerDeviceService: RegisterDeviceService, bootstrapRealtimeService: DeviceBootstrapRealtimeService, tenantUiService: TenantUiService, modalService: ModalService, translateService: TranslateService, optionsService: OptionsService)
Parameters :
Name Type Optional
registerDeviceService RegisterDeviceService No
bootstrapRealtimeService DeviceBootstrapRealtimeService No
tenantUiService TenantUiService No
modalService ModalService No
translateService TranslateService No
optionsService OptionsService No

Methods

accept
accept(request: IDeviceRegistration)
Parameters :
Name Type Optional
request IDeviceRegistration No
Returns : void
acceptAll
acceptAll()
Returns : void
canAcceptAll
canAcceptAll()
Returns : boolean
Async delete
delete(id: string)
Parameters :
Name Type Optional
id string No
Returns : any
displayMode
displayMode(listClass: "interact-list" | "interact-grid")
Parameters :
Name Type Optional
listClass "interact-list" | "interact-grid" No
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 :
Name Type Optional
data IDeviceRegistration No
Returns : boolean
showTokenInputBasedOnSecurityMode
showTokenInputBasedOnSecurityMode()
Returns : boolean
updateList
updateList(data)
Parameters :
Name Optional
data No
Returns : void

Properties

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>

results matching ""

    No results matching ""