feat: interactive course poll (#5)
* CLASSROOMIO-T-218:Made the save button to be at the bottom right * CLASSROOMIO-T-218:Removed unused class * CLASSROOMIO-T-119:Made poll to be created by teachers only * CLASSROOMIO-T-119:Updated the interface * CLASSROOMIO-T-218:Made the save button to be at the bottom right * CLASSROOMIO-T-218:Removed unused class * CLASSROOMIO-T-119:Made poll to be created by teachers only * CLASSROOMIO-T-119:Updated the interface * polls improvements * CLASSROOMIO-T-119:Made some corrections to the store * fix types * poll imporvements * CLASSROOMIO-T-119: Connect create/delete poll to backend * remove console * CLASSROOMIO-T-119: Improve hotkeys + better abstract poll feature * realtime poll --------- Co-authored-by: emmanuel <ifeanyi@digdippa.com>
This commit is contained in:
Rotimi Best
committed by
GitHub
GitHub
co-authored by
emmanuel
emmanuel
parent
b4587483fb
commit
465b2341fd
@@ -7,7 +7,7 @@
|
||||
import { getSupabase } from '$lib/utils/functions/supabase';
|
||||
import { validateEmail } from '$lib/utils/functions/validateEmail';
|
||||
|
||||
let email;
|
||||
let email = '';
|
||||
let isAdding = false;
|
||||
let success = false;
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
setTimeout(() => {
|
||||
isAdding = false;
|
||||
success = false;
|
||||
email = null;
|
||||
email = '';
|
||||
}, 5000);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { sideBar } from '$lib/components/Org/store';
|
||||
import { apps } from '$lib/components/Apps/store';
|
||||
import APPS_CONSTANTS from '$lib/components/Apps/constants';
|
||||
import hotkeys from 'hotkeys-js';
|
||||
|
||||
function handleClose() {
|
||||
$apps.selectedApp = undefined;
|
||||
if ($apps.isStudent) {
|
||||
$apps.open = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleAppClick(appName?: string) {
|
||||
if (appName === $apps.selectedApp) {
|
||||
handleClose();
|
||||
} else {
|
||||
$apps.selectedApp = appName;
|
||||
}
|
||||
$apps.open = true;
|
||||
$apps.dropdown = !$apps.dropdown;
|
||||
}
|
||||
|
||||
function toggleSidebar() {
|
||||
$sideBar.hidden = !$sideBar.hidden;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
hotkeys('ctrl+b,command+b,ctrl+1,command+1,ctrl+2,command+2', function (event, handler) {
|
||||
// Prevent default behavior
|
||||
event.preventDefault();
|
||||
|
||||
switch (handler.key) {
|
||||
case 'ctrl+b':
|
||||
case 'command+b':
|
||||
toggleSidebar();
|
||||
break;
|
||||
case 'ctrl+1':
|
||||
case 'command+1':
|
||||
handleAppClick(APPS_CONSTANTS.APPS.COMMENTS);
|
||||
break;
|
||||
case 'ctrl+2':
|
||||
case 'command+2':
|
||||
handleAppClick(APPS_CONSTANTS.APPS.POLL);
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
@@ -18,7 +18,7 @@
|
||||
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';
|
||||
import { setCourse, course } from '$lib/components/Course/store';
|
||||
import { course } from '$lib/components/Course/store';
|
||||
import Download from 'carbon-icons-svelte/lib/Download.svelte';
|
||||
import OverflowMenuVertical from 'carbon-icons-svelte/lib/OverflowMenuVertical.svelte';
|
||||
import { apps } from '$lib/components/Apps/store';
|
||||
@@ -72,23 +72,24 @@
|
||||
isFetching = false;
|
||||
}
|
||||
|
||||
async function markLessonComplete() {
|
||||
async function markLessonComplete(lessonId: string) {
|
||||
let found = false;
|
||||
isMarkingComplete = true;
|
||||
|
||||
let completion: LessonCompletion = {
|
||||
is_complete: true,
|
||||
profile_id: $profile.id || '',
|
||||
lesson_id: $lesson.id || '',
|
||||
lesson_id: lessonId,
|
||||
created_at: new Date().toDateString(),
|
||||
updated_at: new Date().toDateString()
|
||||
};
|
||||
const completions: LessonCompletion[] = $lesson.lesson_completion.map((_completion) => {
|
||||
if (_completion.profile_id === $profile.id) {
|
||||
found = true;
|
||||
_completion.is_complete = !_completion.is_complete;
|
||||
|
||||
completion = _completion;
|
||||
completion = {
|
||||
...completion,
|
||||
is_complete: _completion.is_complete
|
||||
};
|
||||
}
|
||||
|
||||
return _completion;
|
||||
@@ -324,7 +325,11 @@
|
||||
<SendAlt size={24} class="carbon-icon" />
|
||||
<span class="ml-1">{$lesson.totalComments}</span>
|
||||
</button>
|
||||
<button class="px-2 my-2" on:click={markLessonComplete} disabled={isMarkingComplete}>
|
||||
<button
|
||||
class="px-2 my-2"
|
||||
on:click={() => markLessonComplete(data.lessonId)}
|
||||
disabled={isMarkingComplete}
|
||||
>
|
||||
{#if getIsLessonComplete($lesson.lesson_completion, $profile.id)}
|
||||
<CheckmarkFilledIcon size={24} class="carbon-icon text-primary-600" />
|
||||
{:else}
|
||||
|
||||
@@ -72,17 +72,17 @@
|
||||
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 md:flex-row md:gap-5">
|
||||
<div class="w-full md:w-[50%] mt-10 xl:mt-2">
|
||||
<section class="flex w-full flex-col lg:flex-row md:gap-5">
|
||||
<div class="w-full lg:w-[50%] mt-10 xl:mt-2">
|
||||
<Learning />
|
||||
</div>
|
||||
<div class="mt-10 xl:mt-2 w-full md:w-[50%]">
|
||||
<div class="mt-10 xl:mt-2 w-full lg: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 md: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 lg: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"
|
||||
class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center justify-between lg:items-center xl:items-start gap-5 lg:justify-around"
|
||||
>
|
||||
<div>
|
||||
<img src="/images/target.svg" alt="student Learning score" />
|
||||
@@ -100,7 +100,7 @@
|
||||
{/if}
|
||||
</span>
|
||||
<h1
|
||||
class="text-5xl md:text-6xl font-bold text-[#262626] dark:text-white my-0 whitespace-nowrap"
|
||||
class="text-5xl lg:text-6xl font-bold text-[#262626] dark:text-white my-0 whitespace-nowrap"
|
||||
>
|
||||
{progressPercentage} %
|
||||
</h1>
|
||||
|
||||
@@ -213,7 +213,7 @@
|
||||
>
|
||||
<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
|
||||
Thank you for what you do ❤️. You are changing lives one classroom at a time and thanks to
|
||||
you, the world is a better place. 😊
|
||||
</p>
|
||||
<PrimaryButton
|
||||
|
||||
Reference in New Issue
Block a user