diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5dd8969..a8feb65 100644
--- a/src/app/app.module.ts
+++ b/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]
diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html
index 96e17d5..bd6467f 100644
--- a/src/app/editor/editor.component.html
+++ b/src/app/editor/editor.component.html
@@ -5,5 +5,8 @@
{{modelComponent.componentName}}
+
+
diff --git a/src/app/editor/editor.component.spec.ts b/src/app/editor/editor.component.spec.ts
index d796501..33d9525 100644
--- a/src/app/editor/editor.component.spec.ts
+++ b/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);
+ }))
});
diff --git a/src/app/editor/editor.component.ts b/src/app/editor/editor.component.ts
index 6a18a3c..6b222fe 100644
--- a/src/app/editor/editor.component.ts
+++ b/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;
}
diff --git a/src/app/editor/script-account-editor/script-account-editor.component.html b/src/app/editor/script-account-editor/script-account-editor.component.html
new file mode 100644
index 0000000..2b36b86
--- /dev/null
+++ b/src/app/editor/script-account-editor/script-account-editor.component.html
@@ -0,0 +1,13 @@
+
+
+ MinValue
+
+ Please enter a valid number!
+
+
+
+ MaxValue
+
+ Please enter a valid number!
+
+
diff --git a/src/app/editor/script-account-editor/script-account-editor.component.scss b/src/app/editor/script-account-editor/script-account-editor.component.scss
new file mode 100644
index 0000000..b3a1960
--- /dev/null
+++ b/src/app/editor/script-account-editor/script-account-editor.component.scss
@@ -0,0 +1,7 @@
+.example-form {
+ width: 100%;
+}
+
+.example-full-width {
+ width: 100%;
+}
diff --git a/src/app/editor/script-account-editor/script-account-editor.component.spec.ts b/src/app/editor/script-account-editor/script-account-editor.component.spec.ts
new file mode 100644
index 0000000..076be6c
--- /dev/null
+++ b/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;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [ScriptAccountEditorComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(ScriptAccountEditorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/editor/script-account-editor/script-account-editor.component.ts b/src/app/editor/script-account-editor/script-account-editor.component.ts
new file mode 100644
index 0000000..5e0bf15
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/app/game-model/ModelComponent.ts b/src/app/game-model/ModelComponent.ts
index 5052ad3..f1eec26 100644
--- a/src/app/game-model/ModelComponent.ts
+++ b/src/app/game-model/ModelComponent.ts
@@ -9,6 +9,4 @@ export abstract class ModelComponent {
this.componentDescription = componentDescription;
this.type = type;
}
-
-
}