src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import { HttpClientModule, HttpClient } from '@angular/common/http';
 
 // NG Translate
@@ -14,7 +14,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {MatIcon} from "@angular/material/icon";
 import {MatToolbar} from "@angular/material/toolbar";
 import {MatButton, MatIconButton} from "@angular/material/button";
-import {MatFormField} from "@angular/material/form-field";
+import {MatError, MatFormField, MatLabel} 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";
@@ -24,6 +24,7 @@ import {
 import {MatActionList, MatListItem} from "@angular/material/list";
 import {EditorComponent} from "./editor/editor.component";
 import {MatTab, MatTabGroup, MatTabLabel} from "@angular/material/tabs";
+import {ScriptAccountEditorComponent} from "./editor/script-account-editor/script-account-editor.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -32,7 +33,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
   declarations: [
     AppComponent,
     ScriptAccountOverviewComponent,
-    EditorComponent
+    EditorComponent,
+    ScriptAccountEditorComponent
   ],
   imports: [
     BrowserModule,
@@ -64,6 +66,10 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatTabGroup,
     MatTab,
     MatTabLabel,
+    MatLabel,
+    MatFormField,
+    ReactiveFormsModule,
+    MatError
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/editor/editor.component.html

@@ -5,5 +5,8 @@
       <span>{{modelComponent.componentName}}</span>
       <button class="content-label" mat-icon-button (click)="closeGameModelComponent(modelComponent)"><mat-icon>close</mat-icon></button>
     </ng-template>
+    <app-script-account-editor *ngIf="modelComponent.type === ModelComponentType.SCRIPTACCOUNT"
+                               [scriptAccount]="convertModelComponentToScriptAccount(modelComponent)"></app-script-account-editor>
+
   </mat-tab>
 </mat-tab-group>

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

@@ -50,4 +50,11 @@ describe('EditorComponent', () => {
     expect(component.gameModelComponents.length).toEqual(1);
     expect(component.gameModelComponents.includes(scriptAccount2));
   }))
+
+  it("Test convert ModelComponent to ScriptAccount", waitForAsync(() => {
+    const modelComponent = new ScriptAccount("test", "");
+    const scriptAccount = component.convertModelComponentToScriptAccount(modelComponent);
+
+    expect(scriptAccount).toBeInstanceOf(ScriptAccount);
+  }))
 });

src/app/editor/editor.component.ts

@@ -1,6 +1,8 @@
 import {Component, Input} from '@angular/core';
 import {GameModel} from "../game-model/GameModel";
 import {ModelComponent} from "../game-model/ModelComponent";
+import {ModelComponentType} from "../game-model/ModelComponentType";
+import {ScriptAccount} from "../game-model/scriptAccounts/ScriptAccount";
 
 @Component({
   selector: 'app-editor',
@@ -20,4 +22,11 @@ export class EditorComponent {
     this.gameModelComponents = this.gameModelComponents.filter(modelComponent => modelComponent !== gameModelComponent);
   }
 
+  convertModelComponentToScriptAccount(modelComponent: ModelComponent) {
+    if(modelComponent instanceof ScriptAccount) {
+      return modelComponent as ScriptAccount;
+    }
+  }
+
+  protected readonly ModelComponentType = ModelComponentType;
 }

src/app/editor/script-account-editor/script-account-editor.component.html

@@ -0,0 +1,13 @@
+<div *ngIf="scriptAccount != undefined">
+  <mat-form-field class="example-full-width">
+    <mat-label>MinValue</mat-label>
+    <input matInput [formControl]="minCtrl" type="number" (keypress)="onKeyPress($event)" (change)="onUpdateMinValue()">
+    <mat-error *ngIf="minCtrl.hasError('required')">Please enter a valid number!</mat-error>
+  </mat-form-field>
+
+  <mat-form-field class="example-full-width">
+    <mat-label>MaxValue</mat-label>
+    <input matInput type="number" [formControl]="maxCtrl" (keypress)="onKeyPress($event)" (change)="onUpdateMaxValue()">
+    <mat-error *ngIf="maxCtrl.hasError('required')">Please enter a valid number!</mat-error>
+  </mat-form-field>
+</div>

src/app/editor/script-account-editor/script-account-editor.component.scss

@@ -0,0 +1,7 @@
+.example-form {
+  width: 100%;
+}
+
+.example-full-width {
+  width: 100%;
+}

src/app/editor/script-account-editor/script-account-editor.component.spec.ts

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

src/app/editor/script-account-editor/script-account-editor.component.ts

@@ -0,0 +1,47 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ScriptAccount} from "../../game-model/scriptAccounts/ScriptAccount";
+import {ModelComponent} from "../../game-model/ModelComponent";
+import {MatFormField} from "@angular/material/form-field";
+import {MatInput} from "@angular/material/input";
+import {FormControl, FormGroupDirective, FormsModule, NgForm, Validators} from "@angular/forms";
+import {NgIf} from "@angular/common";
+import {ErrorStateMatcher} from "@angular/material/core";
+
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
+  }
+}
+@Component({
+  selector: 'app-script-account-editor',
+  templateUrl: './script-account-editor.component.html',
+  styleUrl: './script-account-editor.component.scss'
+})
+export class ScriptAccountEditorComponent implements OnInit{
+  @Input("scriptAccount") scriptAccount : ScriptAccount | undefined
+
+  minCtrl: FormControl = new FormControl(0, [Validators.required, Validators.pattern('^[0-9]*$')]);
+  maxCtrl: FormControl = new FormControl(100, [Validators.required, Validators.pattern('^[0-9]*$')]);
+  matcher = new MyErrorStateMatcher();
+  ngOnInit() {
+    this.minCtrl.setValue(this.scriptAccount!.minValue);
+    this.maxCtrl.setValue(this.scriptAccount!.maxValue);
+  }
+
+  onKeyPress(event: KeyboardEvent) {
+    const input = event.key;
+    const isDigit = /^\d+$/.test(input);
+    if (!isDigit) {
+      event.preventDefault();
+    }
+  }
+
+  onUpdateMinValue() {
+    this.scriptAccount!.minValue = Number(this.minCtrl.value);
+  }
+
+  onUpdateMaxValue() {
+    this.scriptAccount!.maxValue = Number(this.maxCtrl.value);
+  }
+}

src/app/game-model/ModelComponent.ts

@@ -9,6 +9,4 @@ export abstract class ModelComponent {
     this.componentDescription = componentDescription;
     this.type = type;
   }
-
-
 }