@c8y/ngx-components
Version:
Angular modules for Cumulocity IoT applications
257 lines • 115 kB
JavaScript
import { Component, forwardRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { InventoryService, QueriesUtil } from '@c8y/client';
import { AlertService, gettext, ModalSelectionMode, PRODUCT_EXPERIENCE_EVENT_SOURCE } from '@c8y/ngx-components';
import { RepositorySelectModalComponent, RepositoryService, RepositoryType } from '@c8y/ngx-components/repository/shared';
import { assign, concat, has, isEmpty, isEqual, uniqWith } from 'lodash-es';
import { BsModalService } from 'ngx-bootstrap/modal';
import { distinctUntilChanged, map, shareReplay, switchMap, take } from 'rxjs/operators';
import { PRODUCT_EXPERIENCE_DEVICE_PROFILE } from './device-profile.model';
import { DeviceProfileService } from './device-profile.service';
import { SelectConfigurationModalComponent } from './select-configuration-modal.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@c8y/ngx-components";
import * as i3 from "@c8y/client";
import * as i4 from "ngx-bootstrap/modal";
import * as i5 from "@c8y/ngx-components/repository/shared";
import * as i6 from "./device-profile.service";
import * as i7 from "@angular/common";
import * as i8 from "@angular/forms";
import * as i9 from "ngx-bootstrap/tooltip";
import * as i10 from "ngx-bootstrap/popover";
export class DeviceProfileComponent {
constructor(route, alertService, inventoryService, bsModal, repositoryService, deviceProfileService) {
this.route = route;
this.alertService = alertService;
this.inventoryService = inventoryService;
this.bsModal = bsModal;
this.repositoryService = repositoryService;
this.deviceProfileService = deviceProfileService;
this.DEVICE_TYPE_POPOVER = gettext('The device profile will be available for assignments on devices of the specified type. Otherwise, it will be available for all device types.');
this.DEVICE_TYPE_DISABLED_POPOVER = gettext('Device type cannot be changed on profiles with already defined firmware, software or configuration since they may not be applicable to devices of the new device type.');
this.PRODUCT_EXPERIENCE = PRODUCT_EXPERIENCE_DEVICE_PROFILE;
this.productExperienceEvent = {
eventName: PRODUCT_EXPERIENCE_DEVICE_PROFILE.EVENTS.REPOSITORY,
data: {
component: PRODUCT_EXPERIENCE_DEVICE_PROFILE.COMPONENTS.DEVICE_PROFILE
}
};
this.queriesUtil = new QueriesUtil();
}
async ngOnInit() {
const profileId = this.route.snapshot.paramMap.get('id');
this.deviceProfile = (await this.getDeviceProfile(profileId));
if (this.deviceProfile) {
this.profileName = this.deviceProfile.name;
if (!this.deviceProfile.c8y_DeviceProfile.software) {
this.deviceProfile.c8y_DeviceProfile.software = [];
}
if (!this.deviceProfile.c8y_DeviceProfile.configuration) {
this.deviceProfile.c8y_DeviceProfile.configuration = [];
}
}
}
addFirmware() {
const initialState = {
deviceTypeQuery: this.getDeviceTypeQuery(RepositoryType.FIRMWARE),
repositoryType: RepositoryType.FIRMWARE,
repositoryEntriesWithVersionsFn$: modalDialog => this.getRepositoryEntriesWithVersions$(modalDialog.content.searchTerm, RepositoryType.FIRMWARE),
icon: 'c8y-firmware',
title: gettext('Select firmware'),
mode: ModalSelectionMode.SINGLE,
productExperienceEvent: this.productExperienceEvent
};
const modal = this.bsModal.show(RepositorySelectModalComponent, {
ignoreBackdropClick: true,
keyboard: false,
ariaLabelledBy: 'modal-title',
initialState
});
if (initialState.repositoryEntriesWithVersionsFn$) {
modal.content.repositoryEntriesWithVersions$ =
initialState.repositoryEntriesWithVersionsFn$(modal);
}
modal.content.load.next();
modal.content.resultEmitter.pipe(take(1)).subscribe(firmwareList => {
const [firmware] = firmwareList;
if (!firmware) {
return;
}
const deviceProfilePartial = {
c8y_DeviceProfile: this.deviceProfile.c8y_DeviceProfile || {}
};
assign(deviceProfilePartial.c8y_DeviceProfile, {
firmware: {
name: firmware.name,
version: firmware.version,
url: firmware.url,
isPatch: firmware.isPatch,
patchDependency: firmware.patchDependency
}
});
this.updateDeviceProfile(deviceProfilePartial);
});
}
getRepositoryEntriesWithVersions$(searchTerm$, repoType) {
return searchTerm$.pipe(distinctUntilChanged(), switchMap(searchTerm => this.repositoryService.listRepositoryEntries(repoType, {
query: this.getDeviceTypeQuery(repoType),
partialName: searchTerm.name,
params: { pageSize: 100 },
skipLegacy: true
})), map(({ data }) => data), map(mos => this.getAndAssignRepositoryBinaries(mos)), shareReplay(1));
}
getAndAssignRepositoryBinaries(mos) {
mos.forEach(mo => {
mo.versions = this.repositoryService.listBaseVersions(mo);
});
return mos;
}
addConfiguration() {
const modal = this.bsModal.show(SelectConfigurationModalComponent, {
ignoreBackdropClick: true,
keyboard: false,
ariaLabelledBy: 'modal-title',
initialState: {
productExperienceEvent: this.productExperienceEvent
}
});
modal.content.deviceTypeQuery = this.getDeviceTypeQuery(RepositoryType.CONFIGURATION);
modal.content.selected = this.deviceProfile.c8y_DeviceProfile.configuration;
modal.content.load.next();
modal.content.resultEmitter.pipe(take(1)).subscribe(selectedConfigurations => {
const selectedMapped = selectedConfigurations.map(selectedItem => {
return assign({
url: selectedItem.url,
name: selectedItem.name
}, selectedItem.configurationType ? { type: selectedItem.configurationType } : {});
});
const merged = concat(selectedMapped, this.deviceProfile.c8y_DeviceProfile.configuration || []);
const configuration = uniqWith(merged, (arrVal, othVal) => {
return arrVal.type && othVal.type && arrVal.type === othVal.type;
});
const deviceProfilePartial = {
c8y_DeviceProfile: this.deviceProfile.c8y_DeviceProfile || {}
};
assign(deviceProfilePartial.c8y_DeviceProfile, { configuration });
this.updateDeviceProfile(deviceProfilePartial);
});
}
addSoftware() {
const initialState = {
deviceTypeQuery: this.getDeviceTypeQuery(RepositoryType.SOFTWARE),
repositoryType: RepositoryType.SOFTWARE,
repositoryEntriesWithVersionsFn$: modalDialog => this.getRepositoryEntriesWithVersions$(modalDialog.content.searchTerm, RepositoryType.SOFTWARE),
selected: this.deviceProfile.c8y_DeviceProfile.software,
icon: 'c8y-tools',
title: gettext('Select software'),
mode: ModalSelectionMode.MULTI,
productExperienceEvent: this.productExperienceEvent
};
const modal = this.bsModal.show(RepositorySelectModalComponent, {
ignoreBackdropClick: true,
keyboard: false,
ariaLabelledBy: 'modal-title',
initialState
});
if (initialState.repositoryEntriesWithVersionsFn$) {
modal.content.repositoryEntriesWithVersions$ =
initialState.repositoryEntriesWithVersionsFn$(modal);
}
modal.content.load.next();
modal.content.resultEmitter.pipe(take(1)).subscribe(selectedSoftware => {
const selectedMapped = selectedSoftware.map(selectedItem => {
return {
name: selectedItem.name,
version: selectedItem.version,
url: selectedItem.url,
softwareType: selectedItem.softwareType,
action: 'install'
};
});
const merged = concat(selectedMapped, this.deviceProfile.c8y_DeviceProfile.software || []);
const software = uniqWith(merged, (arrVal, othVal) => {
return arrVal.name && othVal.name && arrVal.name === othVal.name;
});
const deviceProfilePartial = {
c8y_DeviceProfile: this.deviceProfile.c8y_DeviceProfile || {}
};
assign(deviceProfilePartial.c8y_DeviceProfile, { software });
this.updateDeviceProfile(deviceProfilePartial);
});
}
get isDeviceProfileEmpty() {
const isSoftware = this.deviceProfile.c8y_DeviceProfile.software &&
this.deviceProfile.c8y_DeviceProfile.software.length > 0;
const isFirmware = Boolean(this.deviceProfile.c8y_DeviceProfile.firmware);
const isConfiguration = this.deviceProfile.c8y_DeviceProfile.configuration &&
this.deviceProfile.c8y_DeviceProfile.configuration.length > 0;
return isSoftware || isFirmware || isConfiguration;
}
removeItem(removedItem, category) {
const deviceProfilePartial = {
c8y_DeviceProfile: this.deviceProfile.c8y_DeviceProfile
};
const filtered = deviceProfilePartial.c8y_DeviceProfile[category].filter(item => !isEqual(removedItem, item));
deviceProfilePartial.c8y_DeviceProfile[category] = filtered;
this.updateDeviceProfile(deviceProfilePartial);
}
removeFirmware() {
delete this.deviceProfile.c8y_DeviceProfile.firmware;
this.updateDeviceProfile({ c8y_DeviceProfile: this.deviceProfile.c8y_DeviceProfile });
}
async updateDeviceProfile(partialDeviceProfile) {
if (partialDeviceProfile.c8y_Filter && partialDeviceProfile.c8y_Filter.type === '') {
delete partialDeviceProfile.c8y_Filter.type;
}
Object.assign(partialDeviceProfile, { id: this.deviceProfile.id });
try {
const profileWithSoftwareTypeFragments = this.deviceProfileService.alignSoftwareTypeFragments(partialDeviceProfile, this.deviceProfile);
const { data } = await this.inventoryService.update(profileWithSoftwareTypeFragments);
this.deviceProfile = data;
this.profileName = this.deviceProfile.name;
this.alertService.success(gettext('Device profile changed.'));
}
catch (ex) {
this.alertService.addServerFailure(ex);
}
}
async getDeviceProfile(profileId) {
try {
const { data } = await this.inventoryService.detail(profileId);
return data;
}
catch (ex) {
this.alertService.addServerFailure(ex);
}
}
getDeviceTypeQuery(repositoryType) {
if (has(this.deviceProfile, 'c8y_Filter.type') &&
!isEmpty(this.deviceProfile.c8y_Filter.type)) {
if (repositoryType === RepositoryType.CONFIGURATION) {
return this.queriesUtil.addOrFilter({ deviceType: this.deviceProfile.c8y_Filter.type }, { __not: { __has: `deviceType` } });
}
else {
return this.queriesUtil.addOrFilter({ 'c8y_Filter.type': this.deviceProfile.c8y_Filter.type }, {
__or: [{ 'c8y_Filter.type': '' }, { __not: { __has: `c8y_Filter.type` } }]
});
}
}
return {};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceProfileComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.AlertService }, { token: i3.InventoryService }, { token: i4.BsModalService }, { token: i5.RepositoryService }, { token: i6.DeviceProfileService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DeviceProfileComponent, selector: "c8y-device-profile", providers: [
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
useExisting: forwardRef(() => DeviceProfileComponent)
}
], ngImport: i0, template: "<c8y-title>{{ profileName }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-device-profile'\"\n [label]=\"'Device profiles' | translate\"\n [path]=\"'device-profiles'\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"c8y-device-profile\"\n label=\"{{ profileName }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div\n class=\"row\"\n *ngIf=\"deviceProfile\"\n>\n <div class=\"col-lg-12 col-lg-max\">\n <div\n class=\"card card--fullpage\"\n *ngIf=\"deviceProfile\"\n >\n <div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24 overflow-visible\">\n <div class=\"content-flex-70\">\n <div class=\"text-center\">\n <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-profile\"></i>\n <p>\n <small class=\"label label-info\">{{ 'Device profile' | translate }}</small>\n </p>\n </div>\n <div class=\"flex-grow col-10\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <form #editNameForm=\"ngForm\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n translate\n >\n Name\n </label>\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control\"\n placeholder=\"{{ 'e.g. My device profile' | translate }}\"\n name=\"name\"\n type=\"text\"\n required\n [(ngModel)]=\"deviceProfile.name\"\n data-cy=\"device-profile--add-device-profile-name\"\n size=\"{{ deviceProfile.name?.length || 1 }}\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"button\"\n data-cy=\"device-profile--save\"\n (click)=\"\n updateDeviceProfile({ name: deviceProfile.name });\n editNameForm.form.markAsPristine()\n \"\n [disabled]=\"editNameForm.form.invalid\"\n c8yProductExperience\n inherit\n [actionData]=\"{ action: PRODUCT_EXPERIENCE.ACTIONS.SAVE }\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </c8y-form-group>\n </form>\n </div>\n <div class=\"col-md-4\">\n <form #editTypeForm=\"ngForm\">\n <c8y-form-group>\n <label class=\"control-label\">\n {{ 'Device type' | translate }}\n <button\n class=\"btn-help\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"\n (DEVICE_TYPE_POPOVER | translate) +\n (isDeviceProfileEmpty\n ? ' ' + (DEVICE_TYPE_DISABLED_POPOVER | translate)\n : '')\n \"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n ></button>\n </label>\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control\"\n placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n name=\"type\"\n type=\"text\"\n [(ngModel)]=\"deviceProfile.c8y_Filter.type\"\n data-cy=\"device-profile--device-type\"\n size=\"{{ deviceProfile.c8y_Filter.type?.length || 14 }}\"\n [disabled]=\"isDeviceProfileEmpty\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"button\"\n (click)=\"\n updateDeviceProfile({\n c8y_Filter: { type: deviceProfile.c8y_Filter.type }\n });\n editTypeForm.form.markAsPristine()\n \"\n [disabled]=\"isDeviceProfileEmpty\"\n c8yProductExperience\n inherit\n [actionData]=\"{ action: PRODUCT_EXPERIENCE.ACTIONS.SAVE }\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </c8y-form-group>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"inner-scroll\">\n <div class=\"card-header separator-top-bottom bg-content sticky-top\">\n <div class=\"card-icon\">\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"'c8y-firmware'\"\n ></i>\n </div>\n <div\n class=\"card-title\"\n translate\n >\n Firmware\n </div>\n </div>\n <div\n class=\"card-block p-t-0\"\n *ngIf=\"deviceProfile.c8y_DeviceProfile.firmware\"\n >\n <c8y-list-group>\n <c8y-li>\n <c8y-li-icon>\n <i [c8yIcon]=\"'c8y-firmware'\"></i>\n </c8y-li-icon>\n <c8y-li-body class=\"content-flex-50 m-l-4\">\n <div class=\"col-4\">\n <span\n class=\"text-truncate\"\n title=\"{{ deviceProfile.c8y_DeviceProfile.firmware.name }}\"\n >\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Name\n </span>\n {{ deviceProfile.c8y_DeviceProfile.firmware.name }}\n </span>\n </div>\n <div class=\"col-4\"></div>\n <div class=\"col-3 d-flex a-i-center\">\n <span\n class=\"text-truncate\"\n title=\"{{ deviceProfile.c8y_DeviceProfile.firmware.version }}\"\n >\n <span\n class=\"text-label-small m-r-4\"\n translate\n >\n Version\n </span>\n {{ deviceProfile.c8y_DeviceProfile.firmware.version }}\n </span>\n <button\n class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n title=\"{{ 'Remove`firmware`' | translate }}\"\n type=\"button\"\n (click)=\"removeFirmware()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE\n }\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n {{ 'Remove`firmware`' | translate }}\n </button>\n </div>\n <div class=\"m-l-auto p-r-8 hidden-xs\">\n <button\n class=\"btn btn-dot showOnHover text-danger\"\n [attr.aria-label]=\"'Remove`firmware`' | translate\"\n tooltip=\"{{ 'Remove`firmware`' | translate }}\"\n placement=\"right\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"removeFirmware()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE\n }\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-list-group>\n </div>\n <div\n class=\"card-block p-t-16\"\n *ngIf=\"!deviceProfile.c8y_DeviceProfile.firmware\"\n >\n <c8y-ui-empty-state\n class=\"p-t-16 d-block\"\n icon=\"c8y-firmware\"\n [title]=\"'No firmware defined.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n <div\n class=\"card-footer p-t-0\"\n *ngIf=\"!deviceProfile.c8y_DeviceProfile.firmware\"\n >\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Add firmware' | translate }}\"\n type=\"button\"\n data-cy=\"device-profile--Add-firmware-button\"\n (click)=\"addFirmware()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.ADD,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE\n }\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add firmware' | translate }}\n </button>\n </div>\n\n <div class=\"card-header separator-top-bottom sticky-top bg-component\">\n <div class=\"card-icon\">\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"'c8y-tools'\"\n ></i>\n </div>\n <div\n class=\"card-title\"\n translate\n >\n Software\n </div>\n </div>\n <div\n class=\"card-block p-t-0\"\n *ngIf=\"deviceProfile.c8y_DeviceProfile.software?.length > 0\"\n >\n <c8y-list-group>\n <c8y-li *ngFor=\"let software of deviceProfile.c8y_DeviceProfile.software\">\n <c8y-li-icon>\n <i [c8yIcon]=\"'c8y-tools'\"></i>\n </c8y-li-icon>\n <c8y-li-body class=\"content-flex-50 m-l-4\">\n <div class=\"col-4\">\n <span\n class=\"text-truncate-wrap\"\n title=\"{{ software.name }}\"\n >\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Name\n </span>\n {{ software.name }}\n </span>\n </div>\n <div class=\"col-4\">\n <span\n class=\"text-truncate-wrap\"\n title=\"{{ software.name }}\"\n >\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Type\n </span>\n <span\n class=\"label label-info m-l-4\"\n *ngIf=\"!!software.softwareType\"\n >\n {{ software.softwareType }}\n </span>\n </span>\n </div>\n <div class=\"col-3 d-flex a-i-center\">\n <span\n class=\"text-truncate-wrap\"\n title=\"{{ software.version }}\"\n >\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Version\n </span>\n {{ software.version }}\n </span>\n <button\n class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n title=\"{{ 'Remove`software`' | translate }}\"\n type=\"button\"\n ((click)=\"removeItem(software, 'software')\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.SOFTWARE\n }\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n {{ 'Remove`software`' | translate }}\n </button>\n </div>\n <div class=\"m-l-auto p-r-8 hidden-xs\">\n <button\n class=\"btn btn-dot showOnHover text-danger\"\n [attr.aria-label]=\"'Remove`software`' | translate\"\n tooltip=\"{{ 'Remove`software`' | translate }}\"\n placement=\"right\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"removeItem(software, 'software')\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.SOFTWARE\n }\"\n >\n <i\n c8yIcon=\"minus-circle\"\n data-cy=\"device-profile--Remove-icon\"\n ></i>\n </button>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-list-group>\n </div>\n <div\n class=\"card-block p-t-16\"\n *ngIf=\"deviceProfile.c8y_DeviceProfile.software?.length === 0\"\n >\n <c8y-ui-empty-state\n icon=\"c8y-tools\"\n [title]=\"'No software defined.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n <div class=\"card-footer p-t-0\">\n <button\n class=\"btn btn-default m-b-0\"\n title=\"{{ 'Add software' | translate }}\"\n type=\"button\"\n data-cy=\"device-profile--Add-software-button\"\n (click)=\"addSoftware()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.ADD,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.SOFTWARE\n }\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add software' | translate }}\n </button>\n </div>\n\n <div class=\"card-header separator-top-bottom bg-component sticky-top\">\n <div class=\"card-icon\">\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"'gears'\"\n ></i>\n </div>\n <div\n class=\"card-title\"\n translate\n >\n Configuration\n </div>\n </div>\n <div\n class=\"card-block p-t-0\"\n *ngIf=\"deviceProfile.c8y_DeviceProfile.configuration?.length > 0\"\n >\n <c8y-list-group>\n <c8y-li *ngFor=\"let configuration of deviceProfile.c8y_DeviceProfile.configuration\">\n <c8y-li-icon>\n <i [c8yIcon]=\"'gears'\"></i>\n </c8y-li-icon>\n <c8y-li-body class=\"content-flex-50\">\n <div class=\"col-4\">\n <span\n class=\"text-truncate\"\n title=\"{{ configuration.name }}\"\n >\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Name\n </span>\n {{ configuration.name }}\n </span>\n </div>\n <div class=\"col-4\">\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Type\n </span>\n <span class=\"label label-info\">{{ configuration.type }}</span>\n <button\n class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n title=\"{{ 'Remove`configuration`' | translate }}\"\n type=\"button\"\n (click)=\"removeItem(configuration, 'configuration')\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.CONFGIURATION\n }\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n {{ 'Remove`configuration`' | translate }}\n </button>\n </div>\n <div class=\"col-3 d-flex a-i-center\"></div>\n <div class=\"m-l-auto p-r-8 hidden-xs\">\n <button\n class=\"btn btn-dot showOnHover text-danger\"\n [attr.aria-label]=\"'Remove`configuration`' | translate\"\n tooltip=\"{{ 'Remove`configuration`' | translate }}\"\n placement=\"top\"\n type=\"button\"\n (click)=\"removeItem(configuration, 'configuration')\"\n [delay]=\"500\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.CONFGIURATION\n }\"\n >\n <i\n c8yIcon=\"minus-circle\"\n data-cy=\"device-profile--Remove-icon\"\n ></i>\n </button>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-list-group>\n </div>\n <div\n class=\"card-block p-t-16\"\n *ngIf=\"deviceProfile.c8y_DeviceProfile.configuration?.length === 0\"\n >\n <c8y-ui-empty-state\n icon=\"gears\"\n [title]=\"'No configuration defined.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n <div class=\"card-footer p-t-0\">\n <div class=\"p-t-8\">\n <button\n class=\"btn btn-default m-b-0\"\n title=\"{{ 'Add configuration' | translate }}\"\n type=\"button\"\n data-cy=\"device-profile--Add-configuration-button\"\n (click)=\"addConfiguration()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.ADD,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.CONFGIURATION\n }\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add configuration' | translate }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ kind: "component", type: i2.BreadcrumbComponent, selector: "c8y-breadcrumb" }, { kind: "component", type: i2.BreadcrumbItemComponent, selector: "c8y-breadcrumb-item", inputs: ["icon", "translate", "label", "path", "injector"] }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "directive", type: i2.IconDirective, selector: "[c8yIcon]", inputs: ["c8yIcon"] }, { kind: "directive", type: i2.C8yTranslateDirective, selector: "[translate],[ngx-translate]" }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.TitleComponent, selector: "c8y-title", inputs: ["pageTitleUpdate"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.FormGroupComponent, selector: "c8y-form-group", inputs: ["hasError", "hasWarning", "hasSuccess", "novalidation", "status"] }, { kind: "directive", type: i2.RequiredInputPlaceholderDirective, selector: "input[required], input[formControlName]" }, { kind: "component", type: i2.ListGroupComponent, selector: "c8y-list-group" }, { kind: "component", type: i2.ListItemComponent, selector: "c8y-list-item, c8y-li", inputs: ["active", "highlighted", "emptyActions", "dense", "collapsed", "selectable"], outputs: ["collapsedChange"] }, { kind: "component", type: i2.ListItemIconComponent, selector: "c8y-list-item-icon, c8y-li-icon", inputs: ["icon", "status"] }, { kind: "component", type: i2.ListItemBodyComponent, selector: "c8y-list-item-body, c8y-li-body", inputs: ["body"] }, { kind: "directive", type: i2.ProductExperienceDirective, selector: "[c8yProductExperience]", inputs: ["actionName", "actionData", "inherit", "suppressDataOverriding"] }, { kind: "directive", type: i9.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i10.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i2.C8yTranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DeviceProfileComponent, decorators: [{
type: Component,
args: [{ selector: 'c8y-device-profile', providers: [
{
provide: PRODUCT_EXPERIENCE_EVENT_SOURCE,
useExisting: forwardRef(() => DeviceProfileComponent)
}
], template: "<c8y-title>{{ profileName }}</c8y-title>\n\n<c8y-breadcrumb>\n <c8y-breadcrumb-item\n icon=\"c8y-management\"\n label=\"{{ 'Management' | translate }}\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n [icon]=\"'c8y-device-profile'\"\n [label]=\"'Device profiles' | translate\"\n [path]=\"'device-profiles'\"\n ></c8y-breadcrumb-item>\n <c8y-breadcrumb-item\n icon=\"c8y-device-profile\"\n label=\"{{ profileName }}\"\n ></c8y-breadcrumb-item>\n</c8y-breadcrumb>\n\n<div\n class=\"row\"\n *ngIf=\"deviceProfile\"\n>\n <div class=\"col-lg-12 col-lg-max\">\n <div\n class=\"card card--fullpage\"\n *ngIf=\"deviceProfile\"\n >\n <div class=\"card-block bg-level-1 flex-no-shrink p-t-24 p-b-24 overflow-visible\">\n <div class=\"content-flex-70\">\n <div class=\"text-center\">\n <i class=\"c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-profile\"></i>\n <p>\n <small class=\"label label-info\">{{ 'Device profile' | translate }}</small>\n </p>\n </div>\n <div class=\"flex-grow col-10\">\n <div class=\"row\">\n <div class=\"col-md-4\">\n <form #editNameForm=\"ngForm\">\n <c8y-form-group>\n <label\n class=\"control-label\"\n translate\n >\n Name\n </label>\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control\"\n placeholder=\"{{ 'e.g. My device profile' | translate }}\"\n name=\"name\"\n type=\"text\"\n required\n [(ngModel)]=\"deviceProfile.name\"\n data-cy=\"device-profile--add-device-profile-name\"\n size=\"{{ deviceProfile.name?.length || 1 }}\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"button\"\n data-cy=\"device-profile--save\"\n (click)=\"\n updateDeviceProfile({ name: deviceProfile.name });\n editNameForm.form.markAsPristine()\n \"\n [disabled]=\"editNameForm.form.invalid\"\n c8yProductExperience\n inherit\n [actionData]=\"{ action: PRODUCT_EXPERIENCE.ACTIONS.SAVE }\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </c8y-form-group>\n </form>\n </div>\n <div class=\"col-md-4\">\n <form #editTypeForm=\"ngForm\">\n <c8y-form-group>\n <label class=\"control-label\">\n {{ 'Device type' | translate }}\n <button\n class=\"btn-help\"\n [attr.aria-label]=\"'Help' | translate\"\n [popover]=\"\n (DEVICE_TYPE_POPOVER | translate) +\n (isDeviceProfileEmpty\n ? ' ' + (DEVICE_TYPE_DISABLED_POPOVER | translate)\n : '')\n \"\n placement=\"right\"\n triggers=\"focus\"\n container=\"body\"\n type=\"button\"\n ></button>\n </label>\n <div class=\"input-group input-group-editable\">\n <input\n class=\"form-control\"\n placeholder=\"{{ 'e.g.' | translate }} c8y_Linux\"\n name=\"type\"\n type=\"text\"\n [(ngModel)]=\"deviceProfile.c8y_Filter.type\"\n data-cy=\"device-profile--device-type\"\n size=\"{{ deviceProfile.c8y_Filter.type?.length || 14 }}\"\n [disabled]=\"isDeviceProfileEmpty\"\n />\n <span></span>\n <div class=\"input-group-btn\">\n <button\n class=\"btn btn-primary\"\n title=\"{{ 'Save' | translate }}\"\n type=\"button\"\n (click)=\"\n updateDeviceProfile({\n c8y_Filter: { type: deviceProfile.c8y_Filter.type }\n });\n editTypeForm.form.markAsPristine()\n \"\n [disabled]=\"isDeviceProfileEmpty\"\n c8yProductExperience\n inherit\n [actionData]=\"{ action: PRODUCT_EXPERIENCE.ACTIONS.SAVE }\"\n >\n {{ 'Save' | translate }}\n </button>\n </div>\n </div>\n </c8y-form-group>\n </form>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"inner-scroll\">\n <div class=\"card-header separator-top-bottom bg-content sticky-top\">\n <div class=\"card-icon\">\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"'c8y-firmware'\"\n ></i>\n </div>\n <div\n class=\"card-title\"\n translate\n >\n Firmware\n </div>\n </div>\n <div\n class=\"card-block p-t-0\"\n *ngIf=\"deviceProfile.c8y_DeviceProfile.firmware\"\n >\n <c8y-list-group>\n <c8y-li>\n <c8y-li-icon>\n <i [c8yIcon]=\"'c8y-firmware'\"></i>\n </c8y-li-icon>\n <c8y-li-body class=\"content-flex-50 m-l-4\">\n <div class=\"col-4\">\n <span\n class=\"text-truncate\"\n title=\"{{ deviceProfile.c8y_DeviceProfile.firmware.name }}\"\n >\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Name\n </span>\n {{ deviceProfile.c8y_DeviceProfile.firmware.name }}\n </span>\n </div>\n <div class=\"col-4\"></div>\n <div class=\"col-3 d-flex a-i-center\">\n <span\n class=\"text-truncate\"\n title=\"{{ deviceProfile.c8y_DeviceProfile.firmware.version }}\"\n >\n <span\n class=\"text-label-small m-r-4\"\n translate\n >\n Version\n </span>\n {{ deviceProfile.c8y_DeviceProfile.firmware.version }}\n </span>\n <button\n class=\"btn btn-danger btn-xs visible-xs m-l-auto m-r-8 m-t-8\"\n title=\"{{ 'Remove`firmware`' | translate }}\"\n type=\"button\"\n (click)=\"removeFirmware()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE\n }\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n {{ 'Remove`firmware`' | translate }}\n </button>\n </div>\n <div class=\"m-l-auto p-r-8 hidden-xs\">\n <button\n class=\"btn btn-dot showOnHover text-danger\"\n [attr.aria-label]=\"'Remove`firmware`' | translate\"\n tooltip=\"{{ 'Remove`firmware`' | translate }}\"\n placement=\"right\"\n type=\"button\"\n [delay]=\"500\"\n (click)=\"removeFirmware()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.REMOVE,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE\n }\"\n >\n <i c8yIcon=\"minus-circle\"></i>\n </button>\n </div>\n </c8y-li-body>\n </c8y-li>\n </c8y-list-group>\n </div>\n <div\n class=\"card-block p-t-16\"\n *ngIf=\"!deviceProfile.c8y_DeviceProfile.firmware\"\n >\n <c8y-ui-empty-state\n class=\"p-t-16 d-block\"\n icon=\"c8y-firmware\"\n [title]=\"'No firmware defined.' | translate\"\n [horizontal]=\"true\"\n ></c8y-ui-empty-state>\n </div>\n <div\n class=\"card-footer p-t-0\"\n *ngIf=\"!deviceProfile.c8y_DeviceProfile.firmware\"\n >\n <button\n class=\"btn btn-default\"\n title=\"{{ 'Add firmware' | translate }}\"\n type=\"button\"\n data-cy=\"device-profile--Add-firmware-button\"\n (click)=\"addFirmware()\"\n c8yProductExperience\n inherit\n [actionData]=\"{\n action: PRODUCT_EXPERIENCE.ACTIONS.ADD,\n fragment: PRODUCT_EXPERIENCE.FRAGMENTS.FIRMWARE\n }\"\n >\n <i c8yIcon=\"plus-circle\"></i>\n {{ 'Add firmware' | translate }}\n </button>\n </div>\n\n <div class=\"card-header separator-top-bottom sticky-top bg-component\">\n <div class=\"card-icon\">\n <i\n class=\"c8y-icon-duocolor\"\n [c8yIcon]=\"'c8y-tools'\"\n ></i>\n </div>\n <div\n class=\"card-title\"\n translate\n >\n Software\n </div>\n </div>\n <div\n class=\"card-block p-t-0\"\n *ngIf=\"deviceProfile.c8y_DeviceProfile.software?.length > 0\"\n >\n <c8y-list-group>\n <c8y-li *ngFor=\"let software of deviceProfile.c8y_DeviceProfile.software\">\n <c8y-li-icon>\n <i [c8yIcon]=\"'c8y-tools'\"></i>\n </c8y-li-icon>\n <c8y-li-body class=\"content-flex-50 m-l-4\">\n <div class=\"col-4\">\n <span\n class=\"text-truncate-wrap\"\n title=\"{{ software.name }}\"\n >\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Name\n </span>\n {{ software.name }}\n </span>\n </div>\n <div class=\"col-4\">\n <span\n class=\"text-truncate-wrap\"\n title=\"{{ software.name }}\"\n >\n <span\n class=\"text-label-small m-r-8\"\n translate\n >\n Type\n </span>\n <span\n class=\"label label-info m-l-4\"\n *ngIf=\"!!software.softwareType\"\n >\n {{ software.softwareType }}\n <