device-profile/device-profile.component.ts
OnInit
ProductExperienceEventSource
| providers |
)
|
| selector | c8y-device-profile |
| imports |
PopoverDirective
TooltipDirective
C8yTranslatePipe
|
| templateUrl | ./device-profile.component.html |
TitleComponent
BreadcrumbComponent
BreadcrumbItemComponent
FormsModule
FormGroupComponent
C8yTranslateDirective
RequiredInputPlaceholderDirective
ProductExperienceDirective
PopoverDirective
IconDirective
ListGroupComponent
ListItemComponent
ListItemIconComponent
ListItemBodyComponent
TooltipDirective
InputGroupEditableComponent
EmptyStateComponent
C8yTranslatePipe
)
OnInit
ProductExperienceEventSource
<c8y-title>{{ profileName }}</c8y-title>
<c8y-breadcrumb>
<c8y-breadcrumb-item
icon="c8y-management"
label="{{ 'Management' | translate }}"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
[icon]="'c8y-device-profile'"
[label]="'Device profiles' | translate"
[path]="'device-profiles'"
></c8y-breadcrumb-item>
<c8y-breadcrumb-item
icon="c8y-device-profile"
label="{{ profileName }}"
></c8y-breadcrumb-item>
</c8y-breadcrumb>
@if (deviceProfile) {
<div class="row">
<div class="col-lg-12 col-lg-max">
<div class="card card--fullpage">
<div class="card-block bg-level-1 flex-no-shrink p-t-24 p-b-24 overflow-visible">
<div class="content-flex-70">
<div class="text-center">
<i class="c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-profile"></i>
<p>
<small class="label label-info">{{ 'Device profile' | translate }}</small>
</p>
</div>
<div class="flex-grow col-10">
<div class="row">
<div class="col-md-4">
<c8y-form-group>
<label
class="control-label"
translate
>
Name
</label>
<c8y-input-group-editable
required
formGroupClass="m-b-0"
[ariaLabel]="'Device profile name' | translate"
[placeholder]="'e.g. My device profile' | translate"
data-cy="device-profile--add-device-profile-name"
[ngModel]="deviceProfile.name"
(ngModelChange)="onNameSaved($event)"
></c8y-input-group-editable>
</c8y-form-group>
</div>
<div class="col-md-4">
<c8y-form-group>
<label class="control-label">
{{ 'Device type' | translate }}
<button
class="btn-help"
[attr.aria-label]="'Help' | translate"
[popover]="
(DEVICE_TYPE_POPOVER | translate) +
(isDeviceProfileEmpty
? ' ' + (DEVICE_TYPE_DISABLED_POPOVER | translate)
: '')
"
placement="right"
triggers="focus"
container="body"
type="button"
></button>
</label>
<c8y-input-group-editable
formGroupClass="m-b-0"
[ariaLabel]="'Device type' | translate"
[placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Linux' }"
data-cy="device-profile--device-type"
[ngModel]="deviceProfile.c8y_Filter.type"
[disabled]="isDeviceProfileEmpty"
(ngModelChange)="onDeviceTypeSaved($event)"
></c8y-input-group-editable>
</c8y-form-group>
</div>
</div>
</div>
</div>
</div>
<div class="inner-scroll">
<div class="card-header separator-top-bottom bg-content sticky-top">
<div class="card-icon">
<i
class="c8y-icon-duocolor"
[c8yIcon]="'c8y-firmware'"
></i>
</div>
<div
class="card-title"
translate
>
Firmware
</div>
</div>
@if (deviceProfile.c8y_DeviceProfile.firmware) {
<div class="card-block p-t-0">
<c8y-list-group>
<c8y-li>
<c8y-li-icon>
<i [c8yIcon]="'c8y-firmware'"></i>
</c8y-li-icon>
<c8y-li-body class="content-flex-50 m-l-4">
<div class="col-4">
<span
class="text-truncate"
title="{{ deviceProfile.c8y_DeviceProfile.firmware.name }}"
>
<span
class="text-label-small m-r-8"
translate
>
Name
</span>
{{ deviceProfile.c8y_DeviceProfile.firmware.name }}
</span>
</div>
<div class="col-4"></div>
<div class="col-3 d-flex a-i-center">
<span
class="text-truncate"
title="{{ deviceProfile.c8y_DeviceProfile.firmware.version }}"
>
<span
class="text-label-small m-r-4"
translate
>
Version
</span>
{{ deviceProfile.c8y_DeviceProfile.firmware.version }}
</span>
<button
class="btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8"
title="{{ 'Remove`firmware`' | translate }}"
type="button"
(click)="removeFirmware()"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE
}"
>
<i c8yIcon="minus-circle"></i>
{{ 'Remove`firmware`' | translate }}
</button>
</div>
<div class="m-l-auto p-r-8 hidden-xs">
<button
class="btn btn-dot showOnHover text-danger"
[attr.aria-label]="'Remove`firmware`' | translate"
tooltip="{{ 'Remove`firmware`' | translate }}"
placement="right"
type="button"
[delay]="500"
(click)="removeFirmware()"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE
}"
>
<i c8yIcon="minus-circle"></i>
</button>
</div>
</c8y-li-body>
</c8y-li>
</c8y-list-group>
</div>
} @else {
<div class="card-block p-t-16">
<c8y-ui-empty-state
class="p-t-16 d-block"
icon="c8y-firmware"
[title]="'No firmware defined.' | translate"
[horizontal]="true"
></c8y-ui-empty-state>
</div>
<div class="card-footer p-t-0">
<button
class="btn btn-default"
title="{{ 'Add firmware' | translate }}"
type="button"
data-cy="device-profile--Add-firmware-button"
(click)="addFirmware()"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.ADD,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE
}"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add firmware' | translate }}
</button>
</div>
}
<div class="card-header separator-top-bottom sticky-top bg-component">
<div class="card-icon">
<i
class="c8y-icon-duocolor"
[c8yIcon]="'c8y-tools'"
></i>
</div>
<div
class="card-title"
translate
>
Software
</div>
</div>
@if (deviceProfile.c8y_DeviceProfile.software?.length > 0) {
<div class="card-block p-t-0">
<c8y-list-group>
@for (software of deviceProfile.c8y_DeviceProfile.software; track software) {
<c8y-li>
<c8y-li-icon>
<i [c8yIcon]="'c8y-tools'"></i>
</c8y-li-icon>
<c8y-li-body class="content-flex-50 m-l-4">
<div class="col-4">
<span
class="text-truncate-wrap"
title="{{ software.name }}"
>
<span
class="text-label-small m-r-8"
translate
>
Name
</span>
{{ software.name }}
</span>
</div>
<div class="col-4">
<span
class="text-truncate-wrap"
title="{{ software.name }}"
>
<span
class="text-label-small m-r-8"
translate
>
Type
</span>
@if (!!software.softwareType) {
<span class="label label-info m-l-4">
{{ software.softwareType }}
</span>
}
</span>
</div>
<div class="col-3 d-flex a-i-center">
<span
class="text-truncate-wrap"
title="{{ software.version }}"
>
<span
class="text-label-small m-r-8"
translate
>
Version
</span>
{{ software.version }}
</span>
<button
class="btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8"
title="{{ 'Remove`software`' | translate }}"
type="button"
((click)="removeItem(software, 'software')"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.SOFTWARE
}"
>
<i c8yIcon="minus-circle"></i>
{{ 'Remove`software`' | translate }}
</button>
</div>
<div class="m-l-auto p-r-8 hidden-xs">
<button
class="btn btn-dot showOnHover text-danger"
[attr.aria-label]="'Remove`software`' | translate"
tooltip="{{ 'Remove`software`' | translate }}"
placement="right"
type="button"
[delay]="500"
(click)="removeItem(software, 'software')"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.SOFTWARE
}"
>
<i
c8yIcon="minus-circle"
data-cy="device-profile--Remove-icon"
></i>
</button>
</div>
</c8y-li-body>
</c8y-li>
}
</c8y-list-group>
</div>
}
@if (deviceProfile.c8y_DeviceProfile.software?.length === 0) {
<div class="card-block p-t-16">
<c8y-ui-empty-state
icon="c8y-tools"
[title]="'No software defined.' | translate"
[horizontal]="true"
></c8y-ui-empty-state>
</div>
}
<div class="card-footer p-t-0">
<button
class="btn btn-default m-b-0"
title="{{ 'Add software' | translate }}"
type="button"
data-cy="device-profile--Add-software-button"
(click)="addSoftware()"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.ADD,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.SOFTWARE
}"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add software' | translate }}
</button>
</div>
<div class="card-header separator-top-bottom bg-component sticky-top">
<div class="card-icon">
<i
class="c8y-icon-duocolor"
[c8yIcon]="'gears'"
></i>
</div>
<div
class="card-title"
translate
>
Configuration
</div>
</div>
@if (deviceProfile.c8y_DeviceProfile.configuration?.length > 0) {
<div class="card-block p-t-0">
<c8y-list-group>
@for (
configuration of deviceProfile.c8y_DeviceProfile.configuration;
track configuration
) {
<c8y-li>
<c8y-li-icon>
<i [c8yIcon]="'gears'"></i>
</c8y-li-icon>
<c8y-li-body class="content-flex-50">
<div class="col-4">
<span
class="text-truncate"
title="{{ configuration.name }}"
>
<span
class="text-label-small m-r-8"
translate
>
Name
</span>
{{ configuration.name }}
</span>
</div>
<div class="col-4">
<span
class="text-label-small m-r-8"
translate
>
Type
</span>
<span class="label label-info">{{ configuration.type }}</span>
<button
class="btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8"
title="{{ 'Remove`configuration`' | translate }}"
type="button"
(click)="removeItem(configuration, 'configuration')"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.CONFGIURATION
}"
>
<i c8yIcon="minus-circle"></i>
{{ 'Remove`configuration`' | translate }}
</button>
</div>
<div class="col-3 d-flex a-i-center"></div>
<div class="m-l-auto p-r-8 hidden-xs">
<button
class="btn btn-dot showOnHover text-danger"
[attr.aria-label]="'Remove`configuration`' | translate"
tooltip="{{ 'Remove`configuration`' | translate }}"
placement="top"
type="button"
(click)="removeItem(configuration, 'configuration')"
[delay]="500"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.CONFGIURATION
}"
>
<i
c8yIcon="minus-circle"
data-cy="device-profile--Remove-icon"
></i>
</button>
</div>
</c8y-li-body>
</c8y-li>
}
</c8y-list-group>
</div>
}
@if (deviceProfile.c8y_DeviceProfile.configuration?.length === 0) {
<div class="card-block p-t-16">
<c8y-ui-empty-state
icon="gears"
[title]="'No configuration defined.' | translate"
[horizontal]="true"
></c8y-ui-empty-state>
</div>
}
<div class="card-footer p-t-0">
<div class="p-t-8">
<button
class="btn btn-default m-b-0"
title="{{ 'Add configuration' | translate }}"
type="button"
data-cy="device-profile--Add-configuration-button"
(click)="addConfiguration()"
c8yProductExperience
inherit
[actionData]="{
action: PRODUCT_EXPERIENCE.ACTIONS.ADD,
fragment: PRODUCT_EXPERIENCE.FRAGMENTS.CONFGIURATION
}"
>
<i c8yIcon="plus-circle"></i>
{{ 'Add configuration' | translate }}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
}