basic session selection boxes

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

@@ -71,7 +71,10 @@
             <hr>
 
             <div class="selection-info">
-                <ng-container *ngIf="selectedElement">Auswahl: Block `{{selectedElement.label}} + ` in x Tests ausgewählt.</ng-container>
+                <ng-container *ngIf="selectedElement">
+                    Auswahl: Block `{{selectedElement.label}} `
+                    in {{selectedSessions.length}} Tests ausgewählt.
+                </ng-container>
             </div>
         </mat-sidenav>
 
@@ -92,6 +95,7 @@
 
                         <thead>
                         <tr class="mat-sort-container">
+                            <td mat-sort-header="selected">°</td>
                             <td mat-sort-header="personLabel">Benutzer</td>
                             <td mat-sort-header="groupLabel" *ngIf="displayOptions.groupColumn === 'show'">Gruppe</td>
                             <td mat-sort-header="bookletName">Testheft</td>
@@ -99,8 +103,13 @@
                         </tr>
                         </thead>
 
-                        <tc-test-view
-                                *ngFor="let session of sessions$ | async; trackBy: trackSession"
+                        <ng-container *ngFor="let session of sessions$ | async; trackBy: trackSession">
+
+                            <td>
+                                <mat-checkbox (change)="selectSession($event, session)"></mat-checkbox>
+                            </td>
+
+                            <tc-test-view
                                 [testSession]="session"
                                 [displayOptions]="displayOptions"
                                 [markedElement]="markedElement"
@@ -108,8 +117,10 @@
                                 [selectedElement]="selectedElement"
                                 (selectedElement$)="selectElement($event)"
                                 (bookletId$)="adjustViewModeOnBookletLoad($event)"
-                        >
-                        </tc-test-view>
+                            >
+                            </tc-test-view>
+
+                        </ng-container>
                     </table>
                 </div>
             </div>

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

@@ -12,6 +12,7 @@ import {ConnectionStatus} from '../shared/websocket-backend.service';
 import {map} from 'rxjs/operators';
 import {Sort} from '@angular/material/sort';
 import {MatSidenav} from '@angular/material/sidenav';
+import {MatCheckboxChange} from '@angular/material/checkbox';
 
 
 @Component({
@@ -43,6 +44,7 @@ export class GroupMonitorComponent implements OnInit, OnDestroy {
 
   selectedElement: Testlet|Unit|null = null;
   markedElement: Testlet|Unit|null = null;
+  selectedSessions: TestSession[] = [];
 
   private bookletIdsViewIsAdjustedFor: string[] = [];
   private lastWindowSize = Infinity;
@@ -147,4 +149,13 @@ export class GroupMonitorComponent implements OnInit, OnDestroy {
   markElement(testletOrUnit: Testlet|Unit|null) {
     this.markedElement = testletOrUnit;
   }
+
+  selectSession(event: MatCheckboxChange, session: TestSession) {
+    if (event.checked) {
+      this.selectedSessions.push(session);
+    } else {
+      this.selectedSessions.splice(this.selectedSessions.indexOf(session), 1);
+    }
+    console.log('select', event.checked, session, this.selectedSessions);
+  }
 }

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

@@ -21,6 +21,7 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatRadioModule} from '@angular/material/radio';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {FormsModule} from '@angular/forms';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 
 @NgModule({
@@ -43,7 +44,8 @@ import {FormsModule} from '@angular/forms';
         MatButtonModule,
         MatRadioModule,
         FormsModule,
-        MatSidenavModule
+        MatSidenavModule,
+        MatCheckboxModule
     ],
     providers: [
         BackendService,