ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Spinner, Attendance bug fix, Marks

Browse Source
This commit is contained in:
rotimi-best
2021-09-11 19:27:11 +03:00
parent cc1cd9d48b
commit 8c107b0c40
10 changed files with 284 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/_layout.svelte
+14 -1
View File
@@ -6,10 +6,13 @@
<script>
import { onMount } from 'svelte';
import { derived } from 'svelte/store';
import { stores, goto } from '@sapper/app';
import { Firework } from 'svelte-loading-spinners';
import Tailwindcss from '../components/Tailwindcss.svelte';
import Navigation from '../components/Navigation/index.svelte';
import Snackbar from '../components/Snackbar/index.svelte';
import Backdrop from '../components/Backdrop/index.svelte';
// import SideBar from "../components/SideBar/index.svelte";
// import Footer from '../components/Footer/index.svelte';
// import Apps from '../components/Apps/index.svelte';
@@ -21,11 +24,16 @@
export let config;
export let isMvpUser;
let { page, preloading } = stores();
let supabase = getSupabase(config);
let { page } = stores();
let path = $page.path.replace('/', '');
let allowUser = false;
const delayedPreloading = derived(preloading, (currentPreloading, set) => {
setTimeout(() => set(currentPreloading), 250);
});
async function getProfile() {
console.log('Get user profile');
// Get user profile
@@ -132,6 +140,11 @@
<Snackbar />
<main>
{#if $preloading && $delayedPreloading}
<Backdrop>
<Firework size="60" color="#fff" unit="px" duration="1s" />
</Backdrop>
{/if}
{#if !['login', 'signup'].includes(path) && !isCoursePage(path)}
<Navigation {segment} disableLogin={!allowUser} />
{/if}
src/routes/courses/[id]/attendance.svelte
+7
View File
@@ -6,9 +6,11 @@
<script>
import { onMount } from 'svelte';
import AudioConsole32 from 'carbon-icons-svelte/lib/AudioConsole32';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import Box from '../../../components/Box/index.svelte';
import {
course,
group,
@@ -141,6 +143,11 @@
</p>
{/each}
</div>
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500">No Student Added</h3>
</Box>
{/each}
</div>
</PageBody>
src/routes/courses/[id]/marks.svelte
+186 -18
View File
@@ -1,35 +1,203 @@
<script context="module">
import { fetchCourse } from '../../../utils/services/courses';
export async function preload({ params }, session) {
if (process.browser) {
return {};
}
const {
data,
// error
} = await fetchCourse(params.id, session);
return { courseData: data };
export async function preload({ params }) {
return { courseId: params.id };
}
</script>
<script>
import { onMount } from 'svelte';
import AudioConsole32 from 'carbon-icons-svelte/lib/AudioConsole32';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourseData } from '../../../components/Course/store';
import Box from '../../../components/Box/index.svelte';
import { ROLE } from '../../../utils/constants/roles';
import {
setCourseData,
course,
group,
} from '../../../components/Course/store';
import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
import { fetchCourse, fetchExercises } from '../../../utils/services/courses';
import { getLectureNo } from '../../../components/Course/function';
import { fetchMarks } from '../../../utils/services/marks';
export let courseData = {};
export let courseId;
onMount(() => {
setCourseData(courseData);
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 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);
setCourseData(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 fetchExercises(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 = $group.people.filter((person) => !!person.profile);
students = $group.people.filter(
(person) => !!person.profile && person.role_id === ROLE.STUDENT
);
console.log(`students`, students);
}
</script>
<CourseContainer>
<PageNav title="Marks" />
<PageBody />
<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="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="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 {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="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="font-semibold">{student.profile.fullname}</p>
<p>
{`${
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="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="col">
{calculateStudentTotal(studentMarksByExerciseId[student.id])}
</p>
</div>
</div>
</div>
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500">No Student Added</h3>
</Box>
{/each}
</div>
</PageBody>
</CourseContainer>
<style>
.col {
text-align: center;
padding: 5px;
width: 100px;
}
.br {
border-right: 1px solid rgba(209, 213, 219, var(--tw-border-opacity));
}
.box {
height: 95px;
}
.lesson-number {
height: 30px;
}
</style>
src/routes/courses/[id]/submissions.svelte
+21 -16
View File
@@ -1,17 +1,6 @@
<script context="module">
import { fetchCourse } from '../../../utils/services/courses';
export async function preload({ params }, session) {
if (process.browser) {
return {};
}
const {
data,
// error
} = await fetchCourse(params.id, session);
return { courseData: data };
export async function preload({ params }) {
return { courseId: params.id };
}
</script>
@@ -25,6 +14,7 @@
import Chip from '../../../components/Chip/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import { fetchCourse } from '../../../utils/services/courses';
import { setCourseData, course } from '../../../components/Course/store';
import {
fetchSubmissions,
@@ -36,7 +26,7 @@
const flipDurationMs = 300;
export let courseData = {};
export let courseId;
let sections = [
{
@@ -155,6 +145,8 @@
async function handleSave(submission) {
const { questionAnswerByPoint, questionAnswers } = submission;
let totalPoints = 0;
const updates = Object.keys(questionAnswerByPoint).map((questionId) => {
const questionAnswer = questionAnswers.find(
(answer) => answer.question_id == questionId
@@ -162,19 +154,32 @@
const point = questionAnswerByPoint[questionId];
totalPoints += parseInt(point, 10);
return updateQuestionAnswer({ point }, { id: questionAnswer.id });
});
updateSubmission(
{
id: submissionId,
total: totalPoints,
},
{ returning: 'minimal' }
).then((res) => console.log('Updated submission', res));
await Promise.all(updates);
$snackbarStore.open = true;
$snackbarStore.message = `Saved successfully`;
}
onMount(async () => {
setCourseData(courseData);
if (!$course.id) {
const { data } = await fetchCourse(courseId);
setCourseData(data);
}
const { data: submissions } = await fetchSubmissions(
courseData.id || $course.id
courseId || $course.id
);
const sectionById = {};