From e4915154c6bb71b3d0fb8da6e971783156548b8e Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 23 Jul 2022 23:38:33 -0500
Subject: Restructure file organization

---
 src/components/AssignLabs.svelte                | 151 ++++++++++++++++++++++++
 src/components/AssignLabs/AssignLabs.svelte     | 151 ------------------------
 src/components/AssignLabs/LabBox.svelte         |  32 -----
 src/components/AssignLabs/PTBox.svelte          |  44 -------
 src/components/FileUploads.svelte               |   2 +-
 src/components/Labs.svelte                      |  60 ++++++++++
 src/components/Labs/Labs.svelte                 |  60 ----------
 src/components/PeerTeachers.svelte              |  69 +++++++++++
 src/components/PeerTeachers/PeerTeachers.svelte |  69 -----------
 src/components/Sidebar.svelte                   |   6 +-
 src/components/UploadButton.svelte              |  11 --
 src/components/helpers/LabBox.svelte            |  32 +++++
 src/components/helpers/PTBox.svelte             |  44 +++++++
 src/components/helpers/UploadButton.svelte      |  11 ++
 14 files changed, 371 insertions(+), 371 deletions(-)
 create mode 100644 src/components/AssignLabs.svelte
 delete mode 100644 src/components/AssignLabs/AssignLabs.svelte
 delete mode 100644 src/components/AssignLabs/LabBox.svelte
 delete mode 100644 src/components/AssignLabs/PTBox.svelte
 create mode 100644 src/components/Labs.svelte
 delete mode 100644 src/components/Labs/Labs.svelte
 create mode 100644 src/components/PeerTeachers.svelte
 delete mode 100644 src/components/PeerTeachers/PeerTeachers.svelte
 delete mode 100644 src/components/UploadButton.svelte
 create mode 100644 src/components/helpers/LabBox.svelte
 create mode 100644 src/components/helpers/PTBox.svelte
 create mode 100644 src/components/helpers/UploadButton.svelte

(limited to 'src')

