src/app/app.component.html

@@ -19,11 +19,11 @@
           <button mat-menu-item (click)="openScriptAccountsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.SCRIPTACCOUNT)}}</button>
         </mat-menu>
       </div>
-      <app-script-account-overview [gameModel]="gameModel"></app-script-account-overview>
+      <app-script-account-overview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">
-      <app-editor></app-editor>
+      <app-editor #editor></app-editor>
     </div>
 
   </mat-drawer-container>

src/app/app.component.ts

@@ -6,6 +6,8 @@ import {MatDrawerContainer} from "@angular/material/sidenav";
 import {ModelComponentTypeUtillities} from "./game-model/ModelComponentTypeUtillities";
 import {GameModel} from "./game-model/GameModel";
 import {ScriptAccount} from "./game-model/scriptAccounts/ScriptAccount";
+import {EditorComponent} from "./editor/editor.component";
+import {ModelComponent} from "./game-model/ModelComponent";
 
 @Component({
   selector: 'app-root',
@@ -16,6 +18,7 @@ export class AppComponent implements OnInit{
 
   openContent : ModelComponentType | undefined = undefined;
   @ViewChild('drawer') drawer: MatDrawerContainer|undefined
+  @ViewChild('editor') editor: EditorComponent|undefined
 
   gameModel: GameModel | undefined
 
@@ -53,4 +56,13 @@ export class AppComponent implements OnInit{
   }
 
   protected readonly ModelComponentTypeUtillities = ModelComponentTypeUtillities;
+
+  openModelComponent(modelComponent: ModelComponent) {
+    if(this.editor != undefined) {
+      this.editor.openGameModelComponent(modelComponent);
+    } else {
+      console.log("[WARN] [App.Component] Editor is undefined")
+    }
+
+  }
 }

src/app/app.module.ts

@@ -23,6 +23,7 @@ import {
 } from "./side-overviews/script-account-overview/script-account-overview.component";
 import {MatActionList, MatListItem} from "@angular/material/list";
 import {EditorComponent} from "./editor/editor.component";
+import {MatTab, MatTabGroup, MatTabLabel} from "@angular/material/tabs";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -60,6 +61,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatMenuItem,
     MatListItem,
     MatActionList,
+    MatTabGroup,
+    MatTab,
+    MatTabLabel,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/editor/editor.component.html

@@ -1 +1,9 @@
-<p>editor works!</p>
+<mat-tab-group>
+  <mat-tab *ngFor="let modelComponent of gameModelComponents">
+    <ng-template mat-tab-label>
+      <mat-icon class="example-tab-icon">inventory_2</mat-icon>
+      <span>{{modelComponent.componentName}}</span>
+      <button class="content-label" mat-icon-button (click)="closeGameModelComponent(modelComponent)"><mat-icon>close</mat-icon></button>
+    </ng-template>
+  </mat-tab>
+</mat-tab-group>

src/app/editor/editor.component.spec.ts

@@ -1,23 +1,53 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 
 import { EditorComponent } from './editor.component';
+import {ScriptAccount} from "../game-model/scriptAccounts/ScriptAccount";
+import {TranslateModule} from "@ngx-translate/core";
+import {RouterTestingModule} from "@angular/router/testing";
 
 describe('EditorComponent', () => {
   let component: EditorComponent;
   let fixture: ComponentFixture<EditorComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [EditorComponent]
-    })
-    .compileComponents();
-    
+  beforeEach(waitForAsync(() => {
+    void TestBed.configureTestingModule({
+      declarations: [EditorComponent],
+      imports: [TranslateModule.forRoot(), RouterTestingModule]
+    }).compileComponents();
+
     fixture = TestBed.createComponent(EditorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+
+  it("Test open ScriptAccount", waitForAsync (() => {
+    const scriptAccount = new ScriptAccount("ScriptAccount", "");
+    component.openGameModelComponent(scriptAccount);
+
+    expect(component.gameModelComponents.includes(scriptAccount));
+    expect(component.gameModelComponents.length).toEqual(1);
+
+    component.openGameModelComponent(scriptAccount);
+    expect(component.gameModelComponents.length).toEqual(1);
+  }));
+
+  it("Test close ScriptAccount", waitForAsync(() => {
+    const scriptAccount = new ScriptAccount("ScriptAccount", "");
+    const scriptAccount2 = new ScriptAccount("ScriptAccount 2", "");
+    component.openGameModelComponent(scriptAccount);
+
+    component.closeGameModelComponent(scriptAccount);
+    expect(component.gameModelComponents.length).toEqual(0);
+
+    component.openGameModelComponent(scriptAccount);
+    component.openGameModelComponent(scriptAccount2);
+    component.closeGameModelComponent(scriptAccount);
+    expect(component.gameModelComponents.length).toEqual(1);
+    expect(component.gameModelComponents.includes(scriptAccount2));
+  }))
 });

src/app/editor/editor.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import {Component, Input} from '@angular/core';
+import {GameModel} from "../game-model/GameModel";
+import {ModelComponent} from "../game-model/ModelComponent";
 
 @Component({
   selector: 'app-editor',
@@ -6,5 +8,16 @@ import { Component } from '@angular/core';
   styleUrl: './editor.component.scss'
 })
 export class EditorComponent {
+  gameModelComponents: ModelComponent[] = [];
+
+  openGameModelComponent(gameModelComponent: ModelComponent) {
+    if(!this.gameModelComponents.includes(gameModelComponent)) {
+      this.gameModelComponents.push(gameModelComponent);
+    }
+  }
+
+  closeGameModelComponent(gameModelComponent: ModelComponent) {
+    this.gameModelComponents = this.gameModelComponents.filter(modelComponent => modelComponent !== gameModelComponent);
+  }
 
 }