Restructure app for scale and easy access of routeId
This commit is contained in:
Ibitoye Rotimi Best
@@ -1,66 +0,0 @@
|
||||
<script>
|
||||
import { Modal } from "carbon-components-svelte";
|
||||
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
|
||||
import PageBody from "../../../../PageBody/index.svelte";
|
||||
import TextField from "../../../../Form/TextField.svelte";
|
||||
|
||||
export let path;
|
||||
|
||||
let exercises = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Practice Exercise",
|
||||
link: `${path}&exerciseId=1`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Home task",
|
||||
link: `${path}&exerciseId=2`,
|
||||
},
|
||||
];
|
||||
let exerciseEditing;
|
||||
let open = false;
|
||||
let newExercise = {
|
||||
id: 1,
|
||||
title: "",
|
||||
link: "",
|
||||
};
|
||||
|
||||
function handleAddExercise() {
|
||||
open = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal
|
||||
size="sm"
|
||||
bind:open
|
||||
modalHeading="Create database"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--secondary
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<p>Create a new Cloudant database in the US South region.</p>
|
||||
</Modal>
|
||||
|
||||
<PageBody width="w-11/12 m-auto">
|
||||
<slot:fragment slot="header">
|
||||
<PrimaryButton className="mr-2" label="Add" onClick={handleAddExercise} />
|
||||
</slot:fragment>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
{#each exercises as exercise, index}
|
||||
<a class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4" href={exercise.link}>
|
||||
{#if exerciseEditing === index}
|
||||
<TextField bind:value={exercise.title} autofocus={true} />
|
||||
{:else}
|
||||
<h3 class="text-xl">{exercise.title}</h3>
|
||||
{/if}
|
||||
|
||||
<p class="mt-4 text-sm">Created Jul 3, 2021</p>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</PageBody>
|
||||
@@ -1,13 +0,0 @@
|
||||
<script>
|
||||
import List from "./List.svelte";
|
||||
import Exercise from "./Exercise.svelte";
|
||||
|
||||
export let exerciseId;
|
||||
export let path;
|
||||
</script>
|
||||
|
||||
{#if exerciseId}
|
||||
<Exercise {exerciseId} />
|
||||
{:else}
|
||||
<List {path} />
|
||||
{/if}
|
||||
@@ -1,187 +0,0 @@
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
export const lessons = writable([
|
||||
{
|
||||
title: "Вступительное слово. Софт скилы",
|
||||
to: "/courses/1/lecture/1",
|
||||
lecturer: {
|
||||
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/lecture/2",
|
||||
lecturer: {
|
||||
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/lecture/3",
|
||||
lecturer: {
|
||||
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/lecture/4",
|
||||
lecturer: {
|
||||
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/lecture/5",
|
||||
lecturer: {
|
||||
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 lecturers = writable([
|
||||
{
|
||||
id: 1,
|
||||
text: "Sergey Semko",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: "Jonathan Nelson",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: "Sasha Pokidin",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
text: "Natasha Rudenko",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
text: "Yulia Marushko",
|
||||
},
|
||||
]);
|
||||
|
||||
|
||||
export function handleAddLesson() {
|
||||
const resources = [
|
||||
{
|
||||
label: "lesson",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "quiz",
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: "home task",
|
||||
value: 0,
|
||||
},
|
||||
];
|
||||
|
||||
lessons.update(_lessons => {
|
||||
return [
|
||||
..._lessons,
|
||||
{
|
||||
title: 'Untitled lesson',
|
||||
to: "/courses/1/lecture/" + (_lessons.length + 1),
|
||||
resources,
|
||||
lecturer: {
|
||||
userId: 1,
|
||||
avatar: "https://picsum.photos/32/32/?random",
|
||||
name: "",
|
||||
},
|
||||
date: new Date()
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
+10
-10
@@ -1,13 +1,13 @@
|
||||
<script>
|
||||
import { handleAddQuestion } from "./store/index";
|
||||
import PrimaryButton from "../../../../PrimaryButton/index.svelte";
|
||||
import PageBody from "../../../../PageBody/index.svelte";
|
||||
import ViewMode from "./ViewMode.svelte";
|
||||
import EditMode from "./EditMode.svelte";
|
||||
import MODES from "../../../../../utils/constants/mode.js";
|
||||
import { VARIANTS } from "../../../../PrimaryButton/constants";
|
||||
import { handleAddQuestion } from './store/index';
|
||||
import PrimaryButton from '../../../../PrimaryButton/index.svelte';
|
||||
import PageBody from '../../../../PageBody/index.svelte';
|
||||
import ViewMode from './ViewMode.svelte';
|
||||
import EditMode from './EditMode.svelte';
|
||||
import MODES from '../../../../../utils/constants/mode.js';
|
||||
import { VARIANTS } from '../../../../PrimaryButton/constants';
|
||||
|
||||
export let exerciseId;
|
||||
// export let exerciseId;
|
||||
|
||||
let mode = MODES.view;
|
||||
let preview = false;
|
||||
@@ -24,13 +24,13 @@
|
||||
<PrimaryButton
|
||||
className="mr-2"
|
||||
variant={VARIANTS.OUTLINED}
|
||||
label={mode === MODES.edit ? "Save" : "Edit"}
|
||||
label={mode === MODES.edit ? 'Save' : 'Edit'}
|
||||
onClick={handleMode}
|
||||
/>
|
||||
{#if mode === MODES.edit || preview}
|
||||
<PrimaryButton
|
||||
variant={VARIANTS.OUTLINED}
|
||||
label={preview ? "Edit" : "Preview"}
|
||||
label={preview ? 'Edit' : 'Preview'}
|
||||
onClick={() => (preview = !preview)}
|
||||
/>
|
||||
{/if}
|
||||
@@ -0,0 +1,92 @@
|
||||
<script>
|
||||
import { Modal } from 'carbon-components-svelte';
|
||||
import PrimaryButton from '../../../../PrimaryButton/index.svelte';
|
||||
import PageBody from '../../../../PageBody/index.svelte';
|
||||
import TextField from '../../../../Form/TextField.svelte';
|
||||
import Exercise from '../Exercise/index.svelte';
|
||||
|
||||
export let path;
|
||||
export let exerciseId;
|
||||
|
||||
let exercises = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Practice Exercise',
|
||||
link: `${path}/1`,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Home task',
|
||||
link: `${path}/2`,
|
||||
},
|
||||
];
|
||||
let open = false;
|
||||
let newExercise = {
|
||||
id: 1,
|
||||
title: '',
|
||||
link: '',
|
||||
};
|
||||
|
||||
function handleAddExercise() {
|
||||
exercises = [
|
||||
...exercises,
|
||||
{
|
||||
...newExercise,
|
||||
link: `${path}/${exercises.length + 1}`,
|
||||
},
|
||||
];
|
||||
|
||||
handleCancelAddExercise();
|
||||
}
|
||||
|
||||
function handleCancelAddExercise() {
|
||||
open = false;
|
||||
newExercise = {
|
||||
id: exercises.length + 1,
|
||||
title: '',
|
||||
link: '',
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if exerciseId}
|
||||
<Exercise {exerciseId} />
|
||||
{:else}
|
||||
<Modal
|
||||
size="xs"
|
||||
bind:open
|
||||
modalHeading="Create an Exercise"
|
||||
primaryButtonText="Confirm"
|
||||
secondaryButtonText="Cancel"
|
||||
on:click:button--primary={handleAddExercise}
|
||||
on:click:button--secondary={handleCancelAddExercise}
|
||||
on:open
|
||||
on:close
|
||||
on:submit
|
||||
>
|
||||
<TextField
|
||||
bind:value={newExercise.title}
|
||||
autofocus={true}
|
||||
placeholder="Exercise name"
|
||||
/>
|
||||
</Modal>
|
||||
|
||||
<PageBody width="w-11/12 m-auto">
|
||||
<slot:fragment slot="header">
|
||||
<PrimaryButton
|
||||
className="mr-2"
|
||||
label="Add"
|
||||
onClick={() => (open = !open)}
|
||||
/>
|
||||
</slot:fragment>
|
||||
|
||||
<div class="flex flex-wrap">
|
||||
{#each exercises as exercise, index}
|
||||
<a class="w-52 bg-gray-100 px-4 py-7 mr-4 mb-4" href={exercise.link}>
|
||||
<h3 class="text-xl">{exercise.title}</h3>
|
||||
<p class="mt-4 text-sm">Created Jul 3, 2021</p>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</PageBody>
|
||||
{/if}
|
||||
+10
-10
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import PageNav from "../../../PageNav/index.svelte";
|
||||
import Exercises from "./Exercises/index.svelte";
|
||||
import Readme from "./Readme/index.svelte";
|
||||
import PageNav from '../../../PageNav/index.svelte';
|
||||
import Exercises from './Exercises/index.svelte';
|
||||
import Readme from './Readme/index.svelte';
|
||||
|
||||
export let path;
|
||||
export let tab;
|
||||
@@ -12,22 +12,22 @@
|
||||
<PageNav
|
||||
navItems={[
|
||||
{
|
||||
label: "README.md",
|
||||
isActive: tab === "lectures",
|
||||
href: `${path}?tab=lectures`,
|
||||
label: 'README.md',
|
||||
isActive: tab === 'lessons',
|
||||
href: `${path}?tab=lessons`,
|
||||
},
|
||||
{
|
||||
label: "Exercises",
|
||||
isActive: tab === "exercises",
|
||||
label: 'Exercises',
|
||||
isActive: tab === 'exercises',
|
||||
href: `${path}?tab=exercises`,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
<div class="course relative">
|
||||
{#if tab === "lectures"}
|
||||
{#if tab === 'lessons'}
|
||||
<Readme />
|
||||
{:else if tab === "exercises"}
|
||||
{:else if tab === 'exercises'}
|
||||
<Exercises {exerciseId} path={`${path}?tab=exercises`} />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,186 @@
|
||||
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 tutors = writable([
|
||||
{
|
||||
id: 1,
|
||||
text: 'Sergey Semko',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
text: 'Jonathan Nelson',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
text: 'Sasha Pokidin',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
text: 'Natasha Rudenko',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
text: 'Yulia Marushko',
|
||||
},
|
||||
]);
|
||||
|
||||
export function handleAddLesson() {
|
||||
const resources = [
|
||||
{
|
||||
label: 'lesson',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: 'quiz',
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
label: 'home task',
|
||||
value: 0,
|
||||
},
|
||||
];
|
||||
|
||||
lessons.update((_lessons) => {
|
||||
return [
|
||||
..._lessons,
|
||||
{
|
||||
title: 'Untitled lesson',
|
||||
to: '/courses/1/lessons/' + (_lessons.length + 1),
|
||||
resources,
|
||||
tutor: {
|
||||
userId: 1,
|
||||
avatar: 'https://picsum.photos/32/32/?random',
|
||||
name: '',
|
||||
},
|
||||
date: new Date(),
|
||||
},
|
||||
];
|
||||
});
|
||||
}
|
||||
@@ -1,22 +1,22 @@
|
||||
<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,
|
||||
getLectureRoute,
|
||||
getLessonsRoute,
|
||||
getLectureNo,
|
||||
} from "../../function";
|
||||
} from '../../function';
|
||||
|
||||
import { lessons } from "../Lecture/store/lessons";
|
||||
import { lessons } from '../Lesson/store/lessons';
|
||||
|
||||
// export let lectureId;
|
||||
// export let lessonId;
|
||||
export let courseId;
|
||||
|
||||
let show = true;
|
||||
@@ -31,43 +31,43 @@
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
label: "Overview",
|
||||
label: 'Overview',
|
||||
to: getNavItemRoute(courseId),
|
||||
hideSortIcon: true,
|
||||
},
|
||||
{
|
||||
label: "Lectures",
|
||||
to: getLectureRoute(courseId),
|
||||
label: 'Lessons',
|
||||
to: getLessonsRoute(courseId),
|
||||
hideSortIcon: false,
|
||||
isLecture: true,
|
||||
},
|
||||
{
|
||||
label: "Exercises",
|
||||
to: getNavItemRoute(courseId, "exercises"),
|
||||
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;
|
||||
}
|
||||
@@ -116,9 +116,9 @@
|
||||
value="toggle"
|
||||
onClick={() => (show = !show)}
|
||||
toolTipProps={{
|
||||
title: "Toggle sidebar",
|
||||
hotkeys: ["B"],
|
||||
direction: "right",
|
||||
title: 'Toggle sidebar',
|
||||
hotkeys: ['B'],
|
||||
direction: 'right',
|
||||
}}
|
||||
>
|
||||
{#if show}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
const ROUTES = {
|
||||
COURSES: "courses",
|
||||
LECTURES: "lecture",
|
||||
COURSES: 'courses',
|
||||
LESSONS: 'lessons',
|
||||
};
|
||||
|
||||
export function getNavItemRoute(courseId, routeId) {
|
||||
@@ -13,14 +13,14 @@ export function getNavItemRoute(courseId, routeId) {
|
||||
return `${path}/${routeId}`;
|
||||
}
|
||||
|
||||
export function getLectureRoute(courseId, lectureId) {
|
||||
const path = getNavItemRoute(courseId, ROUTES.LECTURES);
|
||||
export function getLessonsRoute(courseId, lessonId) {
|
||||
const path = getNavItemRoute(courseId, ROUTES.LESSONS);
|
||||
|
||||
if (!lectureId) {
|
||||
if (!lessonId) {
|
||||
return path;
|
||||
}
|
||||
|
||||
return `${path}/${lectureId}`;
|
||||
return `${path}/${lessonId}`;
|
||||
}
|
||||
|
||||
export function getLectureNo(index) {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<script>
|
||||
import Edit24 from "carbon-icons-svelte/lib/Edit24";
|
||||
import Save24 from "carbon-icons-svelte/lib/Save24";
|
||||
import Input from "./Input.svelte";
|
||||
import Edit24 from 'carbon-icons-svelte/lib/Edit24';
|
||||
import Save24 from 'carbon-icons-svelte/lib/Save24';
|
||||
import Input from './Input.svelte';
|
||||
|
||||
export let item, current;
|
||||
let editing = false;
|
||||
@@ -11,6 +11,35 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="rowItem">
|
||||
<div class="rowItemHeader">
|
||||
<Input className="small" value={item.lessonType} {editing} />
|
||||
<Input className="small alignRight" value={item.lessonHall} {editing} />
|
||||
</div>
|
||||
|
||||
<div class="rowItemHeader">
|
||||
<Input
|
||||
className={`large ${current && 'current'}`}
|
||||
value={item.subject}
|
||||
{editing}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="rowItemHeader">
|
||||
<div class="rowItemFooter" style="width: 70%">
|
||||
<Input className="small" value={item.tutorOne} {editing} />
|
||||
<Input className="small" value={item.tutorTwo} {editing} />
|
||||
</div>
|
||||
<button on:click={toggle}>
|
||||
{#if editing}
|
||||
<Save24 class="icon" />
|
||||
{:else}
|
||||
<Edit24 class="icon" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.rowItem {
|
||||
border-right: 1px solid;
|
||||
@@ -46,31 +75,3 @@
|
||||
fill: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="rowItem">
|
||||
<div class="rowItemHeader">
|
||||
<Input className="small" value={item.lessonType} {editing} />
|
||||
<Input className="small alignRight" value={item.lectureHall} {editing} />
|
||||
</div>
|
||||
|
||||
<div class="rowItemHeader">
|
||||
<Input
|
||||
className={`large ${current && 'current'}`}
|
||||
value={item.subject}
|
||||
{editing} />
|
||||
</div>
|
||||
|
||||
<div class="rowItemHeader">
|
||||
<div class="rowItemFooter" style="width: 70%">
|
||||
<Input className="small" value={item.lecturerOne} {editing} />
|
||||
<Input className="small" value={item.lecturerTwo} {editing} />
|
||||
</div>
|
||||
<button on:click={toggle}>
|
||||
{#if editing}
|
||||
<Save24 class="icon" />
|
||||
{:else}
|
||||
<Edit24 class="icon" />
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,39 @@
|
||||
export default [
|
||||
{
|
||||
{
|
||||
lessonType: '1-9 leture',
|
||||
lessonHall: '402F',
|
||||
subject: 'Mathematics',
|
||||
tutorOne: 'Peter Pitrovich',
|
||||
tutorTwo: 'Pragma James',
|
||||
},
|
||||
{
|
||||
lessonType: '1-9 Pra.',
|
||||
lessonHall: '202F',
|
||||
subject: 'Physics',
|
||||
tutorOne: 'Anicimov',
|
||||
tutorTwo: '',
|
||||
},
|
||||
{
|
||||
lessonType: '1-9 leture',
|
||||
lessonHall: '301F',
|
||||
subject: 'Algorithm',
|
||||
tutorOne: 'Babilunga Sharon',
|
||||
tutorTwo: 'Alex Jonard',
|
||||
},
|
||||
{
|
||||
lessonType: '1-9 leture',
|
||||
lessonHall: '222F',
|
||||
subject: 'Computer Aided system',
|
||||
tutorOne: 'Godovichecko Heroku',
|
||||
tutorTwo: '',
|
||||
},
|
||||
...Array(4 * 4)
|
||||
.fill(0)
|
||||
.map((a, i) => ({
|
||||
lessonType: '1-9 leture',
|
||||
lectureHall: '402F',
|
||||
subject: 'Mathematics',
|
||||
lecturerOne: 'Peter Pitrovich',
|
||||
lecturerTwo: 'Pragma James',
|
||||
},
|
||||
{
|
||||
lessonType: '1-9 Pra.',
|
||||
lectureHall: '202F',
|
||||
subject: 'Physics',
|
||||
lecturerOne: 'Anicimov',
|
||||
lecturerTwo: '',
|
||||
},
|
||||
{
|
||||
lessonType: '1-9 leture',
|
||||
lectureHall: '301F',
|
||||
subject: 'Algorithm',
|
||||
lecturerOne: 'Babilunga Sharon',
|
||||
lecturerTwo: 'Alex Jonard',
|
||||
},
|
||||
{
|
||||
lessonType: '1-9 leture',
|
||||
lectureHall: '222F',
|
||||
lessonHall: '222F',
|
||||
subject: 'Computer Aided system',
|
||||
lecturerOne: 'Godovichecko Heroku',
|
||||
lecturerTwo: '',
|
||||
|
||||
},
|
||||
...Array(4 * 4).fill(0).map((a, i) => ({
|
||||
lessonType: '1-9 leture',
|
||||
lectureHall: '222F',
|
||||
subject: 'Computer Aided system',
|
||||
lecturerOne: 'Godovichecko Heroku',
|
||||
lecturerTwo: '',
|
||||
}))
|
||||
];
|
||||
tutorOne: 'Godovichecko Heroku',
|
||||
tutorTwo: '',
|
||||
})),
|
||||
];
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script>
|
||||
import { stores } from "@sapper/app";
|
||||
import Tailwindcss from "../components/Tailwindcss.svelte";
|
||||
// import Nav from "../components/Nav.svelte";
|
||||
import LeftNav from "../components/LeftNav/index.svelte";
|
||||
@@ -7,6 +8,8 @@
|
||||
import Apps from "../components/Apps/index.svelte";
|
||||
|
||||
export let segment;
|
||||
|
||||
let { page } = stores();
|
||||
</script>
|
||||
|
||||
<Tailwindcss />
|
||||
@@ -16,7 +19,9 @@
|
||||
<main class="flex">
|
||||
<LeftNav {segment} />
|
||||
<slot />
|
||||
<Apps />
|
||||
{#if $page.path.includes("courses")}
|
||||
<Apps />
|
||||
{/if}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
const lessons = [{}];
|
||||
|
||||
const lookup = new Map();
|
||||
lessons.forEach((lesson) => {
|
||||
lookup.set(`${lesson.id}`, JSON.stringify(lesson));
|
||||
});
|
||||
|
||||
export function getLessons() {
|
||||
return lessons;
|
||||
}
|
||||
|
||||
export function getLecture(id) {
|
||||
return lookup.get(id);
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import { getLecture } from './_lessons';
|
||||
|
||||
function writeJsonHead(res, statusCode) {
|
||||
res.writeHead(statusCode, {
|
||||
'Content-Type': 'application/json',
|
||||
});
|
||||
}
|
||||
|
||||
export function get(req, res, next) {
|
||||
// the `id` parameter is available because
|
||||
// this file is called [id].json.js
|
||||
const { id } = req.params;
|
||||
|
||||
if (lookup.has(id)) {
|
||||
writeJsonHead(res, 200);
|
||||
|
||||
res.end(lookup.get(id));
|
||||
} else {
|
||||
writeJsonHead(res, 404);
|
||||
|
||||
res.end(
|
||||
JSON.stringify({
|
||||
message: `Not found`,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lectureId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lectureId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import PageNav from "../../../components/PageNav/index.svelte";
|
||||
import CourseContainer from "../../../components/CourseContainer/index.svelte";
|
||||
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="Exercises" />
|
||||
</CourseContainer>
|
||||
@@ -1,18 +0,0 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lectureId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lectureId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Overview from "../../../components/Course/index.svelte";
|
||||
import CourseContainer from "../../../components/CourseContainer/index.svelte";
|
||||
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<Overview />
|
||||
</CourseContainer>
|
||||
@@ -1,27 +0,0 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lectureId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lectureId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { stores } from "@sapper/app";
|
||||
import Lecture from "../../../../../components/Course/components/Lecture/index.svelte";
|
||||
import CourseContainer from "../../../../../components/CourseContainer/index.svelte";
|
||||
|
||||
export let courseId;
|
||||
export let lectureId;
|
||||
|
||||
const { page } = stores();
|
||||
let tab = "";
|
||||
let exerciseId = "";
|
||||
|
||||
$: tab = $page.query.tab || "lectures";
|
||||
$: exerciseId = $page.query.exerciseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<Lecture path={$page.path} {tab} {exerciseId} {lectureId} />
|
||||
</CourseContainer>
|
||||
@@ -1,88 +0,0 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lectureId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lectureId };
|
||||
}
|
||||
</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";
|
||||
|
||||
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 students = [...teachers, ...teachers, ...teachers];
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="People" disableSticky={true} />
|
||||
<div class="m-3">
|
||||
<h3>
|
||||
<a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
|
||||
</h3>
|
||||
<div class="flex flex-wrap">
|
||||
{#each teachers as teacher}
|
||||
<UserCard
|
||||
name={teacher.name}
|
||||
avatarUrl={teacher.avatar}
|
||||
title={teacher.title}
|
||||
telegramLink={teacher.telegramLink}
|
||||
mailLink={teacher.mailLink}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-3">
|
||||
<h3>
|
||||
<a id="students" name="students" href="{$page.path}#students">Students</a>
|
||||
</h3>
|
||||
<div class="flex flex-wrap">
|
||||
{#each students as student}
|
||||
<UserCard
|
||||
name={student.name}
|
||||
avatarUrl={student.avatar}
|
||||
title={student.title}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</CourseContainer>
|
||||
@@ -1,18 +0,0 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lectureId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lectureId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import CourseContainer from "../../../components/CourseContainer/index.svelte";
|
||||
import PageNav from "../../../components/PageNav/index.svelte";
|
||||
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="Scoreboard" />
|
||||
</CourseContainer>
|
||||
@@ -1,18 +0,0 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lectureId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lectureId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import CourseContainer from "../../../components/CourseContainer/index.svelte";
|
||||
import PageNav from "../../../components/PageNav/index.svelte";
|
||||
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="Timetable" />
|
||||
</CourseContainer>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lessonId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lessonId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import PageNav from '../../../components/PageNav/index.svelte';
|
||||
import CourseContainer from '../../../components/CourseContainer/index.svelte';
|
||||
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="All Exercises" />
|
||||
</CourseContainer>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lessonId] = params.id;
|
||||
console.log(`course id`, params);
|
||||
return { courseId, courseNavItem, lessonId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import Overview from '../../../components/Course/index.svelte';
|
||||
import CourseContainer from '../../../components/CourseContainer/index.svelte';
|
||||
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<Overview />
|
||||
</CourseContainer>
|
||||
@@ -0,0 +1,55 @@
|
||||
<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>
|
||||
+44
-45
@@ -1,41 +1,40 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lectureId] = params.id;
|
||||
let [courseId, courseNavItem, lessonId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lectureId };
|
||||
return { courseId, courseNavItem, lessonId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import { stores } from "@sapper/app";
|
||||
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,
|
||||
lecturers,
|
||||
tutors,
|
||||
handleAddLesson,
|
||||
} from "../../../../components/Course/components/Lecture/store/lessons";
|
||||
} from '../../../../components/Course/components/Lesson/store/lessons';
|
||||
|
||||
export let courseId;
|
||||
|
||||
let lectureEditing;
|
||||
let lessonEditing;
|
||||
let ref;
|
||||
|
||||
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,16 +42,16 @@
|
||||
function addLesson() {
|
||||
handleAddLesson();
|
||||
setTimeout(() => {
|
||||
lectureEditing = $lessons.length - 1;
|
||||
lessonEditing = $lessons.length - 1;
|
||||
if (ref) {
|
||||
ref.scrollIntoView({ block: "end", behavior: "smooth" });
|
||||
ref.scrollIntoView({ block: 'end', behavior: 'smooth' });
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="Lectures">
|
||||
<PageNav title="Lessons">
|
||||
<div slot="widget">
|
||||
<PrimaryButton label="Add" onClick={addLesson} />
|
||||
</div>
|
||||
@@ -60,7 +59,7 @@
|
||||
|
||||
<PageBody width="w-11/12 m-auto">
|
||||
<div class="w-4/5 m-auto">
|
||||
{#each $lessons as lecture, index}
|
||||
{#each $lessons as lesson, index}
|
||||
<div
|
||||
bind:this={ref}
|
||||
class="group relative m-auto rounded-md border-2 border-gray-100 py-3 px-5 mr-4 mb-4 flex items-center hover:shadow-2xl shadow-md transition delay-150 duration-300 ease-in-out"
|
||||
@@ -68,9 +67,9 @@
|
||||
<!-- Complete or Not complete icon -->
|
||||
<div class="absolute -left-6 -top-6 success">
|
||||
<IconButton
|
||||
onClick={() => (lecture.isComplete = !lecture.isComplete)}
|
||||
onClick={() => (lesson.isComplete = !lesson.isComplete)}
|
||||
>
|
||||
{#if lecture.isComplete}
|
||||
{#if lesson.isComplete}
|
||||
<CheckmarkFilled24 class="carbon-icon" />
|
||||
{:else}
|
||||
<span class="text-2xl">🔒</span>
|
||||
@@ -80,12 +79,12 @@
|
||||
|
||||
<!-- Edit/Save -->
|
||||
<div class="absolute top-2 right-0">
|
||||
{#if lectureEditing === index}
|
||||
<IconButton onClick={() => (lectureEditing = null)}>
|
||||
{#if lessonEditing === index}
|
||||
<IconButton onClick={() => (lessonEditing = null)}>
|
||||
<Save24 class="carbon-icon" />
|
||||
</IconButton>
|
||||
{:else}
|
||||
<IconButton onClick={() => (lectureEditing = index)}>
|
||||
<IconButton onClick={() => (lessonEditing = index)}>
|
||||
<Edit24 class="carbon-icon" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
@@ -95,28 +94,28 @@
|
||||
<h3 class="text-3xl font-bold">{index + 1}.</h3>
|
||||
</div>
|
||||
<div class="ml-8 w-4/5">
|
||||
{#if lectureEditing === index}
|
||||
<TextField bind:value={lecture.title} autofocus={true} />
|
||||
{#if lessonEditing === index}
|
||||
<TextField bind:value={lesson.title} autofocus={true} />
|
||||
{:else}
|
||||
<h3 class="text-3xl font-semibold m-0 flex items-center">
|
||||
<a href={lecture.to} class="hover:underline text-black">
|
||||
{lecture.title}
|
||||
<a href={lesson.to} class="hover:underline text-black">
|
||||
{lesson.title}
|
||||
</a>
|
||||
</h3>
|
||||
{/if}
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="flex items-center mr-2">
|
||||
{lecture.resources
|
||||
{lesson.resources
|
||||
.map((r) => `${r.value} ${r.label}`)
|
||||
.join(", ")}
|
||||
.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mt-3 w-full">
|
||||
{#if lectureEditing === index}
|
||||
{#if lessonEditing === index}
|
||||
<Select
|
||||
bind:value={lecture.lecturer.name}
|
||||
options={$lecturers}
|
||||
bind:value={lesson.tutor.name}
|
||||
options={$tutors}
|
||||
valueKey="text"
|
||||
/>
|
||||
{:else}
|
||||
@@ -129,25 +128,25 @@
|
||||
class="block rounded-full"
|
||||
width="24"
|
||||
height="20"
|
||||
src={lecture.lecturer.avatar}
|
||||
src={lesson.tutor.avatar}
|
||||
/>
|
||||
<p class="ml-2 text-sm font-bold">{lecture.lecturer.name}</p>
|
||||
<p class="ml-2 text-sm font-bold">{lesson.tutor.name}</p>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
<div class="flex items-center">
|
||||
{#if lectureEditing === index}
|
||||
{#if lessonEditing === index}
|
||||
<input
|
||||
type="date"
|
||||
name="lecture-date-picker"
|
||||
name="lesson-date-picker"
|
||||
class="p-2 rounded-md w-40"
|
||||
value={formatDate(lecture.date)}
|
||||
on:input={(e) => (lecture.date = e.target.value)}
|
||||
value={formatDate(lesson.date)}
|
||||
on:input={(e) => (lesson.date = e.target.value)}
|
||||
/>
|
||||
{:else}
|
||||
<Time24 class="carbon-icon" />
|
||||
<p class="text-md font-semibold ml-2">
|
||||
{new Date(lecture.date).toDateString()}
|
||||
{new Date(lesson.date).toDateString()}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -0,0 +1,88 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lessonId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lessonId };
|
||||
}
|
||||
</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';
|
||||
|
||||
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 students = [...teachers, ...teachers, ...teachers];
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="People" disableSticky={true} />
|
||||
<div class="m-3">
|
||||
<h3>
|
||||
<a id="teachers" name="teachers" href="{$page.path}#teachers">Teachers</a>
|
||||
</h3>
|
||||
<div class="flex flex-wrap">
|
||||
{#each teachers as teacher}
|
||||
<UserCard
|
||||
name={teacher.name}
|
||||
avatarUrl={teacher.avatar}
|
||||
title={teacher.title}
|
||||
telegramLink={teacher.telegramLink}
|
||||
mailLink={teacher.mailLink}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="m-3">
|
||||
<h3>
|
||||
<a id="students" name="students" href="{$page.path}#students">Students</a>
|
||||
</h3>
|
||||
<div class="flex flex-wrap">
|
||||
{#each students as student}
|
||||
<UserCard
|
||||
name={student.name}
|
||||
avatarUrl={student.avatar}
|
||||
title={student.title}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</CourseContainer>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lessonId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lessonId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import CourseContainer from '../../../components/CourseContainer/index.svelte';
|
||||
import PageNav from '../../../components/PageNav/index.svelte';
|
||||
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="Scoreboard" />
|
||||
</CourseContainer>
|
||||
@@ -0,0 +1,18 @@
|
||||
<script context="module">
|
||||
export async function preload({ params }) {
|
||||
let [courseId, courseNavItem, lessonId] = params.id;
|
||||
|
||||
return { courseId, courseNavItem, lessonId };
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import CourseContainer from '../../../components/CourseContainer/index.svelte';
|
||||
import PageNav from '../../../components/PageNav/index.svelte';
|
||||
|
||||
export let courseId;
|
||||
</script>
|
||||
|
||||
<CourseContainer title="ReactJS" {courseId}>
|
||||
<PageNav title="Timetable" />
|
||||
</CourseContainer>
|
||||
Reference in New Issue
Block a user