From 01e171fe20281c72e47c0ea96d48bff8c410d04a Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 23 Jul 2021 10:34:36 +0200
Subject: [PATCH] [player] Implement new `FormComponent`
Move specific form functionality from `AppComponent` to a new
`FormComponent` to make the code cleaner
---
projects/player/src/app/app.component.ts | 95 ++---------------
projects/player/src/app/app.module.ts | 4 +-
.../src/app/components/form.component.ts | 100 ++++++++++++++++++
3 files changed, 109 insertions(+), 90 deletions(-)
create mode 100644 projects/player/src/app/components/form.component.ts
diff --git a/projects/player/src/app/app.component.ts b/projects/player/src/app/app.component.ts
index 6537a2ff9..b364a9700 100644
--- a/projects/player/src/app/app.component.ts
+++ b/projects/player/src/app/app.component.ts
@@ -1,39 +1,26 @@
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Unit, UnitPage } from '../../../common/unit';
-import { FormService } from '../../../common/form.service';
-import { FormControlElement, ValueChangeElement } from '../../../common/form';
import { VeronaSubscriptionService } from './services/verona-subscription.service';
import { VeronaPostService } from './services/verona-post.service';
import { NativeEventService } from './services/native-event.service';
import {
- PlayerConfig, RunningState,
- VopNavigationDeniedNotification,
+ PlayerConfig,
VopStartCommand
} from './models/verona';
@Component({
selector: 'player-aspect',
template: `
- <form [formGroup]="form">
- <mat-tab-group mat-align-tabs="start">
- <mat-tab *ngFor="let page of pages; let i = index" label="Seite {{i+1}}">
- <app-page [parentForm]="form" [page]="page"></app-page>
- </mat-tab>
- </mat-tab-group>
- </form>
- <button class="form-item" mat-flat-button color="primary" (click)="submit()">Print
- form.value
- </button>
+ <app-form *ngIf="playerConfig" [pages]=pages [playerConfig]=playerConfig></app-form>
`
})
export class AppComponent {
- form: FormGroup = new FormGroup({});
- pages: UnitPage[] = [];
+ form!: FormGroup;
+ pages!: UnitPage[];
playerConfig!: PlayerConfig;
- constructor(private formService: FormService,
- private veronaSubscriptionService: VeronaSubscriptionService,
+ constructor(private veronaSubscriptionService: VeronaSubscriptionService,
private veronaPostService: VeronaPostService,
private nativeEventService: NativeEventService) {
this.initSubscriptions();
@@ -41,15 +28,8 @@ export class AppComponent {
}
private initSubscriptions(): void {
- this.formService.elementValueChanged
- .subscribe((value: ValueChangeElement): void => this.onElementValueChanges(value));
- this.formService.controlAdded
- .subscribe((control: FormControlElement): void => this.addControl(control));
-
this.veronaSubscriptionService.vopStartCommand
.subscribe((message: VopStartCommand): void => this.onStart(message));
- this.veronaSubscriptionService.vopNavigationDeniedNotification
- .subscribe((message: VopNavigationDeniedNotification): void => this.onNavigationDenied(message));
this.nativeEventService.scrollY
.subscribe((y: number): void => this.onScrollY(y));
@@ -57,70 +37,13 @@ export class AppComponent {
.subscribe((focused: boolean): void => this.onFocus(focused));
}
- private get validPages():Record<string, string>[] {
- return this.pages.map((page:UnitPage, index:number) => {
- const validPage: Record<string, string> = {};
- validPage[`page${index}`] = `Seite ${index + 1}`;
- return validPage;
- });
- }
-
private onStart(message: VopStartCommand): void {
// eslint-disable-next-line no-console
console.log('player: onStart', message);
- this.initForm();
- this.initPlayer(message);
- const values = {
- playerState:
- {
- state: 'running' as RunningState,
- validPages: this.validPages,
- currentPage: 'page0'
- }
- };
- this.veronaPostService.sendVopStateChangedNotification(values);
- }
-
- private initForm(): void {
- this.form = new FormGroup({});
- this.form.valueChanges
- .subscribe((formValues: any): void => this.onFormChanges(formValues));
- }
-
- private initPlayer(message: VopStartCommand): void {
- this.veronaPostService.sessionId = message.sessionId;
const unit: Unit = message.unitDefinition ? JSON.parse(message.unitDefinition) : [];
this.pages = unit.pages;
this.playerConfig = message.playerConfig || {};
- }
-
- private onNavigationDenied(message: VopNavigationDeniedNotification): void {
- // eslint-disable-next-line no-console
- console.log('player: onNavigationDenied', message);
- this.form.markAllAsTouched();
- }
-
- private addControl(control: FormControlElement): void {
- this.form.addControl(control.id, control.formControl);
- }
-
- private onElementValueChanges = (value: ValueChangeElement): void => {
- // eslint-disable-next-line no-console
- console.log(`Player: onElementValueChanges - ${value.id}: ${value.values[0]} -> ${value.values[1]}`);
- };
-
- private onFormChanges(formValues: unknown): void {
- // eslint-disable-next-line no-console
- console.log('player: onFormChanges', formValues);
- // TODO: map by page and? section not all
- const values = {
- unitState: {
- dataParts: {
- all: JSON.stringify(formValues)
- }
- }
- };
- this.veronaPostService.sendVopStateChangedNotification(values);
+ this.veronaPostService.sessionId = message.sessionId;
}
private onScrollY = (y: number): void => {
@@ -133,10 +56,4 @@ export class AppComponent {
console.log('player: onFocus', focused);
this.veronaPostService.sendVopWindowFocusChangedNotification(focused);
}
-
- /// ////////////////////// only for dev
- submit(): void {
- // eslint-disable-next-line no-console
- console.log('Player: form.value', this.form.value);
- }
}
diff --git a/projects/player/src/app/app.module.ts b/projects/player/src/app/app.module.ts
index 6714b2e0e..08b7d2a19 100644
--- a/projects/player/src/app/app.module.ts
+++ b/projects/player/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { SectionComponent } from './components/section.component';
import { SharedModule } from '../../../common/app.module';
import { ElementOverlayComponent } from './components/element-overlay.component';
import { ValidationMessageComponent } from './components/validation-message.component';
+import { FormComponent } from './components/form.component';
@NgModule({
declarations: [
@@ -17,7 +18,8 @@ import { ValidationMessageComponent } from './components/validation-message.comp
PageComponent,
SectionComponent,
ElementOverlayComponent,
- ValidationMessageComponent
+ ValidationMessageComponent,
+ FormComponent
],
imports: [
BrowserModule,
diff --git a/projects/player/src/app/components/form.component.ts b/projects/player/src/app/components/form.component.ts
new file mode 100644
index 000000000..a1778bcc0
--- /dev/null
+++ b/projects/player/src/app/components/form.component.ts
@@ -0,0 +1,100 @@
+import { Component, Input } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+import { FormService } from '../../../../common/form.service';
+import { VeronaSubscriptionService } from '../services/verona-subscription.service';
+import { VeronaPostService } from '../services/verona-post.service';
+import { FormControlElement, ValueChangeElement } from '../../../../common/form';
+import {
+ PlayerConfig, RunningState, VopNavigationDeniedNotification
+} from '../models/verona';
+import { UnitPage } from '../../../../common/unit';
+
+@Component({
+ selector: 'app-form',
+ template: `
+ <form [formGroup]="form">
+ <mat-tab-group mat-align-tabs="start">
+ <mat-tab *ngFor="let page of pages; let i = index" label="{{validPages[i]['page'+i]}}">
+ <app-page [parentForm]="form" [page]="page"></app-page>
+ </mat-tab>
+ </mat-tab-group>
+ </form>
+ <button class="form-item" mat-flat-button color="primary" (click)="submit()">Print
+ form.value
+ </button>
+ `
+})
+export class FormComponent {
+ form = new FormGroup({});
+ @Input() pages: UnitPage[] = [];
+ @Input() playerConfig!: PlayerConfig;
+
+ constructor(private formService: FormService,
+ private veronaSubscriptionService: VeronaSubscriptionService,
+ private veronaPostService: VeronaPostService) {
+ this.initSubscriptions();
+ this.veronaPostService.sendVopStateChangedNotification({
+ playerState:
+ {
+ state: 'running' as RunningState,
+ validPages: this.validPages,
+ currentPage: 'page0'
+ }
+ });
+ }
+
+ private initSubscriptions(): void {
+ this.formService.elementValueChanged
+ .subscribe((value: ValueChangeElement): void => this.onElementValueChanges(value));
+ this.formService.controlAdded
+ .subscribe((control: FormControlElement): void => this.addControl(control));
+
+ this.veronaSubscriptionService.vopNavigationDeniedNotification
+ .subscribe((message: VopNavigationDeniedNotification): void => this.onNavigationDenied(message));
+
+ this.form.valueChanges
+ .subscribe((formValues: any): void => this.onFormChanges(formValues));
+ }
+
+ get validPages():Record<string, string>[] {
+ return this.pages.map((page:UnitPage, index:number) => {
+ const validPage: Record<string, string> = {};
+ validPage[`page${index}`] = `Seite ${index + 1}`;
+ return validPage;
+ });
+ }
+
+ private onNavigationDenied(message: VopNavigationDeniedNotification): void {
+ // eslint-disable-next-line no-console
+ console.log('player: onNavigationDenied', message);
+ this.form.markAllAsTouched();
+ }
+
+ private addControl(control: FormControlElement): void {
+ this.form.addControl(control.id, control.formControl);
+ }
+
+ private onElementValueChanges = (value: ValueChangeElement): void => {
+ // eslint-disable-next-line no-console
+ console.log(`Player: onElementValueChanges - ${value.id}: ${value.values[0]} -> ${value.values[1]}`);
+ };
+
+ private onFormChanges(formValues: unknown): void {
+ // eslint-disable-next-line no-console
+ console.log('player: onFormChanges', formValues);
+ // TODO: map by page and? section not all
+ this.veronaPostService.sendVopStateChangedNotification({
+ unitState: {
+ dataParts: {
+ all: JSON.stringify(formValues)
+ }
+ }
+ });
+ }
+
+ /// ////////////////////// only for dev
+ submit(): void {
+ // eslint-disable-next-line no-console
+ console.log('Player: form.value', this.form.value);
+ }
+}
--
GitLab