CLASSROOMIO-T-8: Add general calendar
This commit is contained in:
Rotimi Best
@@ -79,7 +79,7 @@
|
||||
if (path.includes('login') || path.includes('signup')) {
|
||||
goto('/profile/' + $profile.id);
|
||||
} else if (!path.length) {
|
||||
goto('/courses');
|
||||
goto('/dashboard');
|
||||
}
|
||||
}
|
||||
} else if (profileData) {
|
||||
@@ -96,7 +96,7 @@
|
||||
if (path.includes('login') || path.includes('signup')) {
|
||||
goto('/profile/' + $profile.id);
|
||||
} else if (!path.length) {
|
||||
goto('/courses');
|
||||
goto('/dashboard');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
<!-- <script context="module">
|
||||
export async function preload(page, { user, config }) {
|
||||
return { user, config };
|
||||
}
|
||||
</script> -->
|
||||
<script>
|
||||
import GroupPresentation32 from 'carbon-icons-svelte/lib/GroupPresentation32';
|
||||
import UserSpeaker32 from 'carbon-icons-svelte/lib/UserSpeaker32';
|
||||
import Book32 from 'carbon-icons-svelte/lib/Book32';
|
||||
|
||||
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
|
||||
let animate = 'transition delay-75 duration-300 ease-in-out';
|
||||
let boxes = [
|
||||
{
|
||||
label: 'Students',
|
||||
value: 50,
|
||||
icon: 'students',
|
||||
},
|
||||
{
|
||||
label: 'Tutors',
|
||||
value: 10,
|
||||
icon: 'tutor',
|
||||
},
|
||||
{
|
||||
label: 'Courses',
|
||||
value: 20,
|
||||
icon: 'courses',
|
||||
},
|
||||
];
|
||||
|
||||
let topStudents = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Brad Traversy',
|
||||
score: 97.8,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Ebuka Jacobs',
|
||||
score: 96,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Ngozi Okonjo Iwuala',
|
||||
score: 95,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Nathaniel Bassey',
|
||||
score: 80,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Barack Obama',
|
||||
score: 79,
|
||||
},
|
||||
];
|
||||
|
||||
let topCourses = [
|
||||
{
|
||||
title: 'CityBIM Basic Module',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'CityBIM Advanced Module',
|
||||
rating: 4.5,
|
||||
},
|
||||
{
|
||||
title: 'Introduction to ClasroomIO',
|
||||
rating: 4.2,
|
||||
},
|
||||
{
|
||||
title: 'Advanced Builders Module',
|
||||
rating: 4.1,
|
||||
},
|
||||
{
|
||||
title: 'Artificial Intelligence - Basics',
|
||||
rating: 4,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Admin Dashboard - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="root w-full py-10 bg-gray-100">
|
||||
<div class="flex items-center justify-evenly max-w-6xl m-auto">
|
||||
{#each boxes as box}
|
||||
<div
|
||||
class="bg-white rounded-md py-4 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
|
||||
>
|
||||
{#if box.icon === 'students'}
|
||||
<UserSpeaker32 class="carbon-icon" />
|
||||
{:else if box.icon === 'tutor'}
|
||||
<GroupPresentation32 class="carbon-icon" />
|
||||
{:else if box.icon === 'courses'}
|
||||
<Book32 class="carbon-icon" />
|
||||
{/if}
|
||||
<p class="text-xl">{box.label}</p>
|
||||
<h3 class="text-3xl m-0 my-2">{box.value}</h3>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-evenly mt-16">
|
||||
<div class="table rounded-md bg-white shadow-md">
|
||||
<div class="flex border-t-0 {borderBottomGrey} p-3">
|
||||
<h3 class="m-0 py-2 pl-2 text-lg">Outstanding students</h3>
|
||||
</div>
|
||||
|
||||
{#each topStudents as topStudent, index}
|
||||
<div
|
||||
class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
|
||||
>
|
||||
<span class="mr-2">{index + 1}</span>
|
||||
<p class="text-lg">{topStudent.name}</p>
|
||||
<span class="flex-grow" />
|
||||
<p class="text-lg">{topStudent.score}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="table rounded-md bg-white shadow-md">
|
||||
<div class="flex border-t-0 {borderBottomGrey} p-3">
|
||||
<h3 class="m-0 py-2 pl-2 text-lg">Top rated courses</h3>
|
||||
</div>
|
||||
|
||||
{#each topCourses as topCourse, index}
|
||||
<div
|
||||
class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
|
||||
>
|
||||
<span class="mr-2">{index + 1}</span>
|
||||
<p class="text-lg">{topCourse.title}</p>
|
||||
<span class="flex-grow" />
|
||||
<p class="text-lg">{topCourse.rating}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
min-height: 93vh;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 564px;
|
||||
}
|
||||
</style>
|
||||
@@ -130,7 +130,7 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Courses</title>
|
||||
<title>Courses - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<section class="root">
|
||||
|
||||
+233
-125
@@ -1,151 +1,259 @@
|
||||
<!-- <script context="module">
|
||||
export async function preload(page, { user, config }) {
|
||||
return { user, config };
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { InlineCalendar, Datepicker } from 'svelte-calendar';
|
||||
|
||||
import {
|
||||
formatUserUpcomingData,
|
||||
formatDate,
|
||||
} from '../utils/functions/routes/dashboard';
|
||||
import { user } from '../utils/store/user';
|
||||
import { fetchUserUpcomingData } from '../utils/services/dashboard';
|
||||
import { isMobile } from '../utils/store/useMobile';
|
||||
import type {
|
||||
UserLessonDataType,
|
||||
LessonsByMonthIndexType,
|
||||
} from '../utils/types';
|
||||
|
||||
const theme = {
|
||||
calendar: {
|
||||
width: '400px',
|
||||
shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
|
||||
},
|
||||
};
|
||||
|
||||
let store;
|
||||
let calendar: HTMLElement | null = null;
|
||||
let lessonsByMonth: LessonsByMonthIndexType = {};
|
||||
let prevSelectedDate: string = new Date().toDateString();
|
||||
let selectedDateLessonData: UserLessonDataType[] | [] = [];
|
||||
|
||||
const addDotsToCalendar = (currentMonthIndexInRenderedMonth: number) =>
|
||||
setTimeout(() => {
|
||||
if (!calendar) calendar = document.getElementById('calendar');
|
||||
// console.log(
|
||||
// `currentMonthIndexInRenderedMonth`,
|
||||
// currentMonthIndexInRenderedMonth
|
||||
// );
|
||||
|
||||
const renderedMonths =
|
||||
calendar?.querySelectorAll('.contents .container .stage .grid .grid') ||
|
||||
[];
|
||||
// console.log(`renderedMonths`, renderedMonths);
|
||||
const currentMonthIndex = new Date($store?.selected).getMonth();
|
||||
const currentMonth = renderedMonths[currentMonthIndexInRenderedMonth];
|
||||
// console.log(`currentMonth`, currentMonth);
|
||||
// All elements for each day in the month - with prev or next month
|
||||
const currentMonthElements =
|
||||
currentMonth?.querySelectorAll<HTMLElement>('a:not(.outsider)') || [];
|
||||
// console.log(`currentMonthElements`, currentMonthElements, '\n\n');
|
||||
const currentMonthData = lessonsByMonth[currentMonthIndex];
|
||||
if (!currentMonthData) return;
|
||||
|
||||
for (let i in currentMonthElements) {
|
||||
if (!currentMonthElements.hasOwnProperty(i)) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const dayElement = currentMonthElements[i];
|
||||
dayElement.style.position = 'relative';
|
||||
|
||||
// The date is inside the element like <a>2</a>
|
||||
const dateIndex = Number(dayElement.innerHTML);
|
||||
if (!!currentMonthData[dateIndex]) {
|
||||
// console.log(`dateIndex`, dateIndex);
|
||||
// console.log(`lesson data`, currentMonthData[dateIndex]);
|
||||
dayElement.insertAdjacentHTML(
|
||||
'beforeend',
|
||||
'<span class="active-day">•</span>'
|
||||
);
|
||||
}
|
||||
}
|
||||
}, 500);
|
||||
|
||||
async function runFirstThings(currentSession: { id: string } | null) {
|
||||
if (!currentSession || !currentSession.id) return;
|
||||
|
||||
const userUpcomingData = await fetchUserUpcomingData(currentSession.id);
|
||||
|
||||
lessonsByMonth = formatUserUpcomingData(userUpcomingData);
|
||||
|
||||
// Only for desktop. Only run on mobile when the user clicks on the date
|
||||
if (!$isMobile) {
|
||||
addDotsToCalendar(1);
|
||||
}
|
||||
}
|
||||
</script> -->
|
||||
<script>
|
||||
import GroupPresentation32 from 'carbon-icons-svelte/lib/GroupPresentation32';
|
||||
import UserSpeaker32 from 'carbon-icons-svelte/lib/UserSpeaker32';
|
||||
import Book32 from 'carbon-icons-svelte/lib/Book32';
|
||||
|
||||
let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
|
||||
let animate = 'transition delay-75 duration-300 ease-in-out';
|
||||
let boxes = [
|
||||
{
|
||||
label: 'Students',
|
||||
value: 50,
|
||||
icon: 'students',
|
||||
},
|
||||
{
|
||||
label: 'Tutors',
|
||||
value: 10,
|
||||
icon: 'tutor',
|
||||
},
|
||||
{
|
||||
label: 'Courses',
|
||||
value: 20,
|
||||
icon: 'courses',
|
||||
},
|
||||
];
|
||||
function getDataOfSelectedDate(
|
||||
selectedDate: string
|
||||
): UserLessonDataType[] | [] {
|
||||
if (!selectedDate) return [];
|
||||
|
||||
let topStudents = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Brad Traversy',
|
||||
score: 97.8,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Ebuka Jacobs',
|
||||
score: 96,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Ngozi Okonjo Iwuala',
|
||||
score: 95,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Nathaniel Bassey',
|
||||
score: 80,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Barack Obama',
|
||||
score: 79,
|
||||
},
|
||||
];
|
||||
const monthIndex = new Date(selectedDate).getMonth();
|
||||
const dateIndex = new Date(selectedDate).getDate();
|
||||
|
||||
let topCourses = [
|
||||
{
|
||||
title: 'CityBIM Basic Module',
|
||||
rating: 5,
|
||||
},
|
||||
{
|
||||
title: 'CityBIM Advanced Module',
|
||||
rating: 4.5,
|
||||
},
|
||||
{
|
||||
title: 'Introduction to ClasroomIO',
|
||||
rating: 4.2,
|
||||
},
|
||||
{
|
||||
title: 'Advanced Builders Module',
|
||||
rating: 4.1,
|
||||
},
|
||||
{
|
||||
title: 'Artificial Intelligence - Basics',
|
||||
rating: 4,
|
||||
},
|
||||
];
|
||||
// If we changed the month, update the calendar dots
|
||||
const prevMonthIndex = new Date(prevSelectedDate).getMonth();
|
||||
if (prevMonthIndex !== monthIndex) {
|
||||
const currentMonthIndexInRenderedMonth =
|
||||
monthIndex < prevMonthIndex ? 1 : 2;
|
||||
|
||||
addDotsToCalendar(currentMonthIndexInRenderedMonth);
|
||||
}
|
||||
|
||||
prevSelectedDate = selectedDate;
|
||||
|
||||
const monthLessonData = lessonsByMonth[monthIndex];
|
||||
if (!monthLessonData) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const dateLessonData = monthLessonData[dateIndex];
|
||||
if (!dateLessonData) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return dateLessonData;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Remove default shouldEnlargeDay=true when using <DatePicker /> on mobile
|
||||
if ($store && $store.shouldEnlargeDay) {
|
||||
$store.shouldEnlargeDay = false;
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
|
||||
// Every time the date changes
|
||||
$: selectedDateLessonData = getDataOfSelectedDate($store?.selected);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Dashboard - ClassroomIO</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="root w-full py-10 bg-gray-100">
|
||||
<div class="flex items-center justify-evenly max-w-6xl m-auto">
|
||||
{#each boxes as box}
|
||||
<div
|
||||
class="bg-white rounded-md py-4 px-16 active shadow-md hover:shadow-2xl border-2 hover:border-blue-700 cursor-pointer {animate}"
|
||||
>
|
||||
{#if box.icon === 'students'}
|
||||
<UserSpeaker32 class="carbon-icon" />
|
||||
{:else if box.icon === 'tutor'}
|
||||
<GroupPresentation32 class="carbon-icon" />
|
||||
{:else if box.icon === 'courses'}
|
||||
<Book32 class="carbon-icon" />
|
||||
{/if}
|
||||
<p class="text-xl">{box.label}</p>
|
||||
<h3 class="text-3xl m-0 my-2">{box.value}</h3>
|
||||
<section class="root w-full py-10 bg-gray-100">
|
||||
<div class="calendar-root flex mx-2">
|
||||
{#if !$isMobile}
|
||||
<div id="calendar">
|
||||
<InlineCalendar bind:store {theme} />
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-evenly mt-16">
|
||||
<div class="table rounded-md bg-white shadow-md">
|
||||
<div class="flex border-t-0 {borderBottomGrey} p-3">
|
||||
<h3 class="m-0 py-2 pl-2 text-lg">Outstanding students</h3>
|
||||
</div>
|
||||
|
||||
{#each topStudents as topStudent, index}
|
||||
<div
|
||||
class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
|
||||
>
|
||||
<span class="mr-2">{index + 1}</span>
|
||||
<p class="text-lg">{topStudent.name}</p>
|
||||
<span class="flex-grow" />
|
||||
<p class="text-lg">{topStudent.score}</p>
|
||||
{/if}
|
||||
<div
|
||||
id={$isMobile ? 'calendar' : ''}
|
||||
class="calendar-info flex-grow border border-gray-300 ml-2 rounded-md"
|
||||
>
|
||||
{#if $isMobile}
|
||||
<div class="header w-full flex items-center">
|
||||
<Datepicker bind:store let:key let:send let:receive>
|
||||
<button
|
||||
class="text-lg font-bold text-blue-700 p-3 hover:bg-gray-300 rounded-md"
|
||||
in:receive|local={{ key }}
|
||||
out:send|local={{ key }}
|
||||
on:click={() => {
|
||||
addDotsToCalendar(1);
|
||||
}}
|
||||
>
|
||||
{formatDate($store?.selected)}
|
||||
</button>
|
||||
</Datepicker>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="table rounded-md bg-white shadow-md">
|
||||
<div class="flex border-t-0 {borderBottomGrey} p-3">
|
||||
<h3 class="m-0 py-2 pl-2 text-lg">Top rated courses</h3>
|
||||
</div>
|
||||
|
||||
{#each topCourses as topCourse, index}
|
||||
{:else}
|
||||
<div
|
||||
class="flex items-center p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
|
||||
class="header text-lg font-bold text-blue-700 flex px-5 items-center"
|
||||
>
|
||||
<span class="mr-2">{index + 1}</span>
|
||||
<p class="text-lg">{topCourse.title}</p>
|
||||
<span class="flex-grow" />
|
||||
<p class="text-lg">{topCourse.rating}</p>
|
||||
{formatDate($store?.selected)}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each selectedDateLessonData as lessonData}
|
||||
<div class="flex items-center justify-between p-5 lesson-data">
|
||||
<div>
|
||||
<a
|
||||
class="text-black-700 text-lg font-bold"
|
||||
href="/courses/{lessonData.course_id}/lessons/{lessonData.lesson_id}"
|
||||
>
|
||||
{lessonData.lesson_title}
|
||||
</a>
|
||||
<p class="text-grey text-sm flex items-center">
|
||||
<a
|
||||
class="underline text-blue-700 my-2"
|
||||
href="/courses/{lessonData.course_id}"
|
||||
>
|
||||
{` ${lessonData.course_title}`}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<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'}"
|
||||
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>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="flex items-center justify-center w-full no-data">
|
||||
No lesson on this day
|
||||
</p>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.root {
|
||||
min-height: 93vh;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 564px;
|
||||
.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);
|
||||
min-height: 61px;
|
||||
}
|
||||
|
||||
.lesson-data {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.no-data {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.join-call {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
max-height: 48px;
|
||||
width: 110px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(span.active-day) {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 40%;
|
||||
color: var(--main-primary-color);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
:global(span.active-day) {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user