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

feat: complete dashboard mvp

Browse Source
This commit is contained in:
Rotimi Best
2023-10-22 09:47:13 +01:00
parent 5c8571e571
commit 5e9c5ba545
19 changed files with 241 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Course/store.ts
+4 -2
View File
@@ -4,7 +4,7 @@ import { lessons } from './components/Lesson/store/lessons';
import { ROLE } from '$lib/utils/constants/roles';
import type { Course, GroupPerson } from '$lib/utils/types';
export const course: Writable<Course> = writable({
export const defaultCourse: Course = {
id: '',
title: '',
description: '',
@@ -44,7 +44,9 @@ export const course: Writable<Course> = writable({
grading: false,
lessonDownload: true
}
});
};
export const course: Writable<Course> = writable({ ...defaultCourse });
export const mockGroupMember = {
id: '434534534535',
src/lib/components/CourseContainer/index.svelte
+24 -2
View File
@@ -1,18 +1,40 @@
<script>
// @ts-nocheck
import { Moon } from 'svelte-loading-spinners';
import { browser } from '$app/environment';
import Navigation from '../Course/components/Navigation/index.svelte';
import Backdrop from '$lib/components/Backdrop/index.svelte';
import { course, group } from '../Course/store';
import { course, group, setCourse, defaultCourse } from '../Course/store';
import Confetti from '../Confetti/index.svelte';
import { isMobile } from '$lib/utils/store/useMobile';
import { profile } from '$lib/utils/store/user';
import { apps } from '$lib/components/Apps/store';
import { fetchCourse } from '$lib/utils/services/courses';
export let courseId = '';
export let path = '';
export let isExercisePage = false;
export let isStudent = false;
export let isFetching = false;
let prevCourseId = '';
async function onCourseIdChange(courseId = '') {
console.log('courseid changed', courseId);
if (!courseId || prevCourseId === courseId || !browser) return;
console.log('making request', courseId);
isFetching = true;
course.set(defaultCourse);
const { data: _data } = await fetchCourse(courseId);
setCourse(_data);
isFetching = false;
prevCourseId = courseId;
}
$: onCourseIdChange(courseId);
$: {
const user = $group.people.find((person) => person.profile_id === $profile.id);
src/lib/components/LMS/components/Learning.svelte
+1 -1
View File
@@ -14,7 +14,7 @@
<section class="h-full">
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
<div
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full lg:h-[40vh] p-3"
class="flex items-center flex-col border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded w-full md:h-[40vh] p-3"
>
{#if $coursesInProgress.length > 0}
<div class="w-full h-full flex flex-col justify-start overflow-y-auto">
src/lib/components/Navigation/app.svelte
+13 -2
View File
@@ -1,10 +1,12 @@
<script>
import { goto } from '$app/navigation';
import { browser } from '$app/environment';
import NotificationIcon from 'carbon-icons-svelte/lib/Notification.svelte';
import Moon from 'carbon-icons-svelte/lib/Moon.svelte';
import Sun from 'carbon-icons-svelte/lib/Sun.svelte';
import Menu from 'carbon-icons-svelte/lib/Menu.svelte';
import Close from 'carbon-icons-svelte/lib/Close.svelte';
import ArrowLeft from 'carbon-icons-svelte/lib/ArrowLeft.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import { appStore } from '$lib/utils/store/app';
@@ -34,7 +36,11 @@
}
}
$: coursesPath = $appStore.isOrgSite ? '/lms/mylearning' : `${$currentOrgPath}/courses`;
$: coursesPath = $appStore.isOrgSite
? '/lms/mylearning'
: isCoursePage
? `${$currentOrgPath}/courses`
: $currentOrgPath;
</script>
<nav
@@ -58,12 +64,17 @@
<Menu size={16} class=" text-white" />
</IconButton>
</li>
<li class="hidden md:block">
<IconButton onClick={() => goto(coursesPath)}>
<ArrowLeft size={16} class="text-white" />
</IconButton>
</li>
{/if}
<a
href={coursesPath}
title="Go to {isCoursePage ? 'Courses' : 'ClassroomIO Home'}"
id="logo"
class="text-lg {isCoursePage && '-ml-2 md:ml-2'} line-clamp-1"
class="text-lg line-clamp-1"
>
{isCoursePage ? title : 'ClassroomIO'}
</a>
src/lib/utils/functions/date.ts
+6
View File
@@ -6,3 +6,9 @@ dayjs.extend(relativeTime);
export const calDateDiff = (date: string | number | Date): string => {
return dayjs(date).fromNow(true) + ` ago`;
};
export const getGreeting = () => {
const date = new Date();
const hours = date.getHours();
return hours < 12 ? 'Good Morning' : hours < 18 ? 'Good Afternoon' : 'Good Evening';
};
src/lib/utils/services/dashboard/index.ts
+28 -6
View File
@@ -1,19 +1,41 @@
import type { UserLessonDataType } from '$lib/utils/types';
import { supabase } from '$lib/utils/functions/supabase';
function getFirstAndLastDayOfMonth(): { firstDay: string; lastDay: string } {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth();
// Create a date object for the first day of the month
const firstDay = new Date(year, month, 1).toISOString();
// Find the last day of the next month and subtract one day to get the last day of the current month
const nextMonth: any = new Date(year, month + 1, 1);
const lastDay = new Date(nextMonth - 1).toISOString();
return {
firstDay,
lastDay
};
}
export async function fetchUserUpcomingData(
profileId: string | null
profileId: string | null,
orgId: string
): Promise<UserLessonDataType[] | []> {
if (!profileId) {
return [];
}
const { data: userUpcomingData } = await supabase.rpc(
'get_user_upcoming_lessons',
{
const { lastDay, firstDay } = getFirstAndLastDayOfMonth();
const { data: userUpcomingData } = await supabase
.rpc('get_user_upcoming_lessons', {
profile_id_arg: profileId,
}
);
org_id_arg: orgId
})
.filter('lesson_at', 'gte', firstDay)
.filter('lesson_at', 'lte', lastDay);
console.log(`userUpcomingData`, userUpcomingData);
src/lib/utils/store/org.ts
+3
View File
@@ -3,6 +3,7 @@ import { STEPS } from '../constants/quiz';
import type { Writable } from 'svelte/store';
import type { CurrentOrg, OrgTeamMember } from '../types/org';
import { ROLE } from '$lib/utils/constants/roles';
import type { UserLessonDataType } from '$lib/utils/types';
export const orgs = writable<CurrentOrg[]>([]);
export const currentOrg: Writable<CurrentOrg> = writable({
@@ -54,3 +55,5 @@ export const quizStore = writable({
export const playQuizStore = writable({
step: STEPS.CONNECT_TO_PLAY
});
export const userUpcomingData = writable<UserLessonDataType[]>([]);
src/routes/courses/[id]/+page.svelte
+1 -18
View File
@@ -1,27 +1,10 @@
<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';
import { browser } from '$app/environment';
export let data;
const { courseId } = data;
let prevCourseId = '';
async function onCourseIdChange(courseId = '') {
if (!courseId || prevCourseId === courseId || !browser) return;
const { data: _data } = await fetchCourse(courseId);
setCourse(_data);
prevCourseId = courseId;
}
$: onCourseIdChange(courseId);
</script>
<CourseContainer>
<CourseContainer bind:courseId={data.courseId}>
<Overview />
</CourseContainer>
src/routes/courses/[id]/attendance/+page.svelte
+3 -9
View File
@@ -15,9 +15,8 @@
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 { course, group } 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';
@@ -27,6 +26,7 @@
import type { GroupPerson, Lesson } from '$lib/utils/types/index';
export let data;
interface CourseData {
attendance: {
student_id: string;
@@ -127,12 +127,6 @@
}
return;
}
const { data: _data } = await fetchCourse(data.courseId);
if (!_data) return;
setCourse(_data);
setAttendance(_data);
});
$: students = isStudent
@@ -140,7 +134,7 @@
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
</script>
<CourseContainer bind:isStudent>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<PageNav title="Attendance" />
<PageBody width="w-full max-w-6xl md:w-11/12">
<section class="flex items-center mx-2 lg:mx-9 my-5">
src/routes/courses/[id]/certificates/+page.svelte
+1 -10
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import { onMount } from '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';
@@ -13,22 +12,14 @@
// import { Tabs, Tab } from 'carbon-components-svelte';
// import TabContent from 'carbon-components-svelte/src/Tabs/TabContent.svelte';
import StudentCertificate from '$lib/components/Course/components/Ceritficate/StudentCertificate/Index.svelte';
import { fetchCourse } from '$lib/utils/services/courses';
import { browser } from '$app/environment';
export let courseId: string = '';
let isStudent = false;
onMount(async () => {
if ($course.id || !browser) return;
const { data } = await fetchCourse(courseId);
setCourse(data);
});
</script>
<IssueCertificateModal />
<CourseContainer bind:isStudent>
<CourseContainer bind:isStudent bind:courseId>
<PageNav title="Certificates" disableSticky={true}>
<slot:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}>
src/routes/courses/[id]/landingpage/+page.svelte
+2 -11
View File
@@ -2,28 +2,19 @@
import { fly } from 'svelte/transition';
import CourseLandingPage from '$lib/components/CourseLandingPage/index.svelte';
import Editor from '$lib/components/CourseLandingPage/components/Editor/index.svelte';
import { profile } from '$lib/utils/store/user';
import { setCourse, course } from '$lib/components/Course/store';
import { course } from '$lib/components/Course/store';
import { lessons } from '$lib/components/Course/components/Lesson/store/lessons';
import { fetchCourse } from '$lib/utils/services/courses';
import { browser } from '$app/environment';
export let data;
const { courseId } = data;
let courseData = {};
async function triggerSetCourse(_profile) {
if ($course.id || !browser) return;
const { data: _data } = await fetchCourse(courseId);
setCourse(_data);
}
function setCourseData(course = {}, lessons) {
courseData = { ...course, lessons };
}
$: triggerSetCourse($profile);
$: setCourseData($course, $lessons);
$: console.log('courseData changed', courseData);
</script>
src/routes/courses/[id]/lessons/+page.svelte
+3 -10
View File
@@ -17,7 +17,7 @@
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 { updateLesson } from '$lib/utils/services/courses';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { profile } from '$lib/utils/store/user';
import {
@@ -25,14 +25,13 @@
handleSaveLesson,
handleDelete
} from '$lib/components/Course/components/Lesson/store/lessons';
import { course, setCourse, group } from '$lib/components/Course/store';
import { course, group } from '$lib/components/Course/store';
import PageBody from '$lib/components/PageBody/index.svelte';
import TextChip from '$lib/components/Chip/Text.svelte';
import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
export let data;
const { courseId } = data;
let lessonEditing;
let isStudent = true;
@@ -85,12 +84,6 @@
}
}
onMount(async () => {
if ($course.id) return;
const { data: _data } = await fetchCourse(courseId);
setCourse(_data);
});
$: {
const user = $group.people.find((person) => person.profile_id === $profile.id);
@@ -102,7 +95,7 @@
<AddLessonModal {isStudent} bind:openModal />
<CourseContainer bind:isStudent>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<PageNav title="Lessons">
<div slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}>
src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+2 -7
View File
@@ -58,13 +58,7 @@
isFetching = true;
let lessonData;
if (!$course.id) {
const { data: _data } = await fetchCourse(data.courseId);
lessonData = _data?.lessons.find((lesson) => lesson.id === lessonId);
setCourse(_data);
} else if (isMaterialsTabActive) {
if (isMaterialsTabActive) {
const lesson = await fetchLesson(lessonId);
lessonData = lesson.data;
}
@@ -222,6 +216,7 @@
bind:isStudent
{path}
isExercisePage={!data.isMaterialsTabActive && data.exerciseId}
bind:courseId={data.courseId}
>
<PageNav
bind:hideOnMobile={isStudent}
src/routes/courses/[id]/marks/+page.svelte
+3 -8
View File
@@ -6,9 +6,9 @@
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 { 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 { 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';
@@ -34,11 +34,6 @@
}
onMount(async () => {
if (!$course.id) {
const { data } = await fetchCourse(courseId);
setCourse(data);
}
const { data: marks } = await fetchMarks(courseId);
marks.forEach((mark) => {
@@ -80,7 +75,7 @@
: $group.people.filter((person) => !!person.profile && person.role_id === ROLE.STUDENT);
</script>
<CourseContainer bind:isStudent>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<PageNav title="Marks" />
<PageBody width="w-full max-w-6xl md:w-11/12">
src/routes/courses/[id]/people/+page.svelte
+3 -11
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import TextChip from '$lib/components/Chip/Text.svelte';
import ComingSoon from '$lib/components/ComingSoon/index.svelte';
import { onMount } from 'svelte';
import copy from 'copy-to-clipboard';
import {
CopyButton,
@@ -13,7 +12,7 @@
StructuredListRow
} from 'carbon-components-svelte';
import CourseContainer from '$lib/components/CourseContainer/index.svelte';
import { fetchCourse, deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
import { deleteGroupMember, updatedGroupMember } from '$lib/utils/services/courses';
import TrashCanIcon from 'carbon-icons-svelte/lib/TrashCan.svelte';
import PageNav from '$lib/components/PageNav/index.svelte';
import PageBody from '$lib/components/PageBody/index.svelte';
@@ -21,7 +20,7 @@
import Select from '$lib/components/Form/Select.svelte';
import IconButton from '$lib/components/IconButton/index.svelte';
import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
import { setCourse, course, group } from '$lib/components/Course/store';
import { 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 {
@@ -36,7 +35,6 @@
import type { GroupPerson } from '$lib/utils/types';
export let data;
const { courseId } = data;
let people: Array<Person> = [];
let member: { id?: string; email?: string; profile?: { email: string } } = {};
@@ -105,12 +103,6 @@
}
}
onMount(async () => {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourse(data);
});
$: sortAndFilterPeople($group.people, filterBy);
</script>
@@ -121,7 +113,7 @@
{deletePerson}
/>
<CourseContainer bind:isStudent>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<PageNav title="People" disableSticky={true}>
<slot:fragment slot="widget">
<RoleBasedSecurity allowedRoles={[1, 2]}>
src/routes/courses/[id]/settings/+page.svelte
+1 -12
View File
@@ -1,25 +1,14 @@
<script>
import { course, setCourse } from '$lib/components/Course/store';
import { fetchCourse } from '$lib/utils/services/courses';
import { onMount } from '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 Settings from '$lib/components/Course/components/Settings/index.svelte';
export let data;
const { courseId } = data;
let isStudent = false;
onMount(async () => {
if ($course.id) return;
const { data } = await fetchCourse(courseId);
setCourse(data);
});
</script>
<CourseContainer bind:isStudent>
<CourseContainer bind:isStudent bind:courseId={data.courseId}>
<PageNav title="Settings" />
<PageBody>
<Settings />
src/routes/courses/[id]/submissions/+page.svelte
+3 -5
View File
@@ -10,8 +10,7 @@
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 { course } from '$lib/components/Course/store';
import {
fetchSubmissions,
updateSubmission,
@@ -258,8 +257,7 @@
onMount(async () => {
if (!$course.id) {
const { data } = await fetchCourse(courseId);
setCourse(data);
return;
}
const { data: submissions } = await fetchSubmissions(courseId || $course.id);
@@ -339,7 +337,7 @@
/>
<RoleBasedSecurity allowedRoles={[1, 2]}>
<CourseContainer>
<CourseContainer bind:courseId={data.courseId}>
<PageNav title="Submitted Exercises" />
<PageBody width="w-full max-w-6xl md:w-11/12 overflow-x-auto">
src/routes/lms/+page.svelte
+13 -7
View File
@@ -8,6 +8,7 @@
import { fetchCourses } from '$lib/components/Courses/api';
import { courses, courseMetaDeta } from '$lib/components/Courses/store';
import type { Course } from '$lib/utils/types';
import { getGreeting } from '$lib/utils/functions/date';
let hasFetched = false;
let progressPercentage = 0;
@@ -47,7 +48,10 @@
<section class="max-w-6xl gap-5 mx-auto">
<div class="m-5">
<h1 class="text-3xl font-semibold">Welcome</h1>
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">
{getGreeting()}
{$profile.fullname}!
</h1>
<div
class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-primary-900 my-2"
>
@@ -57,7 +61,7 @@
you learn the better you get.
</p>
<PrimaryButton
label="Start learning"
label="Don't give up"
variant={VARIANTS.CONTAINED_WHITE}
className="bg-white text-primary-800"
onClick={() => goto('/lms/mylearning')}
@@ -69,14 +73,14 @@
class="w-28 md:block md:w-1/3 lg:w-[275px] lg:h-[205px] mb-3 md:mb-0"
/>
</div>
<section class="flex w-full flex-col xl:flex-row xl:gap-5">
<div class="w-full md:w-[75%] mt-10 xl:mt-2">
<section class="flex w-full flex-col md:flex-row md:gap-5">
<div class="w-full md:w-[50%] mt-10 xl:mt-2">
<Learning />
</div>
<div class="mt-10 xl:mt-2 w-full md:w-[75%] xl:w-[400px]">
<div class="mt-10 xl:mt-2 w-full md:w-[50%]">
<p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Progress</p>
<div
class="flex items-center justify-center border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded h-fit lg:h-[40vh] lg:overflow-y-auto p-3"
class="flex items-center justify-center border border-[#EAEAEA] dark:bg-neutral-800 gap-2 rounded h-fit md:h-[40vh] lg:overflow-y-auto p-3"
>
<div
class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center justify-between md:items-center xl:items-start gap-5 md:justify-around"
@@ -96,7 +100,9 @@
<p class="text-xs font-normal text-[#656565] dark:text-white">No courses started</p>
{/if}
</span>
<h1 class="text-5xl md:text-6xl font-bold text-[#262626] dark:text-white my-0">
<h1
class="text-5xl md:text-6xl font-bold text-[#262626] dark:text-white my-0 whitespace-nowrap"
>
{progressPercentage} %
</h1>
</div>
src/routes/org/[slug]/+page.svelte
+127 -125
View File
@@ -1,11 +1,11 @@
<script lang="ts">
// import { profile } from '$lib/utils/store/user';
import { profile } from '$lib/utils/store/user';
// import { supabase } from '$lib/utils/functions/supabase';
import { goto } from '$app/navigation';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
import LockedIcon from 'carbon-icons-svelte/lib/Locked.svelte';
import Avatar from '$lib/components/Avatar/index.svelte';
// import Avatar from '$lib/components/Avatar/index.svelte';
import { InlineCalendar, Datepicker } from 'svelte-calendar';
import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard';
import { user } from '$lib/utils/store/user';
@@ -15,21 +15,17 @@
import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
import { onMount } from 'svelte';
import { Add } from 'carbon-icons-svelte';
import { isOrgAdmin } from '$lib/utils/store/org';
import { isOrgAdmin, currentOrgPath, currentOrg, userUpcomingData } from '$lib/utils/store/org';
import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
import VisitOrgSiteButton from '$lib/components/Buttons/VisitOrgSite.svelte';
import { getGreeting } from '$lib/utils/functions/date';
import { appStore } from '$lib/utils/store/app';
export let data;
const { orgName } = data;
const theme = {
calendar: {
width: '300px',
height: '300px',
shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)'
}
};
let theme = {};
let store;
let calendar: HTMLElement | null = null;
@@ -55,40 +51,6 @@
value: 0
}
];
const activities = [
{
avatar:
'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
name: 'Nnancy Okoye',
time: '1 hour ago',
description: 'Submitted an assignment for lesson Figma prototyping',
link: '/'
},
{
avatar:
'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
name: 'Bro Shagi',
time: '2 days ago',
description: 'Submitted an assignment for lesson Figma prototyping',
link: '/'
},
{
avatar:
'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
name: 'Bill Gates',
time: '13 hours ago',
description: 'Submitted an assignment for lesson Figma prototyping',
link: '/'
},
{
avatar:
'https://lh3.googleusercontent.com/ogw/AOh-ky0MLuNJZQa6E_6mm3eZtLW2dmTIhriSgzQlRLA9=s64-c-mo',
name: 'Steve Jobs',
time: 'yesterday',
description: 'Submitted an assignment for lesson Figma prototyping',
link: '/'
}
];
function createCourse() {
goto(`/org/${orgName}/courses?create=true`);
@@ -133,12 +95,14 @@
}
}, 500);
async function runFirstThings(currentSession: { id: string } | null) {
if (!currentSession || !currentSession.id) return;
async function runFirstThings(currentSession: { id: string } | null, orgId: string) {
if (!currentSession || !currentSession.id || !orgId) return;
const userUpcomingData = await fetchUserUpcomingData(currentSession.id);
if (!$userUpcomingData.length) {
$userUpcomingData = await fetchUserUpcomingData(currentSession.id, orgId);
}
lessonsByMonth = formatUserUpcomingData(userUpcomingData);
lessonsByMonth = formatUserUpcomingData($userUpcomingData);
// Only for desktop. Only run on mobile when the user clicks on the date
if (!$isMobile) {
@@ -146,7 +110,7 @@
}
}
function getDataOfSelectedDate(_selectedDate: string): UserLessonDataType[] | [] {
function getDataOfSelectedDate(_selectedDate: string, orgId: string): UserLessonDataType[] | [] {
if (!_selectedDate) return [];
const selectedDate = new Date(_selectedDate).toUTCString();
@@ -185,10 +149,33 @@
});
// This is here not called onMount because we want to call it as soon as we have the user's `currentSession` value
$: runFirstThings($user.currentSession);
$: runFirstThings($user.currentSession, $currentOrg.id);
// Every time the date changes
$: selectedDateLessonData = getDataOfSelectedDate($store?.selected);
$: selectedDateLessonData = getDataOfSelectedDate($store?.selected, $currentOrg.id);
$: theme = {
calendar: {
width: '250px',
height: '283px',
shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
legend: {
height: '30px'
},
colors: {
text: {
primary: $appStore.isDark ? '#eee' : '#333',
highlight: '#fff'
},
background: {
primary: $appStore.isDark ? '#333' : '#fff',
highlight: $appStore.isDark ? '#5829d6' : '#eb7400',
hover: $appStore.isDark ? '#222' : '#eee'
},
border: $appStore.isDark ? '#222' : '#eee'
}
}
};
</script>
<svelte:head>
@@ -199,7 +186,10 @@
<div class="py-10 px-5 w-full max-w-7xl mx-auto">
<div class="flex items-center justify-between mb-10">
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">Dashboard</h1>
<h1 class="dark:text-white text-2xl md:text-3xl font-bold">
{getGreeting()}
{$profile.fullname}!
</h1>
<div class="flex items-center">
<PrimaryButton
variant={VARIANTS.OUTLINED}
@@ -218,7 +208,29 @@
</div>
</div>
<div class="flex items-start flex-wrap">
<div
class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-primary-900 my-2"
>
<span>
<p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
Thank you for what you do ❤️. You are changing lives, one classroom at a time, thanks to you
the world is a better place. 😊
</p>
<PrimaryButton
label="Keep Building 🚀"
variant={VARIANTS.CONTAINED_WHITE}
className="bg-white text-primary-800"
onClick={() => goto(`${$currentOrgPath}/courses`)}
/>
</span>
<img
src="/images/student-learning.svg"
alt="student Learning Pictogram"
class="w-28 md:block md:w-1/3 lg:w-[200px] lg:max-h-[205px] mb-3 md:mb-0"
/>
</div>
<!-- <div class="flex items-start flex-wrap">
{#each boxes as box}
<div
class="w-full md:w-[246px] h-[165px] flex flex-col rounded border border-gray-200 justify-center px-5 md:mr-5 mb-5"
@@ -227,20 +239,20 @@
<p class="dark:text-white text-xl font-bold">{box.value}</p>
</div>
{/each}
</div>
</div> -->
<div class="flex flex-wrap mt-5 gap-4 w-full">
<div class="w-full">
<!-- Your Schedule -->
<div class="w-full xl:w-auto container">
<p class="dark:text-white font-bold mb-7">Your Schedule</p>
<div class="rounded border border-gray-200 md:mr-3 md:min-w-[450px] schedule-box w-full">
<p class="dark:text-white font-bold mt-7 mb-4">Your Schedule</p>
<div
class="rounded border border-gray-200 gap-3 flex flex-col md:flex-row items-start px-2 md:px-5 py-5 w-full"
>
{#if !$isMobile}
<div id="calendar" class="flex justify-center mt-5">
<div id="calendar" class="flex justify-center mt-5 w-2/5">
<InlineCalendar bind:store {theme} />
</div>
{/if}
{#if $isMobile}
{:else}
<div class="header w-full flex items-center">
<Datepicker bind:store let:key let:send let:receive>
<button
@@ -255,61 +267,64 @@
</button>
</Datepicker>
</div>
{:else}
<p class="dark:text-white font-bold m-5">
{formatDate($store?.selected)}
</p>
{/if}
{#each selectedDateLessonData as lessonData}
<div class="flex items-center justify-between p-5 lesson-data">
<div class="w-4/5">
<a
class="text-black-700 text-lg font-bold flex items-center"
href={`/courses/${lessonData.course_id}/lessons/${
lessonData.is_unlocked ? lessonData.lesson_id : ''
}`}
>
{lessonData.lesson_title}
{#if lessonData.is_unlocked}
<span class="ml-2 success">
<LockedIcon class="carbon-icon dark:text-white" />
</span>
{:else}
<UnlockedIcon class="carbon-icon dark:text-white" />
{/if}
</a>
<p class="dark:text-white text-grey text-sm flex items-center">
<a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
{` ${lessonData.course_title}`}
<div class="max-h-[400px] overflow-y-scroll w-full">
{#if !$isMobile}
<p class="dark:text-white font-bold m-5">
{formatDate($store?.selected)}
</p>
{/if}
{#each selectedDateLessonData as lessonData}
<div class="flex items-center justify-between p-5 lesson-data">
<div class="w-full">
<a
class="text-black-700 text-lg font-bold flex items-center"
href={`/courses/${lessonData.course_id}/lessons/${
lessonData.is_unlocked ? lessonData.lesson_id : ''
}`}
>
{lessonData.lesson_title}
{#if lessonData.is_unlocked}
<span class="ml-2 success">
<LockedIcon class="carbon-icon dark:text-white" />
</span>
{:else}
<UnlockedIcon class="carbon-icon dark:text-white" />
{/if}
</a>
</p>
<p class="dark:text-white text-grey text-sm flex items-center">
<a class="underline text-primary-700 my-2" href="/courses/{lessonData.course_id}">
{` ${lessonData.course_title}`}
</a>
</p>
</div>
{#if lessonData.is_unlocked}
<a
class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
'opacity-50 pointer-events-none cursor-not-allowed'}"
href={!!lessonData.call_url ? lessonData.call_url : undefined}
target="_blank"
title={!!lessonData.call_url
? 'Click to join the call'
: 'No call link was added for this lesson. Ask your trainer'}
>
Join call
</a>
{/if}
</div>
{#if lessonData.is_unlocked}
<a
class="join-call rounded-3xl bg-primary-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
'opacity-50 pointer-events-none cursor-not-allowed'}"
href={!!lessonData.call_url ? lessonData.call_url : undefined}
target="_blank"
title={!!lessonData.call_url
? 'Click to join the call'
: 'No call link was added for this lesson. Ask your trainer'}
>
Join call
</a>
{/if}
</div>
{:else}
<p class="dark:text-white flex items-center justify-center w-full no-data">
No lesson on this day
</p>
{/each}
{:else}
<p class="dark:text-white flex items-center justify-center w-full no-data">
No lesson on this day
</p>
{/each}
</div>
</div>
</div>
<!-- Your Activities -->
<div class="w-full xl:w-auto container">
<!-- <div class="w-full xl:w-auto container">
<p class="dark:text-white font-bold mb-7">Your Activities</p>
<div
class="rounded border border-gray-200 md:min-w-[450px] activities-box py-4 px-2 md:px-5 w-full"
@@ -333,7 +348,7 @@
</div>
{/each}
</div>
</div>
</div> -->
</div>
</div>
@@ -346,23 +361,6 @@
width: 246px;
height: 165px;
}
.schedule-box,
.activities-box {
height: 516px;
overflow-y: auto;
overflow: hidden;
}
.calendar-root {
max-width: 1000px;
margin: 0 auto;
}
.calendar-info {
max-width: 600px;
width: 100%;
height: 100%;
}
.header {
border-bottom: 1px solid var(--border-color);
@@ -393,6 +391,10 @@
color: var(--main-primary-color);
}
:global(#calendar .controls .button.label) {
font-size: 1rem;
}
@media (max-width: 640px) {
:global(span.active-day) {
font-size: 30px;