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

Pass lesson from server into store

Browse Source
This commit is contained in:
Rotimi Best
2021-07-13 16:27:02 +00:00
parent 4a821eef98
commit c9908d6af5
17 changed files with 332 additions and 429 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Course/components/Lesson/store/lessons.js
+14 -140
View File
@@ -1,168 +1,42 @@
import { writable } from 'svelte/store';
import { writable } from "svelte/store";
export const lessons = writable([
{
title: 'Вступительное слово. Софт скилы',
to: '/courses/1/lessons/1',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: true,
},
{
title: 'Введение в ReactJS',
to: '/courses/1/lessons/2',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: 'Компоненты',
to: '/courses/1/lessons/3',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: 'Состояние компонентов и пропсы',
to: '/courses/1/lessons/4',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: false,
},
{
title: 'Жизненный цикл',
to: '/courses/1/lessons/5',
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
},
resources: [
{
label: 'lesson',
value: 1,
},
{
label: 'quiz',
value: 1,
},
{
label: 'home task',
value: 2,
},
],
date: new Date(),
isComplete: false,
},
]);
export const lessons = writable([]);
export const tutors = writable([
{
id: 1,
text: 'Sergey Semko',
text: "Sergey Semko",
},
{
id: 3,
text: 'Jonathan Nelson',
text: "Jonathan Nelson",
},
{
id: 4,
text: 'Sasha Pokidin',
text: "Sasha Pokidin",
},
{
id: 5,
text: 'Natasha Rudenko',
text: "Natasha Rudenko",
},
{
id: 6,
text: 'Yulia Marushko',
text: "Yulia Marushko",
},
]);
export function handleAddLesson() {
const resources = [
{
label: 'lesson',
label: "lesson",
value: 0,
},
{
label: 'quiz',
label: "quiz",
value: 0,
},
{
label: 'home task',
label: "home task",
value: 0,
},
];
@@ -171,13 +45,13 @@ export function handleAddLesson() {
return [
..._lessons,
{
title: 'Untitled lesson',
to: '/courses/1/lessons/' + (_lessons.length + 1),
title: "Untitled lesson",
to: "/courses/1/lessons/" + (_lessons.length + 1),
resources,
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: '',
avatar: "https://picsum.photos/32/32/?random",
name: "",
},
date: new Date(),
},
src/components/Course/components/Navigation/index.svelte
+32 -30
View File
@@ -1,23 +1,24 @@
<script>
import { onMount } from 'svelte';
import CheckmarkFilled20 from 'carbon-icons-svelte/lib/CheckmarkFilled20';
import hotkeys from 'hotkeys-js';
import ChevronLeft32 from 'carbon-icons-svelte/lib/ChevronLeft32';
import ChevronRight32 from 'carbon-icons-svelte/lib/ChevronRight32';
import { stores, goto } from '@sapper/app';
import Expandable from '../../../Expandable/index.svelte';
import PageNav from '../../../PageNav/index.svelte';
import IconButton from '../../../IconButton/index.svelte';
import { onMount } from "svelte";
import CheckmarkFilled20 from "carbon-icons-svelte/lib/CheckmarkFilled20";
import hotkeys from "hotkeys-js";
import ChevronLeft32 from "carbon-icons-svelte/lib/ChevronLeft32";
import ChevronRight32 from "carbon-icons-svelte/lib/ChevronRight32";
import { stores, goto } from "@sapper/app";
import Expandable from "../../../Expandable/index.svelte";
import PageNav from "../../../PageNav/index.svelte";
import IconButton from "../../../IconButton/index.svelte";
import {
getNavItemRoute,
getLessonsRoute,
getLectureNo,
} from '../../function';
} from "../../function";
import { lessons } from '../Lesson/store/lessons';
import { lessons } from "../Lesson/store/lessons";
// export let lessonId;
export let courseId;
export let path;
let show = true;
@@ -31,43 +32,43 @@
const navItems = [
{
label: 'Overview',
label: "Overview",
to: getNavItemRoute(courseId),
hideSortIcon: true,
},
{
label: 'Lessons',
label: "Lessons",
to: getLessonsRoute(courseId),
hideSortIcon: false,
isLecture: true,
},
{
label: 'All Exercises',
to: getNavItemRoute(courseId, 'allexercises'),
label: "All Exercises",
to: getNavItemRoute(courseId, "allexercises"),
hideSortIcon: true,
},
{
label: 'Scoreboard',
to: getNavItemRoute(courseId, 'scoreboard'),
label: "Scoreboard",
to: getNavItemRoute(courseId, "scoreboard"),
hideSortIcon: true,
},
{
label: 'People',
to: getNavItemRoute(courseId, 'people'),
label: "People",
to: getNavItemRoute(courseId, "people"),
hideSortIcon: true,
},
{
label: 'Timetable',
to: getNavItemRoute(courseId, 'timetable'),
label: "Timetable",
to: getNavItemRoute(courseId, "timetable"),
hideSortIcon: true,
},
];
onMount(() => {
hotkeys('b', function (event, handler) {
hotkeys("b", function (event, handler) {
event.preventDefault();
switch (handler.key) {
case 'b':
case "b":
show = !show;
break;
}
@@ -83,17 +84,18 @@
<Expandable
label={navItem.label}
handleClick={handleMainGroupClick(navItem.to)}
isGroupActive={$page.path === navItem.to}
isGroupActive={(path || $page.path) === navItem.to}
hideSortIcon={navItem.hideSortIcon}
>
{#if navItem.isLecture}
{#each $lessons as item, index}
<a
class="item flex items-center {(item.to === $page.path ||
!$page.path.length > 3) &&
class="item flex items-center {(item.to ===
(path || $page.path) ||
!(path || $page.path).length > 3) &&
'active'} pl-7 py-2 {!item.isComplete &&
'cursor-not-allowed'}"
href={item.isComplete ? item.to : $page.path}
href={item.isComplete ? item.to : path || $page.path}
>
<span class="course-counter"> {getLectureNo(index + 1)} </span>
<span>{item.title}</span>
@@ -116,9 +118,9 @@
value="toggle"
onClick={() => (show = !show)}
toolTipProps={{
title: 'Toggle sidebar',
hotkeys: ['B'],
direction: 'right',
title: "Toggle sidebar",
hotkeys: ["B"],
direction: "right",
}}
>
{#if show}
src/components/Course/constants.js
+4
View File
@@ -0,0 +1,4 @@
export const ROUTES = {
COURSES: "courses",
LESSONS: "lessons",
};
src/components/Course/function.js
+1 -4
View File
@@ -1,7 +1,4 @@
const ROUTES = {
COURSES: 'courses',
LESSONS: 'lessons',
};
import { ROUTES } from "./constants";
export function getNavItemRoute(courseId, routeId) {
const path = `/${ROUTES.COURSES}/${courseId}`;
src/components/Course/store/course.js
View File
src/components/CourseContainer/index.svelte
+14 -4
View File
@@ -1,15 +1,25 @@
<script>
import { onMount } from "svelte";
import Navigation from "../Course/components/Navigation/index.svelte";
export let courseTitle = "";
export let courseId = "";
import { lessons } from "../Course/components/Lesson/store/lessons";
export let courseData = {};
export let path;
onMount(() => {
if (!$lessons.length) {
lessons.set(courseData.lessons);
}
});
</script>
<svelte:head>
<title>{courseTitle}</title>
<title>{courseData.name}</title>
</svelte:head>
<div class="root">
<Navigation {courseId} />
<Navigation courseId={courseData.id} {path} />
<div class="rightBar">
<slot />
</div>
src/components/Form/TextField.svelte
-2
View File
@@ -4,7 +4,6 @@
export let value;
export let onKeyDown;
export let className = "";
export let autofocus = false;
</script>
<label class="block {className}">
@@ -15,6 +14,5 @@
on:keydown={onKeyDown}
{placeholder}
bind:value
autofocus
/>
</label>
src/routes/api/_db.js
+104 -102
View File
@@ -1,5 +1,5 @@
import { STATUS } from '../../utils/constants/answers';
import { QUESTION_TYPE } from '../../components/Question/constants';
import { STATUS } from "../../utils/constants/answers";
import { QUESTION_TYPE } from "../../components/Question/constants";
const ROLE = {
ADMIN: 0,
@@ -10,66 +10,66 @@ const ROLE = {
const tutors = [
{
id: 1,
text: 'Sergey Semko',
text: "Sergey Semko",
},
{
id: 3,
text: 'Jonathan Nelson',
text: "Jonathan Nelson",
},
{
id: 4,
text: 'Sasha Pokidin',
text: "Sasha Pokidin",
},
{
id: 5,
text: 'Natasha Rudenko',
text: "Natasha Rudenko",
},
{
id: 6,
text: 'Yulia Marushko',
text: "Yulia Marushko",
},
];
const people = [
{
name: 'Alexander Pokidin',
title: 'Senior Software Engineer',
avatar: 'https://i.pravatar.cc/150?img=1',
name: "Alexander Pokidin",
title: "Senior Software Engineer",
avatar: "https://i.pravatar.cc/150?img=1",
role: ROLE.TUTOR,
telegramLink: 'https://t.me/seed_of_abraham',
mailLink: 'mailto:[email protected]',
telegramLink: "https://t.me/seed_of_abraham",
mailLink: "mailto:[email protected]",
},
{
name: 'Andrey Filatov',
title: 'Fullstack Software Engineer',
avatar: 'https://i.pravatar.cc/150?img=2',
name: "Andrey Filatov",
title: "Fullstack Software Engineer",
avatar: "https://i.pravatar.cc/150?img=2",
role: ROLE.TUTOR,
telegramLink: 'https://t.me/seed_of_abraham',
mailLink: 'mailto:[email protected]',
telegramLink: "https://t.me/seed_of_abraham",
mailLink: "mailto:[email protected]",
},
{
name: 'Sergey Semko',
title: 'Senior Software Engineer',
avatar: 'https://i.pravatar.cc/150?img=3',
name: "Sergey Semko",
title: "Senior Software Engineer",
avatar: "https://i.pravatar.cc/150?img=3",
role: ROLE.TUTOR,
telegramLink: 'https://t.me/seed_of_abraham',
mailLink: 'mailto:[email protected]',
telegramLink: "https://t.me/seed_of_abraham",
mailLink: "mailto:[email protected]",
},
{
name: 'Natalia Fedii',
title: 'Project Manager',
avatar: 'https://i.pravatar.cc/150?img=4',
name: "Natalia Fedii",
title: "Project Manager",
avatar: "https://i.pravatar.cc/150?img=4",
role: ROLE.TUTOR,
telegramLink: 'https://t.me/seed_of_abraham',
mailLink: 'mailto:[email protected]',
telegramLink: "https://t.me/seed_of_abraham",
mailLink: "mailto:[email protected]",
},
];
const courses = [
{
id: 1,
title: 'React.js Fundamentals',
status: '',
title: "React.js Fundamentals",
status: "",
},
];
@@ -87,24 +87,24 @@ const lessons = [
{
id: 1,
course_id: 1,
title: 'Вступительное слово. Софт скилы',
to: '/courses/1/lessons/1',
title: "Вступительное слово. Софт скилы",
to: "/courses/1/lessons/1",
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: 'lesson',
label: "lesson",
value: 1,
},
{
label: 'quiz',
label: "quiz",
value: 1,
},
{
label: 'home task',
label: "home task",
value: 2,
},
],
@@ -114,24 +114,24 @@ const lessons = [
{
id: 2,
course_id: 1,
title: 'Введение в ReactJS',
to: '/courses/1/lessons/2',
title: "Введение в ReactJS",
to: "/courses/1/lessons/2",
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: 'lesson',
label: "lesson",
value: 1,
},
{
label: 'quiz',
label: "quiz",
value: 1,
},
{
label: 'home task',
label: "home task",
value: 2,
},
],
@@ -141,24 +141,24 @@ const lessons = [
{
id: 3,
course_id: 1,
title: 'Компоненты',
to: '/courses/1/lessons/3',
title: "Компоненты",
to: "/courses/1/lessons/3",
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: 'lesson',
label: "lesson",
value: 1,
},
{
label: 'quiz',
label: "quiz",
value: 1,
},
{
label: 'home task',
label: "home task",
value: 2,
},
],
@@ -168,24 +168,24 @@ const lessons = [
{
id: 4,
course_id: 1,
title: 'Состояние компонентов и пропсы',
to: '/courses/1/lessons/4',
title: "Состояние компонентов и пропсы",
to: "/courses/1/lessons/4",
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: 'lesson',
label: "lesson",
value: 1,
},
{
label: 'quiz',
label: "quiz",
value: 1,
},
{
label: 'home task',
label: "home task",
value: 2,
},
],
@@ -195,24 +195,24 @@ const lessons = [
{
id: 5,
course_id: 1,
title: 'Жизненный цикл',
to: '/courses/1/lessons/5',
title: "Жизненный цикл",
to: "/courses/1/lessons/5",
tutor: {
userId: 1,
avatar: 'https://picsum.photos/32/32/?random',
name: 'Sergey Semko',
avatar: "https://picsum.photos/32/32/?random",
name: "Sergey Semko",
},
resources: [
{
label: 'lesson',
label: "lesson",
value: 1,
},
{
label: 'quiz',
label: "quiz",
value: 1,
},
{
label: 'home task',
label: "home task",
value: 2,
},
],
@@ -226,38 +226,38 @@ const exercises = [
{
id: 1,
lesson_id: 1,
title: 'Home task 1',
title: "Home task 1",
description:
"You will be to answer 10 questions, it isn't timed so you can take your time to answer. You can also continue from where you left off, you don't need to worry cause everything is automatically syncronized in the cloud.",
questions: [
{
id: 'react-founder',
id: "react-founder",
type: QUESTION_TYPE.CHECKBOX,
title: 'Who is the creator of React.js',
title: "Who is the creator of React.js",
options: [
{
id: '1',
value: 'Dan Abrahmov',
id: "1",
value: "Dan Abrahmov",
},
{
id: '2',
value: 'Google',
id: "2",
value: "Google",
},
{
id: '3',
value: 'Facebook',
id: "3",
value: "Facebook",
},
{
id: '4',
value: 'Traversy Media',
id: "4",
value: "Traversy Media",
},
],
answers: ['3'],
answers: ["3"],
},
{
id: 'vue-founder',
id: "vue-founder",
type: QUESTION_TYPE.CHECKBOX,
title: 'Who is the creator of Vue.js',
title: "Who is the creator of Vue.js",
code: `const name = 'Josh Perez';\nconst element = <h1>Hello, {name}</h1>;\n\nReactDOM.render(\n
element,\,
document.getElementById('root')
@@ -265,53 +265,53 @@ const exercises = [
`,
options: [
{
id: '1',
value: 'Evan Vue',
id: "1",
value: "Evan Vue",
},
{
id: '2',
value: 'Mark Zukerberg',
id: "2",
value: "Mark Zukerberg",
},
{
id: '3',
value: 'Prince Charles',
id: "3",
value: "Prince Charles",
},
{
id: '4',
value: 'Bill Gates',
id: "4",
value: "Bill Gates",
},
],
answers: ['3'],
answers: ["3"],
},
{
id: 'svelte-founder',
id: "svelte-founder",
type: QUESTION_TYPE.RADIO,
title: 'Who is the creator of Svelte.js',
title: "Who is the creator of Svelte.js",
options: [
{
id: '1',
value: 'Hillary Svelte',
id: "1",
value: "Hillary Svelte",
},
{
id: '2',
value: 'Mircosoft',
id: "2",
value: "Mircosoft",
},
{
id: '3',
value: 'Elevate',
id: "3",
value: "Elevate",
},
{
id: '4',
value: 'Coding Train',
id: "4",
value: "Coding Train",
},
],
answers: ['2'],
answers: ["2"],
},
{
id: 'angular-founder',
id: "angular-founder",
type: QUESTION_TYPE.TEXTAREA,
title: 'Who is the creator of Angular.js',
value: '',
title: "Who is the creator of Angular.js",
value: "",
},
],
},
@@ -336,9 +336,11 @@ lessons.forEach((lesson) => {
});
export function getCourse(id) {
const people = [];
return {
id,
name: "React.js",
people,
roles: ROLE,
lessons: getLessons(id),
};
}
src/routes/api/course.js
+3 -3
View File
@@ -1,8 +1,8 @@
import { getCourse } from './_db';
import { getCourse } from "./_db";
function writeJsonHead(res, statusCode) {
res.writeHead(statusCode, {
'Content-Type': 'application/json',
"Content-Type": "application/json",
});
}
@@ -11,5 +11,5 @@ export function get(req, res, next) {
writeJsonHead(res, 200);
return res.end(JSON.stringify(getCourse(id)));
return res.end(JSON.stringify(getCourse(parseInt(id, 2))));
}
src/routes/courses/[id]/allexercises.svelte
+12 -6
View File
@@ -1,18 +1,24 @@
<script context="module">
export async function preload({ params }) {
let [courseId, courseNavItem, lessonId] = params.id;
let [courseId] = params.id;
const res = await this.fetch(`api/course?id=${courseId}`);
const data = await res.json();
return { courseId, courseNavItem, lessonId };
if (res.status === 200) {
return { courseId, courseData: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
import PageNav from '../../../components/PageNav/index.svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from "../../../components/PageNav/index.svelte";
import CourseContainer from "../../../components/CourseContainer/index.svelte";
export let courseId;
export let courseData = {};
</script>
<CourseContainer title="ReactJS" {courseId}>
<CourseContainer {courseData}>
<PageNav title="All Exercises" />
</CourseContainer>
src/routes/courses/[id]/index.svelte
+14 -7
View File
@@ -1,18 +1,25 @@
<script context="module">
export async function preload({ params }) {
let [courseId, courseNavItem, lessonId] = params.id;
console.log(`course id`, params);
return { courseId, courseNavItem, lessonId };
let [courseId] = params.id;
const res = await this.fetch(`api/course?id=${courseId}`);
const data = await res.json();
if (res.status === 200) {
return { courseId, courseData: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
import Overview from '../../../components/Course/index.svelte';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import Overview from "../../../components/Course/index.svelte";
import CourseContainer from "../../../components/CourseContainer/index.svelte";
export let courseId;
export let courseData = {};
</script>
<CourseContainer title="ReactJS" {courseId}>
<CourseContainer {courseData}>
<Overview />
</CourseContainer>
src/routes/courses/[id]/lessons/[...id]/index.svelte
-55
View File
@@ -1,55 +0,0 @@
<script context="module">
export async function preload({ params }) {
let [lessonId, exerciseRouteName, exerciseId] = params.id;
return { lessonId, exerciseRouteName, exerciseId };
}
</script>
<script>
import { stores } from '@sapper/app';
import CourseContainer from '../../../../../components/CourseContainer/index.svelte';
import PageNav from '../../../../../components/PageNav/index.svelte';
import PageBody from '../../../../../components/PageBody/index.svelte';
import Readme from '../../../../../components/Course/components/Lesson/Readme/index.svelte';
import Exercises from '../../../../../components/Course/components/Lesson/Exercises/index.svelte';
export let lessonId;
export let exerciseRouteName;
export let exerciseId;
let path;
const { page } = stores();
function getCourseId() {
return $page.path.match(/\w+\/(\d)\//)[1];
}
$: path = $page.path.replace(/\/exercises[\/ 0-9]*/, '');
</script>
<CourseContainer title="ReactJS" courseId={getCourseId()}>
<PageNav
navItems={[
{
label: 'README.md',
isActive: !exerciseRouteName,
href: path,
},
{
label: 'Exercises',
isActive: !!exerciseRouteName,
href: `${path}/exercises`,
},
]}
/>
<PageBody>
{#if !!exerciseRouteName}
<Exercises {exerciseId} path={`${path}/exercises`} />
{:else}
<Readme {lessonId} />
{/if}
</PageBody>
</CourseContainer>
src/routes/courses/[id]/lessons/[...lessonParams]/index.svelte
+61
View File
@@ -0,0 +1,61 @@
<script context="module">
export async function preload({ params }) {
const { id: courseId, lessonParams = [] } = params;
const [lessonId, exerciseRouteName, exerciseId] = lessonParams;
const res = await this.fetch(`api/course?id=${courseId}`);
const data = await res.json();
if (res.status === 200) {
return { courseData: data, lessonId, exerciseRouteName, exerciseId };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
import { stores } from "@sapper/app";
import CourseContainer from "../../../../../components/CourseContainer/index.svelte";
import PageNav from "../../../../../components/PageNav/index.svelte";
import PageBody from "../../../../../components/PageBody/index.svelte";
import Readme from "../../../../../components/Course/components/Lesson/Readme/index.svelte";
import Exercises from "../../../../../components/Course/components/Lesson/Exercises/index.svelte";
export let courseData;
export let lessonId;
export let exerciseRouteName;
export let exerciseId;
let path;
const { page } = stores();
$: path = $page.path.replace(/\/exercises[\/ 0-9]*/, "");
</script>
<CourseContainer {courseData} {path}>
<PageNav
navItems={[
{
label: "README.md",
isActive: !exerciseRouteName,
href: path,
},
{
label: "Exercises",
isActive: !!exerciseRouteName,
href: `${path}/exercises`,
},
]}
/>
<PageBody>
{#if !!exerciseRouteName}
<Exercises {exerciseId} path={`${path}/exercises`} />
{:else}
<Readme {lessonId} />
{/if}
</PageBody>
</CourseContainer>
src/routes/courses/[id]/lessons/index.svelte
+30 -22
View File
@@ -1,29 +1,37 @@
<script context="module">
export async function preload({ params }) {
console.log("params", params);
let [courseId, courseNavItem, lessonId] = params.id;
return { courseId, courseNavItem, lessonId };
const res = await this.fetch(`api/course?id=${courseId}`);
const data = await res.json();
if (res.status === 200) {
return { courseId, courseData: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
import Time24 from 'carbon-icons-svelte/lib/Time24';
import Edit24 from 'carbon-icons-svelte/lib/Edit24';
import Save24 from 'carbon-icons-svelte/lib/Save24';
import CheckmarkFilled24 from 'carbon-icons-svelte/lib/CheckmarkFilled24';
import PageNav from '../../../../components/PageNav/index.svelte';
import PageBody from '../../../../components/PageBody/index.svelte';
import PrimaryButton from '../../../../components/PrimaryButton/index.svelte';
import TextField from '../../../../components/Form/TextField.svelte';
import IconButton from '../../../../components/IconButton/index.svelte';
import Select from '../../../../components/Form/Select.svelte';
import CourseContainer from '../../../../components/CourseContainer/index.svelte';
import Time24 from "carbon-icons-svelte/lib/Time24";
import Edit24 from "carbon-icons-svelte/lib/Edit24";
import Save24 from "carbon-icons-svelte/lib/Save24";
import CheckmarkFilled24 from "carbon-icons-svelte/lib/CheckmarkFilled24";
import PageNav from "../../../../components/PageNav/index.svelte";
import PageBody from "../../../../components/PageBody/index.svelte";
import PrimaryButton from "../../../../components/PrimaryButton/index.svelte";
import TextField from "../../../../components/Form/TextField.svelte";
import IconButton from "../../../../components/IconButton/index.svelte";
import Select from "../../../../components/Form/Select.svelte";
import CourseContainer from "../../../../components/CourseContainer/index.svelte";
import {
lessons,
tutors,
handleAddLesson,
} from '../../../../components/Course/components/Lesson/store/lessons';
} from "../../../../components/Course/components/Lesson/store/lessons";
export let courseId;
export let courseData;
let lessonEditing;
let ref;
@@ -31,9 +39,9 @@
function formatDate(date) {
const d = new Date(date);
const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
const mo = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(d);
const da = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(d);
const ye = new Intl.DateTimeFormat("en", { year: "numeric" }).format(d);
const mo = new Intl.DateTimeFormat("en", { month: "2-digit" }).format(d);
const da = new Intl.DateTimeFormat("en", { day: "2-digit" }).format(d);
return `${ye}-${mo}-${da}`;
}
@@ -43,13 +51,13 @@
setTimeout(() => {
lessonEditing = $lessons.length - 1;
if (ref) {
ref.scrollIntoView({ block: 'end', behavior: 'smooth' });
ref.scrollIntoView({ block: "end", behavior: "smooth" });
}
}, 100);
}
</script>
<CourseContainer title="ReactJS" {courseId}>
<CourseContainer {courseData}>
<PageNav title="Lessons">
<div slot="widget">
<PrimaryButton label="Add" onClick={addLesson} />
@@ -68,8 +76,8 @@
<IconButton
onClick={() => (lesson.isComplete = !lesson.isComplete)}
toolTipProps={{
title: `Click to ${lesson.isComplete ? 'lock' : 'unlock'}`,
direction: 'right',
title: `Click to ${lesson.isComplete ? "lock" : "unlock"}`,
direction: "right",
}}
>
{#if lesson.isComplete}
@@ -110,7 +118,7 @@
<div class="flex items-center mr-2">
{lesson.resources
.map((r) => `${r.value} ${r.label}`)
.join(', ')}
.join(", ")}
</div>
</div>
src/routes/courses/[id]/people.svelte
+17 -42
View File
@@ -1,58 +1,33 @@
<script context="module">
export async function preload({ params }) {
let [courseId, courseNavItem, lessonId] = params.id;
let [courseId] = params.id;
return { courseId, courseNavItem, lessonId };
const res = await this.fetch(`api/course?id=${courseId}`);
const data = await res.json();
if (res.status === 200) {
return { courseId, courseData: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
import { stores } from '@sapper/app';
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import UserCard from '../../../components/UserCard/index.svelte';
import { stores } from "@sapper/app";
import CourseContainer from "../../../components/CourseContainer/index.svelte";
import PageNav from "../../../components/PageNav/index.svelte";
import UserCard from "../../../components/UserCard/index.svelte";
export let courseData = {};
const { page } = stores();
const teachers = [
{
name: 'Alexander Pokidin',
title: 'Senior Software Engineer',
avatar: 'https://i.pravatar.cc/150?img=1',
telegramLink: 'https://t.me/seed_of_abraham',
mailLink: 'mailto:[email protected]',
},
{
name: 'Andrey Filatov',
title: 'Fullstack Software Engineer',
avatar: 'https://i.pravatar.cc/150?img=2',
telegramLink: 'https://t.me/seed_of_abraham',
mailLink: 'mailto:[email protected]',
},
{
name: 'Sergey Semko',
title: 'Senior Software Engineer',
avatar: 'https://i.pravatar.cc/150?img=3',
telegramLink: 'https://t.me/seed_of_abraham',
mailLink: 'mailto:[email protected]',
},
{
name: 'Natalia Fedii',
title: 'Project Manager',
avatar: 'https://i.pravatar.cc/150?img=4',
telegramLink: 'https://t.me/seed_of_abraham',
mailLink: 'mailto:[email protected]',
},
];
const teachers = courseData.people;
const students = [...teachers, ...teachers, ...teachers];
export let courseId;
</script>
<CourseContainer title="ReactJS" {courseId}>
<CourseContainer {courseData}>
<PageNav title="People" disableSticky={true} />
<div class="m-3">
<h3>
src/routes/courses/[id]/scoreboard.svelte
+13 -6
View File
@@ -1,18 +1,25 @@
<script context="module">
export async function preload({ params }) {
let [courseId, courseNavItem, lessonId] = params.id;
let [courseId] = params.id;
return { courseId, courseNavItem, lessonId };
const res = await this.fetch(`api/course?id=${courseId}`);
const data = await res.json();
if (res.status === 200) {
return { courseId, courseData: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import CourseContainer from "../../../components/CourseContainer/index.svelte";
import PageNav from "../../../components/PageNav/index.svelte";
export let courseId;
export let courseData = {};
</script>
<CourseContainer title="ReactJS" {courseId}>
<CourseContainer {courseData}>
<PageNav title="Scoreboard" />
</CourseContainer>
src/routes/courses/[id]/timetable.svelte
+13 -6
View File
@@ -1,18 +1,25 @@
<script context="module">
export async function preload({ params }) {
let [courseId, courseNavItem, lessonId] = params.id;
let [courseId] = params.id;
return { courseId, courseNavItem, lessonId };
const res = await this.fetch(`api/course?id=${courseId}`);
const data = await res.json();
if (res.status === 200) {
return { courseId, courseData: data };
} else {
this.error(res.status, data.message);
}
}
</script>
<script>
import CourseContainer from '../../../components/CourseContainer/index.svelte';
import PageNav from '../../../components/PageNav/index.svelte';
import CourseContainer from "../../../components/CourseContainer/index.svelte";
import PageNav from "../../../components/PageNav/index.svelte";
export let courseId;
export let courseData = {};
</script>
<CourseContainer title="ReactJS" {courseId}>
<CourseContainer {courseData}>
<PageNav title="Timetable" />
</CourseContainer>