Spinner, Attendance bug fix, Marks

package-lock.json

@@ -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",
+      "version": "1.0.0-next.20",
-      "resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.15.tgz",
+      "resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.20.tgz",
-      "integrity": "sha512-zBCZO40+USkSj0GDHMqufthqk4TIRc9xVGd50LbMvYNEwGHK8dZczLBQtw9pPHBM+i/Xg7ed7+c+r6J68XkWLg==",
+      "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",
+      "version": "1.0.0-next.20",
-      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.20.tgz",
-      "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
+      "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",
+      "version": "1.0.0-next.20",
-      "resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.15.tgz",
+      "resolved": "https://registry.npmjs.org/polka/-/polka-1.0.0-next.20.tgz",
-      "integrity": "sha512-zBCZO40+USkSj0GDHMqufthqk4TIRc9xVGd50LbMvYNEwGHK8dZczLBQtw9pPHBM+i/Xg7ed7+c+r6J68XkWLg==",
+      "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",
+          "version": "1.0.0-next.20",
-          "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.15.tgz",
+          "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.20.tgz",
-          "integrity": "sha512-15spi3V28QdevleWBNXE4pIls3nFZmBbUGrW9IVPwiQczuSb9n76TCB4bsk8TSel+I1OkHEdPhu5QKMfY6rQHA=="
+          "integrity": "sha512-88p7+M0QGxKpmnkfXjS4V26AnoC/eiqZutE8GLdaI5X12NY75bXSdTY9NkmYb2Xyk1O+MmkuO6Frmsj84V6I8Q=="
         }
       }
     },

src/components/Backdrop/index.svelte

@@ -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

@@ -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

@@ -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

@@ -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

@@ -1,35 +1,203 @@
 <script context="module">
-  import { fetchCourse } from '../../../utils/services/courses';
+  export async function preload({ params }) {
-
+    return { courseId: params.id };
-  export async function preload({ params }, session) {
-    if (process.browser) {
-      return {};
-    }
-
-    const {
-      data,
-      // error
-    } = await fetchCourse(params.id, session);
-
-    return { courseData: data };
   }
 </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(() => {
+  let borderBottomGrey =
-    setCourseData(courseData);
+    '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

@@ -1,17 +1,6 @@
 <script context="module">
-  import { fetchCourse } from '../../../utils/services/courses';
+  export async function preload({ params }) {
-
+    return { courseId: params.id };
-  export async function preload({ params }, session) {
-    if (process.browser) {
-      return {};
-    }
-
-    const {
-      data,
-      // error
-    } = await fetchCourse(params.id, session);
-
-    return { courseData: data };
   }
 </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

@@ -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

@@ -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

@@ -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) {