Basic ScriptAccountOverview and generate Editor Component

src/app/app.component.html

@@ -18,13 +18,12 @@
         <mat-menu #contentMenu="matMenu">
           <button mat-menu-item (click)="openScriptAccountsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.SCRIPTACCOUNT)}}</button>
         </mat-menu>
-
-
       </div>
+      <app-script-account-overview [gameModel]="gameModel"></app-script-account-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">
-
+      <app-editor></app-editor>
     </div>
 
   </mat-drawer-container>

src/app/app.component.ts

@@ -1,20 +1,24 @@
-import {Component, ViewChild} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {ElectronService} from './core/services';
 import {APP_CONFIG} from '../environments/environment';
 import {ModelComponentType} from "./game-model/ModelComponentType";
 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";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent implements OnInit{
 
   openContent : ModelComponentType | undefined = undefined;
   @ViewChild('drawer') drawer: MatDrawerContainer|undefined
 
+  gameModel: GameModel | undefined
+
   constructor(
     private electronService: ElectronService,
   ) {
@@ -30,6 +34,12 @@ export class AppComponent {
     }
   }
 
+  ngOnInit() {
+    this.gameModel = new GameModel("No More");
+    this.gameModel.addScriptAccount(new ScriptAccount("Temperature", ""));
+    this.gameModel.addScriptAccount(new ScriptAccount("Luftfeuchtigkeit", ""));
+  }
+
   openScriptAccountsOverview() {
     this.openContent = ModelComponentType.SCRIPTACCOUNT
     this.drawer!.open();

src/app/app.module.ts

@@ -18,12 +18,21 @@ import {MatFormField} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {MatDrawer, MatDrawerContainer} from "@angular/material/sidenav";
 import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {
+  ScriptAccountOverviewComponent
+} from "./side-overviews/script-account-overview/script-account-overview.component";
+import {MatActionList, MatListItem} from "@angular/material/list";
+import {EditorComponent} from "./editor/editor.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
 
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    ScriptAccountOverviewComponent,
+    EditorComponent
+  ],
   imports: [
     BrowserModule,
     FormsModule,
@@ -48,7 +57,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatIconButton,
     MatMenuTrigger,
     MatMenu,
-    MatMenuItem
+    MatMenuItem,
+    MatListItem,
+    MatActionList,
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/editor/editor.component.html

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

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

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

src/app/editor/editor.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-editor',
+  templateUrl: './editor.component.html',
+  styleUrl: './editor.component.scss'
+})
+export class EditorComponent {
+
+}

src/app/side-overviews/script-account-overview/script-account-overview.component.css

@@ -0,0 +1,10 @@
+.scriptAccount-item {
+  min-height: 1.8em !important;
+  height: 1.8em !important;
+}
+
+.scriptAccount-icon {
+  margin-right: 10px;
+  color: #ccffff;
+  align-content: baseline;
+}

src/app/side-overviews/script-account-overview/script-account-overview.component.html

@@ -0,0 +1,6 @@
+<mat-action-list>
+  <mat-list-item class="scriptAccount-item" *ngFor="let scriptAccount of gameModel!.scriptAccounts"
+                 (dblclick)="onOpenScriptAccount(scriptAccount)">
+    <mat-icon class="scriptAccount-icon">inventory_2</mat-icon>{{scriptAccount.componentName}}
+  </mat-list-item>
+</mat-action-list>

src/app/side-overviews/script-account-overview/script-account-overview.component.spec.ts

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

src/app/side-overviews/script-account-overview/script-account-overview.component.ts

@@ -0,0 +1,26 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {GameModel} from "../../game-model/GameModel";
+import {ScriptAccount} from "../../game-model/scriptAccounts/ScriptAccount";
+
+@Component({
+  selector: 'app-script-account-overview',
+  templateUrl: './script-account-overview.component.html',
+  styleUrl: './script-account-overview.component.css'
+})
+export class ScriptAccountOverviewComponent {
+  @Input("gameModel") gameModel: GameModel | undefined
+  @Output("onOpenScriptAccount") openScriptAccountEmitter: EventEmitter<ScriptAccount> = new EventEmitter<ScriptAccount>();
+
+  onOpenScriptAccount(scriptAccount: ScriptAccount) {
+    console.log("onOpenScriptAccount (overview)")
+    this.openScriptAccountEmitter.emit(scriptAccount);
+  }
+
+  onCreateNewScriptAccount() {
+    const scriptAccount = new ScriptAccount("New ScriptAccount", "");
+    this.gameModel?.addScriptAccount(scriptAccount);
+    return scriptAccount;
+  }
+
+
+}

src/styles.css

@@ -3,7 +3,6 @@
 body {
   margin: 0;
   padding: 0;
-  background: #2b2d30;
 }
 
 html, body { height: 100%; margin: 0 }