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

CLASSROOMIO-T-80: Replace sapper with sveltekit

Browse Source
This commit is contained in:
Rotimi Best
2023-08-02 19:35:27 +01:00
parent 8ffdf319b3
commit 7dfbb05451
320 changed files with 5207 additions and 18330 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/courses/[id]/+page.js
+5
View File
@@ -0,0 +1,5 @@
export const load = ({ params = { id: '' } }) => {
return {
courseId: params.id,
};
};
src/routes/courses/[id]/+page.svelte
+26
View File
@@ -0,0 +1,26 @@
<script>
import Overview from '$lib/components/Course/index.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { setCourse } from '$lib/components/Course/store';
import { fetchCourse } from '$lib/utils/services/courses';
export let data;
const { courseId } = data;
let prevCourseId = '';
async function onCourseIdChange(courseId = '') {
if (!courseId || prevCourseId === courseId) return;
const { data: _data } = await fetchCourse(courseId);
setCourse(_data);
prevCourseId = courseId;
}
$: onCourseIdChange(courseId);
</script>
<CourseContainer>
<Overview />
</CourseContainer>
src/routes/courses/[id]/attendance/+page.js
+5
View File
@@ -0,0 +1,5 @@
export const load = ({ params = { id: '' } }) => {
return {
courseId: params.id,
};
};
src/routes/courses/[id]/attendance.svelte → src/routes/courses/[id]/attendance/+page.svelte
+23 -29
View File
@@ -1,28 +1,22 @@
<script context="module">
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 Box from '../../../components/Box/index.svelte';
import { course, group, setCourse } from '../../../components/Course/store';
import { getLectureNo } from '../../../components/Course/function';
import { fetchCourse } from '../../../utils/services/courses';
import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
import { ROLE } from '../../../utils/constants/roles';
import { takeAttendance } from '../../../utils/services/attendance';
import { snackbarStore } from '../../../components/Snackbar/store';
import { SNACKBAR_SEVERITY } from '../../../components/Snackbar/constants';
import { attendance } from '../../../utils/store/attendance';
import { profile } from '../../../utils/store/user';
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 { course, group, setCourse } from '$lib/components/Course/store';
import { getLectureNo } from '$lib/components/Course/function';
import { fetchCourse } from '$lib/utils/services/courses';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { ROLE } from '$lib/utils/constants/roles';
import { takeAttendance } from '$lib/utils/services/attendance';
import { snackbarStore } from '$lib/components/Snackbar/store';
import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
import { attendance } from '$lib/utils/store/attendance';
import { profile } from '$lib/utils/store/user';
export let courseId;
export let data;
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
let students = [];
@@ -72,15 +66,15 @@
}
*/
const data = {
const _data = {
id: attendanceItem.id,
student_id: student.id,
is_present: e.target.checked,
lesson_id: lesson.id,
course_id: courseId,
course_id: data.courseId,
};
takeAttendance(data).then((res) => {
takeAttendance(_data).then((res) => {
if (res.error) {
console.error(`res.error`, res.error);
$snackbarStore.open = true;
@@ -115,9 +109,9 @@
return;
}
const { data } = await fetchCourse(courseId);
setCourse(data);
setAttendance(data);
const { data: _data } = await fetchCourse(data.courseId);
setCourse(_data);
setAttendance(_data);
});
$: students = isStudent
@@ -181,7 +175,7 @@
</div>
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<AudioConsoleIcon size={32} class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500 dark:text-white">
No Student Added
</h3>
src/routes/courses/[id]/certificates/+page.js
+5
View File
@@ -0,0 +1,5 @@
export const load = ({ params = { id: '' } }) => {
return {
courseId: params.id,
};
};
src/routes/courses/[id]/certificates.svelte → src/routes/courses/[id]/certificates/+page.svelte
+11 -19
View File
@@ -1,26 +1,18 @@
<script context="module">
import { fetchCourse } from '../../../utils/services/courses';
export async function preload({ params = { id: '' } }) {
return { courseId: params.id };
}
</script>
<script lang="ts">
import { onMount } from 'svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte';
import { setCourse, course } from '../../../components/Course/store';
import IssueCertificateModal from '../../../components/Course/components/Ceritficate/IssueCertificateModal.svelte';
// import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
import Design from '../../../components/Course/components/Ceritficate/Design.svelte';
// import Reports from '../../../components/Course/components/Ceritficate/Reports.svelte';
// import { issueCertificateModal } from '../../../components/Course/components/Ceritficate/store';
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 RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { setCourse, course } from '$lib/components/Course/store';
import IssueCertificateModal from '$lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte';
// import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
import Design from '$lib/components/Course/components/Ceritficate/Design.svelte';
// import Reports from '$lib/components/Course/components/Ceritficate/Reports.svelte';
// import { issueCertificateModal } from '$lib/components/Course/components/Ceritficate/store';
// import { Tabs, Tab } from 'carbon-components-svelte';
// import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
import StudentCertificate from '../../../components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
export let courseId: string = '';
let isStudent = false;
src/routes/courses/[id]/index.svelte
-31
View File
@@ -1,31 +0,0 @@
<script context="module">
export async function preload({ params }, session) {
return { courseId: params.id };
}
</script>
<script>
import Overview from '../../../components/Course/index.svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import { setCourse } from '../../../components/Course/store';
import { fetchCourse } from '../../../utils/services/courses';
export let courseId;
let prevCourseId;
async function onCourseIdChange(courseId) {
if (!courseId || prevCourseId === courseId) return;
const { data } = await fetchCourse(courseId);
setCourse(data);
prevCourseId = courseId;
}
$: onCourseIdChange(courseId);
</script>
<CourseContainer>
<Overview />
</CourseContainer>
src/routes/courses/[id]/landingpage/+page.js
+5
View File
@@ -0,0 +1,5 @@
export const load = ({ params = { id: '' } }) => {
return {
courseId: params.id,
};
};
src/routes/courses/[id]/landingpage.svelte → src/routes/courses/[id]/landingpage/+page.svelte
+12 -17
View File
@@ -1,30 +1,25 @@
<script context="module">
export async function preload({ params }) {
return { courseId: params.id };
}
</script>
<script>
import { fly } from 'svelte/transition';
import CourseLandingPage from '../../../components/CourseLandingPage/index.svelte';
import Editor from '../../../components/CourseLandingPage/components/Editor/index.svelte';
import { isMobile } from '../../../utils/store/useMobile';
import { profile } from '../../../utils/store/user';
import { setCourse, course } from '../../../components/Course/store';
import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
import { fetchCourse } from '../../../utils/services/courses';
import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
import Editor from '$lib/components/CourseLandingPage/components/Editor/index.svelte';
import { isMobile } from '$lib/utils/store/useMobile';
import { profile } from '$lib/utils/store/user';
import { setCourse, course } from '$lib/components/Course/store';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { fetchCourse } from '$lib/utils/services/courses';
export let courseId;
export let data;
const { courseId } = data;
let courseData = {};
async function triggerSetCourse(_profile) {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourse(data);
const { data: _data } = await fetchCourse(courseId);
setCourse(_data);
}
function setCourseData(course, lessons) {
function setCourseData(course = {}, lessons) {
courseData = { ...course, lessons };
}
src/routes/courses/[id]/lessons/+page.js
+5
View File
@@ -0,0 +1,5 @@
export const load = ({ params = { id: '' } }) => {
return {
courseId: params.id,
};
};
src/routes/courses/[id]/lessons/index.svelte → src/routes/courses/[id]/lessons/+page.svelte
+33 -46
View File
@@ -1,52 +1,39 @@
<script context="module">
export async function preload({ params }) {
return { courseId: params.id };
}
</script>
<script>
import { onMount } from 'svelte';
import { stores } from '@sapper/app';
import { page } from '$app/stores';
import { dndzone } from 'svelte-dnd-action';
import Time24 from 'carbon-icons-svelte/lib/Time24';
import Edit24 from 'carbon-icons-svelte/lib/Edit24';
import Save24 from 'carbon-icons-svelte/lib/Save24';
import Phone24 from 'carbon-icons-svelte/lib/Phone24';
import Delete24 from 'carbon-icons-svelte/lib/Delete24';
import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled24';
import PageNav from '../../../../components/PageNav/index.svelte';
import RoleBasedSecurity from '../../../../components/RoleBasedSecurity/index.svelte';
import Box from '../../../../components/Box/index.svelte';
import PageBody from '../../../../components/PageBody/index.svelte';
import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
import TextField from '../../../../components/Form/TextField.svelte';
import IconButton from '../../../../components/IconButton/index.svelte';
import Select from '../../../../components/Form/Select.svelte';
import {
fetchCourse,
updateLesson,
} from '../../../../utils/services/courses';
import CourseContainer from '../../../../components/CourseContainer/index.svelte';
import { profile } from '../../../../utils/store/user';
import TimeIcon from 'carbon-icons-svelte/lib/Time.svelte';
import EditIcon from 'carbon-icons-svelte/lib/Edit.svelte';
import SaveIcon from 'carbon-icons-svelte/lib/Save.svelte';
import PhoneIcon from 'carbon-icons-svelte/lib/Phone.svelte';
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import Box from '$lib/components/Box/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import TextField from '$lib/components/Form/TextField.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import Select from '$lib/components/Form/Select.svelte';
import { fetchCourse, updateLesson } from '$lib/utils/services/courses';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { profile } from '$lib/utils/store/user';
import {
lessons,
handleAddLesson,
handleSaveLesson,
handleDelete,
} from '../../../../components/Course/components/Lesson/store/lessons';
import {
course,
setCourse,
group,
} from '../../../../components/Course/store';
} from '$lib/components/Course/components/Lesson/store/lessons';
import { course, setCourse, group } from '$lib/components/Course/store';
export let courseId;
export let data;
const { courseId } = data;
let lessonEditing;
let ref;
let isStudent = true;
const { page } = stores();
const flipDurationMs = 300;
function formatDate(date) {
@@ -106,8 +93,8 @@
onMount(async () => {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourse(data);
const { data: _data } = await fetchCourse(courseId);
setCourse(_data);
});
$: {
@@ -124,7 +111,7 @@
<CourseContainer bind:isStudent>
<PageNav title="Lessons">
<div slot="widget">
<RoleBasedSecurity allowedRoles="[1,2]">
<RoleBasedSecurity allowedRoles={[1, 2]}>
<PrimaryButton
label="Add"
onClick={addLesson}
@@ -177,7 +164,7 @@
</IconButton>
</div>
<RoleBasedSecurity allowedRoles="[1,2]">
<RoleBasedSecurity allowedRoles={[1, 2]}>
<!-- Edit/Save -->
<div class="absolute -top-2 -right-2">
{#if lessonEditing === lesson.id}
@@ -187,11 +174,11 @@
handleSaveLesson(lesson, $course.id);
}}
>
<Save24 class="carbon-icon" />
<SaveIcon size={24} class="carbon-icon" />
</IconButton>
{:else}
<IconButton onClick={() => (lessonEditing = lesson.id)}>
<Edit24 class="carbon-icon" />
<EditIcon size={24} class="carbon-icon" />
</IconButton>
{/if}
</div>
@@ -209,7 +196,7 @@
<h3 class="dark:text-white text-2xl m-0 flex items-center">
<a
href={isStudent && !lesson.is_complete
? $page.path
? $page.url.pathname
: '/courses/' + $course.id + '/lessons/' + lesson.id}
class="dark:text-white hover:underline text-black {isStudent &&
!lesson.is_complete
@@ -264,7 +251,7 @@
on:input={(e) => (lesson.lesson_at = e.target.value)}
/>
{:else}
<Time24 class="carbon-icon" />
<TimeIcon size={24} class="carbon-icon" />
<p class="dark:text-white text-md ml-2">
{new Date(lesson.lesson_at).toDateString()}
</p>
@@ -280,7 +267,7 @@
placeholder="https://meet.google.com/mga-dsjs-fmb"
/>
{:else}
<Phone24 class="carbon-icon" />
<PhoneIcon size={24} class="carbon-icon" />
<a
class="text-md ml-2"
href={lesson.call_url || '#'}
@@ -293,10 +280,10 @@
</div>
</div>
<RoleBasedSecurity allowedRoles="[1,2]">
<RoleBasedSecurity allowedRoles={[1, 2]}>
<div class="absolute bottom-2 right-0">
<IconButton onClick={handleDelete(lesson.id)}>
<Delete24 class="carbon-icon" />
<TrashCanIcon size={24} class="carbon-icon" />
</IconButton>
</div>
</RoleBasedSecurity>
src/routes/courses/[id]/lessons/[...lessonParams]/+page.js
+21
View File
@@ -0,0 +1,21 @@
export const load = ({ params = { id: '' } }) => {
const { id: courseId, lessonParams = [] } = params;
console.log(lessonParams, lessonParams);
// let lessonId = '';
// let exerciseRouteName = '';
// let exerciseId = '';
// if (typeof lessonParams === 'string') {
// lessonId
// }
const splitparams = lessonParams.split('/');
console.log('splitparams', splitparams);
const [lessonId, exerciseRouteName, exerciseId] = splitparams;
return {
courseId,
lessonId,
exerciseRouteName,
exerciseId,
isMaterialsTabActive: !exerciseRouteName,
};
};
src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+117
View File
@@ -0,0 +1,117 @@
<script>
import { page } from '$app/stores';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { fetchCourse, fetchLesson } from '$lib/utils/services/courses';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import Materials from '$lib/components/Course/components/Lesson/Materials/index.svelte';
import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
import MODES from '$lib/utils/constants/mode.js';
import { setCourse, course } from '$lib/components/Course/store';
import { lesson } from '$lib/components/Course/components/Lesson/store/lessons';
export let data;
let path = '';
let mode = MODES.view;
let prevMode = '';
let prevLessonId = '';
let isFetching = false;
async function fetchReqData(lessonId = '') {
isFetching = true;
let lessonData;
if (!$course.id) {
const { data: _data } = await fetchCourse(data.courseId);
lessonData = _data.lessons.find(
(lesson = { id: '' }) => lesson.id === lessonId
);
setCourse(_data);
} else if (prevLessonId !== lessonId) {
const lesson = await fetchLesson(lessonId);
lessonData = lesson.data;
}
prevLessonId = lessonId;
const totalExercises =
lessonData?.totalExercises?.[0] && lessonData.totalExercises[0].count;
setLesson(lessonData, totalExercises || 0);
isFetching = false;
}
function setLesson(lessonData, totalExercises) {
if (!lessonData) return;
lesson.update((l) => ({
...l,
id: data.lessonId,
totalExercises,
materials: lessonData,
}));
}
$: path = $page.url.pathname.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
$: if (data.courseId) {
mode = MODES.view;
fetchReqData(data.lessonId);
}
$: console.log('data changed', data);
</script>
<CourseContainer
{isFetching}
{path}
isExercisePage={!data.isMaterialsTabActive && data.exerciseId}
>
<PageNav
navItems={[
{
label: 'Materials',
isActive: data.isMaterialsTabActive,
href: path,
},
{
label: 'Exercises',
badgeValue: $lesson.totalExercises,
isActive: !data.isMaterialsTabActive,
href: `${path}/exercises`,
},
]}
>
<svelte:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}>
{#if data.isMaterialsTabActive}
<div class="flex items-center">
<PrimaryButton
className="mr-2"
label={mode === MODES.edit ? 'Save' : 'Edit'}
onClick={() => {
prevMode = mode;
mode = mode === MODES.edit ? MODES.view : MODES.edit;
}}
/>
</div>
{/if}
</RoleBasedSecurity>
</svelte:fragment>
</PageNav>
{#if !data.isMaterialsTabActive}
<Exercises
lessonId={data.lessonId}
exerciseId={data.exerciseId}
path={`${path}/exercises`}
/>
{:else if !!data.lessonId}
<PageBody>
<Materials lessonId={data.lessonId} {mode} {prevMode} />
</PageBody>
{/if}
</CourseContainer>
src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte
-136
View File
@@ -1,136 +0,0 @@
<script context="module">
import {
fetchCourse,
fetchLesson,
} from '../../../../../utils/services/courses';
export async function preload({ params }) {
const { id: courseId, lessonParams = [] } = params;
const [lessonId, exerciseRouteName, exerciseId] = lessonParams;
return {
courseId,
lessonId,
exerciseRouteName,
exerciseId,
isMaterialsTabActive: !exerciseRouteName,
};
}
</script>
<script>
import { stores } from '@sapper/app';
import CourseContainer from '../../../../../components/CourseContainer/index.svelte';
import PrimaryButton from '../../../../../components/PrimaryButton/index.svelte';
import RoleBasedSecurity from '../../../../../components/RoleBasedSecurity/index.svelte';
import PageNav from '../../../../../components/PageNav/index.svelte';
import PageBody from '../../../../../components/PageBody/index.svelte';
import Materials from '../../../../../components/Course/components/Lesson/Materials/index.svelte';
import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
import MODES from '../../../../../utils/constants/mode.js';
import { setCourse, course } from '../../../../../components/Course/store';
import { lesson } from '../../../../../components/Course/components/Lesson/store/lessons';
export let courseId;
export let lessonId;
export let exerciseId;
export let isMaterialsTabActive;
let path;
let mode = MODES.view;
let prevMode;
let prevLessonId;
let isFetching = false;
const { page } = stores();
async function fetchReqData(lessonId) {
isFetching = true;
let lessonData;
if (!$course.id) {
const { data } = await fetchCourse(courseId);
lessonData = data.lessons.find((lesson) => lesson.id === lessonId);
setCourse(data);
} else if (prevLessonId !== lessonId) {
const lesson = await fetchLesson(lessonId);
lessonData = lesson.data;
}
prevLessonId = lessonId;
const totalExercises =
lessonData.totalExercises[0] && lessonData.totalExercises[0].count;
setLesson(lessonData, totalExercises);
isFetching = false;
}
function setLesson(lessonData, totalExercises) {
if (!lessonData) return;
lesson.update((l) => ({
...l,
id: lessonId,
totalExercises,
materials: lessonData,
}));
}
$: path = $page.path.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
$: {
if (courseId) {
mode = MODES.view;
fetchReqData(lessonId);
}
}
</script>
<CourseContainer
{isFetching}
{path}
isExercisePage={!isMaterialsTabActive && exerciseId}
>
<PageNav
navItems={[
{
label: 'Materials',
isActive: isMaterialsTabActive,
href: path,
},
{
label: 'Exercises',
badgeValue: $lesson.totalExercises,
isActive: !isMaterialsTabActive,
href: `${path}/exercises`,
},
]}
>
<svelte:fragment slot="widget">
<RoleBasedSecurity allowedRoles="[1,2]">
{#if isMaterialsTabActive}
<div class="flex items-center">
<PrimaryButton
className="mr-2"
label={mode === MODES.edit ? 'Save' : 'Edit'}
onClick={() => {
prevMode = mode;
mode = mode === MODES.edit ? MODES.view : MODES.edit;
}}
/>
</div>
{/if}
</RoleBasedSecurity>
</svelte:fragment>
</PageNav>
{#if !isMaterialsTabActive}
<Exercises {lessonId} {exerciseId} path={`${path}/exercises`} />
{:else if !!lessonId}
<PageBody>
<Materials {lessonId} {mode} {prevMode} />
</PageBody>
{/if}
</CourseContainer>
src/routes/courses/[id]/marks/+page.js
+5
View File
@@ -0,0 +1,5 @@
export const load = ({ params = { id: '' } }) => {
return {
courseId: params.id,
};
};
src/routes/courses/[id]/marks.svelte → src/routes/courses/[id]/marks/+page.svelte
+15 -20
View File
@@ -1,28 +1,23 @@
<script context="module">
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 Box from '../../../components/Box/index.svelte';
import { ROLE } from '../../../utils/constants/roles';
import { setCourse, course, group } from '../../../components/Course/store';
import { lessons } from '../../../components/Course/components/Lesson/store/lessons';
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 '../../../utils/services/courses';
import { getLectureNo } from '../../../components/Course/function';
import { fetchMarks } from '../../../utils/services/marks';
import { profile } from '../../../utils/store/user';
} 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 courseId;
export let data;
const { courseId } = data;
let borderBottomGrey =
'border-r-0 border-t-0 border-b border-l-0 border-gray-300';
@@ -180,7 +175,7 @@
</div>
{:else}
<Box>
<AudioConsole32 class="carbon-icon w-80" />
<AudioConsoleIcon size={32} class="carbon-icon w-80" />
<h3 class="text-3xl text-gray-500 dark:text-white">
No Student Added
</h3>
src/routes/courses/[id]/people/+page.js
+5
View File
@@ -0,0 +1,5 @@
export const load = ({ params = { id: '' } }) => {
return {
courseId: params.id,
};
};
src/routes/courses/[id]/people.svelte → src/routes/courses/[id]/people/+page.svelte
+29 -35
View File
@@ -1,46 +1,40 @@
<script context="module">
<script lang="ts">
import { onMount } from 'svelte';
import copy from 'copy-to-clipboard';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import {
fetchCourse,
deleteGroupMember,
updatedGroupMember,
} from '../../../utils/services/courses';
export async function preload({ params }) {
return { courseId: params.id };
}
</script>
<script lang="ts">
import { onMount } from 'svelte';
import copy from 'copy-to-clipboard';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import Edit16 from 'carbon-icons-svelte/lib/Edit16';
import Copy16 from 'carbon-icons-svelte/lib/Copy16';
import Delete24 from 'carbon-icons-svelte/lib/Delete24';
import Avatar from '../../../components/Avatar/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
import TextField from '../../../components/Form/TextField.svelte';
import Select from '../../../components/Form/Select.svelte';
import IconButton from '../../../components/IconButton/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte';
import { setCourse, course, group } from '../../../components/Course/store';
import InviationModal from '../../../components/Course/components/People/InviationModal.svelte';
import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
} from '$lib/utils/services/courses';
import EditIcon from 'carbon-icons-svelte/lib/Edit.svelte';
import CopyIcon from 'carbon-icons-svelte/lib/Copy.svelte';
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
import Avatar from '$lib/components/Avatar/index.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import TextField from '$lib/components/Form/TextField.svelte';
import Select from '$lib/components/Form/Select.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { setCourse, course, group } from '$lib/components/Course/store';
import InviationModal from '$lib/components/Course/components/People/InviationModal.svelte';
import DeleteConfirmation from '$lib/components/Course/components/People/DeleteConfirmation.svelte';
import {
invitationModal,
deleteMemberModal,
} from '../../../components/Course/components/People/store';
} from '$lib/components/Course/components/People/store';
import type {
Person,
ProfileRole,
} from '../../../components/Course/components/People/types';
import { ROLE_LABEL, ROLES } from '../../../utils/constants/roles';
import { profile } from '../../../utils/store/user';
import { snackbarStore } from '../../../components/Snackbar/store';
} from '$lib/components/Course/components/People/types';
import { ROLE_LABEL, ROLES } from '$lib/utils/constants/roles';
import { profile } from '$lib/utils/store/user';
import { snackbarStore } from '$lib/components/Snackbar/store';
export let courseId: string = '';
export let data;
const { courseId } = data;
let people: Array<Person> = [];
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
@@ -165,12 +159,12 @@
<IconButton
onClick={() => handleEditStudentIdMode(person.id)}
>
<Edit16 class="carbon-icon active" />
<EditIcon size={16} class="carbon-icon active" />
</IconButton>
<IconButton
onClick={() => copyToClipboard(person.assigned_student_id)}
>
<Copy16 class="carbon-icon active" />
<CopyIcon size={16} class="carbon-icon active" />
</IconButton>
</div>
{/if}
@@ -221,7 +215,7 @@
$deleteMemberModal.open = true;
}}
>
<Delete24 class="carbon-icon" />
<TrashCanIcon size={24} class="carbon-icon" />
</IconButton>
{/if}
</div>
src/routes/courses/[id]/scoreboard.svelte
-35
View File
@@ -1,35 +0,0 @@
<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 };
}
</script>
<script>
import { onMount } from 'svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourse } from '../../../components/Course/store';
export let courseData = {};
onMount(() => {
setCourse(courseData);
});
</script>
<CourseContainer>
<PageNav title="Scoreboard" />
<PageBody />
</CourseContainer>
src/routes/courses/[id]/submissions/+page.js
+5
View File
@@ -0,0 +1,5 @@
export const load = ({ params = { id: '' } }) => {
return {
courseId: params.id,
};
};
src/routes/courses/[id]/submissions.svelte → src/routes/courses/[id]/submissions/+page.svelte
+31 -38
View File
@@ -1,36 +1,32 @@
<script context="module">
export async function preload({ params }) {
return { courseId: params.id };
}
</script>
<script>
import { onMount } from 'svelte';
import { flip } from 'svelte/animate';
import { dndzone } from 'svelte-dnd-action';
import { stores, goto } from '@sapper/app';
import PageNav from '../../../components/PageNav/index.svelte';
import RoleBasedSecurity from '../../../components/RoleBasedSecurity/index.svelte';
import MarkExerciseModal from '../../../components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
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 { setCourse, course } from '../../../components/Course/store';
import { goto } from '$app/navigation';
import { page } from '$app/stores';
import PageNav from '$lib/components/PageNav/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import MarkExerciseModal from '$lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte';
import Chip from '$lib/components/Chip/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { fetchCourse } from '$lib/utils/services/courses';
import { setCourse, course } from '$lib/components/Course/store';
import {
fetchSubmissions,
updateSubmission,
updateQuestionAnswer,
} from '../../../utils/services/submissions';
import { formatAnswers } from '../../../components/Course/function';
import { snackbarStore } from '../../../components/Snackbar/store';
import { SNACKBAR_SEVERITY } from '../../../components/Snackbar/constants';
import isSubmissionEarly from '../../../utils/functions/isSubmissionEarly';
import formatDate from '../../../utils/functions/formatDate';
} from '$lib/utils/services/submissions';
import { formatAnswers } from '$lib/components/Course/function';
import { snackbarStore } from '$lib/components/Snackbar/store';
import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
import isSubmissionEarly from '$lib/utils/functions/isSubmissionEarly';
import formatDate from '$lib/utils/functions/formatDate';
const flipDurationMs = 300;
export let courseId;
export let data;
const { courseId } = data;
let sections = [
{
@@ -57,8 +53,6 @@
let openExercise = false;
const { page } = stores();
function handleItemFinalize(columnIdx, newItems) {
let itemToWithNewStatus;
@@ -104,7 +98,7 @@
}
function handleModalClose() {
goto($page.path);
goto($page.url.pathname);
}
// Via dialog
@@ -163,13 +157,10 @@
return updateQuestionAnswer({ point }, { id: questionAnswer.id });
});
updateSubmission(
{
id: submissionId,
total: totalPoints,
},
{ returning: 'minimal' }
).then((res) => console.log('Updated submission', res));
updateSubmission({
id: submissionId,
total: totalPoints,
}).then((res) => console.log('Updated submission', res));
$snackbarStore.open = true;
$snackbarStore.message = `Saved successfully`;
@@ -253,7 +244,7 @@
});
$: {
submissionId = $page.query.submissionId;
submissionId = $page.url.query.submissionId;
openExercise = !!submissionId && submissionIdData[submissionId];
}
</script>
@@ -267,7 +258,7 @@
{submissionId}
/>
<RoleBasedSecurity allowedRoles="[1,2]">
<RoleBasedSecurity allowedRoles={[1, 2]}>
<CourseContainer>
<PageNav title="Submitted Exercises" />
@@ -302,7 +293,7 @@
<div
class="flex items-center cursor-pointer text-black mb-2"
on:click={() => {
goto(`${$page.path}?submissionId=${item.id}`);
goto(`${$page.url.pathname}?submissionId=${item.id}`);
}}
>
<img
@@ -316,14 +307,16 @@
</div>
<a
class="text-blue-700 text-md font-bold"
href="{$page.path}?submissionId={item.id}"
href="{$page.url.pathname}?submissionId={item.id}"
>
{item.exercise.title}
</a>
<a
class="flex items-center no-underline hover:underline text-black my-2"
href="{$page.path.replace('submissions', 'lessons')}/{item
.lesson.id}/exercises/{item.exercise.id}"
href="{$page.url.pathname.replace(
'submissions',
'lessons'
)}/{item.lesson.id}/exercises/{item.exercise.id}"
>
<p class="dark:text-white text-grey text-sm">
#{item.lesson.title}
src/routes/courses/[id]/timetable.svelte
-35
View File
@@ -1,35 +0,0 @@
<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 };
}
</script>
<script>
import { onMount } from 'svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import PageBody from '../../../components/PageBody/index.svelte';
import { setCourse } from '../../../components/Course/store';
export let courseData = {};
onMount(() => {
setCourse(courseData);
});
</script>
<CourseContainer>
<PageNav title="Timetable" />
<PageBody />
</CourseContainer>