From 89fe9e1282ebcdf646476f69cb5f5f49a05d52fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Sat, 27 Jan 2024 11:07:40 +0100
Subject: [PATCH] Basic ScriptAccountOverview and generate Editor Component

---
 src/app/app.component.html                    |  5 ++--
 src/app/app.component.ts                      | 14 ++++++++--
 src/app/app.module.ts                         | 15 +++++++++--
 src/app/editor/editor.component.html          |  1 +
 src/app/editor/editor.component.scss          |  0
 src/app/editor/editor.component.spec.ts       | 23 ++++++++++++++++
 src/app/editor/editor.component.ts            | 10 +++++++
 .../script-account-overview.component.css     | 10 +++++++
 .../script-account-overview.component.html    |  6 +++++
 .../script-account-overview.component.spec.ts | 23 ++++++++++++++++
 .../script-account-overview.component.ts      | 26 +++++++++++++++++++
 src/styles.css                                |  1 -
 12 files changed, 126 insertions(+), 8 deletions(-)
 create mode 100644 src/app/editor/editor.component.html
 create mode 100644 src/app/editor/editor.component.scss
 create mode 100644 src/app/editor/editor.component.spec.ts
 create mode 100644 src/app/editor/editor.component.ts
 create mode 100644 src/app/side-overviews/script-account-overview/script-account-overview.component.css
 create mode 100644 src/app/side-overviews/script-account-overview/script-account-overview.component.html
 create mode 100644 src/app/side-overviews/script-account-overview/script-account-overview.component.spec.ts
 create mode 100644 src/app/side-overviews/script-account-overview/script-account-overview.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 7de60ed..c30a000 100644
--- a/src/app/app.component.html
+++ b/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>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a98b573..773847a 100644
--- a/src/app/app.component.ts
+++ b/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();
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 38a12cc..ff18a2f 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html
new file mode 100644
index 0000000..2899fdc
--- /dev/null
+++ b/src/app/editor/editor.component.html
@@ -0,0 +1 @@
+<p>editor works!</p>
diff --git a/src/app/editor/editor.component.scss b/src/app/editor/editor.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/editor/editor.component.spec.ts b/src/app/editor/editor.component.spec.ts
new file mode 100644
index 0000000..fa7b8e3
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts
new file mode 100644
index 0000000..7b48f3e
--- /dev/null
+++ b/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 {
+
+}
diff --git a/src/app/side-overviews/script-account-overview/script-account-overview.component.css b/src/app/side-overviews/script-account-overview/script-account-overview.component.css
new file mode 100644
index 0000000..0a8651a
--- /dev/null
+++ b/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;
+}
diff --git a/src/app/side-overviews/script-account-overview/script-account-overview.component.html b/src/app/side-overviews/script-account-overview/script-account-overview.component.html
new file mode 100644
index 0000000..d35d531
--- /dev/null
+++ b/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>
diff --git a/src/app/side-overviews/script-account-overview/script-account-overview.component.spec.ts b/src/app/side-overviews/script-account-overview/script-account-overview.component.spec.ts
new file mode 100644
index 0000000..979d4b2
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/app/side-overviews/script-account-overview/script-account-overview.component.ts b/src/app/side-overviews/script-account-overview/script-account-overview.component.ts
new file mode 100644
index 0000000..b5cea39
--- /dev/null
+++ b/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;
+  }
+
+
+}
diff --git a/src/styles.css b/src/styles.css
index 6760b9b..c310536 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3,7 +3,6 @@
 body {
   margin: 0;
   padding: 0;
-  background: #2b2d30;
 }
 
 html, body { height: 100%; margin: 0 }