feat: add buttons for creating lesson plans and worksheets, and back to top functionality

Author: Jared-Gross

src/pages/library/library.html

@@ -62,6 +62,21 @@ <h6>Kuriki Library</h6>
             <h6>Library</h6>
             <div>The Living Library</div>
         </div>
+
+        <button class="chip vertical" id="create-lesson-plan-button">
+            <i>add_notes</i>
+            <span class="l m">Create Lesson Plan</span>
+            <div class="s tooltip left">
+                Create Lesson Plan
+            </div>
+        </button>
+        <button class="chip vertical" id="create-worksheet-button">
+            <i>assignment_add</i>
+            <span class="l m">Create Worksheet</span>
+            <div class="s tooltip left">
+                Create Worksheet
+            </div>
+        </button>
     </nav>
 
     <div class="fixed center middle small-width small-height" id="loading-indicator">
@@ -93,6 +108,11 @@ <h6>Library</h6>
         <div class="grid" id="library">
         </div>
     </main>
+
+    <button class="fixed bottom right margin circle extra" id="back-to-top-button">
+        <i>arrow_upward</i>
+        <span>Back to Top</span>
+    </button>
 </body>
 
 </html>

src/pages/library/library.ts

@@ -7,6 +7,8 @@ import { LessonRecord, LessonsAPI } from "@api/lessons-api";
 import { LessonCard } from "@components/lesson/card-element";
 import { LessonList } from "@components/lesson/list-element";
 import { debounce } from "@utils/debounce";
+import { builtInTemplates } from "@models/lesson-template";
+import { WorksheetsAPI } from "@api/worksheets-api";
 
 type ViewMode = "grid" | "list";
 
@@ -113,4 +115,48 @@ document.addEventListener("DOMContentLoaded", async () => {
 
     gridButton.addEventListener("click", () => setView("grid"));
     listButton.addEventListener("click", () => setView("list"));
+
+    const backToTopButton = document.getElementById("back-to-top-button") as HTMLButtonElement;
+    backToTopButton.addEventListener("click", () => window.scrollTo(0, 0));
+
+    const createLessonPlanButton = document.getElementById("create-lesson-plan-button") as HTMLButtonElement;
+    createLessonPlanButton.addEventListener("click", async () => {
+        const idKey = Number(new Date().getTime().toString());
+
+        const lessonData = {
+            topic: "",
+            name: "",
+            author: localStorage.getItem("authorName") || "Anonymous",
+            gradeLevel: "",
+            date: new Date().toISOString(),
+            timeLength: "~ 1 hour",
+            teacherNotes: "",
+            curricularOutcomes: [],
+            resourceLinks: [],
+            assessmentEvidence: [],
+            notes: builtInTemplates[0]!.markdown,
+        };
+
+        await LessonsAPI.post(idKey, lessonData, []);
+        window.open(`/lesson.html?id=${idKey}`, "_blank");
+    });
+
+    const createWorksheetButton = document.getElementById("create-worksheet-button") as HTMLButtonElement;
+    createWorksheetButton.addEventListener("click", async () => {
+        const idKey = Number(new Date().getTime().toString());
+
+        const worksheetData = {
+            topic: "",
+            name: "",
+            author: localStorage.getItem("authorName") || "Anonymous",
+            gradeLevel: "",
+            date: new Date().toISOString(),
+            teacherNotes: "",
+            curricularOutcomes: [],
+            blocks: []
+        };
+
+        await WorksheetsAPI.post(idKey, worksheetData, []);
+        window.open(`/worksheet.html?id=${idKey}`, "_blank");
+    });
 });

src/pages/manitoba_global_compentencies/manitoba_global_compentencies.html

@@ -62,27 +62,27 @@ <h6 class="s">Competencies</h6>
     <main class="responsive">
         <div>
             <div class="tabs scroll left-align">
-                <a class="active" data-ui="#critical-thinking">
+                <a class="vertical active" data-ui="#critical-thinking">
                     <i>psychology</i>
                     <span>Critical Thinking</span>
                 </a>
-                <a data-ui="#creativity">
+                <a class="vertical" data-ui="#creativity">
                     <i>lightbulb</i>
                     <span>Creativity</span>
                 </a>
-                <a data-ui="#citizenship">
+                <a class="vertical" data-ui="#citizenship">
                     <i>gavel</i>
                     <span>Citizenship</span>
                 </a>
-                <a data-ui="#connection-to-self">
+                <a class="vertical" data-ui="#connection-to-self">
                     <i>self_improvement</i>
                     <span>Connection to Self</span>
                 </a>
-                <a data-ui="#collaboration">
+                <a class="vertical" data-ui="#collaboration">
                     <i>groups</i>
                     <span>Collaboration</span>
                 </a>
-                <a data-ui="#communication">
+                <a class="vertical" data-ui="#communication">
                     <i>chat</i>
                     <span>Communication</span>
                 </a>