From 7a490d4c88de2fd2f63bce852a52ee4be5a6d814 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= Date: Sat, 27 Jan 2024 12:08:20 +0100 Subject: [PATCH] Edit ScriptAccountInformation --- src/app/app.module.ts | 12 +++-- src/app/editor/editor.component.html | 3 ++ src/app/editor/editor.component.spec.ts | 7 +++ src/app/editor/editor.component.ts | 9 ++++ .../script-account-editor.component.html | 13 +++++ .../script-account-editor.component.scss | 7 +++ .../script-account-editor.component.spec.ts | 23 +++++++++ .../script-account-editor.component.ts | 47 +++++++++++++++++++ src/app/game-model/ModelComponent.ts | 2 - 9 files changed, 118 insertions(+), 5 deletions(-) create mode 100644 src/app/editor/script-account-editor/script-account-editor.component.html create mode 100644 src/app/editor/script-account-editor/script-account-editor.component.scss create mode 100644 src/app/editor/script-account-editor/script-account-editor.component.spec.ts create mode 100644 src/app/editor/script-account-editor/script-account-editor.component.ts 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; } - - }