From f8915cfa1f70d837fe89f0af61fb36ed9bcf52f8 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 5 Jun 2022 21:06:09 -0500
Subject: WiP

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

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
new file mode 100644
index 0000000..9331b81
--- /dev/null
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -0,0 +1,232 @@
+<script lang="ts">
+  import IconButton from "@smui/icon-button";
+  import List, {
+    Item,
+    Meta,
+    PrimaryText,
+    SecondaryText,
+    Text,
+  } from "@smui/list";
+  import type PeerTeacher from "../../models/PeerTeacher";
+  import { labStore, ptStore } from "../../stores";
+  import Lab from "./Lab.svelte";
+  import PT from "./PT.svelte";
+
+  let selectedPeerTeacher: 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())
+  );
+
+  $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
+
+  $: assignedLabs = [...(selectedPeerTeacher?.labs.values() ?? [])]
+    .flatMap((labId) => {
+      const lab = $labStore.get(labId);
+      return lab === undefined ? [] : [lab];
+    })
+    .sort((a, b) => a.id - b.id);
+
+  $: compatibleLabs = labs.filter(
+    (lab) =>
+      // Lab not already assigned
+      !lab.assigned &&
+      // PT schedule not conflict with lab
+      !selectedPeerTeacher?.conflictsWith(lab.event) &&
+      // PT's labs not conflict with this lab
+      !assignedLabs.some((assignment) =>
+        assignment.event.conflictsWith(lab.event)
+      )
+  );
+
+  function deletePT(id: number) {
+    if (selectedPeerTeacher?.id === id) {
+      selectedPeerTeacher = undefined;
+    }
+
+    $ptStore.get(id)?.labs.forEach((lab_id) => {
+      const lab = $labStore?.get(lab_id);
+      if (lab !== undefined) lab.assigned = false;
+    });
+
+    ptStore.update((map) => {
+      map.delete(id);
+      return map;
+    });
+
+    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
+    selectedPeerTeacher = selectedPeerTeacher;
+  }
+
+  function assignLab(id: number) {
+    // Mark lab as assigned
+    const lab = $labStore.get(id);
+    if (lab === undefined) return;
+    lab.assigned = true;
+
+    selectedPeerTeacher?.labs.add(id);
+
+    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
+    selectedPeerTeacher = selectedPeerTeacher;
+    // Self assignment to update PT values used in `Peer Teacher` column
+    peerTeachers = peerTeachers;
+  }
+
+  function unassignLab(id: number) {
+    const lab = $labStore.get(id);
+    if (lab === undefined) return;
+    lab.assigned = false;
+
+    selectedPeerTeacher?.labs.delete(id);
+
+    // Mark lab as unassigned
+
+    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
+    selectedPeerTeacher = selectedPeerTeacher;
+    // Self assignment to update PT values used in `Peer Teacher` column
+    peerTeachers = peerTeachers;
+  }
+
+  $: clicked = 0;
+
+  $: columns = [
+    { header: "Peer Teachers", data: [...peerTeachers], component: PT },
+    { header: "Labs", data: [...compatibleLabs], component: Lab },
+    {
+      header: selectedPeerTeacher?.name ?? "PT's Labs",
+      data: [...assignedLabs],
+      component: Lab,
+    },
+  ];
+</script>
+
+<!-- <div class="assign-labs">
+  <div class="column">
+    <div class="col-header">Peer Teachers</div>
+    <List threeLine avatarList singleSelection class="editor-list">
+      {#each peerTeachers as pt}
+        <Item on:SMUI:action={() => (selectedPeerTeacher = pt)}>
+          <Text>
+            <PrimaryText>{pt.name}</PrimaryText>
+            <SecondaryText>{pt.id}</SecondaryText>
+            <SecondaryText>Assigned hours: {pt.lab_hours}</SecondaryText>
+          </Text>
+          <Meta>
+            <IconButton
+              class="material-icons"
+              on:click$stopPropagation={() => {
+                deletePT(pt.id);
+              }}
+            >
+              remove_circle
+            </IconButton>
+          </Meta>
+        </Item>
+      {/each}
+    </List>
+  </div>
+  <div class="column">
+    <div class="col-header">Labs</div>
+    <List threeLine class="editor-list">
+      {#each compatibleLabs as lab}
+        <Item>
+          <Text>
+            <PrimaryText>{lab.course}-{lab.section}</PrimaryText>
+            <SecondaryText>{lab.time}</SecondaryText>
+            <SecondaryText>{lab.location}</SecondaryText>
+          </Text>
+          <Meta class="material-icons">
+            <IconButton
+              class="material-icons"
+              on:click$stopPropagation={() => {
+                assignLab(lab.id);
+              }}
+            >
+              add_circle
+            </IconButton>
+          </Meta>
+        </Item>
+      {/each}
+    </List>
+  </div>
+  <div class="column">
+    <div class="col-header">
+      {selectedPeerTeacher?.name ?? "PT"}
+    </div>
+    <List threeLine class="editor-list">
+      {#each assignedLabs as lab}
+        <Item>
+          <Text>
+            <PrimaryText>{lab.course}-{lab.section}</PrimaryText>
+            <SecondaryText>{lab.time}</SecondaryText>
+            <SecondaryText>{lab.location}</SecondaryText>
+          </Text>
+          <Meta class="material-icons">
+            <IconButton
+              class="material-icons"
+              on:click$stopPropagation={() => {
+                unassignLab(lab.id);
+              }}
+            >
+              remove_circle
+            </IconButton>
+          </Meta>
+        </Item>
+      {/each}
+    </List>
+  </div>
+</div> -->
+
+<div class="flex flex-row h-full px-[10%] pt-[3%] pb-[10%]">
+  <!-- 3 Columns -->
+
+  <div class="assign-box">
+
+    <div class="assign-box-header">
+      Peer Teacher
+    </div>
+  </div>
+
+</div>
+
+<style>
+  /* .assign-labs {
+    display: flex;
+    min-height: 0;
+    max-width: 100vw;
+    overflow: hidden;
+    font-family: "Fira Code", sans-serif;
+    border-radius: 2em 2em 2em 2em;
+    margin-top: 1.5em;
+  }
+
+  .col-header {
+    font-family: inherit;
+    text-align: center;
+    max-height: 1em;
+    overflow: hidden;
+    font-size: x-large;
+    font-weight: 600;
+    border: 0.1em solid rgb(6, 69, 48);
+    border-radius: 20em 20em;
+    margin: 0.3em 1em 0em 1em;
+  }
+
+  .column {
+    display: flex row;
+    font-family: inherit;
+    flex: 1;
+
+    background-color: rgb(192, 192, 164);
+  }
+
+  * :global(.editor-list) {
+    margin: 0.5em 0em 0.5em 0.5em;
+    font-family: inherit;
+    font-weight: 600;
+    height: 70vh;
+    overflow: auto;
+  } */
+</style>
-- 
cgit v1.2.3


From 2b4098759b4b7b5ce446b89bd888b4f442e8149c Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 16:07:15 -0500
Subject: Defined all 3 columns and temporarily automated store by populating
 them with a db from localstorage in order to test more efficiently.

---
 src/components/AssignLabs/AssignLabs.svelte | 50 +++++++++++++++++++++++++++--
 1 file changed, 48 insertions(+), 2 deletions(-)

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index 9331b81..3964d02 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -11,6 +11,12 @@
   import { labStore, ptStore } from "../../stores";
   import Lab from "./Lab.svelte";
   import PT from "./PT.svelte";
+  import { onMount } from "svelte";
+  import {
+    parseDatabase,
+    parseDatabaseLocal,
+    parseLabSchedule,
+  } from "../../util/parser";
 
   let selectedPeerTeacher: PeerTeacher | undefined;
 
@@ -100,6 +106,14 @@
       component: Lab,
     },
   ];
+
+  // Load db from local storage so I don't have to keep uploading
+  onMount(() => {
+    const db = localStorage.getItem("db");
+    if (db) {
+      parseDatabaseLocal(JSON.parse(db));
+    }
+  });
 </script>
 
 <!-- <div class="assign-labs">
@@ -182,13 +196,45 @@
 <div class="flex flex-row h-full px-[10%] pt-[3%] pb-[10%]">
   <!-- 3 Columns -->
 
+  <div class="assign-box rounded-l-xl">
+    <div class="assign-box-header">Peer Teacher</div>
+    <div class="assign-box-body">
+      {#each peerTeachers as pt}
+        <div
+          class={selectedPeerTeacher == pt ? "border-l-8 border-blue-500" : ""}
+          on:click={() => {
+            selectedPeerTeacher = pt;
+          }}
+        >
+          <svelte:component this={PT} {pt} />
+        </div>
+      {/each}
+    </div>
+  </div>
+
   <div class="assign-box">
+    <div class="assign-box-header">Labs</div>
+    <div class="assign-box-body">
+      {#each labs as lab}
+        <!-- <div> -->
+        <svelte:component this={Lab} {lab} />
+        <!-- </div> -->
+      {/each}
+    </div>
+  </div>
 
+  <div class="assign-box rounded-r-xl">
     <div class="assign-box-header">
-      Peer Teacher
+      {selectedPeerTeacher?.name ?? "PT's Labs"}
+    </div>
+    <div class="assign-box-body">
+      {#each assignedLabs as lab}
+        <!-- <div> -->
+        <svelte:component this={Lab} {lab} />
+        <!-- </div> -->
+      {/each}
     </div>
   </div>
-
 </div>
 
 <style>
-- 
cgit v1.2.3


From 5220e9abd62a0fe12198e042a0525e5e24fbeb73 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 16:08:30 -0500
Subject: Remove original UI (was commented out)

---
 src/components/AssignLabs/AssignLabs.svelte | 85 -----------------------------
 1 file changed, 85 deletions(-)

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index 3964d02..f87c332 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -1,12 +1,4 @@
 <script lang="ts">
-  import IconButton from "@smui/icon-button";
-  import List, {
-    Item,
-    Meta,
-    PrimaryText,
-    SecondaryText,
-    Text,
-  } from "@smui/list";
   import type PeerTeacher from "../../models/PeerTeacher";
   import { labStore, ptStore } from "../../stores";
   import Lab from "./Lab.svelte";
@@ -116,83 +108,6 @@
   });
 </script>
 
-<!-- <div class="assign-labs">
-  <div class="column">
-    <div class="col-header">Peer Teachers</div>
-    <List threeLine avatarList singleSelection class="editor-list">
-      {#each peerTeachers as pt}
-        <Item on:SMUI:action={() => (selectedPeerTeacher = pt)}>
-          <Text>
-            <PrimaryText>{pt.name}</PrimaryText>
-            <SecondaryText>{pt.id}</SecondaryText>
-            <SecondaryText>Assigned hours: {pt.lab_hours}</SecondaryText>
-          </Text>
-          <Meta>
-            <IconButton
-              class="material-icons"
-              on:click$stopPropagation={() => {
-                deletePT(pt.id);
-              }}
-            >
-              remove_circle
-            </IconButton>
-          </Meta>
-        </Item>
-      {/each}
-    </List>
-  </div>
-  <div class="column">
-    <div class="col-header">Labs</div>
-    <List threeLine class="editor-list">
-      {#each compatibleLabs as lab}
-        <Item>
-          <Text>
-            <PrimaryText>{lab.course}-{lab.section}</PrimaryText>
-            <SecondaryText>{lab.time}</SecondaryText>
-            <SecondaryText>{lab.location}</SecondaryText>
-          </Text>
-          <Meta class="material-icons">
-            <IconButton
-              class="material-icons"
-              on:click$stopPropagation={() => {
-                assignLab(lab.id);
-              }}
-            >
-              add_circle
-            </IconButton>
-          </Meta>
-        </Item>
-      {/each}
-    </List>
-  </div>
-  <div class="column">
-    <div class="col-header">
-      {selectedPeerTeacher?.name ?? "PT"}
-    </div>
-    <List threeLine class="editor-list">
-      {#each assignedLabs as lab}
-        <Item>
-          <Text>
-            <PrimaryText>{lab.course}-{lab.section}</PrimaryText>
-            <SecondaryText>{lab.time}</SecondaryText>
-            <SecondaryText>{lab.location}</SecondaryText>
-          </Text>
-          <Meta class="material-icons">
-            <IconButton
-              class="material-icons"
-              on:click$stopPropagation={() => {
-                unassignLab(lab.id);
-              }}
-            >
-              remove_circle
-            </IconButton>
-          </Meta>
-        </Item>
-      {/each}
-    </List>
-  </div>
-</div> -->
-
 <div class="flex flex-row h-full px-[10%] pt-[3%] pb-[10%]">
   <!-- 3 Columns -->
 
-- 
cgit v1.2.3


From 6fd2fe4f063c3f5224402c5e75ece601cb4c4ef3 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 19:02:55 -0500
Subject: [CLEANUP] commented out old style

---
 src/components/AssignLabs/AssignLabs.svelte | 46 +----------------------------
 1 file changed, 1 insertion(+), 45 deletions(-)

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index f87c332..6c1276a 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -131,9 +131,7 @@
     <div class="assign-box-header">Labs</div>
     <div class="assign-box-body">
       {#each labs as lab}
-        <!-- <div> -->
         <svelte:component this={Lab} {lab} />
-        <!-- </div> -->
       {/each}
     </div>
   </div>
@@ -144,50 +142,8 @@
     </div>
     <div class="assign-box-body">
       {#each assignedLabs as lab}
-        <!-- <div> -->
-        <svelte:component this={Lab} {lab} />
-        <!-- </div> -->
+        <svelte:component this={Lab} {lab} assign={false} />
       {/each}
     </div>
   </div>
 </div>
-
-<style>
-  /* .assign-labs {
-    display: flex;
-    min-height: 0;
-    max-width: 100vw;
-    overflow: hidden;
-    font-family: "Fira Code", sans-serif;
-    border-radius: 2em 2em 2em 2em;
-    margin-top: 1.5em;
-  }
-
-  .col-header {
-    font-family: inherit;
-    text-align: center;
-    max-height: 1em;
-    overflow: hidden;
-    font-size: x-large;
-    font-weight: 600;
-    border: 0.1em solid rgb(6, 69, 48);
-    border-radius: 20em 20em;
-    margin: 0.3em 1em 0em 1em;
-  }
-
-  .column {
-    display: flex row;
-    font-family: inherit;
-    flex: 1;
-
-    background-color: rgb(192, 192, 164);
-  }
-
-  * :global(.editor-list) {
-    margin: 0.5em 0em 0.5em 0.5em;
-    font-family: inherit;
-    font-weight: 600;
-    height: 70vh;
-    overflow: auto;
-  } */
-</style>
-- 
cgit v1.2.3


From 99721049d08f95f9f1aa4ea7645df9bdb82d6998 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 26 Jun 2022 16:20:05 -0500
Subject: Added a universal list of all unassigned labs to aid in scheduling.
 use vh/vw instead of percent.

---
 src/components/AssignLabs/AssignLabs.svelte | 88 ++++++++++++++++++-----------
 1 file changed, 56 insertions(+), 32 deletions(-)

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index 6c1276a..082a71f 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -27,6 +27,8 @@
     })
     .sort((a, b) => a.id - b.id);
 
+  $: unassignedLabs = labs.filter((lab) => !lab.assigned);
+
   $: compatibleLabs = labs.filter(
     (lab) =>
       // Lab not already assigned
@@ -108,42 +110,64 @@
   });
 </script>
 
-<div class="flex flex-row h-full px-[10%] pt-[3%] pb-[10%]">
-  <!-- 3 Columns -->
-
-  <div class="assign-box rounded-l-xl">
-    <div class="assign-box-header">Peer Teacher</div>
-    <div class="assign-box-body">
-      {#each peerTeachers as pt}
-        <div
-          class={selectedPeerTeacher == pt ? "border-l-8 border-blue-500" : ""}
-          on:click={() => {
-            selectedPeerTeacher = pt;
-          }}
-        >
-          <svelte:component this={PT} {pt} />
-        </div>
-      {/each}
+<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={selectedPeerTeacher == pt
+              ? "border-l-8 border-blue-500"
+              : ""}
+            on:click={() => {
+              selectedPeerTeacher = pt;
+            }}
+          >
+            <svelte:component this={PT} {pt} />
+          </div>
+        {/each}
+      </div>
     </div>
-  </div>
 
-  <div class="assign-box">
-    <div class="assign-box-header">Labs</div>
-    <div class="assign-box-body">
-      {#each labs as lab}
-        <svelte:component this={Lab} {lab} />
-      {/each}
+    <div class="assign-box">
+      <div class="assign-box-header">Labs</div>
+      <div class="assign-box-body">
+        {#each compatibleLabs as lab}
+          <svelte:component this={Lab} {lab} />
+        {/each}
+      </div>
     </div>
-  </div>
 
-  <div class="assign-box rounded-r-xl">
-    <div class="assign-box-header">
-      {selectedPeerTeacher?.name ?? "PT's Labs"}
-    </div>
-    <div class="assign-box-body">
-      {#each assignedLabs as lab}
-        <svelte:component this={Lab} {lab} assign={false} />
-      {/each}
+    <div class="assign-box rounded-r-xl">
+      <div class="assign-box-header">
+        {selectedPeerTeacher?.name ?? "PT's Labs"}
+      </div>
+      <div class="assign-box-body">
+        {#each assignedLabs as lab}
+          <svelte:component this={Lab} {lab} assign={false} />
+        {/each}
+      </div>
     </div>
   </div>
+
+  <!-- Bottom half: Universal non-assigned labs -->
+  <div
+    class="flex flex-row overflow-auto mt-[1vh] border-y-4 border-slate-500 w-full h-[17vh] items-center text-sm"
+  >
+    {#each unassignedLabs as lab}
+      <div
+        class="border rounded-xl hover:bg-sky-100 hover:text-black px-3 py-1 mx-2"
+      >
+        <p>{lab.course}</p>
+        <p>{lab.section}</p>
+      </div>
+    {/each}
+  </div>
 </div>
-- 
cgit v1.2.3


From aac7d5f8f05b661db4415d2cbb7dc351b53d774b Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 26 Jun 2022 18:06:32 -0500
Subject: Pass selected pt to LabBox. TODO get all reactive statements to
 actually update ie selected PT's labs

---
 src/components/AssignLabs/AssignLabs.svelte | 28 +++++++++++-----------------
 1 file changed, 11 insertions(+), 17 deletions(-)

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index 082a71f..9623560 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import type PeerTeacher from "../../models/PeerTeacher";
   import { labStore, ptStore } from "../../stores";
-  import Lab from "./Lab.svelte";
-  import PT from "./PT.svelte";
+  import Lab from "./LabBox.svelte";
+  import PT from "./PTBox.svelte";
   import { onMount } from "svelte";
   import {
     parseDatabase,
@@ -63,7 +63,10 @@
   function assignLab(id: number) {
     // Mark lab as assigned
     const lab = $labStore.get(id);
-    if (lab === undefined) return;
+    if (lab === undefined) {
+      console.error("Error lab does not exist");
+      return;
+    }
     lab.assigned = true;
 
     selectedPeerTeacher?.labs.add(id);
@@ -89,18 +92,6 @@
     peerTeachers = peerTeachers;
   }
 
-  $: clicked = 0;
-
-  $: columns = [
-    { header: "Peer Teachers", data: [...peerTeachers], component: PT },
-    { header: "Labs", data: [...compatibleLabs], component: Lab },
-    {
-      header: selectedPeerTeacher?.name ?? "PT's Labs",
-      data: [...assignedLabs],
-      component: Lab,
-    },
-  ];
-
   // Load db from local storage so I don't have to keep uploading
   onMount(() => {
     const db = localStorage.getItem("db");
@@ -128,6 +119,7 @@
               : ""}
             on:click={() => {
               selectedPeerTeacher = pt;
+              console.log(pt);
             }}
           >
             <svelte:component this={PT} {pt} />
@@ -136,15 +128,17 @@
       </div>
     </div>
 
+    <!-- Available Labs -->
     <div class="assign-box">
       <div class="assign-box-header">Labs</div>
       <div class="assign-box-body">
         {#each compatibleLabs as lab}
-          <svelte:component this={Lab} {lab} />
+          <svelte:component this={Lab} {lab} {selectedPeerTeacher} />
         {/each}
       </div>
     </div>
 
+    <!-- Selected PT's Labs -->
     <div class="assign-box rounded-r-xl">
       <div class="assign-box-header">
         {selectedPeerTeacher?.name ?? "PT's Labs"}
@@ -157,7 +151,7 @@
     </div>
   </div>
 
-  <!-- Bottom half: Universal non-assigned labs -->
+  <!-- Bottom half: Universal unassigned labs -->
   <div
     class="flex flex-row overflow-auto mt-[1vh] border-y-4 border-slate-500 w-full h-[17vh] items-center text-sm"
   >
-- 
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/AssignLabs.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 3dea5572103aea641149c5ec73fc621ed914d8f9 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 16 Jul 2022 00:57:03 -0400
Subject: updating all necessary reactive declarations through single function.
 All reactive variables correctly update now.

---
 src/components/AssignLabs/AssignLabs.svelte | 41 +++++++++++++++++------------
 1 file changed, 24 insertions(+), 17 deletions(-)

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index 1bbc006..a9e3e8d 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -41,6 +41,12 @@
       )
   );
 
+  function updateReactiveDeclarations() {
+    selectedPeerTeacher = selectedPeerTeacher;
+    peerTeachers = peerTeachers;
+    labs = labs;
+  }
+
   function deletePT(id: number) {
     if (selectedPeerTeacher?.id === id) {
       selectedPeerTeacher = undefined;
@@ -68,29 +74,16 @@
       return;
     }
     lab.assigned = true;
-
     selectedPeerTeacher?.labs.add(id);
-
-    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
-    selectedPeerTeacher = selectedPeerTeacher;
-    // Self assignment to update PT values used in `Peer Teacher` column
-    peerTeachers = peerTeachers;
+    updateReactiveDeclarations();
   }
 
   function unassignLab(id: number) {
-    console.log("unassiging", id)
     const lab = $labStore.get(id);
     if (lab === undefined) return;
     lab.assigned = false;
-
     selectedPeerTeacher?.labs.delete(id);
-
-    // Mark lab as unassigned
-
-    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
-    selectedPeerTeacher = selectedPeerTeacher;
-    // Self assignment to update PT values used in `Peer Teacher` column
-    peerTeachers = peerTeachers;
+    updateReactiveDeclarations();
   }
 
   // Load db from local storage so I don't have to keep uploading
@@ -133,7 +126,14 @@
       <div class="assign-box-header">Labs</div>
       <div class="assign-box-body">
         {#each compatibleLabs as lab}
-          <svelte:component this={Lab} {lab} iconClick={()=>{assignLab(lab.id)}} />
+          <svelte:component
+            this={Lab}
+            {lab}
+            iconName="plus-circle"
+            iconClick={() => {
+              assignLab(lab.id);
+            }}
+          />
         {/each}
       </div>
     </div>
@@ -145,7 +145,14 @@
       </div>
       <div class="assign-box-body">
         {#each assignedLabs as lab}
-          <svelte:component this={Lab} {lab} icon="minus-circle" iconClick={()=>{unassignLab(lab.id)}} />
+          <svelte:component
+            this={Lab}
+            {lab}
+            iconName="minus-circle"
+            iconClick={() => {
+              unassignLab(lab.id);
+            }}
+          />
         {/each}
       </div>
     </div>
-- 
cgit v1.2.3


From 68272d3e577fb36a1d872cec3956c0425307c4f4 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 16 Jul 2022 01:14:54 -0400
Subject: Reposition and give title to unassigned labs

---
 src/components/AssignLabs/AssignLabs.svelte | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index a9e3e8d..3489b36 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -159,16 +159,19 @@
   </div>
 
   <!-- Bottom half: Universal unassigned labs -->
-  <div
-    class="flex flex-row overflow-auto mt-[1vh] border-y-4 border-slate-500 w-full h-[17vh] items-center text-sm"
-  >
-    {#each unassignedLabs as lab}
-      <div
-        class="border rounded-xl hover:bg-sky-100 hover:text-black px-3 py-1 mx-2"
-      >
-        <p>{lab.course}</p>
-        <p>{lab.section}</p>
-      </div>
-    {/each}
+  <div class="flex flex-col mt-2 text-center">
+    <h1>Unassigned Labs</h1>
+    <div
+      class="flex flex-row overflow-auto border-y-4 mt-1 border-slate-500 w-full items-center text-sm"
+    >
+      {#each unassignedLabs as lab}
+        <div
+          class="border rounded-xl hover:bg-sky-100 hover:text-black px-3 py-1 mx-2"
+        >
+          <p>{lab.course}</p>
+          <p>{lab.section}</p>
+        </div>
+      {/each}
+    </div>
   </div>
 </div>
-- 
cgit v1.2.3


From 86c8db5547a3b56fcfd8eb83bd0d6e684985ecdd Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 16 Jul 2022 01:21:36 -0400
Subject: Animate unassigned labs, mostly cleanup unused code

---
 src/components/AssignLabs/AssignLabs.svelte | 34 ++++-------------------------
 1 file changed, 4 insertions(+), 30 deletions(-)

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

diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
index 3489b36..3a326ad 100644
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ b/src/components/AssignLabs/AssignLabs.svelte
@@ -4,11 +4,7 @@
   import Lab from "./LabBox.svelte";
   import PT from "./PTBox.svelte";
   import { onMount } from "svelte";
-  import {
-    parseDatabase,
-    parseDatabaseLocal,
-    parseLabSchedule,
-  } from "../../util/parser";
+  import { parseDatabaseLocal } from "../../util/parser";
 
   let selectedPeerTeacher: PeerTeacher | undefined;
 
@@ -47,32 +43,9 @@
     labs = labs;
   }
 
-  function deletePT(id: number) {
-    if (selectedPeerTeacher?.id === id) {
-      selectedPeerTeacher = undefined;
-    }
-
-    $ptStore.get(id)?.labs.forEach((lab_id) => {
-      const lab = $labStore?.get(lab_id);
-      if (lab !== undefined) lab.assigned = false;
-    });
-
-    ptStore.update((map) => {
-      map.delete(id);
-      return map;
-    });
-
-    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
-    selectedPeerTeacher = selectedPeerTeacher;
-  }
-
   function assignLab(id: number) {
-    // Mark lab as assigned
     const lab = $labStore.get(id);
-    if (lab === undefined) {
-      console.error("Error lab does not exist");
-      return;
-    }
+    if (lab === undefined) return;
     lab.assigned = true;
     selectedPeerTeacher?.labs.add(id);
     updateReactiveDeclarations();
@@ -151,6 +124,7 @@
             iconName="minus-circle"
             iconClick={() => {
               unassignLab(lab.id);
+              
             }}
           />
         {/each}
@@ -166,7 +140,7 @@
     >
       {#each unassignedLabs as lab}
         <div
-          class="border rounded-xl hover:bg-sky-100 hover:text-black px-3 py-1 mx-2"
+          class="hover:animate-bounce border rounded-xl hover:bg-sky-100 hover:text-black px-3 py-1 mx-2"
         >
           <p>{lab.course}</p>
           <p>{lab.section}</p>
-- 
cgit v1.2.3