docs(si-tree-view): provide better tree view example

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
+  - treeitem "Discovered Devices 2" [level=1]
+  - treeitem "Geographical" [level=1]
+  - treeitem "Infrastructure" [level=1]
+  - treeitem "Assigned Devices 5" [level=1]

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'
         }
       ]
     }