From 94fce97a35adb81e06b880c36ebcf64a807c125c Mon Sep 17 00:00:00 2001
From: paf <paf@titelfrei.de>
Date: Tue, 28 Jul 2020 15:05:15 +0200
Subject: [PATCH] attempt to fix timing problem between async-pipe and ngInit
**unfinished**
---
.../group-monitor.component.html | 2 +-
.../test-view/test-view.component.html | 45 ++++++-----
.../test-view/test-view.component.spec.ts | 2 +-
.../test-view/test-view.component.ts | 80 ++++++++++---------
.../websocket-backend.service.ts | 2 +-
5 files changed, 72 insertions(+), 59 deletions(-)
diff --git a/src/app/group-monitor/group-monitor.component.html b/src/app/group-monitor/group-monitor.component.html
index 453efe5f..07a372ab 100644
--- a/src/app/group-monitor/group-monitor.component.html
+++ b/src/app/group-monitor/group-monitor.component.html
@@ -70,7 +70,7 @@
<test-view
*ngFor="let session of sessions$ | async; trackBy: trackSession"
- [testStatus]="session"
+ [testSession]="session"
[displayOptions]="displayOptions"
>
</test-view>
diff --git a/src/app/group-monitor/test-view/test-view.component.html b/src/app/group-monitor/test-view/test-view.component.html
index 0c7a7851..d4cf9524 100644
--- a/src/app/group-monitor/test-view/test-view.component.html
+++ b/src/app/group-monitor/test-view/test-view.component.html
@@ -1,6 +1,6 @@
<td>
<div class="vertical-align-middle">
- <ng-container *ngIf="getMode(testStatus.mode) as mode" >
+ <ng-container *ngIf="getMode(testSession.mode) as mode" >
<mat-icon *ngIf="mode.modeId === 'HOT'">face</mat-icon>
<mat-icon *ngIf="mode.modeId === 'REVIEW'">rate_review</mat-icon>
@@ -10,13 +10,16 @@
<mat-icon *ngIf="mode.modeId === 'monitor-workspace'">supervisor_account</mat-icon>
<mat-icon *ngIf="mode.modeId === 'monitor-study'">supervisor_account</mat-icon>
</ng-container>
- <h1>{{testStatus.personLabel}}</h1>
+ <h1>{{testSession.personLabel}}</h1>
</div>
</td>
-<td *ngIf="displayOptions.groupColumn === 'show'"><div class="vertical-align-middle">{{testStatus.groupLabel}}</div></td>
+<td *ngIf="displayOptions.groupColumn === 'show'"><div class="vertical-align-middle">{{testSession.groupLabel}}</div></td>
+<td>
+ <p *ngIf="featuredUnit$ | async as fU; else: shit">{{fU.unit.label}}</p><ng-template #shit>NOOO</ng-template>
+</td>
<ng-container *ngIf="(booklet$ | async) as booklet">
@@ -29,19 +32,19 @@
<h1>{{booklet.metadata.label}}</h1>
<mat-icon class="unit-badge"
- *ngIf="hasState(testStatus.testState, 'status', 'locked')"
+ *ngIf="hasState(testSession.testState, 'status', 'locked')"
matTooltip="Testheft gesperrt"
>lock
</mat-icon>
<mat-icon class="unit-badge"
- *ngIf="!hasState(testStatus.testState, 'status', 'locked')"
+ *ngIf="!hasState(testSession.testState, 'status', 'locked')"
matTooltip="Testheft gesperrt"
>lock_open
</mat-icon>
<mat-icon class="unit-badge"
- *ngIf="hasState(testStatus.testState, 'BOOKLETLOCKEDbyTESTEE')"
+ *ngIf="hasState(testSession.testState, 'BOOKLETLOCKEDbyTESTEE')"
matTooltip="Testheft abgeschlossen"
>done_all
</mat-icon>
@@ -52,7 +55,7 @@
<div
class="units-container"
- [class]="hasState(testStatus.testState, 'status', 'locked') ? 'locked' : ''"
+ [class]="hasState(testSession.testState, 'status', 'locked') ? 'locked' : ''"
[ngSwitch]="displayOptions.view"
>
<div class="units full" *ngSwitchCase="'full'" >
@@ -82,13 +85,13 @@
<td colspan="2" class="booklet">
<span *ngIf="booklet.error == 'missing-id'">Kein Testheft zugeordnet</span>
<span *ngIf="booklet.error == 'missing-file'" class="warning">
- Kein Zugriff auf Testheft-Datei (`{{testStatus.bookletName}}`)!
+ Kein Zugriff auf Testheft-Datei (`{{testSession.bookletName}}`)!
</span>
<span *ngIf="booklet.error == 'xml'" class="warning">
- Konnte Testheft-Datei (`{{testStatus.bookletName}}`) lesen!
+ Konnte Testheft-Datei (`{{testSession.bookletName}}`) lesen!
</span>
<span *ngIf="booklet.error == 'general'" class="warning">>
- Fehler beim Zugriff aus Testheft-Datei (`{{testStatus.bookletName}}`)!
+ Fehler beim Zugriff aus Testheft-Datei (`{{testSession.bookletName}}`)!
</span>
</td>
</ng-template>
@@ -96,8 +99,8 @@
<ng-template #featuredUnit>
-
- <div class="featured-unit" *ngIf="(featuredUnit$| async) as unitContext">
+ XXX
+ <div class="featured-unit" *ngIf="(featuredUnit$| async) as unitContext; else: XXX">
<h1>{{unitContext.parent.label || 'Aktueller Abschnitt'}}</h1>
@@ -106,7 +109,7 @@
matBadge="{{maxTimeLeft[unitContext.parent.id].toString()}}"
matBadgeColor="accent"
matTooltip="Verbleibende Zeit"
- >alarm
+ >alarm
</mat-icon>
<h1>:</h1>
@@ -114,20 +117,22 @@
<h2>{{unitContext.unit.label || unitContext.unit.labelShort || unitContext.unit.id}}</h2>
<mat-icon class="unit-badge"
- *ngIf="hasState(testStatus.unitState, 'PRESENTATIONCOMPLETE', 'yes')"
+ *ngIf="hasState(testSession.unitState, 'PRESENTATIONCOMPLETE', 'yes')"
matTooltip="Vollständig betrachtet / angehört"
- >remove_red_eye
+ >remove_red_eye
</mat-icon>
<mat-icon class="unit-badge"
- *ngIf="hasState(testStatus.unitState, 'RESPONSESCOMPLETE', 'all')"
+ *ngIf="hasState(testSession.unitState, 'RESPONSESCOMPLETE', 'all')"
matTooltip="Fertig beantwortet"
- >done_all
+ >done_all
</mat-icon>
</div>
</ng-template>
-
+<ng-template #XXX>
+ !!!
+</ng-template>
<ng-template #testletFull let-testlet>
@@ -151,7 +156,7 @@
<ng-container *ngFor="let testletOrUnit of testlet.children; trackBy: trackUnits" [ngSwitch]="getTestletType(testletOrUnit)">
<span *ngSwitchCase="'unit'"
- [class]="(testStatus.unitName === testletOrUnit.id) ? 'unit current': 'unit'"
+ [class]="(testSession.unitName === testletOrUnit.id) ? 'unit current': 'unit'"
matTooltip="{{testletOrUnit.label}}"
matTooltipPosition="above"
>{{testletOrUnit.labelShort || " "}}
@@ -185,7 +190,7 @@
<ng-container *ngFor="let testletOrUnit of testlet.children; let i = index; trackBy: trackUnits" [ngSwitch]="getTestletType(testletOrUnit)">
<span *ngSwitchCase="'unit'"
- [class]="(testStatus.unitName === testletOrUnit.id) ? 'unit current': 'unit'"
+ [class]="(testSession.unitName === testletOrUnit.id) ? 'unit current': 'unit'"
matTooltip="{{testletOrUnit.label}}"
matTooltipPosition="above"
>·
diff --git a/src/app/group-monitor/test-view/test-view.component.spec.ts b/src/app/group-monitor/test-view/test-view.component.spec.ts
index d2f15b53..312b4578 100644
--- a/src/app/group-monitor/test-view/test-view.component.spec.ts
+++ b/src/app/group-monitor/test-view/test-view.component.spec.ts
@@ -82,7 +82,7 @@ fdescribe('TestViewComponent', () => {
fixture = TestBed.createComponent(TestViewComponent);
component = fixture.componentInstance;
- component.testStatus = exampleSession
+ component.testSession = exampleSession
component.displayOptions = {groupColumn: undefined, view: undefined};
fixture.detectChanges();
});
diff --git a/src/app/group-monitor/test-view/test-view.component.ts b/src/app/group-monitor/test-view/test-view.component.ts
index f6aec960..3b9a5706 100644
--- a/src/app/group-monitor/test-view/test-view.component.ts
+++ b/src/app/group-monitor/test-view/test-view.component.ts
@@ -1,6 +1,6 @@
-import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange} from '@angular/core';
+import {Component, Input, OnChanges, OnInit, SimpleChange} from '@angular/core';
import {BookletService} from '../booklet.service';
-import {combineLatest, Observable, Subject, Subscription} from 'rxjs';
+import {combineLatest, Observable, Subject} from 'rxjs';
import {Booklet, TestSession, Testlet, Unit, TestViewDisplayOptions, BookletError} from '../group-monitor.interfaces';
import {map} from 'rxjs/operators';
import {TestMode} from '../../config/test-mode';
@@ -28,17 +28,14 @@ interface UnitContext {
templateUrl: './test-view.component.html',
styleUrls: ['./test-view.component.css', './test-view-table.css']
})
-export class TestViewComponent implements OnInit, OnDestroy, OnChanges {
- @Input() testStatus: TestSession;
+export class TestViewComponent implements OnInit, OnChanges {
+ @Input() testSession: TestSession;
@Input() displayOptions: TestViewDisplayOptions;
private testStatus$: Subject<TestSession>;
public booklet$: Observable<Booklet|BookletError>;
public featuredUnit$: Observable<UnitContext|null>;
- private childrenSubscription: Subscription;
-
- public units: (Testlet|Unit)[];
public maxTimeLeft: object|null;
constructor(
@@ -47,65 +44,79 @@ export class TestViewComponent implements OnInit, OnDestroy, OnChanges {
this.testStatus$ = new Subject<TestSession>();
}
-
ngOnInit() {
- console.log('NEW:' + this.testStatus.personId, this.testStatus.bookletName);
-
- this.booklet$ = this.bookletsService.getBooklet(this.testStatus.bookletName || "");
+ console.log('NEW:' + this.testSession.personId, this.testSession.bookletName);
- this.childrenSubscription = this.booklet$.subscribe((booklet: Booklet|BookletError) => {
-
- console.log("A-" + (this.isBooklet(booklet) ? booklet.metadata.id : booklet.error));
-
- if (this.isBooklet(booklet)) {
- this.units = booklet.units.children;
- }
- });
+ this.booklet$ = this.bookletsService.getBooklet(this.testSession.bookletName || "");
this.featuredUnit$ = combineLatest<[Booklet|BookletError, TestSession]>([this.booklet$, this.testStatus$])
.pipe(map((bookletAndSession: [Booklet|BookletError, TestSession]) => {
const booklet: Booklet|BookletError = bookletAndSession[0];
+ const bId = (this.isBooklet(booklet) ? booklet.metadata.id : booklet.error);
+ console.log("B-" + bId, bookletAndSession[1]);
+
if (!this.isBooklet(booklet)) {
+ console.log("X-" + bId + ' --> NULL');
return null;
}
- if (this.testStatus.unitName) {
- return this.getUnitContext(booklet.units, this.testStatus.unitName);
+ if (this.testSession.unitName) {
+ console.log("X-" + bId + ' --> sessn');
+ return this.getUnitContext(booklet.units, this.testSession.unitName);
}
}));
+ //
+ // setTimeout(() => {
+ // this.featuredUnit$.next({
+ // unit: {
+ // id: 'FAKEFAKEFAKE',
+ // label: "FAKAKAAKA",
+ // labelShort: "FUCKA"
+ // },
+ // indexAncestor: 0, indexGlobal: 0, indexLocal: 0, unitCount: 0, unitCountAncestor: 0, unitCountGlobal: 0
+ //
+ // });
+ // }, 500);
+
+ this.featuredUnit$.subscribe((uc: UnitContext) => {
+ console.log ("C-", uc);
+ });
- // this.ngOnChanges(null);
- }
+ const fakeSession: TestSession = {
+ personId: this.testSession.personId,
+ timestamp: this.testSession.timestamp,
+ unitState: this.testSession.unitState,
+ testId: this.testSession.testId,
+ testState: this.testSession.testState,
+ personLabel: "FAKE"
+ }
- ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
- this.testStatus$.next(this.testStatus);
- this.maxTimeLeft = this.parseJsonState(this.testStatus.testState, 'MAXTIMELEFT');
+ setTimeout(() => {
+ this.testStatus$.next(fakeSession);
+ });
}
-
- ngOnDestroy(): void {
- this.childrenSubscription.unsubscribe();
+ ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
+ console.log("XXXX");
+ this.testStatus$.next(this.testSession);
+ this.maxTimeLeft = this.parseJsonState(this.testSession.testState, 'MAXTIMELEFT');
}
-
isBooklet(bookletOrBookletError: Booklet|BookletError): bookletOrBookletError is Booklet {
return !('error' in bookletOrBookletError);
}
-
getTestletType(testletOrUnit: Unit|Testlet): 'testlet'|'unit' {
return isUnit(testletOrUnit) ? 'unit': 'testlet';
}
-
hasState(stateObject: object, key: string, value: any = null): boolean {
return ((typeof stateObject[key] !== "undefined") && ((value !== null) ? (stateObject[key] === value) : true));
}
-
parseJsonState(testStateObject: object, key: string): object|null {
if (typeof testStateObject[key] === "undefined") {
return null;
@@ -121,7 +132,6 @@ export class TestViewComponent implements OnInit, OnDestroy, OnChanges {
}
}
-
getMode(modeString: string): {modeId: string, modeLabel: string} {
const untranslatedModes = ['monitor-group', 'monitor-workspace', 'monitor-study'];
@@ -140,12 +150,10 @@ export class TestViewComponent implements OnInit, OnDestroy, OnChanges {
};
}
-
trackUnits(index: number, testlet: Testlet|Unit): string {
return testlet['id'] || index.toString();
}
-
getUnitContext(testlet: Testlet, unitName: String, level: number = 0, countGlobal = 0,
countAncestor = 0, ancestor: Testlet = null): UnitContext {
diff --git a/src/app/group-monitor/websocket-backend.service.ts b/src/app/group-monitor/websocket-backend.service.ts
index ddf8493e..07989cc4 100644
--- a/src/app/group-monitor/websocket-backend.service.ts
+++ b/src/app/group-monitor/websocket-backend.service.ts
@@ -73,7 +73,7 @@ export abstract class WebsocketBackendService<T> extends WebsocketService implem
} else {
this.connectionStatus$.next("polling-sleep");
- this.scheduleNextPoll();
+ // this.scheduleNextPoll();
}
});
}
--
GitLab