Pass lesson from server into store
This commit is contained in:
Rotimi Best
@@ -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(),
|
||||
},
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
export const ROUTES = {
|
||||
COURSES: "courses",
|
||||
LESSONS: "lessons",
|
||||
};
|
||||
@@ -1,7 +1,4 @@
|
||||
const ROUTES = {
|
||||
COURSES: 'courses',
|
||||
LESSONS: 'lessons',
|
||||
};
|
||||
import { ROUTES } from "./constants";
|
||||
|
||||
export function getNavItemRoute(courseId, routeId) {
|
||||
const path = `/${ROUTES.COURSES}/${courseId}`;
|
||||
|
||||
Reference in New Issue
Block a user