2 files changed, 54 insertions, 43 deletions
diff --git a/src/components/AssignLabs/Lab.svelte b/src/components/AssignLabs/Lab.svelte
deleted file mode 100644
index d3d8a6a..0000000
--- a/src/components/AssignLabs/Lab.svelte
+++ /dev/null
@@ -1,43 +0,0 @@
-<script lang="ts">
-    import type Lab from "../../models/Lab";
-    import Icon from "../helpers/Icon.svelte";
-    export let lab: Lab;
-    export let assign: boolean = true;
-</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">{lab.course} - {lab.section}</strong>
-            {#if assign}
-                <Icon name="plus-circle" class="h-6 w-6"/>
-            {:else}
-                <Icon name="minus-circle" class=""/>
-            {/if}
-        </div>
-    </div>
-    <!-- Bottom half -->
-    <div>
-        <p class="text-xs">{lab.event.info}</p>
-        <p class="text-xs">{lab.building} {lab.room}</p>
-    </div>
-</div>
-
-<!-- <div
-    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
->
-    <div class="flex flex-row items-center">
-        <div class="flex-grow">
-            <strong class="">{lab.course} - {lab.section}</strong>
-            <p class="text-xs">{lab.event.info}</p>
-            <p class="text-xs">{lab.building} {lab.room}</p>
-        </div>
-
-        <div>hi</div>
-    </div>
-</div> -->
diff --git a/src/components/AssignLabs/LabBox.svelte b/src/components/AssignLabs/LabBox.svelte
new file mode 100644
index 0000000..7888884
--- /dev/null
+++ b/src/components/AssignLabs/LabBox.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import type Lab from "../../models/Lab";
+    import type PeerTeacher from "../../models/PeerTeacher";
+    import Icon from "../helpers/Icon.svelte";
+    export let lab: Lab;
+    export let assign: boolean = true;
+    export let selectedPeerTeacher: PeerTeacher | null = null;
+
+    function onIconClick() {
+        console.log("Clicked lab", lab.course, lab.section);
+    }
+</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>
+            {#if assign}
+                <Icon
+                    name="plus-circle"
+                    class="h-6 w-6"
+                    handleClick={() => {
+                        selectedPeerTeacher?.assignLab(lab.id);
+                        //TODO Adding a lab to a PT doesn't update the current "Labs" and "PT's Labs" columns 
+                        //TODO This was handled by self assignment in the assign labs function in Scott's version, but now this logic is passed down into a child component (this component) and self-assigning down here does not seem to help
+                        selectedPeerTeacher = selectedPeerTeacher;
+                    }}
+                />
+            {:else}
+                <Icon
+                    name="minus-circle"
+                    class="h-6 w-6"
+                    handleClick={() => {
+                        console.log(
+                            selectedPeerTeacher?.name,
+                            lab.course,
+                            lab.section
+                        );
+                    }}
+                />
+            {/if}
+        </div>
+    </div>
+    <!-- Bottom half -->
+    <div>
+        <p class="text-xs">{lab.event.info}</p>
+        <p class="text-xs">{lab.building} {lab.room}</p>
+    </div>
+</div>