[Web] Add student-stats report

Author: jordan-powers

attendance-web/src/app/app-routing.module.ts

@@ -19,6 +19,7 @@ import { MeetingEventsComponent } from './components/meeting-events/meeting-even
 import { MeetingsReportComponent } from './components/reports/meetings-report/meetings-report.component';
 import { ErrorComponent } from './components/error/error.component';
 import { MeetingAttendanceReportComponent } from './components/reports/meeting-attendance-report/meeting-attendance-report.component';
+import { StudentStatsComponent } from './components/reports/student-stats/student-stats.component';
 
 const routes: Routes = [
   { path: 'students', component: StudentsComponent,
@@ -48,6 +49,7 @@ const routes: Routes = [
       { path: 'meetings', component: MeetingsReportComponent },
       { path: 'meetings/attendance', component: MeetingAttendanceReportComponent },
       { path: 'meetings/attendance/:date', component: MeetingAttendanceReportComponent },
+      { path: 'student-stats', component: StudentStatsComponent },
       { path: 'event-log', component: EventLogComponent },
       { path: 'export', component: CsvExportComponent }
     ]

attendance-web/src/app/app.module.ts

@@ -55,6 +55,7 @@ import { ErrorComponent } from './components/error/error.component';
 import { MeetingAttendanceReportComponent } from './components/reports/meeting-attendance-report/meeting-attendance-report.component';
 import { CropImageComponent } from './components/crop-image/crop-image.component';
 import { DatePickerComponent } from './components/reuse/date-picker/date-picker.component';
+import { StudentStatsComponent } from './components/reports/student-stats/student-stats.component';
 
 
 @NgModule({ declarations: [
@@ -73,6 +74,7 @@ import { DatePickerComponent } from './components/reuse/date-picker/date-picker.
         SearchBoxComponent,
         ShowStudentComponent,
         SpinnerComponent,
+        StudentStatsComponent,
         ReportsComponent,
         CsvExportComponent,
         EventLogComponent,

attendance-web/src/app/components/reports/reports.component.ts

@@ -12,14 +12,19 @@ export class ReportsComponent implements OnInit {
       path: './meetings',
       name: 'Meetings'
     },
+    {
+      path: './student-stats',
+      name: 'Students'
+    },
     {
       path: './event-log',
       name: 'Event Log'
     },
     {
       path: './export',
       name: 'Export CSV',
-    }
+    },
+
   ]
   constructor() { }
 

attendance-web/src/app/components/reports/student-stats/student-stats.component.html

@@ -0,0 +1,36 @@
+<div id="datePicker">
+<app-date-picker [initialDuration]="{months: 6}" (dateRangeSelection)="updateDateSelection($event)"></app-date-picker>
+</div>
+
+<ng-container *ngIf="state|async as state">
+    <ng-container *ngIf="state == stateType.LOADED">
+        <mat-card *ngIf="report|async as report">
+        <mat-card-content>
+            <table mat-table [dataSource]="report.report">
+                <ng-container matColumnDef="student-name">
+                    <th mat-header-cell *matHeaderCellDef>Student Name</th>
+                    <td mat-cell *matCellDef="let element">{{element.student.name}}</td>
+                </ng-container>
+                <ng-container matColumnDef="checkin-count">
+                    <th mat-header-cell *matHeaderCellDef>Meetings Attended <br> (out of {{report.meeting_count}}) </th>
+                    <td mat-cell *matCellDef="let element">{{element.stats.checkin_count}}</td>
+                </ng-container>
+                <ng-container matColumnDef="missed-checkout-count">
+                    <th mat-header-cell *matHeaderCellDef>Missed Checkouts</th>
+                    <td mat-cell *matCellDef="let element">{{element.stats.missed_checkout_count}}</td>
+                </ng-container>
+                <ng-container matColumnDef="meeting-time">
+                    <th mat-header-cell *matHeaderCellDef>Time Spent at Meetings</th>
+                    <td mat-cell *matCellDef="let element">{{formatTimeDiff(element.stats.meeting_time)}}</td>
+                </ng-container>
+
+                <tr mat-header-row *matHeaderRowDef="studentStatsColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: studentStatsColumns;"></tr>
+            </table>
+        </mat-card-content>
+        </mat-card>
+    </ng-container>
+    <ng-container *ngIf="state == stateType.LOADING">
+        <app-spinner></app-spinner>
+    </ng-container>
+</ng-container>

attendance-web/src/app/components/reports/student-stats/student-stats.component.scss

@@ -0,0 +1,5 @@
+#datePicker {
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+

attendance-web/src/app/components/reports/student-stats/student-stats.component.ts

@@ -0,0 +1,83 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { BehaviorSubject, combineLatest, ReplaySubject, Subject, Subscription, switchMap, tap } from 'rxjs';
+import { StudentStats } from 'src/app/models/report-models';
+import { Student } from 'src/app/models/student.model';
+import { ReportsService } from 'src/app/services/reports.service';
+import { StudentsService } from 'src/app/services/students.service';
+import { SelectedDateRange } from 'src/app/components/reuse/date-picker/date-picker.component';
+
+interface StudentStatsReport {
+  meeting_count: number,
+  report: {
+    student: Student,
+    stats: StudentStats
+  }[]
+};
+
+enum PageState {
+  LOADING = 1,
+  LOADED
+}
+
+@Component({
+  selector: 'app-student-stats',
+  templateUrl: './student-stats.component.html',
+  styleUrl: './student-stats.component.scss',
+  standalone: false
+})
+export class StudentStatsComponent implements OnInit, OnDestroy {
+  studentStatsColumns = ["student-name", "checkin-count", "missed-checkout-count", "meeting-time"];
+
+  dateRangeSelection = new Subject<SelectedDateRange>();
+
+  report = new ReplaySubject<StudentStatsReport>(1);
+  reportSub: Subscription|null = null;
+
+  state = new BehaviorSubject<PageState>(PageState.LOADING);
+  stateType = PageState;
+
+  constructor(
+    private studentsService: StudentsService,
+    private reportsService: ReportsService
+  ) {}
+
+  ngOnInit(): void {
+    this.reportSub = combineLatest({
+      meetings: this.dateRangeSelection.pipe(
+        switchMap(range => this.reportsService.getMeetingList(range))
+      ),
+      stats: this.dateRangeSelection.pipe(
+        switchMap(range => this.reportsService.getStudentStats(range))
+      ),
+      students: this.studentsService.getStudentMap(false)
+    }).subscribe(({meetings, stats, students}) => {
+
+        this.report.next({
+          meeting_count: meetings.length,
+          report: stats.map(stats => ({
+            student: students.get(stats.student_id)!!,
+            stats: stats
+          })).filter(it => !!it.student)
+        });
+        this.state.next(PageState.LOADED);
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.reportSub?.unsubscribe();
+  }
+
+  updateDateSelection(selection: SelectedDateRange) {
+    this.state.next(PageState.LOADING);
+    this.dateRangeSelection.next(selection);
+  }
+
+  formatTimeDiff(diffSeconds: number) {
+    const hours = Math.floor(diffSeconds / (60 * 60));
+    const minutes = Math.floor((diffSeconds % (60 * 60)) / 60);
+    const seconds = diffSeconds % 60;
+    return hours.toString()
+      + ":" + minutes.toString().padStart(2, '0')
+      + ":" + seconds.toString().padStart(2, '0');
+  }
+}

attendance-web/src/app/models/report-models.ts

@@ -10,3 +10,10 @@ export interface MeetingAttendance {
     meeting_date: DateTime,
     attendance_sessions: AttendanceSession[]
 }
+
+export interface StudentStats {
+    student_id: number,
+    checkin_count: number,
+    missed_checkout_count: number,
+    meeting_time: number
+}

attendance-web/src/app/services/reports.service.ts

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { DateTime } from 'luxon';
 import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
-import { MeetingAttendance, MeetingStudentCount } from '../models/report-models';
+import { MeetingAttendance, MeetingStudentCount, StudentStats } from '../models/report-models';
 
 @Injectable({
   providedIn: 'root'
@@ -44,4 +44,19 @@ export class ReportsService {
 
     return this.httpClient.get<MeetingAttendance>(environment.apiRoot + '/reports/meeting-attendance', {params});
   }
+
+  getStudentStats(options?: {
+    since?: DateTime,
+    until?: DateTime
+  }) {
+    let params = new HttpParams();
+    if(options?.since) {
+      params = params.set('since', Math.floor(options.since.toMillis() / 1000));
+    }
+    if(options?.until) {
+      params = params.set('until', Math.floor(options.until.toMillis() / 1000));
+    }
+
+    return this.httpClient.get<Array<StudentStats>>(environment.apiRoot + '/reports/student-stats', {params});
+  }
 }