diff --git a/src/app/group-monitor/backend.service.ts b/src/app/group-monitor/backend.service.ts index b9150568d5dc4d485c7d95519cfe15090f618ece..c2c648e96962bd1a99608a9997f0ca885490783b 100644 --- a/src/app/group-monitor/backend.service.ts +++ b/src/app/group-monitor/backend.service.ts @@ -14,7 +14,7 @@ export class BackendService extends WebsocketBackendService<TestSession[]> { public initialData: TestSession[] = []; - public subscribeSessionsMonitor(): Observable<TestSession[]> { + public subscribeSessionsMonitor(): Observable<TestSession[]> { // TODO rename since it does not return a subscription return this.subscribeEndpointAndChannel(); } diff --git a/src/app/group-monitor/group-monitor.component.html b/src/app/group-monitor/group-monitor.component.html index 438509aae58c83e60df023c51cc85f3b9ce3e0a1..2e26e1a66785e67f661b47540937e921fca8efcd 100644 --- a/src/app/group-monitor/group-monitor.component.html +++ b/src/app/group-monitor/group-monitor.component.html @@ -25,7 +25,17 @@ <div class="page-body"> <div class="adminbackground"> - <table class="test-view-table"> + <table class="test-view-table" matSort (matSortChange)="sortSessions($event)"> + + <thead> + <tr class="mat-sort-container"> + <td mat-sort-header="personLabel">Benutzer</td> +<!-- <td mat-sort-header="groupLabel">Gruppe</td>--> + <td mat-sort-header="bookletName">Testheft</td> + <td mat-sort-header="timestamp">Aktivität</td> + </tr> + </thead> + <test-view *ngFor="let session of sessions$ | async; trackBy: trackSession" [testStatus]="session"></test-view> </table> diff --git a/src/app/group-monitor/group-monitor.component.ts b/src/app/group-monitor/group-monitor.component.ts index 77c6a0e5cfd4f561035478f93dd5852b0a20129b..9d8079fdc366556a69d4bd992ebb0735a80b732e 100644 --- a/src/app/group-monitor/group-monitor.component.ts +++ b/src/app/group-monitor/group-monitor.component.ts @@ -1,9 +1,12 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {BackendService} from './backend.service'; -import {Observable, Subscription} from 'rxjs'; +import {BehaviorSubject, combineLatest, Observable, Subject, Subscription} from 'rxjs'; import {TestSession} from './group-monitor.interfaces'; import {ActivatedRoute} from '@angular/router'; import {ConnectionStatus} from './websocket-backend.service'; +import {map} from 'rxjs/operators'; +import {Sort} from '@angular/material/sort'; + @Component({ selector: 'app-group-monitor', @@ -18,10 +21,10 @@ export class GroupMonitorComponent implements OnInit, OnDestroy { ownGroup: string; - sessions$: Observable<TestSession[]>; - clientCount$: Observable<number>; + monitor$: Observable<TestSession[]>; connectionStatus$: Observable<ConnectionStatus>; - + sortBy$: Subject<Sort>; + sessions$: Observable<TestSession[]>; constructor( private route: ActivatedRoute, @@ -36,7 +39,25 @@ export class GroupMonitorComponent implements OnInit, OnDestroy { this.workspacesId = params['ws']; }); - this.sessions$ = this.bs.subscribeSessionsMonitor(); + this.sortBy$ = new BehaviorSubject<Sort>({direction: 'asc', active: 'bookletName'}); + this.monitor$ = this.bs.subscribeSessionsMonitor(); + this.sessions$ = combineLatest<[Sort, TestSession[]]>([this.sortBy$, this.monitor$]) + .pipe( + map((data: [Sort, TestSession[]]): TestSession[] => data[1].sort( + (testSession1, testSession2) => { + + if (data[0].active === "timestamp") { + return (testSession2.timestamp - testSession1.timestamp) * (data[0].direction === 'asc' ? 1 : -1); + } + + const stringA = (testSession1[data[0].active] || "zzzzz"); + const stringB = (testSession2[data[0].active] || "zzzzz"); + return stringA.localeCompare(stringB) * (data[0].direction === 'asc' ? 1 : -1); + } + )) + ); + + this.connectionStatus$ = this.bs.connectionStatus$; @@ -57,4 +78,14 @@ export class GroupMonitorComponent implements OnInit, OnDestroy { return session.personId * 10000 + session.testId; } + + + sortSessions(sort: Sort): void { + + if (!sort.active || sort.direction === '') { + return; + } + + this.sortBy$.next(sort); + } } diff --git a/src/app/group-monitor/group-monitor.module.ts b/src/app/group-monitor/group-monitor.module.ts index ae0cc0299600cd759a523feb87369aaadbd0c045..c99301f0f55c31eb5fe9bcd0d3333fcfed26a9f3 100644 --- a/src/app/group-monitor/group-monitor.module.ts +++ b/src/app/group-monitor/group-monitor.module.ts @@ -15,6 +15,7 @@ import { TestViewComponent } from './test-view/test-view.component'; import {MatIconModule} from '@angular/material/icon'; import {MatBadgeModule} from '@angular/material/badge'; import {FlexModule} from '@angular/flex-layout'; +import {MatSortModule} from '@angular/material/sort'; @@ -33,7 +34,8 @@ import {FlexModule} from '@angular/flex-layout'; MatChipsModule, MatIconModule, MatBadgeModule, - FlexModule + FlexModule, + MatSortModule ], providers: [ BackendService,