diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a8feb65..95f920e 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ 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"; +import {ModelComponentEditorComponent} from "./editor/model-component-editor/model-component-editor.component"; // AoT requires an exported function for factories const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json'); @@ -34,7 +35,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl AppComponent, ScriptAccountOverviewComponent, EditorComponent, - ScriptAccountEditorComponent + ScriptAccountEditorComponent, + ModelComponentEditorComponent ], imports: [ BrowserModule, @@ -69,7 +71,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new Transl MatLabel, MatFormField, ReactiveFormsModule, - MatError + MatError, + ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html index bd6467f..1c9a6a5 100644 --- a/src/app/editor/editor.component.html +++ b/src/app/editor/editor.component.html @@ -5,6 +5,7 @@ {{modelComponent.componentName}} + diff --git a/src/app/editor/model-component-editor/model-component-editor.component.html b/src/app/editor/model-component-editor/model-component-editor.component.html new file mode 100644 index 0000000..a9b59a0 --- /dev/null +++ b/src/app/editor/model-component-editor/model-component-editor.component.html @@ -0,0 +1,9 @@ + + Name + + Please enter a valid number! + + + Description + + diff --git a/src/app/editor/model-component-editor/model-component-editor.component.scss b/src/app/editor/model-component-editor/model-component-editor.component.scss new file mode 100644 index 0000000..4e80027 --- /dev/null +++ b/src/app/editor/model-component-editor/model-component-editor.component.scss @@ -0,0 +1,3 @@ +.long-form { + width: 100%; +} diff --git a/src/app/editor/model-component-editor/model-component-editor.component.spec.ts b/src/app/editor/model-component-editor/model-component-editor.component.spec.ts new file mode 100644 index 0000000..5b6dadf --- /dev/null +++ b/src/app/editor/model-component-editor/model-component-editor.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ModelComponentEditorComponent } from './model-component-editor.component'; + +describe('ModelComponentEditorComponent', () => { + let component: ModelComponentEditorComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ModelComponentEditorComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ModelComponentEditorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/editor/model-component-editor/model-component-editor.component.ts b/src/app/editor/model-component-editor/model-component-editor.component.ts new file mode 100644 index 0000000..89ab57f --- /dev/null +++ b/src/app/editor/model-component-editor/model-component-editor.component.ts @@ -0,0 +1,30 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {ModelComponent} from "../../game-model/ModelComponent"; +import {FormControl, Validators} from "@angular/forms"; + +@Component({ + selector: 'app-model-component-editor', + templateUrl: './model-component-editor.component.html', + styleUrl: './model-component-editor.component.scss' +}) +export class ModelComponentEditorComponent implements OnInit{ + @Input('modelComponent') modelComponent: ModelComponent | undefined + + nameCtrl: FormControl = new FormControl('', [Validators.required]); + descriptionCtrl: FormControl = new FormControl('' ); + + ngOnInit() { + this.nameCtrl.setValue(this.modelComponent!.componentName); + this.descriptionCtrl.setValue(this.modelComponent!.componentDescription); + } + + onUpdateName() { + this.modelComponent!.componentName = this.nameCtrl.value; + } + + onUpdateDescription() { + this.modelComponent!.componentDescription = this.descriptionCtrl.value; + } + + protected readonly name = name; +}