diff --git a/src/components/AssignLabs.svelte b/src/components/AssignLabs.svelte
new file mode 100644
index 0000000..6ff006f
--- /dev/null
+++ b/src/components/AssignLabs.svelte
@@ -0,0 +1,151 @@
+<script lang="ts">
+  import type PeerTeacher from "../models/PeerTeacher";
+  import type Lab from "../models/Lab";
+  import { labStore, ptStore } from "../stores";
+  import LabBox from "./helpers/LabBox.svelte";
+  import PT from "./helpers/PTBox.svelte";
+
+  let selectedPeerTeacher: PeerTeacher | undefined;
+  let selectedLab: Lab | undefined;
+
+  $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
+    a.lastname.toUpperCase() === b.lastname.toUpperCase()
+      ? a.firstname.toUpperCase().localeCompare(b.firstname.toUpperCase())
+      : a.lastname.toUpperCase().localeCompare(b.lastname.toUpperCase())
+  );
+
+  $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
+
+  $: selectedPtAssignedLabs = [...(selectedPeerTeacher?.labs.values() ?? [])]
+    .flatMap((labId) => {
+      const lab = $labStore.get(labId);
+      return lab === undefined ? [] : [lab];
+    })
+    .sort((a, b) => a.id - b.id);
+
+  $: unassignedLabs = labs.filter((lab) => !lab.assigned);
+
+  $: compatibleLabs = labs.filter((lab) =>
+    isPTandLabCompatible(lab, selectedPeerTeacher)
+  );
+
+  $: compatiblePTs = peerTeachers.filter((pt) =>
+    isPTandLabCompatible(selectedLab, pt)
+  );
+
+  function isPTandLabCompatible(
+    lab: Lab | undefined,
+    pt: PeerTeacher | undefined
+  ): boolean {
+    return (
+      pt != undefined &&
+      lab != undefined &&
+      !lab?.assigned &&
+      !pt?.conflictsWith(lab.event)
+    );
+  }
+
+  function updateReactiveDeclarations() {
+    selectedPeerTeacher = selectedPeerTeacher;
+    selectedLab = selectedLab;
+    peerTeachers = peerTeachers;
+    labs = labs;
+  }
+
+  function assignLab(id: number) {
+    const lab = $labStore.get(id);
+    if (lab === undefined) return;
+    lab.assigned = true;
+    selectedPeerTeacher?.labs.add(id);
+    updateReactiveDeclarations();
+  }
+
+  function unassignLab(id: number) {
+    const lab = $labStore.get(id);
+    if (lab === undefined) return;
+    lab.assigned = false;
+    selectedPeerTeacher?.labs.delete(id);
+    updateReactiveDeclarations();
+  }
+</script>
+
+<div
+  class="flex-none overflow-hidden flex-col h-[100vh] w-[80vw] px-[2vw] pt-[1vh]"
+>
+  <!-- Top half: 3 Columns -->
+  <div class="flex flex-row h-[80vh]">
+    <!-- PT Box -->
+    <div class="assign-box rounded-l-xl">
+      <!-- PT Header -->
+      <div class="assign-box-header">Peer Teacher</div>
+      <!-- PT Body -->
+      <div class="assign-box-body">
+        {#each peerTeachers as pt}
+          <div
+            class={compatiblePTs.includes(pt) //selectedPeerTeacher == pt
+              ? "bg-info text-info-content" // "border-l-8 border-blue-500"
+              : "bg-base-100 text-base-100-content"}
+            on:click={() => {
+              selectedPeerTeacher = pt;
+            }}
+          >
+            <svelte:component this={PT} {pt} />
+          </div>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Available Labs -->
+    <div class="assign-box">
+      <div class="assign-box-header">Labs: {labs.length}</div>
+      <div class="assign-box-body">
+        {#each compatibleLabs as lab}
+          <svelte:component
+            this={LabBox}
+            {lab}
+            iconName="plus-circle"
+            iconClick={() => {
+              assignLab(lab.id);
+            }}
+          />
+        {/each}
+      </div>
+    </div>
+
+    <!-- Selected PT's Labs -->
+    <div class="assign-box rounded-r-xl">
+      <div class="assign-box-header">
+        {selectedPeerTeacher?.name ?? "PT's Labs"}
+      </div>
+      <div class="assign-box-body">
+        {#each selectedPtAssignedLabs as lab}
+          <svelte:component
+            this={LabBox}
+            {lab}
+            iconName="minus-circle"
+            iconClick={() => {
+              unassignLab(lab.id);
+            }}
+          />
+        {/each}
+      </div>
+    </div>
+  </div>
+
+  <!-- Bottom half: Universal unassigned labs -->
+  <div class="flex flex-col mt-2 text-center">
+    <h1>Unassigned Labs: {unassignedLabs.length}</h1>
+    <ul class="menu menu-horizontal bg-base-100 rounded-box overflow-auto">
+      {#each unassignedLabs as lab}
+        <li
+          on:click={() => {
+            selectedLab = lab;
+          }}
+          class={selectedLab == lab ? "bg-info text-info-content" : ""}
+        >
+          <span>{lab.course} {lab.section}</span>
+        </li>
+      {/each}
+    </ul>
+  </div>
+</div>
diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
deleted file mode 100644
index e27abfc..0000000
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ /dev/null
@@ -1,151 +0,0 @@
-<script lang="ts">
-  import type PeerTeacher from "../../models/PeerTeacher";
-  import type Lab from "../../models/Lab";
-  import { labStore, ptStore } from "../../stores";
-  import LabBox from "./LabBox.svelte";
-  import PT from "./PTBox.svelte";
-
-  let selectedPeerTeacher: PeerTeacher | undefined;
-  let selectedLab: Lab | undefined;
-
-  $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
-    a.lastname.toUpperCase() === b.lastname.toUpperCase()
-      ? a.firstname.toUpperCase().localeCompare(b.firstname.toUpperCase())
-      : a.lastname.toUpperCase().localeCompare(b.lastname.toUpperCase())
-  );
-
-  $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
-
-  $: selectedPtAssignedLabs = [...(selectedPeerTeacher?.labs.values() ?? [])]
-    .flatMap((labId) => {
-      const lab = $labStore.get(labId);
-      return lab === undefined ? [] : [lab];
-    })
-    .sort((a, b) => a.id - b.id);
-
-  $: unassignedLabs = labs.filter((lab) => !lab.assigned);
-
-  $: compatibleLabs = labs.filter((lab) =>
-    isPTandLabCompatible(lab, selectedPeerTeacher)
-  );
-
-  $: compatiblePTs = peerTeachers.filter((pt) =>
-    isPTandLabCompatible(selectedLab, pt)
-  );
-
-  function isPTandLabCompatible(
-    lab: Lab | undefined,
-    pt: PeerTeacher | undefined
-  ): boolean {
-    return (
-      pt != undefined &&
-      lab != undefined &&
-      !lab?.assigned &&
-      !pt?.conflictsWith(lab.event)
-    );
-  }
-
-  function updateReactiveDeclarations() {
-    selectedPeerTeacher = selectedPeerTeacher;
-    selectedLab = selectedLab;
-    peerTeachers = peerTeachers;
-    labs = labs;
-  }
-
-  function assignLab(id: number) {
-    const lab = $labStore.get(id);
-    if (lab === undefined) return;
-    lab.assigned = true;
-    selectedPeerTeacher?.labs.add(id);
-    updateReactiveDeclarations();
-  }
-
-  function unassignLab(id: number) {
-    const lab = $labStore.get(id);
-    if (lab === undefined) return;
-    lab.assigned = false;
-    selectedPeerTeacher?.labs.delete(id);
-    updateReactiveDeclarations();
-  }
-</script>
-
-<div
-  class="flex-none overflow-hidden flex-col h-[100vh] w-[80vw] px-[2vw] pt-[1vh]"
->
-  <!-- Top half: 3 Columns -->
-  <div class="flex flex-row h-[80vh]">
-    <!-- PT Box -->
-    <div class="assign-box rounded-l-xl">
-      <!-- PT Header -->
-      <div class="assign-box-header">Peer Teacher</div>
-      <!-- PT Body -->
-      <div class="assign-box-body">
-        {#each peerTeachers as pt}
-          <div
-            class={compatiblePTs.includes(pt) //selectedPeerTeacher == pt
-              ? "bg-info text-info-content" // "border-l-8 border-blue-500"
-              : "bg-base-100 text-base-100-content"}
-            on:click={() => {
-              selectedPeerTeacher = pt;
-            }}
-          >
-            <svelte:component this={PT} {pt} />
-          </div>
-        {/each}
-      </div>
-    </div>
-
-    <!-- Available Labs -->
-    <div class="assign-box">
-      <div class="assign-box-header">Labs: {labs.length}</div>
-      <div class="assign-box-body">
-        {#each compatibleLabs as lab}
-          <svelte:component
-            this={LabBox}
-            {lab}
-            iconName="plus-circle"
-            iconClick={() => {
-              assignLab(lab.id);
-            }}
-          />
-        {/each}
-      </div>
-    </div>
-
-    <!-- Selected PT's Labs -->
-    <div class="assign-box rounded-r-xl">
-      <div class="assign-box-header">
-        {selectedPeerTeacher?.name ?? "PT's Labs"}
-      </div>
-      <div class="assign-box-body">
-        {#each selectedPtAssignedLabs as lab}
-          <svelte:component
-            this={LabBox}
-            {lab}
-            iconName="minus-circle"
-            iconClick={() => {
-              unassignLab(lab.id);
-            }}
-          />
-        {/each}
-      </div>
-    </div>
-  </div>
-
-  <!-- Bottom half: Universal unassigned labs -->
-  <div class="flex flex-col mt-2 text-center">
-    <h1>Unassigned Labs: {unassignedLabs.length}</h1>
-    <ul class="menu menu-horizontal bg-base-100 rounded-box overflow-auto">
-      {#each unassignedLabs as lab}
-        <li
-          on:click={() => {
-            selectedLab = lab;
-          }}
-          class={selectedLab == lab ? "bg-info text-info-content" : ""}
-        >
-          <span>{lab.course} {lab.section}</span>
-        </li>
-      {/each}
-    </ul>
-  </div>
-</div>
diff --git a/src/components/AssignLabs/LabBox.svelte b/src/components/AssignLabs/LabBox.svelte
deleted file mode 100644
index 9805c51..0000000
--- a/src/components/AssignLabs/LabBox.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-  import type Lab from "../../models/Lab";
-  import Icon from "../helpers/Icon.svelte";
-  export let lab: Lab;
-  export let iconClick = () => {};
-  export let iconName: string;
-</script>
-
-<!-- Lab box -->
-<div
-  class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
->
-  <!-- Lab content -->
-  <div class="flex flex-col">
-    <!-- Top Half -->
-    <div class="flex flex-row">
-      <strong class="flex-grow">CSCE {lab.course} - {lab.section}</strong>
-      <Icon
-        name={iconName}
-        class="h-6 w-6"
-        handleClick={() => {
-          iconClick();
-        }}
-      />
-    </div>
-  </div>
-  <!-- Bottom half -->
-  <div>
-    <p class="text-xs">{lab.event.info}</p>
-    <p class="text-xs">{lab.building} {lab.room}</p>
-  </div>
-</div>
diff --git a/src/components/AssignLabs/PTBox.svelte b/src/components/AssignLabs/PTBox.svelte
deleted file mode 100644
index 3ad50d1..0000000
--- a/src/components/AssignLabs/PTBox.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-    import type PeerTeacher from "../../models/PeerTeacher";
-    import Icon from "../helpers/Icon.svelte";
-    export let pt: PeerTeacher;
-
-    let modalID = () => {
-        return `my-modal-${pt.id}`;
-    }
-</script>
-
-<!-- PT Box -->
-<div
-    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden group"
->
-    <!-- Top half, name and button -->
-    <div class="flex flex-row items-center ">
-        <!-- Left half, name -->
-        <strong class="flex-grow text-sm">{pt.name}</strong>
-
-        <!-- Right half, button -->
-        <!-- The button to open modal -->
-        <label for={modalID()} class="">
-            <Icon name="info" class="h-6 w-6" />
-        </label>
-
-        <!-- Modal PT event info -->
-        <input type="checkbox" id={modalID()} class="modal-toggle" />
-        <label for={modalID()} class="modal cursor-pointer">
-            <label class="modal-box relative bg-slate-300" for="">
-                <h3 class="text-lg font-bold font-serif underline">
-                    {pt.name}
-                </h3>
-                {#each pt.events as e}
-                    <p class="py-2">
-                        {e.info}
-                    </p>
-                {/each}
-            </label>
-        </label>
-    </div>
-
-    <!-- Bottom half, hours -->
-    <div class="">Hours: {pt.lab_hours}</div>
-</div>
diff --git a/src/components/FileUploads.svelte b/src/components/FileUploads.svelte
index b38961f..cbbcbf4 100644
--- a/src/components/FileUploads.svelte
+++ b/src/components/FileUploads.svelte
@@ -2,7 +2,7 @@
   import { Label } from "@smui/button";
   import IconButton from "@smui/icon-button";
   import Snackbar, { Actions } from "@smui/snackbar";
-  import UploadButton from "./UploadButton.svelte";
+  import UploadButton from "./helpers/UploadButton.svelte";
   import Card from "./Card.svelte";
   import {
     parseDatabaseFile,
diff --git a/src/components/Labs.svelte b/src/components/Labs.svelte
new file mode 100644
index 0000000..fc5c0ae
--- /dev/null
+++ b/src/components/Labs.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { labStore, ptStore } from "../stores";
+    import type Lab from "../models/Lab";
+
+    let selected_lab: Lab | undefined;
+
+    $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
+
+
+    let headers = ["", "Course", "Sec", "Time", "Location", "Assigned PT",""];
+    
+    $: pts = [...$ptStore.values()];
+    
+    // TODO Make this more efficient rather than checking each PT per each Lab
+    $: labsAndPts = [...$labStore.values()].flatMap( (lab) => {
+        return [{
+            "lab" : lab,
+            "pt" : pts.find( (pt) => {
+                return pt.labs.has(lab.id)
+            })
+        }];
+    });
+
+</script>
+
+<div class="overflow-auto h-full">
+    <table class="table w-full">
+      <!-- head -->
+      <thead>
+        <tr>
+          {#each headers as header, i}
+            <th> {i == 0 ? labs.length : header}</th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each labsAndPts as l, i}
+          <tr
+            on:click={() => {
+              selected_lab = l.lab;
+            }}
+            class={selected_lab == l.lab ? "active" : "hover"}
+          >
+            <th>{i + 1}</th>
+            <th>{l.lab?.course}</th>
+            <th>{l.lab?.section}</th>
+            <th>{l.lab?.time}</th>
+            <th>{l.lab?.location}</th>
+            <th>{l.pt?.name ?? "UNASSIGNED"}</th>
+            <th
+              ><button
+                class="btn btn-ghost btn-xs">Delete</button
+              ></th
+            >
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+  
\ No newline at end of file
diff --git a/src/components/Labs/Labs.svelte b/src/components/Labs/Labs.svelte
deleted file mode 100644
index 87f7ed2..0000000
--- a/src/components/Labs/Labs.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import { labStore, ptStore } from "../../stores";
-    import type Lab from "../../models/Lab";
-
-    let selected_lab: Lab | undefined;
-
-    $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
-
-
-    let headers = ["", "Course", "Sec", "Time", "Location", "Assigned PT",""];
-    
-    $: pts = [...$ptStore.values()];
-    
-    // TODO Make this more efficient rather than checking each PT per each Lab
-    $: labsAndPts = [...$labStore.values()].flatMap( (lab) => {
-        return [{
-            "lab" : lab,
-            "pt" : pts.find( (pt) => {
-                return pt.labs.has(lab.id)
-            })
-        }];
-    });
-
-</script>
-
-<div class="overflow-auto h-full">
-    <table class="table w-full">
-      <!-- head -->
-      <thead>
-        <tr>
-          {#each headers as header, i}
-            <th> {i == 0 ? labs.length : header}</th>
-          {/each}
-        </tr>
-      </thead>
-      <tbody>
-        {#each labsAndPts as l, i}
-          <tr
-            on:click={() => {
-              selected_lab = l.lab;
-            }}
-            class={selected_lab == l.lab ? "active" : "hover"}
-          >
-            <th>{i + 1}</th>
-            <th>{l.lab?.course}</th>
-            <th>{l.lab?.section}</th>
-            <th>{l.lab?.time}</th>
-            <th>{l.lab?.location}</th>
-            <th>{l.pt?.name ?? "UNASSIGNED"}</th>
-            <th
-              ><button
-                class="btn btn-ghost btn-xs">Delete</button
-              ></th
-            >
-          </tr>
-        {/each}
-      </tbody>
-    </table>
-  </div>
-  
\ No newline at end of file
diff --git a/src/components/PeerTeachers.svelte b/src/components/PeerTeachers.svelte
new file mode 100644
index 0000000..16ff449
--- /dev/null
+++ b/src/components/PeerTeachers.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import { labStore, ptStore } from "../stores";
+  import type PeerTeacher from "../models/PeerTeacher";
+
+  let selected_pt: PeerTeacher | undefined;
+
+  $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
+    a.lastname.toUpperCase() === b.lastname.toUpperCase()
+      ? a.firstname.toUpperCase().localeCompare(b.firstname.toUpperCase())
+      : a.lastname.toUpperCase().localeCompare(b.lastname.toUpperCase())
+  );
+
+  function deletePT(id: number) {
+    // if (selected_pt.id != id) return;
+    // Unassign all labs assigned to this Peer Teacher
+    $ptStore.get(id)?.labs.forEach((lab_id) => {
+      const lab = $labStore?.get(lab_id);
+      lab.assigned = false;
+    });
+
+    // Yeet the Peer Teacher
+    ptStore.update((map) => {
+      map.delete(id);
+      return map;
+    });
+  }
+
+  let headers = ["", "First", "Last", "UIN", "Email", "Lab Hours", ""];
+
+  $: console.log(headers);
+</script>
+
+<div class="overflow-auto h-full">
+  <table class="table w-full">
+    <!-- head -->
+    <thead>
+      <tr>
+        {#each headers as header, i}
+          <th> {i == 0 ? peerTeachers.length : header}</th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each peerTeachers as pt, i}
+        <tr
+          on:click={() => {
+            selected_pt = pt;
+          }}
+          class={selected_pt == pt ? "active" : "hover"}
+        >
+          <th>{i + 1}</th>
+          <th>{pt.firstname}</th>
+          <th>{pt.lastname}</th>
+          <th>{pt.id}</th>
+          <th>{pt.email}</th>
+          <th>
+            {pt.lab_hours}
+          </th>
+          <th
+            ><button
+              on:click={() => deletePT(pt.id)}
+              class="btn btn-ghost btn-xs">Delete</button
+            ></th
+          >
+        </tr>
+      {/each}
+    </tbody>
+  </table>
+</div>
diff --git a/src/components/PeerTeachers/PeerTeachers.svelte b/src/components/PeerTeachers/PeerTeachers.svelte
deleted file mode 100644
index 7182f2f..0000000
--- a/src/components/PeerTeachers/PeerTeachers.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-  import { labStore, ptStore } from "../../stores";
-  import type PeerTeacher from "../../models/PeerTeacher";
-
-  let selected_pt: PeerTeacher | undefined;
-
-  $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
-    a.lastname.toUpperCase() === b.lastname.toUpperCase()
-      ? a.firstname.toUpperCase().localeCompare(b.firstname.toUpperCase())
-      : a.lastname.toUpperCase().localeCompare(b.lastname.toUpperCase())
-  );
-
-  function deletePT(id: number) {
-    // if (selected_pt.id != id) return;
-    // Unassign all labs assigned to this Peer Teacher
-    $ptStore.get(id)?.labs.forEach((lab_id) => {
-      const lab = $labStore?.get(lab_id);
-      lab.assigned = false;
-    });
-
-    // Yeet the Peer Teacher
-    ptStore.update((map) => {
-      map.delete(id);
-      return map;
-    });
-  }
-
-  let headers = ["", "First", "Last", "UIN", "Email", "Lab Hours", ""];
-
-  $: console.log(headers);
-</script>
-
-<div class="overflow-auto h-full">
-  <table class="table w-full">
-    <!-- head -->
-    <thead>
-      <tr>
-        {#each headers as header, i}
-          <th> {i == 0 ? peerTeachers.length : header}</th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#each peerTeachers as pt, i}
-        <tr
-          on:click={() => {
-            selected_pt = pt;
-          }}
-          class={selected_pt == pt ? "active" : "hover"}
-        >
-          <th>{i + 1}</th>
-          <th>{pt.firstname}</th>
-          <th>{pt.lastname}</th>
-          <th>{pt.id}</th>
-          <th>{pt.email}</th>
-          <th>
-            {pt.lab_hours}
-          </th>
-          <th
-            ><button
-              on:click={() => deletePT(pt.id)}
-              class="btn btn-ghost btn-xs">Delete</button
-            ></th
-          >
-        </tr>
-      {/each}
-    </tbody>
-  </table>
-</div>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index c89ab50..88c8667 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import DarkModeSwitch from "./DarkModeSwitch.svelte";
-  import AssignLabs from "./AssignLabs/AssignLabs.svelte";
+  import AssignLabs from "./AssignLabs.svelte";
   import FileUploads from "./FileUploads.svelte";
-  import PeerTeachers from "./PeerTeachers/PeerTeachers.svelte";
-  import Labs from "./Labs/Labs.svelte";
+  import PeerTeachers from "./PeerTeachers.svelte";
+  import Labs from "./Labs.svelte";
   import { onMount } from "svelte";
   import { parseDatabaseLocalStorage } from "../util/parser";
 
diff --git a/src/components/UploadButton.svelte b/src/components/UploadButton.svelte
deleted file mode 100644
index a592a25..0000000
--- a/src/components/UploadButton.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-  export let accept = "";
-  export let multiple = false;
-  export let files: FileList | null = null;
-  export let color = "";
-</script>
-
-<label class="btn {color}">
-  Upload
-  <input type="file" {accept} {multiple} bind:files hidden />
-</label>
diff --git a/src/components/helpers/LabBox.svelte b/src/components/helpers/LabBox.svelte
new file mode 100644
index 0000000..8e78798
--- /dev/null
+++ b/src/components/helpers/LabBox.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type Lab from "../../models/Lab";
+  import Icon from "./Icon.svelte";
+  export let lab: Lab;
+  export let iconClick = () => {};
+  export let iconName: string;
+</script>
+
+<!-- Lab box -->
+<div
+  class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
+>
+  <!-- Lab content -->
+  <div class="flex flex-col">
+    <!-- Top Half -->
+    <div class="flex flex-row">
+      <strong class="flex-grow">CSCE {lab.course} - {lab.section}</strong>
+      <Icon
+        name={iconName}
+        class="h-6 w-6"
+        handleClick={() => {
+          iconClick();
+        }}
+      />
+    </div>
+  </div>
+  <!-- Bottom half -->
+  <div>
+    <p class="text-xs">{lab.event.info}</p>
+    <p class="text-xs">{lab.building} {lab.room}</p>
+  </div>
+</div>
diff --git a/src/components/helpers/PTBox.svelte b/src/components/helpers/PTBox.svelte
new file mode 100644
index 0000000..646ba09
--- /dev/null
+++ b/src/components/helpers/PTBox.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+    import type PeerTeacher from "../../models/PeerTeacher";
+    import Icon from "./Icon.svelte";
+    export let pt: PeerTeacher;
+
+    let modalID = () => {
+        return `my-modal-${pt.id}`;
+    }
+</script>
+
+<!-- PT Box -->
+<div
+    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden group"
+>
+    <!-- Top half, name and button -->
+    <div class="flex flex-row items-center ">
+        <!-- Left half, name -->
+        <strong class="flex-grow text-sm">{pt.name}</strong>
+
+        <!-- Right half, button -->
+        <!-- The button to open modal -->
+        <label for={modalID()} class="">
+            <Icon name="info" class="h-6 w-6" />
+        </label>
+
+        <!-- Modal PT event info -->
+        <input type="checkbox" id={modalID()} class="modal-toggle" />
+        <label for={modalID()} class="modal cursor-pointer">
+            <label class="modal-box relative bg-slate-300" for="">
+                <h3 class="text-lg font-bold font-serif underline">
+                    {pt.name}
+                </h3>
+                {#each pt.events as e}
+                    <p class="py-2">
+                        {e.info}
+                    </p>
+                {/each}
+            </label>
+        </label>
+    </div>
+
+    <!-- Bottom half, hours -->
+    <div class="">Hours: {pt.lab_hours}</div>
+</div>
diff --git a/src/components/helpers/UploadButton.svelte b/src/components/helpers/UploadButton.svelte
new file mode 100644
index 0000000..a592a25
--- /dev/null
+++ b/src/components/helpers/UploadButton.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let accept = "";
+  export let multiple = false;
+  export let files: FileList | null = null;
+  export let color = "";
+</script>
+
+<label class="btn {color}">
+  Upload
+  <input type="file" {accept} {multiple} bind:files hidden />
+</label>
-- 
cgit v1.2.3