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

CLASSROOMIO-T-150: Add teacher to course + linear lesson content

Browse Source 
clean up

CLASSROOMIO-T-150: Notify teacher they have been added

Make lesson content be linear on preview mode

CLASSROOMIO-T-150: Add teachers with a dropdown to course


Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-69
Merged-by: Best Admin <[email protected]>
This commit is contained in:
Rotimi Best
2023-09-07 10:47:25 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent b075bbc5de
commit 7523e6c3e7
23 changed files with 511 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.postcss
+5
View File
@@ -57,6 +57,11 @@ h6 {
line-height: 1.25 !important;
}
.prose p {
margin-top: 0px !important;
margin-bottom: 10px !important;
}
.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
src/lib/components/Course/components/Lesson/Materials/index.svelte
+158 -122
View File
@@ -34,7 +34,9 @@
export let prevMode = '';
export let lessonId = '';
export let isSaving = false;
export let toggleMode = () => {};
let lessonTitle = '';
let initAutoSave = false;
let timeoutId: NodeJS.Timeout;
let tabs = CONSTANTS.tabs;
@@ -65,6 +67,8 @@
function isNoteEmpty(note) {
if (!note || typeof note !== 'string') return true;
if (!document) return false;
const dummyDiv = document.createElement('div');
dummyDiv.innerHTML = note;
@@ -73,6 +77,12 @@
return rawText === '';
}
function isMaterialsEmpty(materials) {
const { slide_url, videos, note } = materials;
return isNoteEmpty(note) && !slide_url && isEmpty(videos);
}
function handleSave(prevMode: string) {
if (prevMode === MODES.edit) {
saveLesson();
@@ -138,7 +148,7 @@
window.players = players;
}
function autoSave(updatedMaterials) {
function autoSave(updatedMaterials, _isLoading) {
if (timeoutId) clearTimeout(timeoutId);
if (!initAutoSave) {
@@ -166,7 +176,7 @@
$uploadCourseVideoStore.isModalOpen = false;
};
$: autoSave($lesson.materials);
$: autoSave($lesson.materials, $isLoading);
$: onLessonIdChange(lessonId);
@@ -177,6 +187,8 @@
$: updateNoteByCompletion($completion);
$: initPlyr(player, $lesson.materials.videos);
$: lessonTitle = $lessons.find((les) => les.id === $lesson.id)?.title || '';
</script>
<Modal
@@ -188,10 +200,14 @@
<VideoUploader {lessonId} />
</Modal>
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
{#if mode === MODES.edit}
<h1 class="text-4xl mt-0">
{lessonTitle}
</h1>
{#if mode === MODES.edit}
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
<div bind:this={aiButtonRef} class="w-full flex flex-row-reverse">
<PrimaryButton
className="flex items-center relative"
@@ -238,131 +254,151 @@
placeholder="Write your lesson note here"
/>
</div>
{:else if !isNoteEmpty($lesson.materials?.note)}
<article class="preview prose prose-sm sm:prose p-2">
{@html $lesson.materials.note}
</article>
{:else}
<Box>
<div class="flex justify-between flex-col items-center w-96">
<img src="/images/empty-note-icon.svg" alt="No Note" class="my-2.5 mx-auto" />
<h2 class="text-xl my-1.5 font-normal">No Notes yet</h2>
<p class="text-sm text-center text-slate-500">
Share your knowledge with the world by creating engaging notes. Add your notes now.
</p>
</div>
</Box>
{/if}
</TabContent>
</TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
{#if mode === MODES.edit}
<TextField
label="Slide link"
bind:value={$lesson.materials.slide_url}
onInputChange={handleInputChange}
/>
{:else if $lesson.materials.slide_url}
<iframe
title="Embeded Slides"
src={$lesson.materials.slide_url}
frameborder="0"
width="100%"
height="569"
class="iframe"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
/>
{:else}
<Box>
<div class="flex justify-between flex-col items-center w-96">
<img src="/images/empty-slide-icon.svg" alt="No Slide" class="my-2.5 mx-auto" />
<h2 class="text-xl my-1.5 font-normal">No slides yet</h2>
<p class="text-sm text-center text-slate-500">
Share your knowledge with the world by creating engaging slides. Add your slide's link
now.
</p>
</div>
</Box>
{/if}
</TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
{#if mode === MODES.edit}
<TextField
label="Slide link"
bind:value={$lesson.materials.slide_url}
onInputChange={handleInputChange}
/>
{/if}
</TabContent>
<TabContent value={tabs[2].value} index={currentTab}>
{#if mode === MODES.edit && $lesson.materials.videos.length}
<TabContent value={tabs[2].value} index={currentTab}>
<PrimaryButton label="Add/Edit Video(s)" onClick={openAddVideoModal} className="mb-2" />
{/if}
{#if $lesson.materials.videos.length}
<div class="flex flex-col items-start w-full h-full">
{#each $lesson.materials.videos as video, index}
{#if mode === MODES.edit}
<div class="ml-auto">
<IconButton
value="delete-video"
contained={true}
onClick={() => deleteLessonVideo(index)}
>
<TrashCanIcon size={20} class="carbon-icon dark:text-white" />
</IconButton>
</div>
{/if}
<div class="w-full h-full flex flex-col gap-2 overflow-hidden">
{#key video.link}
<div class="mb-5">
{#if video.type === 'youtube'}
<iframe
width="100%"
height="569"
class="iframe"
src={formatYoutubeVideo(video.link, errors)}
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
{:else if video.metadata?.svid}
<div style="position:relative;padding-bottom:51.416579%">
<iframe
src="https://muse.ai/embed/{video.metadata
?.svid}?logo=https://app.classroomio.com/logo-512.png&subtitles=auto&cover_play_position=center"
style="width:100%;height:100%;position:absolute;left:0;top:0"
frameborder="0"
allowfullscreen
title="Muse AI Video Embed"
/>
</div>
{:else}
<video bind:this={player} class="plyr-video-trigger" playsinline controls>
<source src={video.link} type="video/mp4" />
<track kind="captions" />
</video>
{/if}
{#if $lesson.materials.videos.length}
<div class="flex flex-col items-start w-full h-full">
{#each $lesson.materials.videos as video, index}
{#if mode === MODES.edit}
<div class="ml-auto">
<IconButton
value="delete-video"
contained={true}
onClick={() => deleteLessonVideo(index)}
>
<TrashCanIcon size={20} class="carbon-icon dark:text-white" />
</IconButton>
</div>
{/key}
{/if}
<div class="w-full h-full flex flex-col gap-2 overflow-hidden">
{#key video.link}
<div class="mb-5">
{#if video.type === 'youtube'}
<iframe
width="100%"
height="569"
class="iframe"
src={formatYoutubeVideo(video.link, errors)}
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
{:else if video.metadata?.svid}
<div style="position:relative;padding-bottom:51.416579%">
<iframe
src="https://muse.ai/embed/{video.metadata
?.svid}?logo=https://app.classroomio.com/logo-512.png&subtitles=auto&cover_play_position=center"
style="width:100%;height:100%;position:absolute;left:0;top:0"
frameborder="0"
allowfullscreen
title="Muse AI Video Embed"
/>
</div>
{:else}
<video bind:this={player} class="plyr-video-trigger" playsinline controls>
<source src={video.link} type="video/mp4" />
<track kind="captions" />
</video>
{/if}
</div>
{/key}
</div>
{/each}
</div>
{/if}
</TabContent>
</slot:fragment>
</Tabs>
{:else if !isMaterialsEmpty($lesson.materials)}
{#if $lesson.materials.videos.length}
<div class="w-full">
{#each $lesson.materials.videos as video}
<div class="w-full overflow-hidden mb-5">
{#key video.link}
<div class="mb-5">
{#if video.type === 'youtube'}
<iframe
class="iframe"
src={formatYoutubeVideo(video.link, errors)}
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
{:else if video.metadata?.svid}
<div style="position:relative;padding-bottom:51.416579%">
<iframe
src="https://muse.ai/embed/{video.metadata
?.svid}?logo=https://app.classroomio.com/logo-512.png&subtitles=auto&cover_play_position=center"
style="width:100%;height:100%;position:absolute;left:0;top:0"
frameborder="0"
allowfullscreen
title="Muse AI Video Embed"
/>
</div>
{:else}
<video bind:this={player} class="plyr-video-trigger" playsinline controls>
<source src={video.link} type="video/mp4" />
<track kind="captions" />
</video>
{/if}
</div>
{/each}
{/key}
</div>
{:else}
<Box>
<img src="/no-video.svg" alt="Video not found" />
<h3 class="text-xl font-normal dark:text-white py-2">
No video added for this lesson yet
</h3>
<p class="text-sm text-center font-normal py-2">
Share videos with your students and get auto transcription and in video search out of
the box.<br />
Start by clicking on Add Video button.
</p>
<PrimaryButton label="Add Video" className="rounded-md" onClick={openAddVideoModal} />
</Box>
{/if}
</TabContent>
</slot:fragment>
</Tabs>
{/each}
</div>
{/if}
{#if $lesson.materials.slide_url}
<iframe
title="Embeded Slides"
src={$lesson.materials.slide_url}
frameborder="0"
width="100%"
height="569"
class="iframe my-3"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
/>
{/if}
{#if !isNoteEmpty($lesson.materials?.note)}
<article class="preview prose prose-sm sm:prose p-2">
{@html $lesson.materials.note}
</article>
{/if}
{:else}
<Box>
<img src="/no-video.svg" alt="Video not found" />
<h3 class="text-xl font-normal dark:text-white py-2">
No note, video or slide added for this lesson yet
</h3>
<p class="text-sm text-center font-normal py-2">
Share your knowledge with your students by creating engaging content<br />
Start by clicking on <strong>Get started</strong> button.
</p>
<PrimaryButton label="Get started" className="rounded-md" onClick={toggleMode} />
</Box>
{/if}
<style>
.iframe {
height: 569px;
width: 100%;
height: 450px;
}
@media (max-width: 760px) {
src/lib/components/Course/components/People/InviationModal.svelte
+122 -27
View File
@@ -1,4 +1,4 @@
<script>
<script lang="ts">
import Modal from '$lib/components/Modal/index.svelte';
import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
import TextArea from '$lib/components/Form/TextArea.svelte';
@@ -7,16 +7,45 @@
import { invitationModal, resetForm } from './store';
import { validateForm } from '$lib/components/Courses/functions';
import { course, setCourse } from '$lib/components/Course/store';
import { MultiSelect, Loading } from 'carbon-components-svelte';
import { currentOrg } from '$lib/utils/store/org';
import { getOrgTeam } from '$lib/utils/services/org';
import type { OrgTeamMember } from '$lib/utils/types/org';
import { sendTeacherCourseWelcome } from './utils';
let errors = {
emails: '',
let errors: {
students: string;
tutors: string;
title?: string;
description?: string;
} = {
students: '',
tutors: ''
};
function addPerson() {
const { hasError, fieldErrors, students, tutors } = validateForm({
interface Tutor {
id: number;
text: string;
email: string;
profileId?: string;
}
let tutors: Tutor[] = [];
let selectedIds: Array<number> = [];
let selectedTutors: Tutor[] = [];
let isLoadingTutors = false;
function notEmpty<TValue>(value: TValue | null | undefined): value is TValue {
return value !== null && value !== undefined;
}
const formatSelected = (i: Array<number>): Tutor[] =>
i.length === 0 ? [] : i.map((id) => tutors.find((tutor) => tutor.id === id)).filter(notEmpty);
function onSubmit() {
const { hasError, fieldErrors, students } = validateForm({
...$invitationModal,
title: 'sfdsd',
description: 'dsfdsf',
tutors: 'sgsg'
});
errors = fieldErrors;
@@ -24,30 +53,41 @@
let membersStack = [];
console.log(`$course`, $course);
// Create groupmemebers from group_id and add teachers and students
for (const student of students) {
for (const studentEmail of students) {
membersStack.push({
email: student,
group_id: $course.group.id,
role_id: ROLE.STUDENT,
email: studentEmail,
group_id: $course.group?.id,
role_id: ROLE.STUDENT
});
}
for (const tutor of tutors) {
for (const tutor of selectedTutors) {
membersStack.push({
email: tutor,
group_id: $course.group.id,
role_id: ROLE.TUTOR,
profile_id: tutor.profileId,
group_id: $course.group?.id,
role_id: ROLE.TUTOR
});
sendTeacherCourseWelcome({
to: tutor.email,
name: tutor.text,
orgName: $currentOrg.name,
orgSiteName: $currentOrg.siteName,
courseName: $course.title
});
}
addGroupMember(membersStack).then(async (membersAdded) => {
const group = await fetchGroup($course.group.id);
if (!$course?.group?.id) return;
const group = await fetchGroup($course?.group?.id);
setCourse(
{
...$course,
group: group.data,
group: group.data
},
false
);
@@ -55,6 +95,45 @@
resetForm();
});
}
function getTutors(team: OrgTeamMember[]) {
const existingTutors = $course.group?.tutors || [];
return team
.filter((teamMember) => teamMember.verified)
.filter((teamMember) => {
// filter out teamMembers that have already been added
return !existingTutors.some((t) => t.id === teamMember.profileId);
})
.map((teamMember) => ({
id: teamMember.id,
text: teamMember.fullname,
profileId: teamMember.profileId,
email: teamMember.email
}));
}
async function setTutors(orgId: string | undefined, _open: boolean) {
if (!orgId) return;
isLoadingTutors = true;
const { team, error } = await getOrgTeam(orgId);
if (error) {
console.error('Error fetching teams', error);
isLoadingTutors = false;
return;
}
tutors = getTutors(team);
isLoadingTutors = false;
}
$: {
selectedTutors = formatSelected(selectedIds);
console.log('selectedTutors', selectedTutors);
}
$: setTutors($currentOrg.id, $invitationModal.open);
</script>
<Modal
@@ -64,22 +143,38 @@
maxWidth="max-w-lg"
modalHeading="Invite people"
>
<form on:submit|preventDefault={addPerson}>
<TextArea
label="Invite Tutors"
bind:value={$invitationModal.tutors}
rows="2"
maxRows="3"
placeholder="[email protected], [email protected]"
helperMessage="To invite people, add their emails separated by a comma"
errorMessage={errors.tutors}
className="mb-4"
/>
<form on:submit|preventDefault={onSubmit}>
<div class="mb-4">
<p class="text-base mb-1">Invite Tutors</p>
<MultiSelect
disabled={isLoadingTutors}
label="Select tutors in organization..."
bind:selectedIds
items={tutors}
/>
{#if isLoadingTutors}
<span>
<Loading withOverlay={false} small />
</span>
{:else}
<span>
To add tutor to your organization,
<a
href={`/org/${$currentOrg.siteName}/settings/teams`}
class="underline text-primary-600"
>
go to organization settings
</a>
</span>
{/if}
</div>
<TextArea
label="Invite Students"
labelClassName="text-base"
bind:value={$invitationModal.students}
rows="2"
maxRows="3"
maxRows={3}
placeholder="[email protected], john@gmail.com"
helperMessage="To invite people, add their emails separated by a comma"
errorMessage={errors.students}
src/lib/components/Course/components/People/store.js
+3 -5
View File
@@ -1,18 +1,16 @@
import { writable } from 'svelte/store';
export const deleteMemberModal = writable({
open: false,
open: false
});
export const invitationModal = writable({
open: false,
tutors: '',
students: '',
students: ''
});
export const resetForm = () =>
invitationModal.update(() => ({
open: false,
tutors: '',
students: '',
students: ''
}));
src/lib/components/Course/components/People/utils.ts
+31
View File
@@ -0,0 +1,31 @@
import { supabase } from '$lib/utils/functions/supabase';
export async function sendTeacherCourseWelcome(params: {
to: string;
name: string;
orgName: string;
orgSiteName: string;
courseName: string;
}) {
const { data } = await supabase.auth.getSession();
const accessToken = data.session?.access_token || '';
try {
const response = await fetch('/api/email/course/welcome', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: accessToken
},
body: JSON.stringify(params)
});
if (!response.ok) {
throw new Error(await response.text());
}
const result = await response.json();
console.log('Sent invite email', result);
} catch (error) {
console.error('Error sending invite email', error);
}
}
src/lib/components/Course/store.ts
+15 -12
View File
@@ -22,16 +22,16 @@ export const course: Writable<Course> = writable({
discount: 0,
reward: {
show: false,
description: '',
description: ''
},
instructor: {
name: '',
role: '',
coursesNo: 0,
description: '',
imgUrl: '',
},
},
imgUrl: ''
}
}
});
export const mockGroupMember = {
@@ -46,15 +46,15 @@ export const mockGroupMember = {
username: 'robertblake',
avatar_url: '',
created_at: '2021-08-08T13:42:13+00:00',
updated_at: '2021-08-08T13:42:13+00:00',
},
updated_at: '2021-08-08T13:42:13+00:00'
}
};
export const group = writable({
id: null,
tutors: [],
students: [],
people: [],
people: []
});
export async function setCourse(data: Course, setLesson = true) {
@@ -65,7 +65,7 @@ export async function setCourse(data: Course, setLesson = true) {
const groupData = Object.assign(data.group, {
tutors: [],
students: [],
people: [],
people: []
});
// @ts-ignore
@@ -77,7 +77,10 @@ export async function setCourse(data: Course, setLesson = true) {
groupData.students.push(member);
} else if (member.profile) {
// @ts-ignore
groupData.tutors.push(member.profile);
groupData.tutors.push({
...member.profile,
memberId: member.id
});
// tutorsById[member.profile.id] = member.profile;
}
@@ -120,15 +123,15 @@ export async function setCourse(data: Course, setLesson = true) {
discount: 0,
reward: {
show: false,
description: '',
description: ''
},
instructor: {
name: '',
role: '',
coursesNo: 0,
description: '',
imgUrl: '',
},
imgUrl: ''
}
};
}
src/lib/components/Navigation/app.svelte
+3 -3
View File
@@ -12,7 +12,7 @@
import { course } from '$lib/components/Course/store';
import { appStore } from '$lib/utils/store/app';
import { currentOrgPath } from '$lib/utils/store/org';
import { toggleBodyByTheme } from '$lib/utils/functions/app';
import { toggleBodyByMode } from '$lib/utils/functions/app';
import { goto } from '$app/navigation';
import { menu } from '../Org/store';
@@ -27,10 +27,10 @@
function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark;
toggleBodyByTheme($appStore.isDark);
toggleBodyByMode($appStore.isDark);
if (browser) {
localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
}
}
src/lib/components/Navigation/lms.svelte
+3 -3
View File
@@ -7,16 +7,16 @@
import IconButton from '$lib/components/IconButton/index.svelte';
import { appStore } from '$lib/utils/store/app';
import { toggleBodyByTheme } from '$lib/utils/functions/app';
import { toggleBodyByMode } from '$lib/utils/functions/app';
export let navClass = '';
function toggleDarkMode() {
$appStore.isDark = !$appStore.isDark;
toggleBodyByTheme($appStore.isDark);
toggleBodyByMode($appStore.isDark);
if (browser) {
localStorage.setItem('theme', $appStore.isDark ? 'dark' : '');
localStorage.setItem('mode', $appStore.isDark ? 'dark' : '');
}
}
</script>
src/lib/components/TextEditor/index.svelte
+1 -1
View File
@@ -37,5 +37,5 @@
</script>
<div>
<Editor onIni {value} {apiKey} {conf} />
<Editor {value} {apiKey} {conf} />
</div>
src/lib/utils/functions/app.js
+1 -1
View File
@@ -1,4 +1,4 @@
export function toggleBodyByTheme(isDark) {
export function toggleBodyByMode(isDark) {
if (!document) return;
if (isDark) {
src/lib/utils/functions/theme.ts
+1
View File
@@ -9,5 +9,6 @@ export function setTheme(theme: string) {
// In case theme already exists in dom, don't add
if (document.body.className.includes(theme)) return;
localStorage.setItem('theme', theme);
document.body.className = document.body.className.concat(' ', theme);
}
src/lib/utils/services/org/index.js
+6 -4
View File
@@ -1,5 +1,6 @@
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import { get } from 'svelte/store';
import { goto } from '$app/navigation';
import { supabase } from '$lib/utils/functions/supabase';
import { orgs, currentOrg, orgAudience, orgTeam } from '$lib/utils/store/org';
@@ -30,9 +31,10 @@ export async function getOrgTeam(orgId) {
data.forEach((teamMember) => {
team.push({
id: teamMember.id,
email: teamMember?.profile?.email || teamMember?.email,
verified: teamMember?.verified,
email: teamMember?.profile?.email || teamMember.email,
verified: teamMember.verified,
profileId: teamMember?.profile?.id,
fullname: teamMember?.profile?.fullname || '',
role: ROLE_LABEL[teamMember?.role_id] || '',
isAdmin: teamMember?.role_id === ROLE.ADMIN
});
@@ -42,7 +44,7 @@ export async function getOrgTeam(orgId) {
}
return {
team,
team: get(orgTeam),
error
};
}
src/lib/utils/services/sendgrid.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import type { MailService } from '@sendgrid/mail';
import { SENDGRID_API_KEY } from '$env/static/private';
export const SENDGRID_FROM = 'Rotimi Best <[email protected]>';
export const SENDGRID_FROM_HELP = 'ClassroomIO <help@classroomio.com>';
export const SENDGRID_FROM_NOTIFY = 'ClassroomIO <notify@classroomio.com>';
export let sendgrid: MailService;
src/lib/utils/store/org.ts
+2 -2
View File
@@ -1,7 +1,7 @@
import { writable, derived } from 'svelte/store';
import { STEPS } from '../constants/quiz';
import type { Writable } from 'svelte/store';
import type { CurrentOrg } from '../types/org';
import type { CurrentOrg, OrgTeamMember } from '../types/org';
export const orgs = writable([]);
export const currentOrg: Writable<CurrentOrg> = writable({
@@ -16,7 +16,7 @@ export const currentOrg: Writable<CurrentOrg> = writable({
theme: ''
});
export const orgAudience = writable([]);
export const orgTeam = writable([]);
export const orgTeam = writable<OrgTeamMember[]>([]);
export const currentOrgPath = derived(currentOrg, ($currentOrg) =>
$currentOrg.siteName ? `/org/${$currentOrg.siteName}` : ''
);
src/lib/utils/types/org.ts
+10
View File
@@ -9,3 +9,13 @@ export interface CurrentOrg {
landingpage: {};
theme: string;
}
export interface OrgTeamMember {
id: number;
email: string;
verified: boolean;
profileId?: string;
fullname: string;
role: string;
isAdmin: boolean;
}
src/routes/+layout.svelte
+10 -7
View File
@@ -31,7 +31,7 @@
import { isMobile } from '$lib/utils/store/useMobile';
import { ROUTE } from '$lib/utils/constants/routes';
import { getOrganizations, getCurrentOrg } from '$lib/utils/services/org';
import { toggleBodyByTheme } from '$lib/utils/functions/app';
import { toggleBodyByMode } from '$lib/utils/functions/app';
import { appStore } from '$lib/utils/store/app';
import { currentOrg } from '$lib/utils/store/org';
import { setTheme } from '$lib/utils/functions/theme';
@@ -202,6 +202,15 @@
window['ga-disable-G-C7WBN0S06R'] = true;
}
if (browser) {
// Update theme - dark or light mode
$appStore.isDark = localStorage.getItem('mode') === 'dark';
toggleBodyByMode($appStore.isDark);
const theme = localStorage.getItem('theme');
if (theme) setTheme(theme);
}
setupSentry();
handleResize();
@@ -239,12 +248,6 @@
}
});
if (browser) {
// Update theme - dark or light mode
$appStore.isDark = localStorage.getItem('theme') === 'dark';
toggleBodyByTheme($appStore.isDark);
}
if (data.isOrgSite) {
console.log('data', data);
if (!data.org) {
src/routes/api/completion/+server.js
+5 -1
View File
@@ -25,9 +25,13 @@ export async function POST({ request }) {
const response = await openai.createChatCompletion({
model: 'gpt-3.5-turbo',
messages: [
{
role: 'system',
content: 'Act like an assistant of a lecturer'
},
{
role: 'user',
content: `Generate ${instruction[type]} given the course title is "${courseTitle}" and the lesson is "${lessonTitle}". Format in HTML without any styling, no ul, ol or li tags, don't include the title of the course and title of the lesson in the result & make sure the content is well detailed.`
content: `Generate ${instruction[type]} given the course title is "${courseTitle}" and the title of the lesson is "${lessonTitle}". Format in HTML without any styling. MOST IMPORTANT DON'T include the title of the course and don't include the lesson title: "${lessonTitle}" in your output. Please make sure the content is well detailed.`
}
],
stream: true
src/routes/api/email/course/welcome/+server.js
+55
View File
@@ -0,0 +1,55 @@
import { render } from 'svelte-email';
import { json } from '@sveltejs/kit';
import WelcomeTemplate from './template.svelte';
import { getSendgrid, SENDGRID_FROM_NOTIFY } from '$lib/utils/services/sendgrid';
import { getSupabase } from '$lib/utils/functions/supabase';
const sendgrid = getSendgrid();
const supabase = getSupabase();
export async function POST({ request }) {
const { to, name, orgName, courseName, orgSiteName } = await request.json();
const accessToken = request.headers.get('Authorization') || '';
console.log('/POST api/email/course/welcome', to, name, orgName);
if (!to || !name || !orgName || !courseName || !orgSiteName) {
return json({ success: false, message: 'Missing required fields' }, { status: 400 });
}
let user;
try {
const { data } = await supabase.auth.getUser(accessToken);
user = data.user;
} catch (error) {
console.error(error);
}
if (!user) {
return json({ success: false, message: 'Unauthenticated user' }, { status: 401 });
}
const origin = request.headers.get('origin');
const inviteLink = `${origin}/org/${orgSiteName}/courses`;
const options = {
from: SENDGRID_FROM_NOTIFY,
to,
subject: `You have been invited to a course in ${orgName}!`,
html: render({
template: WelcomeTemplate,
props: {
name,
orgName,
inviteLink,
courseName
}
})
};
sendgrid.send(options);
return json({
success: true,
message: 'Email sent'
});
}
src/routes/api/email/course/welcome/template.svelte
+19
View File
@@ -0,0 +1,19 @@
<script lang="ts">
import EmailTemplate from '$lib/components/Email/EmailTemplate.svelte';
import Welcome from './welcome.svelte';
export let name = '';
export let orgName = '';
export let inviteLink = '';
export let courseName = '';
</script>
<EmailTemplate
children={Welcome}
props={{
name,
orgName,
inviteLink,
courseName
}}
/>
src/routes/api/email/course/welcome/welcome.svelte
+53
View File
@@ -0,0 +1,53 @@
<script lang="ts">
import { Text, Section, Button, Link } from 'svelte-email';
export let name = '';
export let orgName = '';
export let inviteLink = '';
export let courseName = '';
const fontFamily =
'-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif';
const paragraph = {
fontFamily,
fontSize: '16px',
lineHeight: '26px'
};
const paragraphContent = {
...paragraph,
margin: '20px 0'
};
const footerParagraph = {
...paragraph,
margin: '0px'
};
const btnContainer = {
textAlign: 'center' as const
};
const button = {
fontFamily,
backgroundColor: '#1d4ee2',
borderRadius: '5px',
color: '#fff',
fontSize: '16px',
textDecoration: 'none',
textAlign: 'center' as const,
display: 'block'
};
</script>
<Text style={paragraph}>Hey {name},</Text>
<Text style={paragraphContent}>
You have been given access to teach a course by {orgName}
</Text>
<Text style={paragraphContent}>
The course is titled: {courseName}
</Text>
<Section style={btnContainer}>
<Button pX={12} pY={12} style={button} href={inviteLink}>Open Dashboard</Button>
</Section>
src/routes/api/email/invite/+server.js
+2 -2
View File
@@ -1,7 +1,7 @@
import { render } from 'svelte-email';
import { json } from '@sveltejs/kit';
import TeacherInviteTemplate from './template.svelte';
import { getSendgrid, SENDGRID_FROM_HELP } from '$lib/utils/services/sendgrid';
import { getSendgrid, SENDGRID_FROM_NOTIFY } from '$lib/utils/services/sendgrid';
import { getSupabase } from '$lib/utils/functions/supabase';
const sendgrid = getSendgrid();
@@ -47,7 +47,7 @@ export async function POST({ request }) {
console.log('inviteData', inviteData);
const options = {
from: SENDGRID_FROM_HELP,
from: SENDGRID_FROM_NOTIFY,
to: email,
subject: `Join ${name} on ClassroomIO`,
html: render({
src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte
+1 -1
View File
@@ -205,7 +205,7 @@
<Exercises lessonId={data.lessonId} exerciseId={data.exerciseId} path={`${path}/exercises`} />
{:else if !!data.lessonId}
<PageBody>
<Materials lessonId={data.lessonId} {mode} {prevMode} bind:isSaving />
<Materials lessonId={data.lessonId} {mode} {prevMode} {toggleMode} bind:isSaving />
<div class="w-full flex flex-row-reverse">
<PrimaryButton
src/routes/courses/[id]/people/+page.svelte
+4
View File
@@ -62,6 +62,9 @@
async function deletePerson() {
$group.people = $group.people.filter((person: { id: string }) => person.id !== member.id);
$group.tutors = $group.tutors.filter(
(person: { memberId: string }) => person.memberId !== member.id
);
await deleteGroupMember(member.id);
}
@@ -114,6 +117,7 @@
</script>
<InviationModal />
<DeleteConfirmation
email={member.email || (member.profile && member.profile.email)}
{deletePerson}