From 3da801ce3d8d442b573673ab8a4294145f54a40a Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 26 Jun 2022 18:02:37 -0500
Subject: Rename component, handle on click for addition / subtraction of lab

---
 src/components/AssignLabs/LabBox.svelte | 54 +++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 src/components/AssignLabs/LabBox.svelte

(limited to 'src/components/AssignLabs/LabBox.svelte')

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>
-- 
cgit v1.2.3


From 62705aefd79764b00f86bdfd16188fdec81c8b76 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 16 Jul 2022 00:20:01 -0400
Subject: Successfully adding/removing labs from PeerTeachers; however need to
 bugfix the icon always showing a minus-circle along with the bottom
 unassigned-labs sections not updating

---
 src/components/AssignLabs/AssignLabs.svelte |  6 ++---
 src/components/AssignLabs/LabBox.svelte     | 34 +++++++++++++++--------------
 src/components/helpers/Icon.svelte          |  2 +-
 3 files changed, 22 insertions(+), 20 deletions(-)

(limited to 'src/components/AssignLabs/LabBox.svelte')

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index 9623560..1bbc006 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -78,6 +78,7 @@
   }
 
   function unassignLab(id: number) {
+    console.log("unassiging", id)
     const lab = $labStore.get(id);
     if (lab === undefined) return;
     lab.assigned = false;
@@ -119,7 +120,6 @@
               : ""}
             on:click={() => {
               selectedPeerTeacher = pt;
-              console.log(pt);
             }}
           >
             <svelte:component this={PT} {pt} />
@@ -133,7 +133,7 @@
       <div class="assign-box-header">Labs</div>
       <div class="assign-box-body">
         {#each compatibleLabs as lab}
-          <svelte:component this={Lab} {lab} {selectedPeerTeacher} />
+          <svelte:component this={Lab} {lab} iconClick={()=>{assignLab(lab.id)}} />
         {/each}
       </div>
     </div>
@@ -145,7 +145,7 @@
       </div>
       <div class="assign-box-body">
         {#each assignedLabs as lab}
-          <svelte:component this={Lab} {lab} assign={false} />
+          <svelte:component this={Lab} {lab} icon="minus-circle" iconClick={()=>{unassignLab(lab.id)}} />
         {/each}
       </div>
     </div>
diff --git a/src/components/AssignLabs/LabBox.svelte b/src/components/AssignLabs/LabBox.svelte
index 7888884..0b9c8f2 100644
--- a/src/components/AssignLabs/LabBox.svelte
+++ b/src/components/AssignLabs/LabBox.svelte
@@ -5,10 +5,8 @@
     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);
-    }
+    export let iconClick = () => {}
+    export let iconName :string = "plus-circle";
 </script>
 
 <!-- Lab box -->
@@ -20,15 +18,27 @@
         <!-- Top Half -->
         <div class="flex flex-row">
             <strong class="flex-grow">CSCE {lab.course} - {lab.section}</strong>
-            {#if assign}
+            <Icon name="minus-circle" 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>
+
+ <!-- {#if assign}
                 <Icon
                     name="plus-circle"
                     class="h-6 w-6"
                     handleClick={() => {
-                        selectedPeerTeacher?.assignLab(lab.id);
+                        iconClick()
+                        // 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;
+
+                        //// selectedPeerTeacher = selectedPeerTeacher;
                     }}
                 />
             {:else}
@@ -43,12 +53,4 @@
                         );
                     }}
                 />
-            {/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>
+            {/if} -->
\ No newline at end of file
diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte
index c9154f3..8dc2a89 100644
--- a/src/components/helpers/Icon.svelte
+++ b/src/components/helpers/Icon.svelte
@@ -4,7 +4,7 @@
   export let height = "1rem";
   export let focusable = "false";
   export let handleClick = () => {
-    console.log("Default icon on:click function prints this");
+    console.log("Default on:click handler for Icon.svelte. No handler passed");
   };
   let icons = [
     {
-- 
cgit v1.2.3


From e95c37778a3b0ecc39ec20c2bfc2ed3fef4a7a94 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 16 Jul 2022 00:35:35 -0400
Subject: Labs now correctly take in an icon click handler

---
 src/components/AssignLabs/LabBox.svelte | 72 +++++++++++----------------------
 1 file changed, 24 insertions(+), 48 deletions(-)

(limited to 'src/components/AssignLabs/LabBox.svelte')

diff --git a/src/components/AssignLabs/LabBox.svelte b/src/components/AssignLabs/LabBox.svelte
index 0b9c8f2..9805c51 100644
--- a/src/components/AssignLabs/LabBox.svelte
+++ b/src/components/AssignLabs/LabBox.svelte
@@ -1,56 +1,32 @@
 <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;
-    export let iconClick = () => {}
-    export let iconName :string = "plus-circle";
+  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"
+  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="minus-circle" 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>
+  <!-- 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>
-
- <!-- {#if assign}
-                <Icon
-                    name="plus-circle"
-                    class="h-6 w-6"
-                    handleClick={() => {
-                        iconClick()
-                        // 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} -->
\ No newline at end of file
-- 
cgit v1.2.3

