You can customize the icons for devices within the navigation by overriding the AssetNodeService.
This customized AssetNodeService (CustomAssetNodeService) will then create custom AssetNodes (CustomAssetNode).
The CustomAssetNode will set the iconComponent attribute to a different custom component (CustomAssetNodeIconComponent).
Within this component you can then define which icon you would like to display.
Here is some sample code which should work with version 1016 of the WebSDK (didn’t test newer or older versions, but it should work in a similar way):
import { Component, Inject, Injectable, Input, Optional } from "@angular/core";
import { IManagedObject, InventoryService, UserService } from "@c8y/client";
import {
AlertService,
AppStateService,
BreadcrumbService,
ModalService,
NavigatorNodeData,
OptionsService,
} from "@c8y/ngx-components";
import { ApiService } from "@c8y/ngx-components/api";
import {
ASSET_NAVIGATOR_CONFIG,
AssetNavigatorConfig,
AssetNode,
AssetNodeService,
DeviceGroupService,
} from "@c8y/ngx-components/assets-navigator";
@Component({
selector: 'custom-asset-node-icon',
template: '<i class="icon" c8yIcon="c8y-atom"></i>',
})
export class CustomAssetNodeIconComponent {
// in case you want to adjust the icon depending on the device..
device: IManagedObject;
@Input('mo') set node(value: AssetNode) {
this.device = value.mo;
}
}
class CustomAssetNode extends AssetNode {
constructor(service: AssetNodeService, config?: NavigatorNodeData) {
super(service, config);
if (this.iconComponent !== undefined) {
this.iconComponent = CustomAssetNodeIconComponent;
}
}
}
@Injectable()
export class CustomAssetNodeService extends AssetNodeService {
constructor(
inventory: InventoryService,
apiService: ApiService,
modal: ModalService,
alert: AlertService,
breadcrumbService: BreadcrumbService,
user: UserService,
appState: AppStateService,
optionsService: OptionsService,
@Optional() @Inject(ASSET_NAVIGATOR_CONFIG) moduleConfig: AssetNavigatorConfig,
deviceGroupService: DeviceGroupService
) {
super(
inventory,
apiService,
modal,
alert,
breadcrumbService,
user,
appState,
optionsService,
moduleConfig,
deviceGroupService
);
}
createAssetNode(config: Partial<AssetNode>): AssetNode {
return new CustomAssetNode(this, config);
}
}
You also need to add the CustomAssetNodeIconComponent and CustomAssetNodeService to e.g. your AppModule like this:
declarations: [
CustomAssetNodeIconComponent
],
providers: [
{
provide: AssetNodeService,
useClass: CustomAssetNodeService
}
]
Regards,
Tristan
