Programming exercises: Add information box to exercise details page

src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html

@@ -14,9 +14,11 @@ <h3 class="mt-3">
                 <jhi-exam-live-events-button [examStartDate]="exam.startDate!" />
             </div>
         </div>
-        <hr class="mt-2" />
-        <jhi-exam-start-information [exam]="exam" [studentExam]="studentExam" [formattedStartText]="formattedGeneralInformation" />
-        <div class="d-inline-flex align-items-center my-4">
+        <hr class="my-0" />
+        <div class="mt-3">
+            <jhi-exam-start-information [exam]="exam" [studentExam]="studentExam" [formattedStartText]="formattedGeneralInformation" />
+        </div>
+        <div class="d-inline-flex align-items-center my-3">
             <div class="ps-1">
                 <input
                     [(ngModel)]="confirmed"
@@ -133,7 +135,7 @@ <h4 id="exam-finished-title">
                 }
             </div>
         }
-        <div class="d-inline-flex align-items-center my-4">
+        <div class="d-inline-flex align-items-center my-3">
             <div>
                 <input
                     [(ngModel)]="confirmed"

src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.html

@@ -1,20 +1,15 @@
-<div class="d-flex flex-row flex-wrap mb-3">
+<div class="d-flex flex-row flex-wrap gap-2">
     @for (informationBoxData of examInformationBoxData; track informationBoxData) {
-        <div class="me-3">
-            <jhi-information-box [informationBoxData]="informationBoxData">
-                <ng-container contentComponent>
-                    @if (informationBoxData.contentComponent === 'formatedDate') {
-                        <span>
-                            {{ informationBoxData.content | artemisDate: 'long-date' }}
-                            -
-                            {{ informationBoxData.content | artemisDate: 'time' }}
-                        </span>
-                    } @else if (informationBoxData.contentComponent === 'workingTime') {
-                        <jhi-student-exam-working-time [studentExam]="studentExam" />
-                    }
-                </ng-container>
-            </jhi-information-box>
-        </div>
+        <jhi-information-box [informationBoxData]="informationBoxData">
+            <ng-container contentComponent>
+                @if (informationBoxData.content.type === 'dateTime') {
+                    <span contentComponent>{{ informationBoxData.content.value | artemisDate }}</span>
+                }
+                @if (informationBoxData.content.type === 'workingTime') {
+                    <jhi-student-exam-working-time [studentExam]="informationBoxData.content.value" />
+                }
+            </ng-container>
+        </jhi-information-box>
     }
 </div>
-<span class="mt-3" [innerHTML]="formattedStartText"></span>
+<div class="mt-3" [innerHTML]="formattedStartText"></div>

src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { ArtemisSharedModule } from 'app/shared/shared.module';
 import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module';
-import { InformationBox, InformationBoxComponent } from 'app/shared/information-box/information-box.component';
+import { InformationBox, InformationBoxComponent, InformationBoxContent } from 'app/shared/information-box/information-box.component';
 import { Exam } from 'app/entities/exam/exam.model';
 import { StudentExam } from 'app/entities/student-exam.model';
 import { ArtemisExamSharedModule } from 'app/exam/shared/exam-shared.module';
@@ -45,45 +45,78 @@ export class ExamStartInformationComponent implements OnInit {
         this.prepareInformationBoxData();
     }
 
