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
package-lock.json
Generated
+16 -14
View File
@@ -3208,6 +3208,7 @@
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"hasInstallScript": true,
"optional": true,
"os": [
@@ -4647,11 +4648,11 @@
}
},
"node_modules/polka": {
"version": "1.0.0-next.15",
"resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.15.tgz",
"integrity": "sha512-zBCZO40+USkSj0GDHMqufthqk4TIRc9xVGd50LbMvYNEwGHK8dZczLBQtw9pPHBM+i/Xg7ed7+c+r6J68XkWLg==",
"version": "1.0.0-next.20",
"resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.20.tgz",
"integrity": "sha512-7NIxlPOIpv4+fNPk0lQYKGSP60TZOT360XUIMMWSP5BcCegSFIKz5KyQ6nF4aFE7a6ajmIbtPDzsu9Kowsorkg==",
"dependencies": {
"@polka/url": "^1.0.0-next.15",
"@polka/url": "^1.0.0-next.20",
"trouter": "^3.1.0"
},
"engines": {
@@ -4659,9 +4660,9 @@
}
},
"node_modules/polka/node_modules/@polka/url": {
"version": "1.0.0-next.15",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
"integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
"version": "1.0.0-next.20",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.20.tgz",
"integrity": "sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q=="
},
"node_modules/postcss": {
"version": "8.3.0",
@@ -9049,6 +9050,7 @@
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"optional": true
},
"function-bind": {
@@ -10132,18 +10134,18 @@
}
},
"polka": {
"version": "1.0.0-next.15",
"resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.15.tgz",
"integrity": "sha512-zBCZO40+USkSj0GDHMqufthqk4TIRc9xVGd50LbMvYNEwGHK8dZczLBQtw9pPHBM+i/Xg7ed7+c+r6J68XkWLg==",
"version": "1.0.0-next.20",
"resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.20.tgz",
"integrity": "sha512-7NIxlPOIpv4+fNPk0lQYKGSP60TZOT360XUIMMWSP5BcCegSFIKz5KyQ6nF4aFE7a6ajmIbtPDzsu9Kowsorkg==",
"requires": {
"@polka/url": "^1.0.0-next.15",
"@polka/url": "^1.0.0-next.20",
"trouter": "^3.1.0"
},
"dependencies": {
"@polka/url": {
"version": "1.0.0-next.15",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
"integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
"version": "1.0.0-next.20",
"resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.20.tgz",
"integrity": "sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q=="
}
}
},
src/components/Backdrop/index.svelte
+22
View File
@@ -0,0 +1,22 @@
<div class="root">
<slot />
</div>
<style>
.root {
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
position: fixed;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
color: #fff;
z-index: 1201;
opacity: 1;
transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
</style>
src/components/Course/components/Navigation/index.svelte
+5 -6
View File
@@ -1,6 +1,5 @@
<script>
import { onMount } from 'svelte';
import { fly } from 'svelte/transition';
import { stores, goto } from '@sapper/app';
import hotkeys from 'hotkeys-js';
import Home32 from 'carbon-icons-svelte/lib/Home32';
@@ -84,6 +83,11 @@
hideSortIcon: false,
isLecture: true,
},
{
label: 'Attendance',
to: getNavItemRoute($course.id, 'attendance'),
hideSortIcon: true,
},
{
label: 'Submissions',
to: getNavItemRoute($course.id, 'submissions'),
@@ -104,11 +108,6 @@
to: getNavItemRoute($course.id, 'people'),
hideSortIcon: true,
},
{
label: 'Attendance',
to: getNavItemRoute($course.id, 'attendance'),
hideSortIcon: true,
},
];
}
</script>
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 = {};
src/utils/services/courses/index.js
+4
View File
@@ -165,6 +165,10 @@ export function createExercise(exercise) {
return supabase.from('exercise').insert(exercise);
}
export function fetchExercises(courseId) {
return supabase.rpc('get_exercises').eq('course_id', courseId);
}
function isNew(item) {
return isNaN(item);
}
src/utils/services/marks/index.js
+7
View File
@@ -0,0 +1,7 @@
import { supabase } from '../../functions/supabase';
export async function fetchMarks(courseId) {
const { data } = await supabase.rpc('get_marks').eq('course_id', courseId);
return { data };
}
src/utils/services/submissions/index.js
+2 -2
View File
@@ -49,7 +49,7 @@ export async function fetchSubmission({ courseId, exerciseId, submittedBy }) {
});
}
export async function updateSubmission({ id, status_id, total }) {
export async function updateSubmission({ id, status_id, total }, otherArgs) {
const toUpdate = {
status_id,
};
@@ -58,7 +58,7 @@ export async function updateSubmission({ id, status_id, total }) {
toUpdate.total = total;
}
return supabase.from('submission').update(toUpdate).match({ id });
return supabase.from('submission').update(toUpdate, otherArgs).match({ id });
}
export async function updateQuestionAnswer(update, match) {