added sorting headers

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();
     }

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>
 

src/app/group-monitor/group-monitor.component.ts

 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);
+  }
 }

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,