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

CLASSROOMIO-T-88: Mark lesson as complete

Browse Source
This commit is contained in:
Rotimi Best
2023-08-03 02:51:02 +01:00
parent f09db20dda
commit 8cf4148703
15 changed files with 190 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/org/[slug]/+page.svelte
+28 -47
View File
@@ -3,20 +3,15 @@
// 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 { InlineCalendar, Datepicker } from 'svelte-calendar';
import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
import {
formatUserUpcomingData,
formatDate,
} from '$lib/utils/functions/routes/dashboard';
import { formatUserUpcomingData, formatDate } from '$lib/utils/functions/routes/dashboard';
import { user } from '$lib/utils/store/user';
import { fetchUserUpcomingData } from '$lib/utils/services/dashboard';
import { isMobile } from '$lib/utils/store/useMobile';
import type {
UserLessonDataType,
LessonsByMonthIndexType,
} from '$lib/utils/types';
import type { UserLessonDataType, LessonsByMonthIndexType } from '$lib/utils/types';
import WelcomeModal from '$lib/components/WelcomeModal/WelcomeModal.svelte';
import { onMount } from 'svelte';
@@ -31,8 +26,8 @@
calendar: {
width: '300px',
height: '300px',
shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
},
shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)'
}
};
let store;
@@ -44,20 +39,20 @@
const boxes = [
{
label: 'Revenue (NGN)',
value: '0.00',
value: '0.00'
},
{
label: 'Number of sales',
value: 0,
value: 0
},
{
label: 'Number of courses',
value: 0,
value: 0
},
{
label: 'Total students',
value: 0,
},
value: 0
}
];
const activities = [
{
@@ -66,7 +61,7 @@
name: 'Nnancy Okoye',
time: '1 hour ago',
description: 'Submitted an assignment for lesson Figma prototyping',
link: '/',
link: '/'
},
{
avatar:
@@ -74,7 +69,7 @@
name: 'Bro Shagi',
time: '2 days ago',
description: 'Submitted an assignment for lesson Figma prototyping',
link: '/',
link: '/'
},
{
avatar:
@@ -82,7 +77,7 @@
name: 'Bill Gates',
time: '13 hours ago',
description: 'Submitted an assignment for lesson Figma prototyping',
link: '/',
link: '/'
},
{
avatar:
@@ -90,8 +85,8 @@
name: 'Steve Jobs',
time: 'yesterday',
description: 'Submitted an assignment for lesson Figma prototyping',
link: '/',
},
link: '/'
}
];
const addDotsToCalendar = (currentMonthIndexInRenderedMonth: number) =>
@@ -103,8 +98,7 @@
// );
const renderedMonths =
calendar?.querySelectorAll('.contents .container .stage .grid .grid') ||
[];
calendar?.querySelectorAll('.contents .container .stage .grid .grid') || [];
// console.log(`renderedMonths`, renderedMonths);
const currentMonthIndex = new Date($store?.selected).getMonth();
const currentMonth = renderedMonths[currentMonthIndexInRenderedMonth];
@@ -129,10 +123,7 @@
if (!!currentMonthData[dateIndex]) {
// console.log(`dateIndex`, dateIndex);
// console.log(`lesson data`, currentMonthData[dateIndex]);
dayElement.insertAdjacentHTML(
'beforeend',
'<span class="active-day">•</span>'
);
dayElement.insertAdjacentHTML('beforeend', '<span class="active-day">•</span>');
}
}
}, 500);
@@ -150,9 +141,7 @@
}
}
function getDataOfSelectedDate(
_selectedDate: string
): UserLessonDataType[] | [] {
function getDataOfSelectedDate(_selectedDate: string): UserLessonDataType[] | [] {
if (!_selectedDate) return [];
const selectedDate = new Date(_selectedDate).toUTCString();
@@ -163,8 +152,7 @@
// If we changed the month, update the calendar dots
const prevMonthIndex = new Date(prevSelectedDate).getMonth();
if (prevMonthIndex !== monthIndex) {
const currentMonthIndexInRenderedMonth =
monthIndex < prevMonthIndex ? 1 : 2;
const currentMonthIndexInRenderedMonth = monthIndex < prevMonthIndex ? 1 : 2;
addDotsToCalendar(currentMonthIndexInRenderedMonth);
}
@@ -212,9 +200,7 @@
<div class="flex items-start flex-wrap">
{#each boxes as box}
<div
class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5"
>
<div class="box flex flex-col rounded border border-gray-200 justify-center px-5 mr-5 mb-5">
<p class="dark:text-white mb-2 text-sm">{box.label}</p>
<p class="dark:text-white text-xl font-bold">{box.value}</p>
</div>
@@ -259,28 +245,25 @@
<a
class="text-black-700 text-lg font-bold flex items-center"
href={`/courses/${lessonData.course_id}/lessons/${
lessonData.is_complete ? lessonData.lesson_id : ''
lessonData.is_unlocked ? lessonData.lesson_id : ''
}`}
>
{lessonData.lesson_title}
{#if lessonData.is_complete}
{#if lessonData.is_unlocked}
<span class="ml-2 success">
<CheckmarkFilledIcon size={20} class="carbon-icon" />
<LockedIcon class="carbon-icon" />
</span>
{:else}
<span class="text-md ml-2">🔒</span>
<UnlockedIcon class="carbon-icon" />
{/if}
</a>
<p class="dark:text-white text-grey text-sm flex items-center">
<a
class="underline text-blue-700 my-2"
href="/courses/{lessonData.course_id}"
>
<a class="underline text-blue-700 my-2" href="/courses/{lessonData.course_id}">
{` ${lessonData.course_title}`}
</a>
</p>
</div>
{#if lessonData.is_complete}
{#if lessonData.is_unlocked}
<a
class="join-call rounded-3xl bg-blue-600 text-white py-3 font-bold shadow-lg {!lessonData.call_url &&
'opacity-50 pointer-events-none cursor-not-allowed'}"
@@ -295,9 +278,7 @@
{/if}
</div>
{:else}
<p
class="dark:text-white flex items-center justify-center w-full no-data"
>
<p class="dark:text-white flex items-center justify-center w-full no-data">
No lesson on this day
</p>
{/each}