src/app/app.component.html

@@ -2,6 +2,8 @@
   <div class="full-height-container">
     <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.SCRIPTACCOUNT ? 'selected':''"
             (click)="openScriptAccountsOverview()"><mat-icon>inventory_2</mat-icon></button>
+    <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.GAMESYTEM ? 'selected':''"
+            (click)="openGamesystemsOverview()"><mat-icon>manufacturing</mat-icon></button>
   </div>
 
 
@@ -17,9 +19,11 @@
         <button mat-icon-button class="small-icon-button close-sidenav-btn" (click)="closeContentOverview()"><mat-icon>close</mat-icon></button>
         <mat-menu #contentMenu="matMenu">
           <button mat-menu-item (click)="openScriptAccountsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.SCRIPTACCOUNT)}}</button>
+          <button mat-menu-item (click)="openGamesystemsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.GAMESYTEM)}}</button>
         </mat-menu>
       </div>
-      <app-script-account-overview #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
+      <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></app-gamescript-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">

src/app/app.component.ts

@@ -13,6 +13,7 @@ import {
 import {MatDialog} from "@angular/material/dialog";
 import {DeleteConfirmationDialogComponent} from "./delete-confirmation-dialog/delete-confirmation-dialog.component";
 import {ScriptAccount} from "./game-model/scriptAccounts/ScriptAccount";
+import {GamescriptOverviewComponent} from "./side-overviews/gamescript-overview/gamescript-overview.component";
 
 @Component({
   selector: 'app-root',
@@ -25,6 +26,7 @@ export class AppComponent implements OnInit{
   @ViewChild('drawer') drawer: MatDrawerContainer|undefined
   @ViewChild('editor') editor: EditorComponent|undefined
   @ViewChild('scriptAccountOverview') scriptAccountOverview: ScriptAccountOverviewComponent | undefined
+  @ViewChild('gamesystemOverview') gamesystemOverview: GamescriptOverviewComponent | undefined
 
   gameModel: GameModel | undefined
 
@@ -87,6 +89,11 @@ export class AppComponent implements OnInit{
     this.drawer!.open();
   }
 
+  openGamesystemsOverview() {
+    this.openContent = ModelComponentType.GAMESYTEM;
+    this.drawer!.open();
+  }
+
   protected readonly ModelComponentType = ModelComponentType;
 
   closeContentOverview() {

src/app/app.module.ts

@@ -28,6 +28,7 @@ import {ScriptAccountEditorComponent} from "./editor/script-account-editor/scrip
 import {ModelComponentEditorComponent} from "./editor/model-component-editor/model-component-editor.component";
 import {DeleteConfirmationDialogComponent} from "./delete-confirmation-dialog/delete-confirmation-dialog.component";
 import {MatDialogActions, MatDialogContent, MatDialogTitle} from "@angular/material/dialog";
+import {GamescriptOverviewComponent} from "./side-overviews/gamescript-overview/gamescript-overview.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -41,45 +42,46 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ModelComponentEditorComponent,
     DeleteConfirmationDialogComponent
   ],
-  imports: [
+    imports: [
-    BrowserModule,
+        BrowserModule,
-    FormsModule,
+        FormsModule,
-    HttpClientModule,
+        HttpClientModule,
-    CoreModule,
+        CoreModule,
-    SharedModule,
+        SharedModule,
-    TranslateModule.forRoot({
+        TranslateModule.forRoot({
-      loader: {
+            loader: {
-        provide: TranslateLoader,
+                provide: TranslateLoader,
-        useFactory: httpLoaderFactory,
+                useFactory: httpLoaderFactory,
-        deps: [HttpClient]
+                deps: [HttpClient]
-      }
+            }
-    }),
+        }),
-    BrowserAnimationsModule,
+        BrowserAnimationsModule,
-    MatIcon,
+        MatIcon,
-    MatToolbar,
+        MatToolbar,
-    MatButton,
+        MatButton,
-    MatFormField,
+        MatFormField,
-    MatInput,
+        MatInput,
-    MatDrawerContainer,
+        MatDrawerContainer,
-    MatDrawer,
+        MatDrawer,
-    MatIconButton,
+        MatIconButton,
-    MatMenuTrigger,
+        MatMenuTrigger,
-    MatMenu,
+        MatMenu,
-    MatMenuItem,
+        MatMenuItem,
-    MatListItem,
+        MatListItem,
-    MatActionList,
+        MatActionList,
-    MatTabGroup,
+        MatTabGroup,
-    MatTab,
+        MatTab,
-    MatTabLabel,
+        MatTabLabel,
-    MatLabel,
+        MatLabel,
-    MatFormField,
+        MatFormField,
-    ReactiveFormsModule,
+        ReactiveFormsModule,
-    MatError,
+        MatError,
-    MatDialogTitle,
+        MatDialogTitle,
-    MatDialogContent,
+        MatDialogContent,
-    MatDialogActions,
+        MatDialogActions,
-    MatMiniFabButton,
+        MatMiniFabButton,
-  ],
+        GamescriptOverviewComponent,
+    ],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/game-model/ModelComponentType.ts

@@ -1,5 +1,5 @@
 export enum ModelComponentType {
-  SCRIPTACCOUNT
+  SCRIPTACCOUNT,
-
+  GAMESYTEM
 
 }

src/app/game-model/ModelComponentTypeUtillities.ts

@@ -1,10 +1,10 @@
 import {ModelComponentType} from "./ModelComponentType";
-import {ModelComponent} from "./ModelComponent";
 
 export class ModelComponentTypeUtillities {
   static toString(modelComponentType: ModelComponentType | undefined): string {
     switch (modelComponentType) {
       case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccounts";
+      case ModelComponentType.GAMESYTEM: return "Gamesystems";
       default: return "Undefined";
     }
   }
@@ -12,6 +12,7 @@ export class ModelComponentTypeUtillities {
   static toSingleString(modelComponentType: ModelComponentType | undefined): string {
     switch (modelComponentType) {
       case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccount";
+      case ModelComponentType.GAMESYTEM: return "Gamesystem";
       default: return "Undefined";
     }
   }

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

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

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

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

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-gamescript-overview',
+  standalone: true,
+  imports: [],
+  templateUrl: './gamescript-overview.component.html',
+  styleUrl: './gamescript-overview.component.scss'
+})
+export class GamescriptOverviewComponent {
+
+}