-    buildInformationBox(boxTitle: string, boxContent: string | number, boxContentComponent?: string): InformationBox {
+    buildInformationBox(boxTitle: string, boxContent: InformationBoxContent, isContentComponent = false): InformationBox {
         const examInformationBoxData: InformationBox = {
             title: boxTitle ?? '',
-            content: boxContent ?? '',
-            contentComponent: boxContentComponent,
+            content: boxContent,
+            isContentComponent: isContentComponent,
         };
         return examInformationBoxData;
     }
 
     prepareInformationBoxData(): void {
         if (this.moduleNumber) {
-            const informationBoxModuleNumber = this.buildInformationBox('artemisApp.exam.moduleNumber', this.moduleNumber!);
+            const boxContentModuleNumber: InformationBoxContent = {
+                type: 'string',
+                value: this.moduleNumber,
+            };
+            const informationBoxModuleNumber = this.buildInformationBox('artemisApp.exam.moduleNumber', boxContentModuleNumber);
             this.examInformationBoxData.push(informationBoxModuleNumber);
         }
         if (this.courseName) {
-            const informationBoxCourseName = this.buildInformationBox('artemisApp.exam.course', this.courseName!);
+            const boxContentCourseName: InformationBoxContent = {
+                type: 'string',
+                value: this.courseName,
+            };
+            const informationBoxCourseName = this.buildInformationBox('artemisApp.exam.course', boxContentCourseName);
             this.examInformationBoxData.push(informationBoxCourseName);
         }
         if (this.examiner) {
-            const informationBoxExaminer = this.buildInformationBox('artemisApp.examManagement.examiner', this.examiner!);
+            const boxContentExaminer: InformationBoxContent = {
+                type: 'string',
+                value: this.examiner,
+            };
+            const informationBoxExaminer = this.buildInformationBox('artemisApp.examManagement.examiner', boxContentExaminer);
             this.examInformationBoxData.push(informationBoxExaminer);
         }
         if (this.examinedStudent) {
-            const informationBoxExaminedStudent = this.buildInformationBox('artemisApp.exam.examinedStudent', this.examinedStudent!);
+            const boxContentExaminedStudent: InformationBoxContent = {
+                type: 'string',
+                value: this.examinedStudent,
+            };
+            const informationBoxExaminedStudent = this.buildInformationBox('artemisApp.exam.examinedStudent', boxContentExaminedStudent);
             this.examInformationBoxData.push(informationBoxExaminedStudent);
         }
         if (this.startDate) {
-            const informationBoxStartDate = this.buildInformationBox('artemisApp.exam.date', this.startDate.toString(), 'formatedDate');
+            const boxContentStartDate: InformationBoxContent = {
+                type: 'dateTime',
+                value: this.startDate,
+            };
+            const informationBoxStartDate = this.buildInformationBox('artemisApp.exam.date', boxContentStartDate, true);
             this.examInformationBoxData.push(informationBoxStartDate);
         }
 
-        const informationBoxTotalWorkingTime = this.buildInformationBox('artemisApp.exam.workingTime', this.exam.workingTime!, 'workingTime');
+        const boxContentExamWorkingTime: InformationBoxContent = {
+            type: 'workingTime',
+            value: this.studentExam,
+        };
+
+        const informationBoxTotalWorkingTime = this.buildInformationBox('artemisApp.exam.workingTime', boxContentExamWorkingTime, true);
         this.examInformationBoxData.push(informationBoxTotalWorkingTime);
+        const boxContentTotalPoints: InformationBoxContent = {
+            type: 'string',
+            value: this.totalPoints?.toString() ?? '',
+        };
 
-        const informationBoxTotalPoints = this.buildInformationBox('artemisApp.exam.points', this.totalPoints!.toString());
+        const informationBoxTotalPoints = this.buildInformationBox('artemisApp.exam.points', boxContentTotalPoints);
         this.examInformationBoxData.push(informationBoxTotalPoints);
 
         if (this.numberOfExercisesInExam) {
-            const informationBoxNumberOfExercises = this.buildInformationBox('artemisApp.exam.exercises', this.numberOfExercisesInExam!.toString());
+            const boxContent: InformationBoxContent = {
+                type: 'string',
+                value: this.numberOfExercisesInExam?.toString(),
+            };
+            const informationBoxNumberOfExercises = this.buildInformationBox('artemisApp.exam.exercises', boxContent);
             this.examInformationBoxData.push(informationBoxNumberOfExercises);
         }
     }

src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.html

@@ -0,0 +1,39 @@
+@if (exercise) {
+    <div id="exercise-headers-information" class="d-flex flex-row flex-wrap gap-2 overflow-auto">
+        @for (informationBoxItem of informationBoxItems; track informationBoxItem) {
+            <jhi-information-box [informationBoxData]="informationBoxItem">
+                @switch (informationBoxItem.content.type) {
+                    @case ('difficultyLevel') {
+                        <jhi-difficulty-level contentComponent [difficultyLevel]="informationBoxItem.content.value" />
+                    }
+                    @case ('categories') {
+                        <jhi-exercise-categories
+                            contentComponent
+                            [exercise]="informationBoxItem.content.value"
+                            [showTags]="{ difficulty: false, notReleased: true, includedInScore: true }"
+                            [ngClass]="'badge-row'"
+                            [isSmall]="true"
+                        />
+                    }
+                    @case ('timeAgo') {
+                        <span [ngClass]="'text-' + informationBoxItem.contentColor" contentComponent>{{ informationBoxItem.content.value | artemisTimeAgo }}</span>
+                    }
+                    @case ('dateTime') {
+                        <span contentComponent>{{ informationBoxItem.content.value | artemisDate }}</span>
+                    }
+                    @case ('submissionStatus') {
+                        <jhi-submission-result-status
+                            contentComponent
+                            class="text-truncate result"
+                            [exercise]="informationBoxItem.content.value"
+                            [studentParticipation]="studentParticipation"
+                            [triggerLastGraded]="false"
+                            [showCompletion]="false"
+                            [showBadge]="false"
+                        />
+                    }
+                }
+            </jhi-information-box>
+        }
+    </div>
+}