CLASSROOMIO-T-80: Replace sapper with sveltekit
This commit is contained in:
Rotimi Best
@@ -0,0 +1,5 @@
|
||||
export const load = ({ params = { id: '' } }) => {
|
||||
return {
|
||||
courseId: params.id,
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,211 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import AudioConsoleIcon from 'carbon-icons-svelte/lib/AudioConsole.svelte';
|
||||
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
|
||||
import PageNav from '$lib/components/PageNav/index.svelte';
|
||||
import PageBody from '$lib/components/PageBody/index.svelte';
|
||||
import Box from '$lib/components/Box/index.svelte';
|
||||
import { ROLE } from '$lib/utils/constants/roles';
|
||||
import { setCourse, course, group } from '$lib/components/Course/store';
|
||||
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
|
||||
import {
|
||||
fetchCourse,
|
||||
fetchExercisesByMarks,
|
||||
} from '$lib/utils/services/courses';
|
||||
import { getLectureNo } from '$lib/components/Course/function';
|
||||
import { fetchMarks } from '$lib/utils/services/marks';
|
||||
import { profile } from '$lib/utils/store/user';
|
||||
|
||||
export let data;
|
||||
const { courseId } = data;
|
||||
|
||||
let borderBottomGrey =
|
||||
'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
|
||||
let borderleftGrey =
|
||||
'border-r-0 border-t-0 border-b-0 border-l border-gray-300';
|
||||
let students = [];
|
||||
let isStudent = false;
|
||||
|
||||
let lessonMapping = {}; // { lessonId: { exerciseId: exerciseTitle, ... }, ... }
|
||||
let studentMarksByExerciseId = {}; // { groupMemberId: { exerciseId: `total_gotten/points`, ... }, ... }
|
||||
|
||||
function calculateStudentTotal(studentExerciseData) {
|
||||
if (!studentExerciseData) return 0;
|
||||
|
||||
return Object.values(studentExerciseData).reduce(
|
||||
(total, point) => (total += parseInt(point)),
|
||||
0
|
||||
);
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
if (!$course.id) {
|
||||
const { data } = await fetchCourse(courseId);
|
||||
setCourse(data);
|
||||
}
|
||||
|
||||
const { data: marks } = await fetchMarks(courseId);
|
||||
|
||||
marks.forEach((mark) => {
|
||||
const { groupmember_id, exercise_id, total_points_gotten } = mark;
|
||||
|
||||
if (studentMarksByExerciseId[groupmember_id]) {
|
||||
studentMarksByExerciseId[groupmember_id] = {
|
||||
...studentMarksByExerciseId[groupmember_id],
|
||||
[exercise_id]: total_points_gotten,
|
||||
};
|
||||
} else {
|
||||
studentMarksByExerciseId[groupmember_id] = {
|
||||
[exercise_id]: total_points_gotten,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
const { data: exercises } = await fetchExercisesByMarks(courseId);
|
||||
|
||||
// Map exercises to { lessonId: { exerciseId: exerciseTitle, ... }, ... }
|
||||
exercises.forEach((exercise) => {
|
||||
const { lesson_id, exercise_id, exercise_title, points } = exercise;
|
||||
|
||||
if (lessonMapping[lesson_id]) {
|
||||
lessonMapping[lesson_id] = {
|
||||
...lessonMapping[lesson_id],
|
||||
[exercise_id]: { title: exercise_title, points },
|
||||
};
|
||||
} else {
|
||||
lessonMapping[lesson_id] = {
|
||||
[exercise_id]: { title: exercise_title, points },
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$: {
|
||||
students = isStudent
|
||||
? $group.people.filter(
|
||||
(person) => !!person.profile && person.profile.id === $profile.id
|
||||
)
|
||||
: $group.people.filter(
|
||||
(person) => !!person.profile && person.role_id === ROLE.STUDENT
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
<CourseContainer bind:isStudent>
|
||||
<PageNav title="Marks" />
|
||||
|
||||
<PageBody width="w-11/12">
|
||||
<div class="table rounded-md border border-gray-300 w-auto">
|
||||
<div class="flex items-center {borderBottomGrey}">
|
||||
<div class="box flex items-center p-3">
|
||||
<p class="dark:text-white w-40">Student</p>
|
||||
</div>
|
||||
{#each $lessons as lesson, index}
|
||||
{#if lessonMapping[lesson.id]}
|
||||
<div class="box flex flex-col items-center {borderleftGrey}">
|
||||
<p class="dark:text-white col lesson-number" title={lesson.title}>
|
||||
{getLectureNo(index + 1)}
|
||||
</p>
|
||||
<div
|
||||
class="flex h-full items-center border-r-0 border-t border-b-0 border-l-0 border-gray-300"
|
||||
>
|
||||
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId, index}
|
||||
<p
|
||||
class="col text-sm dark:text-white {index &&
|
||||
borderleftGrey}"
|
||||
title={lessonMapping[lesson.id][exerciseId].title}
|
||||
>
|
||||
{lessonMapping[lesson.id][exerciseId].title}
|
||||
<span>({lessonMapping[lesson.id][exerciseId].points})</span>
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
<div class="box flex items-center {borderleftGrey}">
|
||||
<p class="dark:text-white w-20 text-center">Total</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#each students as student}
|
||||
<div
|
||||
class="flex relative items-center p-3 cursor-pointer {borderBottomGrey}"
|
||||
>
|
||||
<div class="w-40 flex items-center">
|
||||
<img
|
||||
alt="Student avatar"
|
||||
src={student.profile.avatar_url}
|
||||
class="w-8 h-8 rounded-full mr-2"
|
||||
/>
|
||||
<div class="text-sm">
|
||||
<p class="dark:text-white font-semibold">
|
||||
{student.profile.fullname}
|
||||
</p>
|
||||
<p class="dark:text-white">
|
||||
{`${
|
||||
student.assigned_student_id
|
||||
? '#' + student.assigned_student_id
|
||||
: '-'
|
||||
}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#each $lessons as lesson}
|
||||
{#if lessonMapping[lesson.id]}
|
||||
<div class="flex items-center">
|
||||
{#each Object.keys(lessonMapping[lesson.id]) as exerciseId}
|
||||
<p class="dark:text-white col">
|
||||
{studentMarksByExerciseId[student.id]
|
||||
? studentMarksByExerciseId[student.id][exerciseId] || '-'
|
||||
: '-'}
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<div class="w-20 flex items-center">
|
||||
<div class="text-sm">
|
||||
<p class="dark:text-white col">
|
||||
{calculateStudentTotal(studentMarksByExerciseId[student.id])}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<Box>
|
||||
<AudioConsoleIcon size={32} class="carbon-icon w-80" />
|
||||
<h3 class="text-3xl text-gray-500 dark:text-white">
|
||||
No Student Added
|
||||
</h3>
|
||||
</Box>
|
||||
{/each}
|
||||
</div>
|
||||
</PageBody>
|
||||
</CourseContainer>
|
||||
|
||||
<style>
|
||||
.col {
|
||||
text-align: center;
|
||||
padding: 5px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.br {
|
||||
border-right: 1px solid rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.box {
|
||||
height: 95px;
|
||||
}
|
||||
|
||||
.lesson-number {
|
||||
height: 30px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user