`feat`: Add Assignments Download button

This download button will download the pt-lab assignments with all relevant information in regards to showing all PTs their assigned labs, office hours, and total hours

1 files changed, 65 insertions, 1 deletions

diff --git a/src/components/AssignLabs.svelte b/src/components/AssignLabs.svelte
index c9f767c..5442e12 100644
--- a/src/components/AssignLabs.svelte
+++ b/src/components/AssignLabs.svelte
@@ -4,6 +4,7 @@
   import { labStore, ptStore } from "../stores";
   import LabBox from "./helpers/LabBox.svelte";
   import PT from "./helpers/PTBox.svelte";
+  import Icon from "./helpers/Icon.svelte";
 
   let selectedPeerTeacher: PeerTeacher | undefined;
   let selectedLab: Lab | undefined;
@@ -68,6 +69,60 @@
     updateReactiveDeclarations();
   }
 
+  // Bad code design! Very similar function to the download function in Labs page.
+  // This should be redesigned with more thought instead
+  // of automatically encapsulating it in some other file.
+  //* NOTE although this outputs a CSV, the csv file might look mangled because
+  // we output courses as "course1: labs \n course2: labs \n course3: labs..."
+  // The newlines \n cause issues when displaying the csv file, but they look fine
+  // when uploaded to Google Sheets thanks to being encompassed by quotes ""
+  export function downloadAssignments() {
+    console.log("Downloading lab assignments");
+    let cols = [
+      "First",
+      "Last",
+      "Courses",
+      "Labs",
+      "#LH",
+      "Office Hours",
+      "#OH",
+      "Total Hours",
+    ];
+    let csv = cols.join(",") + "\n";
+    peerTeachers.forEach((pt) => {
+      let labs = new Array<string>();
+      pt.coursesAndLabs().forEach((sections, course) => {
+        labs.push(`${course} - ${sections}`);
+      });
+      let office_hours = new Array<string>();
+      pt.office_hours.forEach((e) => {
+        office_hours.push(e.info);
+      });
+      csv +=
+        [
+          pt.firstname,
+          pt.lastname,
+          "n/a",
+          `"${labs.join("\n")}"`,
+          pt.lab_hours,
+          `"${[office_hours.join("\n")]}"`,
+          pt.office_hours_hours,
+          pt.lab_hours + pt.office_hours_hours,
+        ].join(",") + "\n";
+    });
+    console.log("Result of Assignments", csv);
+    const blob = new Blob([csv], { type: "text/csv" });
+    const anchor = document.createElement("a");
+    const url = window.URL.createObjectURL(blob);
+    anchor.href = url;
+    anchor.download = "assignments.csv";
+    anchor.style.display = "none";
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    window.URL.revokeObjectURL(url);
+  }
+
   // TODO Figure out way for PT boxes to both be blue if compat labs AND be bordered if selected_pt
 </script>
 
@@ -78,7 +133,16 @@
   <div class="flex flex-row h-[80vh]">
     <!-- Peer Teacher -->
     <div class="assign-box rounded-l-xl">
-      <div class="assign-box-header">Peer Teacher</div>
+      <div class="assign-box-header">
+        <div class="flex flex-row justify-center items-center gap-x-8">
+          <div class="flex">Peer Teacher</div>
+          <Icon
+            class="flex"
+            name="download"
+            handleClick={downloadAssignments}
+          />
+        </div>
+      </div>
       <div class="assign-box-body">
         {#each peerTeachers as pt}
           <div