From 07377eb8ad4203496dd6b7da5deee8ee52e4e3d9 Mon Sep 17 00:00:00 2001 From: jojohoch <joachim.hoch@iqb.hu-berlin.de> Date: Mon, 23 Aug 2021 17:40:40 +0200 Subject: [PATCH] [player] Refactor `sendVopStateChangedNotification` in `FormComponent` --- projects/common/form.ts | 4 -- .../src/app/components/form.component.ts | 60 ++++++++++--------- projects/player/src/app/models/verona.ts | 6 +- 3 files changed, 36 insertions(+), 34 deletions(-) diff --git a/projects/common/form.ts b/projects/common/form.ts index 8a9c670bf..61e8238f9 100644 --- a/projects/common/form.ts +++ b/projects/common/form.ts @@ -24,10 +24,6 @@ export interface ChildFormGroup { parentArrayIndex: number; } -export interface FormModel { - pages: FormPage[]; -} - export interface FormSection { elements: Record<string, string | number | boolean | undefined>[]; } diff --git a/projects/player/src/app/components/form.component.ts b/projects/player/src/app/components/form.component.ts index 746448aeb..68ee88889 100644 --- a/projects/player/src/app/components/form.component.ts +++ b/projects/player/src/app/components/form.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core'; import { + AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms'; import { Subject } from 'rxjs'; @@ -13,10 +14,10 @@ import { VeronaPostService } from '../services/verona-post.service'; import { MessageService } from '../../../../common/message.service'; import { MetaDataService } from '../services/meta-data.service'; import { - FormControlElement, FormControlValidators, ChildFormGroup, ValueChangeElement, FormModel + FormControlElement, FormControlValidators, ChildFormGroup, ValueChangeElement } from '../../../../common/form'; import { - PlayerConfig, UnitState, VopNavigationDeniedNotification + PlayerConfig, Progress, UnitState, VopNavigationDeniedNotification } from '../models/verona'; import { UnitPage } from '../../../../common/unit'; @@ -36,6 +37,7 @@ export class FormComponent implements OnInit, OnDestroy { @Input() playerConfig!: PlayerConfig; form!: FormGroup; presentedPages: number[] = []; + private ngUnsubscribe = new Subject<void>(); constructor(private formBuilder: FormBuilder, @@ -76,7 +78,7 @@ export class FormComponent implements OnInit, OnDestroy { .subscribe((message: VopNavigationDeniedNotification): void => this.onNavigationDenied(message)); this.form.valueChanges .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe((formModel: FormModel): void => this.onFormChanges(formModel)); + .subscribe((): void => this.onFormChanges()); } private addControl = (control: FormControlElement): void => { @@ -111,43 +113,45 @@ export class FormComponent implements OnInit, OnDestroy { console.log(`player: onElementValueChanges - ${value.id}: ${value.values[0]} -> ${value.values[1]}`); }; - private onFormChanges(formModel: FormModel): void { - // eslint-disable-next-line no-console - console.log('player: onFormChanges', formModel); - const unitState: UnitState = { - dataParts: { - pages: JSON.stringify(formModel.pages) - }, - responseProgress: this.calculateResponseProgress(), - unitStateDataType: this.metaDataService.playerMetadata.supportedUnitStateDataTypes - }; - this.veronaPostService.sendVopStateChangedNotification({ unitState }); - } - - private calculateResponseProgress(): 'complete' | 'some' | 'none' { + private get responseProgress(): Progress { if (this.form.valid) { return 'complete'; } const pages: FormArray = this.form.get('pages') as FormArray; - return (pages.controls.some(p => p.value)) ? 'some' : 'none'; + return (pages.controls.some((control: AbstractControl): boolean => control.value)) ? 'some' : 'none'; + } + + private onFormChanges(): void { + // eslint-disable-next-line no-console + console.log('player: onFormChanges', this.form.value); + this.sendVopStateChangedNotification(); } onPresentedPageAdded(pagePresented: number): void { if (!this.presentedPages.includes(pagePresented)) { this.presentedPages.push(pagePresented); } - let unitState: UnitState; - if (this.pages.length === 0) { - unitState = { - presentationProgress: 'none' - }; - } else { - unitState = { - presentationProgress: (this.pages.length === this.presentedPages.length) ? 'complete' : 'some' - }; - } // eslint-disable-next-line no-console console.log('player: onPresentedPageAdded', this.presentedPages); + this.sendVopStateChangedNotification(); + } + + private get presentationProgress(): Progress { + if (this.presentedPages.length === 0) { + return 'none'; + } + return (this.pages.length === this.presentedPages.length) ? 'complete' : 'some'; + } + + private sendVopStateChangedNotification(): void { + const unitState: UnitState = { + dataParts: { + pages: JSON.stringify(this.form.value.pages) + }, + responseProgress: this.presentationProgress, + presentationProgress: this.responseProgress, + unitStateDataType: this.metaDataService.playerMetadata.supportedUnitStateDataTypes + }; this.veronaPostService.sendVopStateChangedNotification({ unitState }); } diff --git a/projects/player/src/app/models/verona.ts b/projects/player/src/app/models/verona.ts index 56dcc0866..513c9f449 100644 --- a/projects/player/src/app/models/verona.ts +++ b/projects/player/src/app/models/verona.ts @@ -2,6 +2,8 @@ export type NavigationTarget = 'first' | 'last' | 'previous' | 'next' | 'end'; export type RunningState = 'running' | 'stopped'; +export type Progress = 'none' | 'some' | 'complete'; + export interface PlayerConfig { unitNumber?: number; unitTitle?: number; @@ -15,8 +17,8 @@ export interface PlayerConfig { export interface UnitState { dataParts?: Record<string, string>; - presentationProgress?: 'none' | 'some' | 'complete'; - responseProgress?: 'none' | 'some' | 'complete'; + presentationProgress?: Progress; + responseProgress?: Progress; unitStateDataType?: string; } -- GitLab