From e89f035634ac349c03a065dcf495cc817da44ff6 Mon Sep 17 00:00:00 2001 From: Ramona Beinstingel <75392103+rabeatwork@users.noreply.github.com> Date: Sun, 10 Nov 2024 17:29:10 +0100 Subject: [PATCH] Programming exercises: Add information box to exercise details page (#9668) --- .../exam-participation-cover.component.html | 10 +- .../exam-start-information.component.html | 29 +- .../exam-start-information.component.ts | 57 ++- ...xercise-headers-information.component.html | 39 ++ ...xercise-headers-information.component.scss | 0 .../exercise-headers-information.component.ts | 296 +++++++++++++ .../shared/result/result.component.html | 4 +- .../shared/result/result.component.ts | 1 + .../result/updating-result.component.html | 1 + .../result/updating-result.component.ts | 1 + .../course-conversations.component.scss | 4 +- .../conversation-messages.component.scss | 4 +- .../overview/course-overview.component.html | 393 +++++++++--------- .../overview/course-overview.component.scss | 14 +- .../app/overview/course-overview.component.ts | 7 +- .../webapp/app/overview/course-overview.scss | 10 - .../discussion-section.component.scss | 2 +- .../course-exercise-details.component.html | 151 +++---- .../course-exercise-details.component.scss | 8 - .../course-exercise-details.component.ts | 154 ++++++- .../course-exercise-details.module.ts | 4 + ...ise-details-student-actions.component.html | 2 + .../submission-result-status.component.html | 21 +- .../submission-result-status.component.ts | 1 + .../code-button/code-button.component.html | 2 +- .../code-button/code-button.component.ts | 1 + .../exercise-action-button.component.html | 2 +- .../components/not-released-tag.component.ts | 2 +- .../open-code-editor-button.component.html | 6 +- .../open-code-editor-button.component.ts | 2 + .../difficulty-level.component.html | 5 + .../difficulty-level.component.scss | 4 + .../difficulty-level.component.ts | 48 +++ .../exercise-categories.component.html | 32 +- .../exercise-categories.component.ts | 1 + .../information-box.component.html | 10 +- .../information-box.component.ts | 34 +- .../layouts/navbar/navbar.component.html | 6 +- .../app/shared/layouts/navbar/navbar.scss | 3 +- .../app/shared/metis/metis.component.scss | 2 +- .../sidebar-card-item.component.html | 2 +- .../app/shared/sidebar/sidebar.component.html | 4 +- src/main/webapp/app/utils/date.utils.ts | 4 + src/main/webapp/content/scss/global.scss | 2 +- .../content/scss/themes/_dark-variables.scss | 7 +- .../scss/themes/_default-variables.scss | 7 +- .../content/scss/themes/theme-default.scss | 2 +- .../webapp/i18n/de/programmingExercise.json | 4 +- .../webapp/i18n/de/student-dashboard.json | 48 ++- .../webapp/i18n/en/programmingExercise.json | 4 +- .../webapp/i18n/en/student-dashboard.json | 46 +- .../course/course-dashboard.component.spec.ts | 109 +++++ ...cise-headers-information.component.spec.ts | 296 +++++++++++++ .../course-exercise-details.component.spec.ts | 2 + .../shared/difficulty-level.component.spec.ts | 74 ++++ .../shared/information-box.component.spec.ts | 56 +++ .../course-tutorial-groups.component.spec.ts | 13 + .../javascript/spec/util/date.utils.spec.ts | 26 +- .../exercises/ExerciseResultPage.ts | 2 +- .../ProgrammingExerciseOverviewPage.ts | 4 +- 60 files changed, 1596 insertions(+), 489 deletions(-) create mode 100644 src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.html create mode 100644 src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.scss create mode 100644 src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.ts create mode 100644 src/main/webapp/app/shared/difficulty-level/difficulty-level.component.html create mode 100644 src/main/webapp/app/shared/difficulty-level/difficulty-level.component.scss create mode 100644 src/main/webapp/app/shared/difficulty-level/difficulty-level.component.ts create mode 100644 src/test/javascript/spec/component/course/course-dashboard.component.spec.ts create mode 100644 src/test/javascript/spec/component/exercises/shared/headers/exercise-headers-information.component.spec.ts create mode 100644 src/test/javascript/spec/component/shared/difficulty-level.component.spec.ts create mode 100644 src/test/javascript/spec/component/shared/information-box.component.spec.ts diff --git a/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html b/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html index 9d56b746c3c9..9e626d906094 100644 --- a/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html +++ b/src/main/webapp/app/exam/participate/exam-cover/exam-participation-cover.component.html @@ -14,9 +14,11 @@

-
- -
+
+
+ +
+
}
} -
+
+
@for (informationBoxData of examInformationBoxData; track informationBoxData) { -
- - - @if (informationBoxData.contentComponent === 'formatedDate') { - - {{ informationBoxData.content | artemisDate: 'long-date' }} - - - {{ informationBoxData.content | artemisDate: 'time' }} - - } @else if (informationBoxData.contentComponent === 'workingTime') { - - } - - -
+ + + @if (informationBoxData.content.type === 'dateTime') { + {{ informationBoxData.content.value | artemisDate }} + } + @if (informationBoxData.content.type === 'workingTime') { + + } + + }
- +
diff --git a/src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.ts b/src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.ts index 33237b989106..3f02da6bab2b 100644 --- a/src/main/webapp/app/exam/participate/exam-start-information/exam-start-information.component.ts +++ b/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); } } diff --git a/src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.html b/src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.html new file mode 100644 index 000000000000..30e26e951231 --- /dev/null +++ b/src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.html @@ -0,0 +1,39 @@ +@if (exercise) { +
+ @for (informationBoxItem of informationBoxItems; track informationBoxItem) { + + @switch (informationBoxItem.content.type) { + @case ('difficultyLevel') { + + } + @case ('categories') { + + } + @case ('timeAgo') { + {{ informationBoxItem.content.value | artemisTimeAgo }} + } + @case ('dateTime') { + {{ informationBoxItem.content.value | artemisDate }} + } + @case ('submissionStatus') { + + } + } + + } +
+} diff --git a/src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.scss b/src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.scss new file mode 100644 index 000000000000..e69de29bb2d1 diff --git a/src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.ts b/src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.ts new file mode 100644 index 000000000000..547009a136bd --- /dev/null +++ b/src/main/webapp/app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component.ts @@ -0,0 +1,296 @@ +import { Component, Input, OnChanges, OnInit } from '@angular/core'; +import { SortService } from 'app/shared/service/sort.service'; +import dayjs from 'dayjs/esm'; +import { Exercise, IncludedInOverallScore, getCourseFromExercise } from 'app/entities/exercise.model'; +import { SubmissionPolicy } from 'app/entities/submission-policy.model'; +import { StudentParticipation } from 'app/entities/participation/student-participation.model'; +import { getExerciseDueDate } from 'app/exercises/shared/exercise/exercise.utils'; +import { ProgrammingExercise } from 'app/entities/programming/programming-exercise.model'; +import { Course } from 'app/entities/course.model'; +import { SubmissionType } from 'app/entities/submission.model'; +import { ProgrammingSubmission } from 'app/entities/programming/programming-submission.model'; +import { roundValueSpecifiedByCourseSettings } from 'app/shared/util/utils'; +import { SubmissionResultStatusModule } from 'app/overview/submission-result-status.module'; +import { ExerciseCategoriesModule } from 'app/shared/exercise-categories/exercise-categories.module'; +import { InformationBox, InformationBoxComponent } from 'app/shared/information-box/information-box.component'; +import { ComplaintService } from 'app/complaints/complaint.service'; +import { isDateLessThanAWeekInTheFuture } from 'app/utils/date.utils'; +import { DifficultyLevelComponent } from 'app/shared/difficulty-level/difficulty-level.component'; +import { ArtemisSharedCommonModule } from 'app/shared/shared-common.module'; + +@Component({ + selector: 'jhi-exercise-headers-information', + templateUrl: './exercise-headers-information.component.html', + standalone: true, + imports: [SubmissionResultStatusModule, ExerciseCategoriesModule, InformationBoxComponent, DifficultyLevelComponent, ArtemisSharedCommonModule], + styleUrls: ['./exercise-headers-information.component.scss'], + /* Our tsconfig file has `preserveWhitespaces: 'true'` which causes whitespace to affect content projection. + We need to set it to 'false 'for this component, otherwise the components with the selector [contentComponent] + will not be projected into their specific slot of the "InformationBoxComponent" component.*/ + preserveWhitespaces: false, +}) +export class ExerciseHeadersInformationComponent implements OnInit, OnChanges { + readonly IncludedInOverallScore = IncludedInOverallScore; + readonly dayjs = dayjs; + + @Input() exercise: Exercise; + @Input() studentParticipation?: StudentParticipation; + @Input() course?: Course; + @Input() submissionPolicy?: SubmissionPolicy; + + dueDate?: dayjs.Dayjs; + programmingExercise?: ProgrammingExercise; + individualComplaintDueDate?: dayjs.Dayjs; + achievedPoints: number = 0; + numberOfSubmissions: number; + informationBoxItems: InformationBox[] = []; + + constructor(private sortService: SortService) {} + + ngOnInit() { + this.dueDate = getExerciseDueDate(this.exercise, this.studentParticipation); + + if (this.course?.maxComplaintTimeDays) { + this.individualComplaintDueDate = ComplaintService.getIndividualComplaintDueDate( + this.exercise, + this.course.maxComplaintTimeDays, + this.studentParticipation?.results?.last(), + this.studentParticipation, + ); + } + this.createInformationBoxItems(); + } + + ngOnChanges() { + this.course = this.course ?? getCourseFromExercise(this.exercise); + + if (this.submissionPolicy?.active && this.submissionPolicy?.submissionLimit) { + this.updateSubmissionPolicyItem(); + } + if (this.studentParticipation?.results?.length) { + // The updated participation by the websocket is not guaranteed to be sorted, find the newest result (highest id) + this.sortService.sortByProperty(this.studentParticipation.results, 'id', false); + + const latestRatedResult = this.studentParticipation.results.filter((result) => result.rated).first(); + if (latestRatedResult) { + this.achievedPoints = roundValueSpecifiedByCourseSettings((latestRatedResult.score! * this.exercise.maxPoints!) / 100, this.course) ?? 0; + } + } + } + + createInformationBoxItems() { + this.addPointsItems(); + this.addDueDateItems(); + this.addStartDateItem(); + this.addSubmissionStatusItem(); + this.addSubmissionPolicyItem(); + this.addDifficultyItem(); + this.addCategoryItems(); + } + + addPointsItems() { + const { maxPoints, bonusPoints } = this.exercise; + if (maxPoints) { + if (bonusPoints) { + let achievedBonusPoints: number = 0; + // If the student has more points than the max points, the bonus points are calculated + if (this.achievedPoints > maxPoints) { + achievedBonusPoints = roundValueSpecifiedByCourseSettings(this.achievedPoints - maxPoints, this.course); + } + const achievedPoints = this.achievedPoints - achievedBonusPoints; + this.informationBoxItems.push(this.getPointsItem('points', maxPoints, achievedPoints)); + this.informationBoxItems.push(this.getPointsItem('bonus', bonusPoints, achievedBonusPoints)); + } else { + this.informationBoxItems.push(this.getPointsItem('points', maxPoints, this.achievedPoints)); + } + } + } + + addDueDateItems() { + const now = dayjs(); + + const dueDateItem = this.getDueDateItem(); + if (dueDateItem) { + this.informationBoxItems.push(dueDateItem); + } + // If the due date is in the past and the assessment due date is in the future, show the assessment due date + if (this.dueDate?.isBefore(now) && this.exercise.assessmentDueDate?.isAfter(now)) { + const assessmentDueItem: InformationBox = { + title: 'artemisApp.courseOverview.exerciseDetails.assessmentDue', + content: { + type: 'dateTime', + value: this.exercise.assessmentDueDate, + }, + isContentComponent: true, + tooltip: 'artemisApp.courseOverview.exerciseDetails.assessmentDueTooltip', + }; + this.informationBoxItems.push(assessmentDueItem); + } + // // If the assessment due date is in the past and the complaint due date is in the future, show the complaint due date + if (this.exercise.assessmentDueDate?.isBefore(now) && this.individualComplaintDueDate?.isAfter(now)) { + const complaintDueItem: InformationBox = { + title: 'artemisApp.courseOverview.exerciseDetails.complaintDue', + content: { + type: 'dateTime', + value: this.individualComplaintDueDate, + }, + isContentComponent: true, + tooltip: 'artemisApp.courseOverview.exerciseDetails.complaintDueTooltip', + }; + this.informationBoxItems.push(complaintDueItem); + } + } + + getDueDateItem(): InformationBox | undefined { + if (this.dueDate) { + const isDueDateInThePast = this.dueDate.isBefore(dayjs()); + // If the due date is less than a day away, the color change to red + const dueDateStatusBadge = this.dueDate.isBetween(dayjs().add(1, 'day'), dayjs()) ? 'danger' : 'body-color'; + // If the due date is less than a week away, text is displayed relatively e.g. 'in 2 days' + const shouldDisplayDueDateRelative = isDateLessThanAWeekInTheFuture(this.dueDate); + + if (isDueDateInThePast) { + return { + title: 'artemisApp.courseOverview.exerciseDetails.submissionDueOver', + content: { + type: 'dateTime', + value: this.dueDate, + }, + isContentComponent: true, + }; + } + + return { + title: 'artemisApp.courseOverview.exerciseDetails.submissionDue', + content: { + type: shouldDisplayDueDateRelative ? 'timeAgo' : 'dateTime', + value: this.dueDate, + }, + isContentComponent: true, + tooltip: shouldDisplayDueDateRelative ? 'artemisApp.courseOverview.exerciseDetails.submissionDueTooltip' : undefined, + contentColor: dueDateStatusBadge, + tooltipParams: { date: this.dueDate?.format('lll') }, + }; + } + } + + addStartDateItem() { + if (this.exercise.startDate && dayjs().isBefore(this.exercise.startDate)) { + // If the start date is less than a week away, text is displayed relatively e.g. 'in 2 days' + const shouldDisplayStartDateRelative = isDateLessThanAWeekInTheFuture(this.exercise.startDate); + const startDateItem: InformationBox = { + title: 'artemisApp.courseOverview.exerciseDetails.startDate', + content: { + type: shouldDisplayStartDateRelative ? 'timeAgo' : 'dateTime', + value: this.exercise.startDate, + }, + isContentComponent: true, + tooltip: shouldDisplayStartDateRelative ? 'artemisApp.exerciseActions.startExerciseBeforeStartDate' : undefined, + }; + this.informationBoxItems.push(startDateItem); + } + } + + addDifficultyItem() { + if (this.exercise.difficulty) { + const difficultyItem: InformationBox = { + title: 'artemisApp.courseOverview.exerciseDetails.difficulty', + content: { + type: 'difficultyLevel', + value: this.exercise.difficulty, + }, + isContentComponent: true, + }; + this.informationBoxItems.push(difficultyItem); + } + } + + addSubmissionStatusItem() { + const submissionStatusItem: InformationBox = { + title: 'artemisApp.courseOverview.exerciseDetails.status', + content: { + type: 'submissionStatus', + value: this.exercise, + }, + isContentComponent: true, + }; + this.informationBoxItems.push(submissionStatusItem); + } + + addCategoryItems() { + const notReleased = this.exercise.releaseDate && dayjs(this.exercise.releaseDate).isAfter(dayjs()); + + if (notReleased || this.exercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY || this.exercise.categories?.length) { + const categoryItem: InformationBox = { + title: 'artemisApp.courseOverview.exerciseDetails.categories', + content: { + type: 'categories', + value: this.exercise, + }, + isContentComponent: true, + }; + this.informationBoxItems.push(categoryItem); + } + } + + addSubmissionPolicyItem() { + if (this.submissionPolicy?.active && this.submissionPolicy?.submissionLimit) { + this.informationBoxItems.push(this.getSubmissionPolicyItem()); + } + } + + getSubmissionPolicyItem(): InformationBox { + return { + title: 'artemisApp.programmingExercise.submissionPolicy.submissionLimitTitle', + content: { + type: 'string', + value: `${this.numberOfSubmissions} / ${this.submissionPolicy?.submissionLimit}`, + }, + contentColor: this.submissionPolicy?.submissionLimit ? this.getSubmissionColor() : 'body-color', + tooltip: 'artemisApp.programmingExercise.submissionPolicy.submissionPolicyType.' + this.submissionPolicy?.type + '.tooltip', + tooltipParams: { points: this.submissionPolicy?.exceedingPenalty?.toString() }, + }; + } + + getSubmissionColor(): string { + // default color should be 'body-color', thats why the default submissionsLeft is 2 + const submissionsLeft = this.submissionPolicy?.submissionLimit ? this.submissionPolicy?.submissionLimit - this.numberOfSubmissions : 2; + let submissionColor = 'body-color'; + if (submissionsLeft === 1) submissionColor = 'warning'; + // 0 submissions left or limit is already reached + else if (submissionsLeft <= 0) submissionColor = 'danger'; + return submissionColor; + } + + getPointsItem(title: string, maxPoints: number, achievedPoints: number): InformationBox { + return { + title: 'artemisApp.courseOverview.exerciseDetails.' + title, + content: { + type: 'string', + value: `${achievedPoints} / ${maxPoints}`, + }, + }; + } + + updateSubmissionPolicyItem() { + this.countSubmissions(); + + // need to push and pop the submission policy item to update the number of submissions + const submissionItemIndex = this.informationBoxItems.findIndex((item) => item.title === 'artemisApp.programmingExercise.submissionPolicy.submissionLimitTitle'); + if (submissionItemIndex !== -1) { + this.informationBoxItems.splice(submissionItemIndex, 1, this.getSubmissionPolicyItem()); + } + } + + countSubmissions() { + const commitHashSet = new Set(); + + this.studentParticipation?.results + ?.map((result) => result.submission) + .filter((submission) => submission?.type === SubmissionType.MANUAL) + .map((submission) => (submission as ProgrammingSubmission).commitHash) + .forEach((commitHash: string) => commitHashSet.add(commitHash)); + + this.numberOfSubmissions = commitHashSet.size; + } +} diff --git a/src/main/webapp/app/exercises/shared/result/result.component.html b/src/main/webapp/app/exercises/shared/result/result.component.html index 65c4be9ca9de..01207f3c5052 100644 --- a/src/main/webapp/app/exercises/shared/result/result.component.html +++ b/src/main/webapp/app/exercises/shared/result/result.component.html @@ -60,7 +60,7 @@ } - @if (!isInSidebarCard) { + @if (!isInSidebarCard && showCompletion) { ({{ result!.completionDate | artemisTimeAgo }}) } @@ -97,7 +97,7 @@ } @case (ResultTemplateStatus.MISSING) { -   + @switch (missingResultInfo) { @case (MissingResultInfo.FAILED_PROGRAMMING_SUBMISSION_ONLINE_IDE) { diff --git a/src/main/webapp/app/exercises/shared/result/updating-result.component.ts b/src/main/webapp/app/exercises/shared/result/updating-result.component.ts index 640b02f38bff..ac2f1cc9ae4d 100644 --- a/src/main/webapp/app/exercises/shared/result/updating-result.component.ts +++ b/src/main/webapp/app/exercises/shared/result/updating-result.component.ts @@ -34,6 +34,7 @@ export class UpdatingResultComponent implements OnChanges, OnDestroy { @Input() showBadge = false; @Input() showIcon = true; @Input() isInSidebarCard = false; + @Input() showCompletion = true; @Output() showResult = new EventEmitter(); /** * @property personalParticipation Whether the participation belongs to the user (by being a student) or not (by being an instructor) diff --git a/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss b/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss index 4feac4ecf258..e2919dcc3388 100644 --- a/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss +++ b/src/main/webapp/app/overview/course-conversations/course-conversations.component.scss @@ -20,8 +20,8 @@ } .scrollable-content { - --message-input-height-dev: 193px; - --message-input-height-prod: 177px; + --message-input-height-dev: 164px; + --message-input-height-prod: 148px; overflow-y: auto; overflow-x: hidden; max-height: calc(100vh - var(--header-height) - var(--message-input-height-prod)); diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss index d6900d231537..83aa144d2d9e 100644 --- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss +++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.scss @@ -3,8 +3,8 @@ @import 'bootstrap/scss/mixins'; .conversation-messages { - --message-input-height-prod: 171px; - --message-input-height-dev: 187px; + --message-input-height-prod: 142px; + --message-input-height-dev: 158px; --search-height: 52px; --channel-header-height: 52px; diff --git a/src/main/webapp/app/overview/course-overview.component.html b/src/main/webapp/app/overview/course-overview.component.html index 2cd6c2c5c4ee..5fac3f273643 100644 --- a/src/main/webapp/app/overview/course-overview.component.html +++ b/src/main/webapp/app/overview/course-overview.component.html @@ -1,223 +1,230 @@ -@if (!isShownViaLti) { -
-
- +
+
+ + - -
-
- -
-
- @if (course) { - @if (courses?.length) { -
- -
- } @else { +
+
+ +
+
+ @if (course) { + @if (courses?.length) { +
- } +
+ } @else { + } + } -
- @for (course of courses; track course) { - - } -
+
+ @for (course of courses; track course) { + + }
- @if (!isNavbarCollapsed) { -
{{ course?.title }}
- }
- -
-
-
    - @for (sidebarItem of sidebarItems; track sidebarItem) { -
  • - @if (sidebarItem.hasInOrionProperty && sidebarItem.showInOrionWindow !== undefined) { - + @if (!isNavbarCollapsed) { +
    {{ course?.title }}
    + } +
+ +
+
+
    + @for (sidebarItem of sidebarItems; track sidebarItem) { +
  • + @if (sidebarItem.hasInOrionProperty && sidebarItem.showInOrionWindow !== undefined) { + + } @else { + + } +
    • + } +
  • +
    + + +
    +
    • +
    + @for (hiddenItem of hiddenItems; track hiddenItem) { +
  • + @if (hiddenItem.hasInOrionProperty && hiddenItem.showInOrionWindow !== undefined) { + } @else { - + }
    • } -
  • -
    - - -
    -
    • -
    - @for (hiddenItem of hiddenItems; track hiddenItem) { + @if (courseActionItems?.length && anyItemHidden) { + @for (courseActionItem of courseActionItems; track courseActionItem) {
  • - @if (hiddenItem.hasInOrionProperty && hiddenItem.showInOrionWindow !== undefined) { - - } @else { - - } + + +
    • } - @if (courseActionItems?.length && anyItemHidden) { - @for (courseActionItem of courseActionItems; track courseActionItem) { -
  • - - - -
    • - } - } -
    -
-
-
- -
- @if (courseActionItems?.length && !anyItemHidden) { -
-
  • - @for (courseActionItem of courseActionItems; track courseActionItem) { - - - - } -
    • -
    - } - -
    -
    - - + }
    -
    +
    - - - @if (course) { + +
    + @if (courseActionItems?.length && !anyItemHidden) { +
    +
  • + @for (courseActionItem of courseActionItems; track courseActionItem) { + + + + } +
    • +
    + } +
    -
    - @if (hasSidebar) { - - } -
    {{ 'artemisApp.courseOverview.menu.' + pageTitle | artemisTranslate }}
    +
    + +
    -
    - @if (isNotManagementView && course.isAtLeastTutor) { -
    - +
    +
    +
    + + + @if (course) { +
    +
    + @if (hasSidebar) { + - } -
    + + } +
    -
    - @if (!hasSidebar) { - +
    + @if (isNotManagementView && course.isAtLeastTutor) { +
    + +
    + } + @if (showRefreshButton) { + } - -
    - -
    - } - - -
    -
    -} @else { - -
    - @if (!hasSidebar) { - - } - -
    - -
    +
    +
    + @if (!hasSidebar) { + + } + + @if (!isShownViaLti) { + + } +
    + } + +
    -} +
    +
    + @if (!hasSidebar) { + + } + + @if (isShownViaLti) { + + } +
    + + +
    + +
    +     + @if (courseImage) {
    diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss index a7b6b5180084..81e906106a0d 100644 --- a/src/main/webapp/app/overview/course-overview.component.scss +++ b/src/main/webapp/app/overview/course-overview.component.scss @@ -37,15 +37,15 @@ $transition-color-length: 0.2s; } .mat-drawer-container { - height: calc(100vh - var(--sidebar-footer-height-prod)); + height: calc(100vh - var(--sidebar-footer-height-prod) - var(--spacing-modules)); &.sidenav-height-dev { - height: calc(100vh - var(--sidebar-footer-height-dev)); + height: calc(100vh - var(--sidebar-footer-height-dev) - var(--spacing-modules)); } @media (max-width: 768px) { - height: calc(100vh - var(--sidebar-footer-height-prod)) !important; - height: calc(100dvh - var(--sidebar-footer-height-prod)) !important; + height: calc(100vh - var(--sidebar-footer-height-prod) - var(--spacing-modules)) !important; + height: calc(100dvh - var(--sidebar-footer-height-prod) - var(--spacing-modules)) !important; } &.exam-wrapper { @@ -56,14 +56,14 @@ $transition-color-length: 0.2s; box-sizing: content-box; width: $menu-width-open; transition: width 0.2s ease-in-out !important; - height: calc(100vh - var(--sidebar-footer-height-prod)); + height: calc(100vh - var(--sidebar-footer-height-prod) - var(--spacing-modules)); &.sidenav-height-dev { - height: calc(100vh - var(--sidebar-footer-height-dev)); + height: calc(100vh - var(--sidebar-footer-height-dev) - var(--spacing-modules)); } @media (max-width: 768px) { - height: calc(100vh - var(--sidebar-footer-height-prod)) !important; + height: calc(100vh - var(--sidebar-footer-height-prod) - var(--spacing-modules)) !important; } } diff --git a/src/main/webapp/app/overview/course-overview.component.ts b/src/main/webapp/app/overview/course-overview.component.ts index fd9485c0efe3..18ab280c3e28 100644 --- a/src/main/webapp/app/overview/course-overview.component.ts +++ b/src/main/webapp/app/overview/course-overview.component.ts @@ -19,6 +19,7 @@ import { IconDefinition, faChalkboardUser, faChartBar, + faChartColumn, faChevronLeft, faChevronRight, faCircleNotch, @@ -30,7 +31,6 @@ import { faFlag, faGraduationCap, faListAlt, - faListCheck, faNetworkWired, faPersonChalkboard, faQuestion, @@ -179,6 +179,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit facSidebar = facSidebar; faEllipsis = faEllipsis; faQuestion = faQuestion; + faChartColumn = faChartColumn; FeatureToggle = FeatureToggle; CachingStrategy = CachingStrategy; @@ -496,7 +497,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit } const exercisesItem: SidebarItem = { routerLink: 'exercises', - icon: faListCheck, + icon: faListAlt, title: 'Exercises', translation: 'artemisApp.courseOverview.menu.exercises', hidden: false, @@ -504,7 +505,7 @@ export class CourseOverviewComponent implements OnInit, OnDestroy, AfterViewInit const statisticsItem: SidebarItem = { routerLink: 'statistics', - icon: faListAlt, + icon: faChartColumn, title: 'Statistics', translation: 'artemisApp.courseOverview.menu.statistics', hasInOrionProperty: true, diff --git a/src/main/webapp/app/overview/course-overview.scss b/src/main/webapp/app/overview/course-overview.scss index 366470e3c500..718a755e7b56 100644 --- a/src/main/webapp/app/overview/course-overview.scss +++ b/src/main/webapp/app/overview/course-overview.scss @@ -1,16 +1,6 @@ /* ========================================================================== Course Info Bar ========================================================================== */ -.tab-bar-exercise-details { - flex-wrap: wrap; - - // move instructor actions onto their own line for small/medium devices - .instructor-actions { - width: 100%; - justify-content: flex-end; - } -} - .course-body-container { position: relative; } diff --git a/src/main/webapp/app/overview/discussion-section/discussion-section.component.scss b/src/main/webapp/app/overview/discussion-section/discussion-section.component.scss index 8e950f5556dd..15214ef60aee 100644 --- a/src/main/webapp/app/overview/discussion-section/discussion-section.component.scss +++ b/src/main/webapp/app/overview/discussion-section/discussion-section.component.scss @@ -35,7 +35,7 @@ $discussion-section-card-min-width: 360px; align-items: center; background-color: var(--artemis-dark); cursor: pointer; - border-radius: 1em 1em 0 0; + border-radius: 0.25em 0.25em 0 0; .card-title { display: flex; diff --git a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html index 29582939ece9..2bb6478e9300 100644 --- a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html +++ b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.html @@ -1,115 +1,62 @@ @if (exercise) { -
    - - {{ exercise.title }} - -
    - - @if (plagiarismCaseInfo && plagiarismCaseInfo.verdict !== PlagiarismVerdict.NO_PLAGIARISM) { - - @if (!plagiarismCaseInfo?.createdByContinuousPlagiarismControl) { - - } - @if (plagiarismCaseInfo?.createdByContinuousPlagiarismControl) { - - } - - } -
    -
    - -
    +
    +
    +
    +
    {{ exercise.title }}
    +
    +
    @if (exercise.isAtLeastTutor) { -
    - {{ - 'artemisApp.courseOverview.exerciseDetails.instructorActions.title' + (exercise.isAtLeastInstructor ? '' : 'Tutor') | artemisTranslate - }} -
    - - - - - - - - - - @if (exercise.type !== QUIZ) { - - - - - } - @if (exercise.type === QUIZ) { - - - - - } - @if (exercise.type === QUIZ) { - - - - - } - @if (exercise.isAtLeastEditor) { - @if (exercise.type === QUIZ) { - - - - - } - @if (exercise.type === MODELING) { - - - - - } - @if (exercise.type === PROGRAMMING) { - - - - - } - @if (!QUIZ_ENDED_STATUS.includes(quizExerciseStatus)) { - - - - - } - @if (QUIZ_ENDED_STATUS.includes(quizExerciseStatus) && exercise.isAtLeastInstructor) { - - - - - } +
    + +
    + @for (instructorActionItem of instructorActionItems; track instructorActionItem) { + }
    } + + @if (plagiarismCaseInfo && plagiarismCaseInfo.verdict !== PlagiarismVerdict.NO_PLAGIARISM) { + + @if (!plagiarismCaseInfo?.createdByContinuousPlagiarismControl) { + + } + @if (plagiarismCaseInfo?.createdByContinuousPlagiarismControl) { + + } + + }
    + +
    +
    + +
    + +
    - @if ((this.sortedHistoryResults?.length && this.sortedHistoryResults.length > 1) || this.practiceStudentParticipation?.results?.length) {
    diff --git a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.scss b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.scss index aa14a1bf85a8..e69de29bb2d1 100644 --- a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.scss +++ b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.scss @@ -1,8 +0,0 @@ -.tab-bar-exercise-details { - display: flex; - min-height: 60px; - margin: 0 -1rem 0.5rem -1rem; - padding: 0.5rem 1rem; - border-bottom: 1px solid var(--overview-border-color); - gap: 1rem; -} diff --git a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.ts b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.ts index a8c94911d1cc..330e469035a6 100644 --- a/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.ts +++ b/src/main/webapp/app/overview/exercise-details/course-exercise-details.component.ts @@ -11,7 +11,7 @@ import { GuidedTourService } from 'app/guided-tour/guided-tour.service'; import { programmingExerciseFail, programmingExerciseSuccess } from 'app/guided-tour/tours/course-exercise-detail-tour'; import { ProfileService } from 'app/shared/layouts/profiles/profile.service'; import { Participation } from 'app/entities/participation/participation.model'; -import { Exercise, ExerciseType } from 'app/entities/exercise.model'; +import { Exercise, ExerciseType, getIcon } from 'app/entities/exercise.model'; import { StudentParticipation } from 'app/entities/participation/student-participation.model'; import { ExampleSolutionInfo, ExerciseDetailsType, ExerciseService } from 'app/exercises/shared/exercise/exercise.service'; import { AssessmentType } from 'app/entities/assessment-type.model'; @@ -29,7 +29,7 @@ import { ComplaintService } from 'app/complaints/complaint.service'; import { Complaint } from 'app/entities/complaint.model'; import { SubmissionPolicy } from 'app/entities/submission-policy.model'; import { ArtemisMarkdownService } from 'app/shared/markdown.service'; -import { faAngleDown, faAngleUp, faBook, faEye, faFileSignature, faListAlt, faSignal, faTable, faWrench } from '@fortawesome/free-solid-svg-icons'; +import { IconDefinition, faAngleDown, faAngleUp, faBook, faEye, faFileSignature, faListAlt, faSignal, faTable, faWrench } from '@fortawesome/free-solid-svg-icons'; import { ExerciseHintService } from 'app/exercises/shared/exercise-hint/shared/exercise-hint.service'; import { ExerciseHint } from 'app/entities/hestia/exercise-hint.model'; import { PlagiarismVerdict } from 'app/exercises/shared/plagiarism/types/PlagiarismVerdict'; @@ -44,7 +44,13 @@ import { ScienceService } from 'app/shared/science/science.service'; import { ScienceEventType } from 'app/shared/science/science.model'; import { PROFILE_IRIS } from 'app/app.constants'; import { ChatServiceMode } from 'app/iris/iris-chat.service'; +import { IconProp } from '@fortawesome/fontawesome-svg-core'; +interface InstructorActionItem { + routerLink: string; + icon?: IconDefinition; + translation: string; +} @Component({ selector: 'jhi-course-exercise-details', templateUrl: './course-exercise-details.component.html', @@ -56,6 +62,7 @@ export class CourseExerciseDetailsComponent extends AbstractScienceComponent imp readonly PlagiarismVerdict = PlagiarismVerdict; readonly QuizStatus = QuizStatus; readonly QUIZ_ENDED_STATUS: (QuizStatus | undefined)[] = [QuizStatus.CLOSED, QuizStatus.OPEN_FOR_PRACTICE]; + readonly QUIZ_EDITABLE_STATUS: (QuizStatus | undefined)[] = [QuizStatus.VISIBLE, QuizStatus.INVISIBLE]; readonly QUIZ = ExerciseType.QUIZ; readonly PROGRAMMING = ExerciseType.PROGRAMMING; readonly MODELING = ExerciseType.MODELING; @@ -100,6 +107,8 @@ export class CourseExerciseDetailsComponent extends AbstractScienceComponent imp isProduction = true; isTestServer = false; isGeneratingFeedback: boolean = false; + instructorActionItems: InstructorActionItem[] = []; + exerciseIcon: IconProp; exampleSolutionInfo?: ExampleSolutionInfo; @@ -165,21 +174,6 @@ export class CourseExerciseDetailsComponent extends AbstractScienceComponent imp }); } - ngOnDestroy() { - if (this.participationUpdateListener) { - this.participationUpdateListener.unsubscribe(); - if (this.studentParticipations) { - this.studentParticipations.forEach((participation) => { - this.participationWebsocketService.unsubscribeForLatestResultOfParticipation(participation.id!, this.exercise!); - }); - } - } - this.teamAssignmentUpdateListener?.unsubscribe(); - this.submissionSubscription?.unsubscribe(); - this.paramsSubscription?.unsubscribe(); - this.profileSubscription?.unsubscribe(); - } - loadExercise() { this.irisSettings = undefined; this.studentParticipations = this.participationWebsocketService.getParticipationsForExercise(this.exerciseId); @@ -224,6 +218,10 @@ export class CourseExerciseDetailsComponent extends AbstractScienceComponent imp this.subscribeToTeamAssignmentUpdates(); this.baseResource = `/course-management/${this.courseId}/${this.exercise.type}-exercises/${this.exercise.id}/`; + if (this.exercise?.type) { + this.exerciseIcon = getIcon(this.exercise?.type); + } + this.createInstructorActions(); } /** @@ -443,5 +441,125 @@ export class CourseExerciseDetailsComponent extends AbstractScienceComponent imp this.exampleSolutionCollapsed = !this.exampleSolutionCollapsed; } - setIsGeneratingFeedback() {} + // INSTRUCTOR ACTIONS + createInstructorActions() { + if (this.exercise?.isAtLeastTutor) { + this.instructorActionItems = this.createTutorActions(); + } + if (this.exercise?.isAtLeastEditor) { + this.instructorActionItems.push(...this.createEditorActions()); + } + if (this.exercise?.isAtLeastInstructor && this.QUIZ_ENDED_STATUS.includes(this.quizExerciseStatus)) { + this.instructorActionItems.push(this.getReEvaluateItem()); + } + } + + createTutorActions(): InstructorActionItem[] { + const tutorActionItems = [...this.getDefaultItems()]; + if (this.exercise?.type === ExerciseType.QUIZ) { + tutorActionItems.push(...this.getQuizItems()); + } else { + tutorActionItems.push(this.getParticipationItem()); + } + return tutorActionItems; + } + + getDefaultItems(): InstructorActionItem[] { + return [ + { + routerLink: `${this.baseResource}`, + icon: faEye, + translation: 'entity.action.view', + }, + { + routerLink: `${this.baseResource}scores`, + icon: faTable, + translation: 'entity.action.scores', + }, + ]; + } + + getQuizItems(): InstructorActionItem[] { + return [ + { + routerLink: `${this.baseResource}preview`, + icon: faEye, + translation: 'artemisApp.quizExercise.preview', + }, + { + routerLink: `${this.baseResource}solution`, + icon: faEye, + translation: 'artemisApp.quizExercise.solution', + }, + ]; + } + + getParticipationItem(): InstructorActionItem { + return { + routerLink: `${this.baseResource}participations`, + icon: faListAlt, + translation: 'artemisApp.exercise.participations', + }; + } + + createEditorActions(): InstructorActionItem[] { + const editorItems: InstructorActionItem[] = []; + if (this.exercise?.type === ExerciseType.QUIZ) { + editorItems.push(this.getStatisticItem('quiz-point-statistic')); + if (this.QUIZ_EDITABLE_STATUS.includes(this.quizExerciseStatus)) { + editorItems.push(this.getQuizEditItem()); + } + } else if (this.exercise?.type === ExerciseType.MODELING) { + editorItems.push(this.getStatisticItem('exercise-statistics')); + } else if (this.exercise?.type === ExerciseType.PROGRAMMING) { + editorItems.push(this.getGradingItem()); + } + return editorItems; + } + + getStatisticItem(routerLink: string): InstructorActionItem { + return { + routerLink: `${this.baseResource}${routerLink}`, + icon: faSignal, + translation: 'artemisApp.courseOverview.exerciseDetails.instructorActions.statistics', + }; + } + + getGradingItem(): InstructorActionItem { + return { + routerLink: `${this.baseResource}grading/test-cases`, + icon: faFileSignature, + translation: 'artemisApp.programmingExercise.configureGrading.shortTitle', + }; + } + + getQuizEditItem(): InstructorActionItem { + return { + routerLink: `${this.baseResource}edit`, + icon: faWrench, + translation: 'entity.action.edit', + }; + } + + getReEvaluateItem(): InstructorActionItem { + return { + routerLink: `${this.baseResource}re-evaluate`, + icon: faWrench, + translation: 'entity.action.re-evaluate', + }; + } + + ngOnDestroy() { + this.participationUpdateListener?.unsubscribe(); + this.studentParticipations?.forEach((participation) => { + if (participation.id && this.exercise) { + this.participationWebsocketService.unsubscribeForLatestResultOfParticipation(participation.id, this.exercise); + } + }); + + this.teamAssignmentUpdateListener?.unsubscribe(); + this.submissionSubscription?.unsubscribe(); + this.paramsSubscription?.unsubscribe(); + this.profileSubscription?.unsubscribe(); + } } diff --git a/src/main/webapp/app/overview/exercise-details/course-exercise-details.module.ts b/src/main/webapp/app/overview/exercise-details/course-exercise-details.module.ts index 63f0858ea8b8..6c5664b7bff2 100644 --- a/src/main/webapp/app/overview/exercise-details/course-exercise-details.module.ts +++ b/src/main/webapp/app/overview/exercise-details/course-exercise-details.module.ts @@ -31,6 +31,7 @@ import { ArtemisFeedbackModule } from 'app/exercises/shared/feedback/feedback.mo import { ArtemisExerciseInfoModule } from 'app/exercises/shared/exercise-info/exercise-info.module'; import { IrisModule } from 'app/iris/iris.module'; import { DiscussionSectionComponent } from 'app/overview/discussion-section/discussion-section.component'; +import { ExerciseHeadersInformationComponent } from 'app/exercises/shared/exercise-headers/exercise-headers-information/exercise-headers-information.component'; const routes: Routes = [ { @@ -45,6 +46,8 @@ const routes: Routes = [ }, ]; +const standaloneComponents = [ExerciseHeadersInformationComponent]; + @NgModule({ imports: [ ArtemisExerciseButtonsModule, @@ -71,6 +74,7 @@ const routes: Routes = [ ArtemisExerciseInfoModule, IrisModule, DiscussionSectionComponent, + [...standaloneComponents], ], declarations: [CourseExerciseDetailsComponent, OrionCourseExerciseDetailsComponent, LtiInitializerComponent, LtiInitializerModalComponent, ProblemStatementComponent], exports: [CourseExerciseDetailsComponent, OrionCourseExerciseDetailsComponent, ProblemStatementComponent], diff --git a/src/main/webapp/app/overview/exercise-details/exercise-details-student-actions.component.html b/src/main/webapp/app/overview/exercise-details/exercise-details-student-actions.component.html index d23e8a057abf..6b7f975bec37 100644 --- a/src/main/webapp/app/overview/exercise-details/exercise-details-student-actions.component.html +++ b/src/main/webapp/app/overview/exercise-details/exercise-details-student-actions.component.html @@ -117,6 +117,7 @@ [participations]="exercise.studentParticipations!" [courseAndExerciseNavigationUrlSegment]="['/courses', courseId, 'exercises', 'programming-exercises', exercise.id, 'code-editor']" [exercise]="exercise" + [hideLabelMobile]="true" /> } @if (programmingExercise?.allowOfflineIde) { @@ -126,6 +127,7 @@ [participations]="exercise.studentParticipations!" [exercise]="exercise" [routerLinkForRepositoryView]="repositoryLink + '/repository/' + exercise.studentParticipations![0].id" + [hideLabelMobile]="true" [useParticipationVcsAccessToken]="true" /> } diff --git a/src/main/webapp/app/overview/submission-result-status.component.html b/src/main/webapp/app/overview/submission-result-status.component.html index 2cc0eaac36b4..062fe40125fa 100644 --- a/src/main/webapp/app/overview/submission-result-status.component.html +++ b/src/main/webapp/app/overview/submission-result-status.component.html @@ -11,6 +11,7 @@ [showBadge]="showBadge" [showIcon]="showIcon" [isInSidebarCard]="isInSidebarCard" + [showCompletion]="showCompletion" [short]="short" [personalParticipation]="true" /> @@ -19,24 +20,20 @@
    @if (exercise.teamMode && exercise.studentAssignedTeamIdComputed && !exercise.studentAssignedTeamId) { - } - @if (uninitialized) { + } @else if (uninitialized) { - } - @if (exerciseMissedDueDate) { + } @else if (exerciseMissedDueDate) { - } - @if (notSubmitted) { + } @else if (notSubmitted) { - } - @if (!notSubmitted && studentParticipation?.initializationState === InitializationState.FINISHED) { + } @else if (!notSubmitted && studentParticipation?.initializationState === InitializationState.FINISHED) { - } - @if (studentParticipation?.initializationState === InitializationState.INITIALIZED && exercise.type === ExerciseType.QUIZ) { + } @else if (studentParticipation?.initializationState === InitializationState.INITIALIZED && exercise.type === ExerciseType.QUIZ) { - } - @if (quizNotStarted) { + } @else if (quizNotStarted) { + } @else { + - }
    } diff --git a/src/main/webapp/app/overview/submission-result-status.component.ts b/src/main/webapp/app/overview/submission-result-status.component.ts index 5fe0027a5adb..2677fcf51883 100644 --- a/src/main/webapp/app/overview/submission-result-status.component.ts +++ b/src/main/webapp/app/overview/submission-result-status.component.ts @@ -31,6 +31,7 @@ export class SubmissionResultStatusComponent implements OnChanges { @Input() showUngradedResults = false; @Input() showIcon = true; @Input() isInSidebarCard = false; + @Input() showCompletion = true; @Input() short = true; @Input() triggerLastGraded = true; diff --git a/src/main/webapp/app/shared/components/code-button/code-button.component.html b/src/main/webapp/app/shared/components/code-button/code-button.component.html index 122d8df4e398..9b8d4f0488fd 100644 --- a/src/main/webapp/app/shared/components/code-button/code-button.component.html +++ b/src/main/webapp/app/shared/components/code-button/code-button.component.html @@ -7,7 +7,7 @@ [buttonLabel]="'artemisApp.exerciseActions.code' | artemisTranslate" [buttonLoading]="loading" [smallButton]="smallButtons" - [hideLabelMobile]="false" + [hideLabelMobile]="hideLabelMobile" [ngbPopover]="popContent" [autoClose]="'outside'" placement="right auto" diff --git a/src/main/webapp/app/shared/components/code-button/code-button.component.ts b/src/main/webapp/app/shared/components/code-button/code-button.component.ts index a3041023127a..8f83edec0be8 100644 --- a/src/main/webapp/app/shared/components/code-button/code-button.component.ts +++ b/src/main/webapp/app/shared/components/code-button/code-button.component.ts @@ -33,6 +33,7 @@ export class CodeButtonComponent implements OnInit, OnChanges { @Input() routerLinkForRepositoryView?: string | (string | number)[]; @Input() participations?: ProgrammingExerciseStudentParticipation[]; @Input() exercise?: ProgrammingExercise; + @Input() hideLabelMobile = false; useSsh = false; useToken = false; diff --git a/src/main/webapp/app/shared/components/exercise-action-button.component.html b/src/main/webapp/app/shared/components/exercise-action-button.component.html index bc2b41ec1981..13516b497161 100644 --- a/src/main/webapp/app/shared/components/exercise-action-button.component.html +++ b/src/main/webapp/app/shared/components/exercise-action-button.component.html @@ -1,6 +1,6 @@
    @if (buttonIcon) { - + }   {{ buttonLabel }} diff --git a/src/main/webapp/app/shared/components/not-released-tag.component.ts b/src/main/webapp/app/shared/components/not-released-tag.component.ts index a1f4dbefbc90..9fdb0a54a3a7 100644 --- a/src/main/webapp/app/shared/components/not-released-tag.component.ts +++ b/src/main/webapp/app/shared/components/not-released-tag.component.ts @@ -9,6 +9,6 @@ import { Exercise } from 'app/entities/exercise.model'; }) export class NotReleasedTagComponent { @Input() public exercise: Exercise; - @Input() public noMargin?: boolean; + @Input() public noMargin: boolean = true; readonly dayjs = dayjs; } diff --git a/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.html b/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.html index ce94f86bca0c..47eafc60ec58 100644 --- a/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.html +++ b/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.html @@ -9,7 +9,7 @@ [buttonLabel]="'artemisApp.exerciseActions.openCodeEditor' | artemisTranslate" [buttonLoading]="loading" [smallButton]="smallButtons" - [hideLabelMobile]="false" + [hideLabelMobile]="hideLabelMobile" [routerLink]="[courseAndExerciseNavigationUrl, participations[0].id]" > } @@ -22,7 +22,7 @@ [buttonLabel]="'artemisApp.exerciseActions.openCodeEditor' | artemisTranslate" [buttonLoading]="loading" [smallButton]="smallButtons" - [hideLabelMobile]="false" + [hideLabelMobile]="hideLabelMobile" [ngbPopover]="popContent" [autoClose]="'outside'" placement="right auto" @@ -44,7 +44,7 @@ [buttonLabel]="'artemisApp.exerciseActions.' + (isPracticeMode ? 'openPracticeCodeEditor' : 'openGradedCodeEditor') | artemisTranslate" [buttonLoading]="loading" [smallButton]="smallButtons" - [hideLabelMobile]="false" + [hideLabelMobile]="hideLabelMobile" [routerLink]="[courseAndExerciseNavigationUrl, activeParticipation.id]" > diff --git a/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.ts b/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.ts index 24438355258d..10b32d55360e 100644 --- a/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.ts +++ b/src/main/webapp/app/shared/components/open-code-editor-button/open-code-editor-button.component.ts @@ -22,6 +22,8 @@ export class OpenCodeEditorButtonComponent implements OnChanges { courseAndExerciseNavigationUrlSegment: any[]; @Input() exercise: Exercise; + @Input() + hideLabelMobile = false; courseAndExerciseNavigationUrl: string; activeParticipation: ProgrammingExerciseStudentParticipation; diff --git a/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.html b/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.html new file mode 100644 index 000000000000..9f61483533b1 --- /dev/null +++ b/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.html @@ -0,0 +1,5 @@ +
    +
    +
    +
    +
    diff --git a/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.scss b/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.scss new file mode 100644 index 000000000000..e621c444014f --- /dev/null +++ b/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.scss @@ -0,0 +1,4 @@ +.skill-bar { + width: 1.2rem; + height: 0.6rem; +} diff --git a/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.ts b/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.ts new file mode 100644 index 000000000000..69af618315e3 --- /dev/null +++ b/src/main/webapp/app/shared/difficulty-level/difficulty-level.component.ts @@ -0,0 +1,48 @@ +import { Component, Input, OnDestroy, OnInit } from '@angular/core'; +import { TranslateService } from '@ngx-translate/core'; +import { DifficultyLevel } from 'app/entities/exercise.model'; +import { Subscription } from 'rxjs'; +import { ArtemisSharedModule } from '../shared.module'; +import { ArtemisSharedComponentModule } from '../components/shared-component.module'; + +export interface ColoredDifficultyLevel { + label: string; + color: string[]; +} +@Component({ + selector: 'jhi-difficulty-level', + templateUrl: './difficulty-level.component.html', + styleUrls: ['./difficulty-level.component.scss'], + standalone: true, + imports: [ArtemisSharedModule, ArtemisSharedComponentModule], +}) +export class DifficultyLevelComponent implements OnInit, OnDestroy { + private translateSubscription: Subscription; + @Input() difficultyLevel: string; + coloredDifficultyLevel: ColoredDifficultyLevel = { label: '', color: [] }; + + constructor(private translateService: TranslateService) {} + + ngOnInit(): void { + this.translateSubscription = this.translateService.onLangChange.subscribe(() => { + this.mapDifficultyLevelToColors(this.difficultyLevel); + }); + this.coloredDifficultyLevel = this.mapDifficultyLevelToColors(this.difficultyLevel); + } + + mapDifficultyLevelToColors(difficultyLevel: string): ColoredDifficultyLevel { + switch (difficultyLevel) { + case DifficultyLevel.EASY: + return { label: this.translateService.instant('artemisApp.exercise.easy'), color: [...Array(1).fill('success'), ...Array(2).fill('body')] }; + case DifficultyLevel.MEDIUM: + return { label: this.translateService.instant('artemisApp.exercise.medium'), color: [...Array(2).fill('warning'), ...Array(1).fill('body')] }; + case DifficultyLevel.HARD: + return { label: this.translateService.instant('artemisApp.exercise.hard'), color: [...Array(3).fill('danger')] }; + } + return { label: this.translateService.instant('artemisApp.exercise.noLevel'), color: [...Array(3).fill('body')] }; + } + + ngOnDestroy(): void { + this.translateSubscription?.unsubscribe(); + } +} diff --git a/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html b/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html index f811a3f4c4e7..3c99371ad386 100644 --- a/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html +++ b/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.html @@ -1,27 +1,31 @@ @if (exercise.releaseDate && dayjs(exercise.releaseDate).isAfter(dayjs()) && showTags.notReleased) { -

    + -

    + } @if (asQuizExercise(exercise).isActiveQuiz && showTags.quizLive) { -

    + -

    -} -@for (category of exercise.categories; track category) { - -} -@if (exercise.difficulty && showTags.difficulty) { -

    - -

    + } @if (exercise.includedInOverallScore !== IncludedInOverallScore.INCLUDED_COMPLETELY && showTags.includedInScore) { -

    + -

    + +} +@for (category of exercise.categories; track category) { + @if (category.category) { + + {{ category.category | truncate: 30 }} + + } +} +@if (exercise.difficulty && showTags.difficulty) { + + + } diff --git a/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.ts b/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.ts index 43ca30b06c3e..065c59b801fc 100644 --- a/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.ts +++ b/src/main/webapp/app/shared/exercise-categories/exercise-categories.component.ts @@ -21,6 +21,7 @@ export class ExerciseCategoriesComponent { readonly dayjs = dayjs; @Input() exercise: Exercise; + @Input() isSmall: boolean = false; @Input() showTags: ShowTagsConfig = { diff --git a/src/main/webapp/app/shared/information-box/information-box.component.html b/src/main/webapp/app/shared/information-box/information-box.component.html index 93a62b96655d..5495dbfd46d1 100644 --- a/src/main/webapp/app/shared/information-box/information-box.component.html +++ b/src/main/webapp/app/shared/information-box/information-box.component.html @@ -1,15 +1,15 @@ @if (informationBoxData) {
    -
    - @if (informationBoxData.contentComponent) { +
    + @if (informationBoxData.isContentComponent) { } @else { -
    - {{ informationBoxData.content }} +
    + {{ informationBoxData.content.value }}
    }
    diff --git a/src/main/webapp/app/shared/information-box/information-box.component.ts b/src/main/webapp/app/shared/information-box/information-box.component.ts index 3e909eb46ee9..5be6212f7277 100644 --- a/src/main/webapp/app/shared/information-box/information-box.component.ts +++ b/src/main/webapp/app/shared/information-box/information-box.component.ts @@ -1,16 +1,46 @@ import { Component, Input } from '@angular/core'; import { ArtemisSharedModule } from 'app/shared/shared.module'; import { ArtemisSharedComponentModule } from 'app/shared/components/shared-component.module'; +import { DifficultyLevel, Exercise } from 'app/entities/exercise.model'; +import { DateType } from '../pipes/artemis-date.pipe'; +import { StudentExam } from 'app/entities/student-exam.model'; export interface InformationBox { title: string; - content: string | number; - contentComponent?: string; + content: InformationBoxContent; + isContentComponent?: boolean; tooltip?: string; tooltipParams?: Record; contentColor?: string; } +export interface StudentExamContent { + type: 'workingTime'; + value: StudentExam; +} + +export interface DateContent { + type: 'timeAgo' | 'dateTime'; + value: DateType; +} + +export interface DifficultyLevelContent { + type: 'difficultyLevel'; + value: DifficultyLevel; +} + +export interface ExerciseContent { + type: 'submissionStatus' | 'categories'; + value: Exercise; +} + +export interface StringNumberContent { + type: 'string'; + value: string | number; +} + +export type InformationBoxContent = StudentExamContent | DateContent | ExerciseContent | DifficultyLevelContent | StringNumberContent; + @Component({ standalone: true, imports: [ArtemisSharedModule, ArtemisSharedComponentModule], diff --git a/src/main/webapp/app/shared/layouts/navbar/navbar.component.html b/src/main/webapp/app/shared/layouts/navbar/navbar.component.html index 4883c2e7b81c..e2109b05ea21 100644 --- a/src/main/webapp/app/shared/layouts/navbar/navbar.component.html +++ b/src/main/webapp/app/shared/layouts/navbar/navbar.component.html @@ -135,7 +135,7 @@