Reusable page style for lectures

src/components/Course/components/Attendance/index.svelte

@@ -0,0 +1,6 @@
+<script>
+  import PageNav from "../../../../PageNav/index.svelte";
+</script>
+
+<PageNav title="Attendance" />
+All attendance will be here with table

src/components/Course/components/CourseNav.svelte

@@ -2,7 +2,11 @@
   import { stores, goto } from "@sapper/app";
   import Expandable from "../../Expandable/index.svelte";
   import PageNav from "../../PageNav/index.svelte";
+  import { getNavItemRoute, getLectureRoute, getLectureNo } from "../function";
+
   // export let lectureId;
+  export let courseId;
+
   const { page } = stores();
 
   function handleMainGroupClick(href) {
@@ -11,84 +15,92 @@
     };
   }
 
-  const lectures = [
+  const navItems = [
     {
-      title: "Вводный урок. Soft skills",
+      label: "Overview",
-      link: "/courses/1/lecture/1",
+      to: getNavItemRoute(courseId),
+      hideSortIcon: true,
     },
     {
-      title: "Введение в ReactJS",
+      label: "Lectures",
-      link: "/courses/1/lecture/2",
+      to: getLectureRoute(courseId),
+      hideSortIcon: false,
+      items: [
+        {
+          id: 1,
+          title: "Вводный урок. Soft skills",
+          to: getLectureRoute(courseId, 1),
+        },
+        {
+          id: 2,
+          title: "Введение в ReactJS",
+          to: getLectureRoute(courseId, 2),
+        },
+        {
+          id: 3,
+          title: "Компоненты",
+          to: getLectureRoute(courseId, 3),
+        },
+        {
+          id: 4,
+          title: "Состояние компонентов и пропсы",
+          to: getLectureRoute(courseId, 4),
+        },
+        {
+          id: 5,
+          title: "Жизненный цикл",
+          to: getLectureRoute(courseId, 5),
+        },
+      ],
     },
     {
-      title: "Компоненты",
+      label: "People",
-      link: "/courses/1/lecture/3",
+      to: getNavItemRoute(courseId, "people"),
+      hideSortIcon: true,
     },
     {
-      title: "Состояние компонентов и пропсы",
+      label: "Timetable",
-      link: "/courses/1/lecture/4",
+      to: getNavItemRoute(courseId, "timetable"),
+      hideSortIcon: true,
     },
     {
-      title: "Жизненный цикл",
+      label: "Scoreboard",
-      link: "/courses/1/lecture/5",
+      to: getNavItemRoute(courseId, "scoreboard"),
+      hideSortIcon: true,
+    },
+    {
+      label: "Hometasks",
+      to: getNavItemRoute(courseId, "hometasks"),
+      hideSortIcon: true,
     },
   ];
-
-  function getLectureNo(index) {
-    if (index < 9) {
-      return `00${index}`;
-    }
-
-    return `0${index}`;
-  }
 </script>
 
 <div class="root">
   <PageNav title="React.JS" />
   <div>
-    <Expandable
+    {#each navItems as navItem}
-      label="Overview"
+      <Expandable
-      handleClick={handleMainGroupClick("/courses/1")}
+        label={navItem.label}
-      isGroupActive={$page.path === "/courses/1"}
+        handleClick={handleMainGroupClick(navItem.to)}
-      hideSortIcon
+        isGroupActive={$page.path === navItem.to}
-    />
+        hideSortIcon={navItem.hideSortIcon}
-    <Expandable label="Lectures">
+      >
-      {#each lectures as lecture, index}
+        {#if Array.isArray(navItem.items)}
-        <a
+          {#each navItem.items as item, index}
-          class="item {(lecture.link === $page.path ||
+            <a
-            !$page.path.length > 3) &&
+              class="item flex items-center {(item.to === $page.path ||
-            'active'} pl-7 py-2"
+                !$page.path.length > 3) &&
-          href={lecture.link}
+                'active'} pl-7 py-2"
-        >
+              href={item.to}
-          <span class="course-counter"> {getLectureNo(index + 1)} </span>
+            >
-          <span>{lecture.title}</span>
+              <span class="course-counter"> {getLectureNo(index + 1)} </span>
-        </a>
+              <span>{item.title}</span>
-      {/each}
+            </a>
-    </Expandable>
+          {/each}
-    <Expandable
+        {/if}
-      label="People"
+      </Expandable>
-      handleClick={handleMainGroupClick("/courses/1/people")}
+    {/each}
-      isGroupActive={$page.path === "/courses/1/people"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Timetable"
-      handleClick={handleMainGroupClick("/courses/1/timetable")}
-      isGroupActive={$page.path === "/courses/1/timetable"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Scoreboard"
-      handleClick={handleMainGroupClick("/courses/1/score")}
-      isGroupActive={$page.path === "/courses/1/score"}
-      hideSortIcon
-    />
-    <Expandable
-      label="Home tasks"
-      handleClick={handleMainGroupClick("/courses/1/hometasks")}
-      isGroupActive={$page.path === "/courses/1/hometasks"}
-      hideSortIcon
-    />
   </div>
 </div>
 

src/components/Course/components/Lecture/Home/index.svelte

@@ -0,0 +1,8 @@
+<script>
+  import PageNav from "../../../../PageNav/index.svelte";
+  import PageBody from "../../../../PageBody/index.svelte";
+</script>
+
+<PageNav title="Lectures" />
+
+<PageBody>All lecture will be here</PageBody>

src/components/Course/components/Lecture/Homework/EditMode.svelte

@@ -35,6 +35,8 @@
       variant={VARIANTS.OUTLINED}
       onClick={handleAddQuestion}
       label="Add Question"
+      mnb
+      v
     />
   </div>
 

src/components/Course/components/Lecture/Homework/ViewMode.svelte

@@ -1,6 +1,6 @@
 <script>
   import { questionnaire } from "./store/index";
-  import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
+  // import RadioQuestion from "../../../../Question/RadioQuestion/index.svelte";
   import CheckboxQuestion from "../../../../Question/CheckboxQuestion/index.svelte";
   import PrimaryButton from "../../../../PrimaryButton/index.svelte";
 

src/components/Course/components/Lecture/Homework/index.svelte

@@ -1,13 +1,25 @@
 <script>
-  import MODES from "../../../../../utils/constants/mode.js";
+  import PrimaryContainedButton from "../../../../PrimaryContainedButton/index.svelte";
+  import PageBody from "../../../../PageBody/index.svelte";
   import EditMode from "./EditMode.svelte";
   import ViewMode from "./ViewMode.svelte";
+  import MODES from "../../../../../utils/constants/mode.js";
 
-  export let mode = "";
+  let mode = MODES.view;
 </script>
 
-{#if mode === MODES.edit}
+<PageBody>
-  <EditMode />
+  <svelte:fragment slot="header">
-{:else}
+    <h3>Lesson 2 home exercises</h3>
-  <ViewMode />
+    <PrimaryContainedButton
-{/if}
+      label={mode === MODES.edit ? "Save" : "Edit"}
+      handleClick={() => (mode = mode === MODES.edit ? MODES.view : MODES.edit)}
+    />
+  </svelte:fragment>
+
+  {#if mode === MODES.edit}
+    <EditMode />
+  {:else}
+    <ViewMode />
+  {/if}
+</PageBody>

src/components/Course/components/Lecture/index.svelte

@@ -1,64 +1,55 @@
 <script>
+  import { onMount } from "svelte";
   import PageNav from "../../../PageNav/index.svelte";
   import Classwork from "./Classwork.svelte";
   import Homework from "./Homework/index.svelte";
   import Readme from "./Readme/index.svelte";
-  import PrimaryContainedButton from "../../../PrimaryContainedButton/index.svelte";
+  import Home from "./Home/index.svelte";
-
-  import MODES from "../../../../utils/constants/mode.js";
 
   export let path;
   export let tab;
-  export let mode;
+  export let showLectureHome;
 
-  let modeLabel = "Edit";
+  onMount(() => {
-
+    console.log("mounted");
-  $: modeLabel = mode === MODES.edit ? "Save" : "Edit";
+  });
-
-  function handleModeChange(e) {
-    e.preventDefault();
-    mode = mode === MODES.edit ? MODES.view : MODES.edit;
-  }
 </script>
 
-<div>
+{#if showLectureHome}
-  <PageNav
+  <Home />
-    navItems={[
+{:else}
-      {
+  <div>
-        label: "README.md",
+    <PageNav
-        isActive: tab === "lectures",
+      navItems={[
-        href: `${path}?tab=lectures`,
+        {
-      },
+          label: "README.md",
-      {
+          isActive: tab === "lectures",
-        label: "Class work",
+          href: `${path}?tab=lectures`,
-        isActive: tab === "classwork",
+        },
-        href: `${path}?tab=classwork`,
+        {
-      },
+          label: "Class work",
-      {
+          isActive: tab === "classwork",
-        label: "Hometasks",
+          href: `${path}?tab=classwork`,
-        isActive: tab === "hometasks",
+        },
-        href: `${path}?tab=hometasks`,
+        {
-      },
+          label: "Hometasks",
-    ]}
+          isActive: tab === "hometasks",
-  >
+          href: `${path}?tab=hometasks`,
-    <div slot="widget">
+        },
-      <PrimaryContainedButton
+      ]}
-        label={modeLabel}
+    />
-        handleClick={handleModeChange}
-      />
-    </div>
-  </PageNav>
 
-  <div class="course relative">
+    <div class="course relative">
-    {#if tab === "lectures"}
+      {#if tab === "lectures"}
-      <Readme {mode} />
+        <Readme />
-    {:else if tab === "classwork"}
+      {:else if tab === "classwork"}
-      <Classwork />
+        <Classwork />
-    {:else if tab === "hometasks"}
+      {:else if tab === "hometasks"}
-      <Homework {mode} />
+        <Homework />
-    {/if}
+      {/if}
+    </div>
   </div>
-</div>
+{/if}
 
 <style>
   .course {

src/components/Course/components/Lecture/store/index.js

@@ -0,0 +1,2 @@
+import { writable } from "svelte/store";
+

src/components/Course/function.js

@@ -0,0 +1,32 @@
+const ROUTES = {
+  COURSES: "courses",
+  LECTURES: "lecture",
+};
+
+export function getNavItemRoute(courseId, routeId) {
+  const path = `/${ROUTES.COURSES}/${courseId}`;
+
+  if (!routeId) {
+    return path;
+  }
+
+  return `${path}/${routeId}`;
+}
+
+export function getLectureRoute(courseId, lectureId) {
+  const path = getNavItemRoute(courseId, ROUTES.LECTURES);
+
+  if (!lectureId) {
+    return path;
+  }
+
+  return `${path}/${lectureId}`;
+}
+
+export function getLectureNo(index) {
+  if (index < 9) {
+    return `00${index}`;
+  }
+
+  return `0${index}`;
+}

src/components/Expandable/index.svelte

@@ -14,6 +14,27 @@
   }
 </script>
 
+<div>
+  <div
+    class="item relative flex items-center {isGroupActive && 'active'}"
+    role="button"
+    tabindex="0"
+    on:click={onClick}
+  >
+    {#if !hideSortIcon}
+      <CaretSortDown20
+        class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}"
+      />
+    {/if}
+    <span class="font-bold">{label}</span>
+  </div>
+  {#if isExpanded}
+    <div class="flex flex-col">
+      <slot />
+    </div>
+  {/if}
+</div>
+
 <style>
   :global(svg.carbon-icon-sort) {
     position: absolute;
@@ -43,22 +64,3 @@
     background-color: #cae2f9;
   }
 </style>
-
-<div>
-  <div
-    class="item relative flex items-center {isGroupActive && 'active'}"
-    role="button"
-    tabindex="0"
-    on:click={onClick}>
-    {#if !hideSortIcon}
-      <CaretSortDown20
-        class="carbon-icon-sort {isExpanded ? '' : 'carbon-icon-minimize'}" />
-    {/if}
-    <span class="font-bold">{label}</span>
-  </div>
-  {#if isExpanded}
-    <div class="flex flex-col">
-      <slot />
-    </div>
-  {/if}
-</div>

src/components/PageBody/Index.svelte

@@ -0,0 +1,22 @@
+<script>
+  // import
+</script>
+
+<div class="m-3">
+  {#if $$slots.header}
+    <div
+      class="head flex bg-white items-center justify-between sticky right-0 w-full"
+    >
+      <slot name="header" />
+    </div>
+  {/if}
+
+  <slot />
+</div>
+
+<style>
+  .head {
+    top: 63px;
+    z-index: 2;
+  }
+</style>

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

@@ -1,68 +1,66 @@
 <script context="module">
-    export async function preload({ params }) {
+  export async function preload({ params }) {
-      let [slug, courseNavItem, lectureId] = params.id;
+    let [courseId, courseNavItem, lectureId] = params.id;
-  
+
-      return { slug, courseNavItem, lectureId };
+    return { courseId, courseNavItem, lectureId };
-    }
+  }
-  </script>
+</script>
-  
+
-  <script>
+<script>
-    import { stores } from "@sapper/app";
+  import { stores } from "@sapper/app";
-    import Lecture from "../../../components/Course/components/Lecture/index.svelte";
+  import Lecture from "../../../components/Course/components/Lecture/index.svelte";
-    import HomeTask from "../../../components/Course/components/HomeTask.svelte";
+  import HomeTask from "../../../components/Course/components/HomeTask.svelte";
-    import Overview from "../../../components/Course/index.svelte";
+  import Overview from "../../../components/Course/index.svelte";
-    import People from "../../../components/Course/components/People.svelte";
+  import People from "../../../components/Course/components/People.svelte";
-    import Scoreboard from "../../../components/Course/components/Scoreboard.svelte";
+  import Scoreboard from "../../../components/Course/components/Scoreboard.svelte";
-    import TimeTable from "../../../components/Course/components/TimeTable.svelte";
+  import TimeTable from "../../../components/Course/components/TimeTable.svelte";
-    import CourseNav from "../../../components/Course/components/CourseNav.svelte";
+  import CourseNav from "../../../components/Course/components/CourseNav.svelte";
-    import Apps from "../../../components/Apps/index.svelte";
+  import Apps from "../../../components/Apps/index.svelte";
-  
+
-    // export let slug;
+  export let courseId;
-    export let courseNavItem;
+  export let courseNavItem;
-    // export let lectureId;
+  export let lectureId;
-  
+
-    const { page } = stores();
+  const { page } = stores();
-    let tab = "";
+  let tab = "";
-    let mode = "";
+  let mode = "";
-  
+
-    $: tab = $page.query.tab || "lectures";
+  $: tab = $page.query.tab || "lectures";
-    $: mode = $page.query.mode;
+</script>
-  </script>
+
-  
+<svelte:head>
-  <style>
+  <title>ReactJS</title>
-    .root {
+</svelte:head>
-      display: flex;
+
-      border-right: 1px solid var(--border-color);
+<div class="root">
-      width: 100%;
+  <CourseNav {courseId} />
-    }
+  <div class="rightBar">
-  
+    {#if !courseNavItem}
-    .rightBar {
+      <Overview />
-      width: 80%;
+    {:else if courseNavItem === "score"}
-    }
+      <Scoreboard />
-  </style>
+    {:else if courseNavItem === "timetable"}
-  
+      <TimeTable />
-  <svelte:head>
+    {:else if courseNavItem === "hometasks"}
-    <title>ReactJS</title>
+      <HomeTask />
-  </svelte:head>
+    {:else if courseNavItem === "lecture"}
-  
+      <Lecture path={$page.path} {tab} showLectureHome={!lectureId} />
-  <div class="root">
+    {:else if courseNavItem === "people"}
-    <CourseNav />
+      <People />
-    <div class="rightBar">
+    {/if}
-      {#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} {mode} />
-      {:else if courseNavItem === 'people'}
-        <People />
-      {/if}
-    </div>
-  
-    <Apps />
   </div>
-  
+
+  <Apps />
+</div>
+
+<style>
+  .root {
+    display: flex;
+    border-right: 1px solid var(--border-color);
+    width: 100%;
+  }
+
+  .rightBar {
+    width: 80%;
+  }
+</style>