diff --git a/src/app/app.component.html b/src/app/app.component.html
index 899bd31..82cab2d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -32,7 +32,7 @@
-
+
diff --git a/src/app/project/game-model/GameModel.ts b/src/app/project/game-model/GameModel.ts
index 3d75321..393c8c3 100644
--- a/src/app/project/game-model/GameModel.ts
+++ b/src/app/project/game-model/GameModel.ts
@@ -31,6 +31,9 @@ export class GameModel {
this.addAbstractItemgroup("Inventory", undefined);
this.addConcreteItemgroup("Oberteil", GameModel.findItemgroupByName("Clothing", this.itemgroups)! as AbstractItemGroup);
this.addConcreteItemgroup("Hose", GameModel.findItemgroupByName("Clothing", this.itemgroups)! as AbstractItemGroup);
+
+ this.addItem("Hose 1", "Hose");
+ this.addItem("Hose 2", "Hose");
}
addAbstractItemgroup(groupName: string, parentgroup: AbstractItemGroup | undefined) {
diff --git a/src/app/side-overviews/item-overview/item-overview.component.html b/src/app/side-overviews/item-overview/item-overview.component.html
index 8678a9e..74e67b4 100644
--- a/src/app/side-overviews/item-overview/item-overview.component.html
+++ b/src/app/side-overviews/item-overview/item-overview.component.html
@@ -1 +1,19 @@
item-overview works!
+
+
+
+
+
+ {{node.name}}
+
+
+
+
+ {{node.name}}
+
+
diff --git a/src/app/side-overviews/item-overview/item-overview.component.ts b/src/app/side-overviews/item-overview/item-overview.component.ts
index 26a0e91..7f70374 100644
--- a/src/app/side-overviews/item-overview/item-overview.component.ts
+++ b/src/app/side-overviews/item-overview/item-overview.component.ts
@@ -1,10 +1,13 @@
-import {Component, Input} from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
import {GameModel} from "../../project/game-model/GameModel";
-
-interface TreeNode {
- name: string,
- children: TreeNode[];
-}
+import {FlatTreeControl} from "@angular/cdk/tree";
+import {MatTreeFlatDataSource, MatTreeFlattener} from "@angular/material/tree";
+import {ItemGroup} from "../../project/game-model/inventory/ItemGroup";
+import {AbstractItemGroup} from "../../project/game-model/inventory/AbstractItemGroup";
+import {ConcreteItemGroup} from "../../project/game-model/inventory/ConcreteItemGroup";
+import {ModelComponent} from "../../project/game-model/ModelComponent";
+import {Item} from "../../project/game-model/inventory/Item";
+import {ModelComponentType} from "../../project/game-model/ModelComponentType";
interface FlatNode {
expandable: boolean,
@@ -17,7 +20,60 @@ interface FlatNode {
templateUrl: './item-overview.component.html',
styleUrl: './item-overview.component.scss'
})
-export class ItemOverviewComponent {
+export class ItemOverviewComponent implements OnInit{
@Input() gameModel: GameModel | undefined
+
+ private _transformer = (node: ModelComponent, level: number) => {
+ if(node instanceof AbstractItemGroup) {
+ return {
+ expandable: !!node.children && node.children.length > 0,
+ name: node.componentName,
+ level: level,
+ };
+ } else if(node instanceof ConcreteItemGroup) {
+ return {
+ expandable: !!node.items && node.items.length > 0,
+ name: node.componentName,
+ level: level
+ }
+ } else {
+ return {
+ expandable: false,
+ name: node.componentName,
+ level: level
+ }
+ }
+ };
+
+
+ treeControl = new FlatTreeControl
(
+ node => node.level,
+ node => node.expandable,
+ );
+
+ treeFlattener = new MatTreeFlattener(
+ this._transformer,
+ node => node.level,
+ node => node.expandable,
+ node => this.getNodeChildren(node)
+ );
+
+ dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
+
+ hasChild = (_: number, node: FlatNode) => node.expandable;
+
+ getNodeChildren(node: ModelComponent): ModelComponent[] {
+ if(node instanceof ConcreteItemGroup) {
+ return node.items;
+ } else if(node instanceof AbstractItemGroup) {
+ return node.children;
+ } else {
+ return [];
+ }
+ }
+
+ ngOnInit() {
+ this.dataSource.data = this.gameModel!.itemgroups;
+ }
}