Restructure course routes + list of exercises

src/routes/courses/[...id]/exercises.svelte

@@ -0,0 +1,18 @@
+<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>

src/routes/courses/[...id]/index.svelte

@@ -7,65 +7,12 @@
 </script>
 
 <script>
-  import { stores } from "@sapper/app";
-  import Lecture from "../../../components/Course/components/Lecture/index.svelte";
-  import HomeTask from "../../../components/Course/components/HomeTask.svelte";
   import Overview from "../../../components/Course/index.svelte";
-  import People from "../../../components/Course/components/People.svelte";
-  import Scoreboard from "../../../components/Course/components/Scoreboard.svelte";
-  import TimeTable from "../../../components/Course/components/TimeTable.svelte";
-  import CourseNav from "../../../components/Course/components/CourseNav.svelte";
-  import Apps from "../../../components/Apps/index.svelte";
+  import CourseContainer from "../../../components/CourseContainer/index.svelte";
 
   export let courseId;
-  export let courseNavItem;
-  export let lectureId;
-
-  const { page } = stores();
-  let tab = "";
-  let mode = "";
-
-  $: tab = $page.query.tab || "lectures";
 </script>
 
-<svelte:head>
-  <title>ReactJS</title>
-</svelte:head>
-
-<div class="root">
-  <CourseNav {courseId} />
-  <div class="rightBar">
-    {#if !courseNavItem}
-      <Overview />
-    {:else if courseNavItem === "score"}
-      <Scoreboard />
-    {:else if courseNavItem === "timetable"}
-      <TimeTable />
-    {:else if courseNavItem === "hometasks"}
-      <HomeTask />
-    {:else if courseNavItem === "lecture"}
-      <Lecture
-        path={$page.path}
-        {tab}
-        {lectureId}
-        showLectureHome={!lectureId}
-      />
-    {:else if courseNavItem === "people"}
-      <People />
-    {/if}
-  </div>
-
-  <Apps />
-</div>
-
-<style>
-  .root {
-    display: flex;
-    border-right: 1px solid var(--border-color);
-    width: 100%;
-  }
-
-  .rightBar {
-    flex-grow: 1;
-  }
-</style>
+<CourseContainer title="ReactJS" {courseId}>
+  <Overview />
+</CourseContainer>

src/routes/courses/[...id]/lecture/[...id]/index.svelte

@@ -0,0 +1,27 @@
+<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>

src/routes/courses/[...id]/lecture/index.svelte

@@ -0,0 +1,166 @@
+<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 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,
+    handleAddLesson,
+  } from "../../../../components/Course/components/Lecture/store/lessons";
+
+  export let courseId;
+
+  let lectureEditing;
+  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);
+
+    return `${ye}-${mo}-${da}`;
+  }
+
+  function addLesson() {
+    handleAddLesson();
+    setTimeout(() => {
+      lectureEditing = $lessons.length - 1;
+      if (ref) {
+        ref.scrollIntoView({ block: "end", behavior: "smooth" });
+      }
+    }, 100);
+  }
+</script>
+
+<CourseContainer title="ReactJS" {courseId}>
+  <PageNav title="Lectures">
+    <div slot="widget">
+      <PrimaryButton label="Add" onClick={addLesson} />
+    </div>
+  </PageNav>
+
+  <PageBody width="w-11/12 m-auto">
+    <div class="w-4/5 m-auto">
+      {#each $lessons as lecture, 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"
+        >
+          <!-- Complete or Not complete icon -->
+          <div class="absolute -left-6 -top-6 success">
+            <IconButton
+              onClick={() => (lecture.isComplete = !lecture.isComplete)}
+            >
+              {#if lecture.isComplete}
+                <CheckmarkFilled24 class="carbon-icon" />
+              {:else}
+                <span class="text-2xl">🔒</span>
+              {/if}
+            </IconButton>
+          </div>
+
+          <!-- Edit/Save -->
+          <div class="absolute top-2 right-0">
+            {#if lectureEditing === index}
+              <IconButton onClick={() => (lectureEditing = null)}>
+                <Save24 class="carbon-icon" />
+              </IconButton>
+            {:else}
+              <IconButton onClick={() => (lectureEditing = index)}>
+                <Edit24 class="carbon-icon" />
+              </IconButton>
+            {/if}
+          </div>
+
+          <div class="">
+            <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} />
+            {:else}
+              <h3 class="text-3xl font-semibold m-0 flex items-center">
+                <a href={lecture.to} class="hover:underline text-black">
+                  {lecture.title}
+                </a>
+              </h3>
+            {/if}
+            <div class="flex items-center mb-2">
+              <div class="flex items-center mr-2">
+                {lecture.resources
+                  .map((r) => `${r.value} ${r.label}`)
+                  .join(", ")}
+              </div>
+            </div>
+
+            <div class="flex items-center justify-between mt-3 w-full">
+              {#if lectureEditing === index}
+                <Select
+                  bind:value={lecture.lecturer.name}
+                  options={$lecturers}
+                  valueKey="text"
+                />
+              {:else}
+                <a
+                  href="courses/1/people"
+                  class="flex items-center hover:underline text-black"
+                >
+                  <img
+                    alt="Placeholder"
+                    class="block rounded-full"
+                    width="24"
+                    height="20"
+                    src={lecture.lecturer.avatar}
+                  />
+                  <p class="ml-2 text-sm font-bold">{lecture.lecturer.name}</p>
+                </a>
+              {/if}
+
+              <div class="flex items-center">
+                {#if lectureEditing === index}
+                  <input
+                    type="date"
+                    name="lecture-date-picker"
+                    class="p-2 rounded-md w-40"
+                    value={formatDate(lecture.date)}
+                    on:input={(e) => (lecture.date = e.target.value)}
+                  />
+                {:else}
+                  <Time24 class="carbon-icon" />
+                  <p class="text-md font-semibold ml-2">
+                    {new Date(lecture.date).toDateString()}
+                  </p>
+                {/if}
+              </div>
+            </div>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </PageBody>
+</CourseContainer>
+
+<style>
+  .group {
+    min-height: 170px;
+  }
+</style>

src/routes/courses/[...id]/people.svelte

@@ -0,0 +1,88 @@
+<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>

src/routes/courses/[...id]/scoreboard.svelte

@@ -0,0 +1,18 @@
+<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>

src/routes/courses/[...id]/timetable.svelte

@@ -0,0 +1,18 @@
+<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>