diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-dark-linux.png index 2d989cdde..a9322fe37 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-dark-linux.png +++ b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-dark-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:61f3c264358f5e86af4fcde3221535954ade16b0f7b90908e6d356c57f0c8c8e -size 8956 +oid sha256:bd677378f7a68079596355d49db9d8b898f2a7913b36ff9fe2d1f382eba67496 +size 14964 diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-light-linux.png index 5750390ef..ac84117ca 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-light-linux.png +++ b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view-element-examples-chromium-light-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:ebfc527b9f2241287633ad9dc300b428f5d0479368b98b3ca115eb2e772dc445 -size 8550 +oid sha256:671f34ae92a900f10aeaf08859c242cb73ab4fe827aa49029b5b705ac3141e5b +size 13717 diff --git a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view.yaml b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view.yaml index ee3844688..ed52fa8ae 100644 --- a/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view.yaml +++ b/playwright/snapshots/static.spec.ts-snapshots/si-tree-view--si-tree-view.yaml @@ -1,7 +1,5 @@ - tree "Company locations": - - treeitem "Company1 SI" [level=1]: - - text: "" - - paragraph: SI - - treeitem "Company2 GG" [level=1]: - - text: "" - - paragraph: GG \ No newline at end of file + - treeitem "Discovered Devices 2" [level=1] + - treeitem "Geographical" [level=1] + - treeitem "Infrastructure" [level=1] + - treeitem "Assigned Devices 5" [level=1] \ No newline at end of file diff --git a/src/app/examples/si-tree-view/si-tree-view.ts b/src/app/examples/si-tree-view/si-tree-view.ts index 67649ba9d..98e44d2a3 100644 --- a/src/app/examples/si-tree-view/si-tree-view.ts +++ b/src/app/examples/si-tree-view/si-tree-view.ts @@ -13,116 +13,193 @@ import { MenuItemsProvider, SiTreeViewComponent, TreeItem } from '@siemens/eleme host: { class: 'p-5' } }) export class SampleComponent { - menuItems: MenuItemsProvider = item => - Math.random() < 0.5 || item.level === 0 - ? [ - { - title: 'Item One', - badge: 5, - badgeColor: 'danger', - action: () => alert('action one'), - disabled: true - }, - { title: '-' }, - { - title: 'Item Two', - items: [ - { - title: 'Item Three', - icon: 'element-play', - action: (param: any) => alert('action three at ' + param) - } - ] - } - ] - : []; + private contextClasses: { [key: string]: string[] } = { + 'device': ['Option 1', 'Option 2', 'Option 3'], + 'geo': ['Option A', 'Option B', 'Option C'], + 'infra': ['Analyze', 'Map', 'Restructure'], + 'discDevices': ['Assign all', 'Forget all'], + 'assignedDevices': ['Remove all', 'Update'] + }; + + private getRandomNumber(max: number): number { + return this.getRandomBoolean() ? Math.ceil(Math.random() * max) : 0; + } + + private getRandomBoolean(): boolean { + return Math.random() < 0.5; + } + + private getRandomBadgeColor(): string { + return this.getRandomBoolean() ? 'warning' : 'info'; + } + + private getRandomIcon(): string { + return this.getRandomBoolean() + ? this.getRandomBoolean() + ? 'element-light' + : 'element-light-on' + : ''; + } + + menuItems: MenuItemsProvider = item => { + const key = item.dataField2 as string; + if (!key) return []; + const options = this.contextClasses[key] || []; + return options.map(option => ({ + title: option, + badge: this.getRandomNumber(10), + badgeColor: this.getRandomBadgeColor(), + icon: this.getRandomIcon(), + action: () => alert(`Performed action "${option}"`), + disabled: false + })); + }; treeItems: TreeItem[] = [ { - label: 'Company1', - dataField1: 'SI', + label: 'Discovered Devices', + dataField2: 'discDevices', + badge: '2', + badgeColor: 'info', + icon: 'element-show', + children: [ + { + label: 'Automation station', + dataField1: '[AS_TRA_155]', + icon: 'element-automation-station', + dataField2: 'device', + state: 'leaf' + }, + { + label: 'Unknown device', + dataField1: '[X3_456_dfsda]', + icon: 'element-device-alt', + dataField2: 'device', + state: 'leaf' + } + ] + }, + { + label: 'Geographical', + icon: 'element-map-location', + dataField2: 'geo', stateIndicatorColor: 'red', - icon: 'element-project', children: [ { - label: 'Milano', - dataField1: 'MIL', - state: 'leaf', - badge: '1', - badgeColor: 'info' + label: 'Mountain View', + dataField1: 'SFR', + state: 'leaf' }, { - label: 'Chicago', - dataField1: 'CHI', + label: 'Zurich', + dataField1: 'ZRH', + dataField2: 'geo', stateIndicatorColor: 'red', state: 'leaf' }, { - label: 'Pune', - dataField1: 'PUN', + label: 'New York', + dataField1: 'NYC', state: 'leaf' }, { - label: 'Zug', - dataField1: 'ZUG', + label: 'Tokyo', + dataField1: 'TYO', + state: 'leaf' + } + ] + }, + { + label: 'Infrastructure', + dataField2: 'infra', + icon: 'element-box' + //state: 'leaf' + }, + { + label: 'Assigned Devices', + icon: 'element-assigned', + dataField2: 'assignedDevices', + badge: '5', + badgeColor: 'info', + stateIndicatorColor: 'green', + children: [ + { + label: 'Automation station', + dataField1: '[AS_TRA_152]', + icon: 'element-automation-station', + dataField2: 'device', + stateIndicatorColor: 'green', children: [ { - label: 'Example Location 1', - state: 'leaf' - }, - { - label: 'Example Location 2', + label: 'Infrastructure', + icon: 'element-box', state: 'leaf' }, { - label: 'Example Location 3', + label: 'I/O Bus', + icon: 'element-network', state: 'leaf' }, { - label: 'Example Location 4', + label: 'KNX PL-Link Bus', + icon: 'element-network-backbone', state: 'leaf' }, { - label: 'Example Location 5', + label: 'Room 1', + icon: 'element-room', state: 'leaf' }, { - label: 'Example Location 6', + label: 'Room segment 1', + icon: 'element-room-segment', state: 'leaf' }, { - label: 'Example Location 7', - state: 'leaf' + label: 'HVAC', + icon: 'element-ahu-plant', + stateIndicatorColor: 'green', + children: [ + { + label: 'Supply air VAV', + state: 'leaf' + }, + { + label: 'Cooling coil', + state: 'leaf', + stateIndicatorColor: 'green' + }, + { + label: 'Heating coil', + state: 'leaf' + } + ] } ] - } - ] - }, - { - label: 'Company2', - dataField1: 'GG', - icon: 'element-project', - children: [ + }, { - label: 'Mountain View', - dataField1: 'SFR', - state: 'leaf' + label: 'Automation station', + dataField1: '[AS_TRA_155]', + icon: 'element-automation-station', + dataField2: 'device' }, { - label: 'Zurich', - dataField1: 'ZRH', - stateIndicatorColor: 'red', - state: 'leaf' + label: 'Automation station', + dataField1: '[AS_TRA_TX]', + icon: 'element-automation-station', + dataField2: 'device' }, { - label: 'New York', - dataField1: 'NYC', - state: 'leaf' + label: 'POL687 VVS11', + dataField1: '[SaturnCB-AS01]', + icon: 'element-automation-station', + dataField2: 'device' }, { - label: 'Tokyo', - dataField1: 'TYO', - state: 'leaf' + label: 'PXC AS02', + dataField1: '[TPSite ‘S02]', + icon: 'element-automation-station', + dataField2: 'device' } ] }