src/app/app.component.html

@@ -6,6 +6,9 @@
             (click)="openGamesystemsOverview()"><mat-icon>code</mat-icon></button>
     <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.CHARACTER ? 'selected':''"
             (click)="openCharactersOverview()"><mat-icon>person</mat-icon></button>
+
+    <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.ITEM || openContent === ModelComponentType.ITEMGROUP ? 'selected':''"
+            (click)="openOverview(ModelComponentType.ITEM)"><mat-icon>inventory_2</mat-icon></button>
   </div>
 
 
@@ -23,11 +26,13 @@
           <button mat-menu-item (click)="openScriptAccountsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.SCRIPTACCOUNT)}}</button>
           <button mat-menu-item (click)="openGamesystemsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.GAMESYTEM)}}</button>
           <button mat-menu-item (click)="openCharactersOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.CHARACTER)}}</button>
+          <button mat-menu-item (click)="openOverview(ModelComponentType.ITEMGROUP)">{{ModelComponentTypeUtillities.toString(ModelComponentType.ITEM)}}</button>
         </mat-menu>
       </div>
       <app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
       <app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel" (openGamesystemEditor)="openModelComponent($event)"></app-gamescript-overview>
       <app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel" (onOpenCharacterEditor)="openModelComponent($event)"></app-character-overview>
+      <app-item-overview *ngIf="openContent == ModelComponentType.ITEMGROUP || openContent == ModelComponentType.ITEM" #itemOverview></app-item-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">

src/app/app.component.ts

@@ -254,6 +254,11 @@ export class AppComponent implements OnInit{
     this.drawer!.open()
   }
 
+  openOverview(overviewType: ModelComponentType) {
+    this.openContent = overviewType;
+    this.drawer!.open();
+  }
+
   protected readonly ModelComponentType = ModelComponentType;
 
   closeContentOverview() {
@@ -284,4 +289,5 @@ export class AppComponent implements OnInit{
   }
 
 
+  protected readonly open = open;
 }

src/app/app.module.ts

@@ -82,6 +82,7 @@ import {
 import {
     StateInitialCellComponent
 } from "./editor/gamesystem-editor/state-editor/simple-state-editor/state-initial-cell/state-initial-cell.component";
+import {ItemOverviewComponent} from "./side-overviews/item-overview/item-overview.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -107,7 +108,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     CharacterOverviewComponent,
     CharacterEditorComponent,
     TemplateSpecificatorComponent,
-    StateInitialCellComponent
+    StateInitialCellComponent,
+    ItemOverviewComponent
   ],
     imports: [
         BrowserModule,

src/app/project/game-model/ModelComponentTypeUtillities.ts

@@ -6,6 +6,8 @@ export class ModelComponentTypeUtillities {
       case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccounts";
       case ModelComponentType.GAMESYTEM: return "Gamesystems";
       case ModelComponentType.CHARACTER: return "Characters"
+      case ModelComponentType.ITEM: return "Items";
+      case ModelComponentType.ITEMGROUP: return "Itemgroups";
       default: return "Undefined";
     }
   }
@@ -15,6 +17,8 @@ export class ModelComponentTypeUtillities {
       case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccount";
       case ModelComponentType.GAMESYTEM: return "Gamesystem";
       case ModelComponentType.CHARACTER: return "Character"
+      case ModelComponentType.ITEM: return "Item";
+      case ModelComponentType.ITEMGROUP: return "Itemgroup";
       default: return "Undefined";
     }
   }
@@ -24,6 +28,8 @@ export class ModelComponentTypeUtillities {
       case "gamesystem": return ModelComponentType.GAMESYTEM;
       case "scriptaccount": return ModelComponentType.SCRIPTACCOUNT;
       case "character": return ModelComponentType.CHARACTER
+      case "item": return ModelComponentType.ITEM;
+      case "itemgroup": return ModelComponentType.ITEMGROUP;
     }
   }
 }

src/app/side-overviews/item-overview/item-overview.component.html

@@ -0,0 +1 @@
+<p>item-overview works!</p>

src/app/side-overviews/item-overview/item-overview.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ItemOverviewComponent } from './item-overview.component';
+
+describe('ItemOverviewComponent', () => {
+  let component: ItemOverviewComponent;
+  let fixture: ComponentFixture<ItemOverviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ItemOverviewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(ItemOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/side-overviews/item-overview/item-overview.component.ts

@@ -0,0 +1,23 @@
+import {Component, Input} from '@angular/core';
+import {GameModel} from "../../project/game-model/GameModel";
+
+interface TreeNode {
+  name: string,
+  children: TreeNode[];
+}
+
+interface FlatNode {
+  expandable: boolean,
+  name: string,
+  level: number
+}
+
+@Component({
+  selector: 'app-item-overview',
+  templateUrl: './item-overview.component.html',
+  styleUrl: './item-overview.component.scss'
+})
+export class ItemOverviewComponent {
+
+  @Input() gameModel: GameModel | undefined
+}