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

Auto show course w/invite + Fix saving

Browse Source
This commit is contained in:
rotimi-best
2021-08-28 22:44:06 +03:00
parent 7c746422f3
commit ddf4955d80
15 changed files with 289 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Buttons/Close/index.svelte
+2 -1
View File
@@ -4,8 +4,9 @@
export let onClick;
export let contained;
export let color = '';
</script>
<IconButton {onClick} {contained}>
<IconButton {onClick} {color} {contained}>
<Close24 class="carbon-icon" title="Close" />
</IconButton>
src/components/Course/components/Lesson/Materials/EditMode.svelte
-74
View File
@@ -1,74 +0,0 @@
<script>
import { onMount, onDestroy } from 'svelte';
import Tabs from '../../../../Tabs/index.svelte';
import TabContent from '../../../../TabContent/index.svelte';
import EditContent from '../../../../EditContent/index.svelte';
import TextField from '../../../../Form/TextField.svelte';
import {
lesson,
handleUpdateLessonMaterials,
isLessonDirty,
} from '../store/lessons';
const tabs = [
{
label: 'Note',
value: 1,
},
{
label: 'Video',
value: 2,
},
{
label: 'Slide',
value: 3,
},
];
let currentTab = tabs[0].value;
function onChange(tabValue) {
return () => {
currentTab = tabValue;
};
}
onMount(() => {
isLessonDirty.set(false);
});
onDestroy(() => {
if (!$isLessonDirty) {
return;
}
handleUpdateLessonMaterials($lesson);
});
$: console.log(`isLessonDirty`, $isLessonDirty);
</script>
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
<EditContent
writeLabel="Note"
bind:value={$lesson.materials.note}
placeholder="Start typing your lesson"
onInputChange={() => ($isLessonDirty = true)}
/>
</TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
<TextField
label="Youtube link"
bind:value={$lesson.materials.video_url}
onChange={() => ($isLessonDirty = true)}
/>
</TabContent>
<TabContent value={tabs[2].value} index={currentTab}>
<TextField
label="Slide link"
bind:value={$lesson.materials.slide_url}
onChange={() => ($isLessonDirty = true)}
/>
</TabContent>
</slot:fragment>
</Tabs>
src/components/Course/components/Lesson/Materials/ViewMode.svelte
-106
View File
@@ -1,106 +0,0 @@
<script>
import Tabs from '../../../../Tabs/index.svelte';
import TabContent from '../../../../TabContent/index.svelte';
import MarkdownRender from '../../../../MarkdownRender/index.svelte';
import Box from '../../../../Box/index.svelte';
import { lesson } from '../store/lessons';
const tabs = [
{
label: 'Note',
value: 1,
},
{
label: 'Video',
value: 2,
},
{
label: 'Slide',
value: 3,
},
];
let currentTab = tabs[0].value;
let errors = {};
function onChange(tabValue) {
return () => {
currentTab = tabValue;
};
}
function formatYoutubeVideo(url) {
console.log(`url`, url);
if (url.includes('embed')) {
return url;
}
const splitedUrl = url.split('watch');
if (splitedUrl.length !== 2) {
errors.video = 'Wrong url format';
return;
}
const query = new URLSearchParams(splitedUrl[1]);
return `https://www.youtube.com/embed/${query.get('v')}`;
}
</script>
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
{#if $lesson.materials.note}
<MarkdownRender content={$lesson.materials.note} />
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No note added</h3>
<img alt="Lesson note not found" src="/notfound.webp" class="w-80" />
</Box>
{/if}
</TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
{#if $lesson.materials.video_url && $lesson.materials.video_url.includes('youtube')}
{#each $lesson.materials.video_url.split(',') as url}
<div class="mb-5">
<iframe
width="100%"
height="569"
src={formatYoutubeVideo(url)}
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
</div>
{/each}
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No youtube video added</h3>
<img alt="Video not found" src="/notfound.webp" class="w-80" />
</Box>
{/if}
</TabContent>
<TabContent value={tabs[2].value} index={currentTab}>
{#if $lesson.materials.slide_url}
<iframe
title="Embeded Slides"
src={$lesson.materials.slide_url}
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
/>
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No slide added</h3>
<img alt="Slide not found" src="/notfound.webp" class="w-80" />
</Box>
{/if}
</TabContent>
</slot:fragment>
</Tabs>
src/components/Course/components/Lesson/Materials/constants.js
+14
View File
@@ -0,0 +1,14 @@
export const tabs = [
{
label: 'Note',
value: 1,
},
{
label: 'Video',
value: 2,
},
{
label: 'Slide',
value: 3,
},
];
src/components/Course/components/Lesson/Materials/index.svelte
+132 -8
View File
@@ -1,13 +1,137 @@
<script>
import MODES from '../../../../../utils/constants/mode.js';
import EditMode from './EditMode.svelte';
import ViewMode from './ViewMode.svelte';
export let mode = '';
import Tabs from '../../../../Tabs/index.svelte';
import TabContent from '../../../../TabContent/index.svelte';
import MarkdownRender from '../../../../MarkdownRender/index.svelte';
import Box from '../../../../Box/index.svelte';
import EditContent from '../../../../EditContent/index.svelte';
import TextField from '../../../../Form/TextField.svelte';
import {
lesson,
handleUpdateLessonMaterials,
isLessonDirty,
} from '../store/lessons';
import { tabs } from './constants';
import { onMount } from 'svelte';
export let mode = MODES.view;
export let prevMode = null;
export let lessonId;
let currentTab = tabs[0].value;
let errors = {};
const onChange = (tab) => () => (currentTab = tab);
function formatYoutubeVideo(url) {
console.log(`url`, url);
const prefix = 'https://www.youtube.com/embed';
// https://www.youtube.com/embed/qajK1J1neAM
if (url.includes('embed')) {
return url;
}
// https://youtu.be/qajK1J1neAM
if (url.includes('.be/')) {
const splittedUrlWithBe = url.split('.be/');
return `${prefix}/${splittedUrlWithBe[1]}`;
}
// https://www.youtube.com/watch?v=qajK1J1neAM
const splitedUrl = url.split('watch');
if (splitedUrl.length !== 2) {
errors.video = 'Wrong url format';
return;
}
const query = new URLSearchParams(splitedUrl[1]);
return `${prefix}/${query.get('v')}`;
}
function handleSave(prevMode) {
if (prevMode === MODES.edit) {
handleUpdateLessonMaterials($lesson, lessonId);
}
}
$: handleSave(prevMode);
</script>
{#if mode === MODES.edit}
<EditMode />
{:else}
<ViewMode />
{/if}
<Tabs {tabs} {currentTab} {onChange}>
<slot:fragment slot="content">
<TabContent value={tabs[0].value} index={currentTab}>
{#if mode === MODES.edit}
<EditContent
writeLabel="Note"
bind:value={$lesson.materials.note}
placeholder="Start typing your lesson"
onInputChange={() => ($isLessonDirty = true)}
/>
{:else if $lesson.materials.note}
<MarkdownRender content={$lesson.materials.note} />
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No note added</h3>
<img alt="Lesson note not found" src="/notfound.webp" class="w-80" />
</Box>
{/if}
</TabContent>
<TabContent value={tabs[1].value} index={currentTab}>
{#if mode === MODES.edit}
<TextField
label="Youtube link"
bind:value={$lesson.materials.video_url}
onChange={() => ($isLessonDirty = true)}
/>
{:else if $lesson.materials.video_url && $lesson.materials.video_url.includes('youtube')}
{#each $lesson.materials.video_url.split(',') as url}
<div class="mb-5">
<iframe
width="100%"
height="569"
src={formatYoutubeVideo(url)}
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
/>
</div>
{/each}
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No youtube video added</h3>
<img alt="Video not found" src="/notfound.webp" class="w-80" />
</Box>
{/if}
</TabContent>
<TabContent value={tabs[2].value} index={currentTab}>
{#if mode === MODES.edit}
<TextField
label="Slide link"
bind:value={$lesson.materials.slide_url}
onChange={() => ($isLessonDirty = true)}
/>
{:else if $lesson.materials.slide_url}
<iframe
title="Embeded Slides"
src={$lesson.materials.slide_url}
frameborder="0"
width="100%"
height="569"
allowfullscreen="true"
mozallowfullscreen="true"
webkitallowfullscreen="true"
/>
{:else}
<Box>
<h3 class="text-3xl text-gray-500">No slide added</h3>
<img alt="Slide not found" src="/notfound.webp" class="w-80" />
</Box>
{/if}
</TabContent>
</slot:fragment>
</Tabs>
src/components/Course/components/Lesson/store/lessons.js
+6 -6
View File
@@ -9,9 +9,9 @@ export const lessons = writable([]);
export const lesson = writable({
id: null,
materials: {
note: '',
slide: '',
video: '',
note: null,
slide_url: null,
video_url: null,
},
exercises: [],
});
@@ -52,7 +52,7 @@ export function handleDelete(lessonId) {
}
export async function handleSaveLesson(lesson, course_id) {
console.log(`lesson`, lesson);
console.log(`handleSaveLesson lesson`, lesson);
const newLesson = {
title: lesson.title,
lesson_at: lesson.lesson_at,
@@ -84,6 +84,6 @@ export async function handleSaveLesson(lesson, course_id) {
);
}
export async function handleUpdateLessonMaterials(lesson) {
return await updateLesson(lesson.materials, lesson.id);
export async function handleUpdateLessonMaterials(lesson, lessonId) {
return await updateLesson(lesson.materials, lessonId);
}
src/components/IconButton/index.svelte
+2 -2
View File
@@ -7,6 +7,7 @@
export let contained = false;
export let value = '';
export let size = 'large';
export let color = '';
export let toolTipProps = {
title: '',
hotkeys: [],
@@ -24,7 +25,7 @@
direction={toolTipProps.direction}
>
<button
class="root {selected && 'active'} {size} {contained &&
class="root {color} {selected && 'active'} {size} {contained &&
'contained'} {buttonClassName}"
{disabled}
on:click={handleClick}
@@ -36,7 +37,6 @@
<style lang="scss">
.root {
flex: 0 0 auto;
color: rgba(0, 0, 0, 0.54);
padding: 12px;
font-size: 1.5rem;
text-align: center;
src/components/Snackbar/constants.js
+13
View File
@@ -0,0 +1,13 @@
export const SNACKBAR_SEVERITY = {
ERROR: 'ERROR',
WARNING: 'WARNING',
INFO: 'INFO',
SUCCESS: 'SUCCESS',
};
export const SNACKBAR_SEVERITY_COLOR = {
ERROR: 'bg-red-600',
WARNING: 'bg-yellow-600',
INFO: 'bg-blue-600',
SUCCESS: 'bg-green-600',
};
src/components/Snackbar/index.svelte
+68
View File
@@ -0,0 +1,68 @@
<script>
import { fly } from 'svelte/transition';
import Information24 from 'carbon-icons-svelte/lib/Information24';
import Warning24 from 'carbon-icons-svelte/lib/Warning24';
import CheckmarkOutline24 from 'carbon-icons-svelte/lib/CheckmarkOutline24';
import CloseButton from '../Buttons/Close/index.svelte';
import { SNACKBAR_SEVERITY, SNACKBAR_SEVERITY_COLOR } from './constants';
import { snackbarStore } from './store';
let severityColor = SNACKBAR_SEVERITY_COLOR[$snackbarStore.severity];
function handleClose() {
if (typeof $snackbarStore.handleClose === 'number') {
$snackbarStore.handleClose();
}
$snackbarStore.open = false;
}
// When open is true trigger autoHideDuration
function handleOpen(open) {
if (!open) {
return;
}
const { autoHideDuration } = $snackbarStore;
if (typeof autoHideDuration === 'number') {
setTimeout(handleClose, autoHideDuration);
}
}
$: handleOpen($snackbarStore.open);
</script>
{#if $snackbarStore.open}
<div
transition:fly={{ y: 200, duration: 1000 }}
class="root text-white rounded-md flex justify-between items-center z-50 absolute {severityColor}"
>
<div class="flex items-center">
{#if $snackbarStore.severity === SNACKBAR_SEVERITY.SUCCESS}
<CheckmarkOutline24 class="carbon-icon" />
{:else if $snackbarStore.severity === SNACKBAR_SEVERITY.WARNING}
<Warning24 class="carbon-icon" />
{:else}
<Information24 class="carbon-icon" />
{/if}
<p class="ml-2 text-lg">{$snackbarStore.message}</p>
</div>
<CloseButton onClick={handleClose} contained={true} color="text-white" />
</div>
{/if}
<style>
.root {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
left: 50%;
right: auto;
bottom: 24px;
transform: translateX(-50%);
min-width: 288px;
padding: 6px 16px;
flex-wrap: wrap;
}
</style>
src/components/Snackbar/store.js
+10
View File
@@ -0,0 +1,10 @@
import { writable } from 'svelte/store';
import { SNACKBAR_SEVERITY } from './constants';
export const snackbarStore = writable({
open: false,
message: '',
severity: SNACKBAR_SEVERITY.INFO,
handleClose: () => {},
autoHideDuration: 6000,
});