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 ++++++++++++++++++++++++++++
 src/components/AssignLabs/Lab.svelte        |   8 +
 src/components/AssignLabs/PT.svelte         |   9 ++
 3 files changed, 249 insertions(+)
 create mode 100644 src/components/AssignLabs/AssignLabs.svelte
 create mode 100644 src/components/AssignLabs/Lab.svelte
 create mode 100644 src/components/AssignLabs/PT.svelte

(limited to 'src/components/AssignLabs')

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>
diff --git a/src/components/AssignLabs/Lab.svelte b/src/components/AssignLabs/Lab.svelte
new file mode 100644
index 0000000..94e1d69
--- /dev/null
+++ b/src/components/AssignLabs/Lab.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+    import type Lab from "../../models/Lab";
+    export let datum: Lab;
+</script>
+
+<div>
+    {datum.course}
+</div>
\ No newline at end of file
diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
new file mode 100644
index 0000000..0976fe4
--- /dev/null
+++ b/src/components/AssignLabs/PT.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+    import type PeerTeacher from "../../models/PeerTeacher";
+    export let datum: PeerTeacher;
+    
+</script>
+
+<div>
+    {datum.firstname}
+</div>
-- 
cgit v1.2.3


From b5cd6414c2f23e51420f97f326324ce0c614041b Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 16:05:03 -0500
Subject: PT ready, however theres a bug with modals. Info button brings up
 modal of first PT, ignoring completely the pt that it is currently on. May
 come from each created modal sharing the same PT to be honest (after
 unrolling the for loop).

---
 src/components/AssignLabs/PT.svelte | 49 ++++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 4 deletions(-)

(limited to 'src/components/AssignLabs')

diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
index 0976fe4..7db84f9 100644
--- a/src/components/AssignLabs/PT.svelte
+++ b/src/components/AssignLabs/PT.svelte
@@ -1,9 +1,50 @@
 <script lang="ts">
     import type PeerTeacher from "../../models/PeerTeacher";
-    export let datum: PeerTeacher;
-    
+    export let pt: PeerTeacher;
 </script>
 
-<div>
-    {datum.firstname}
+<!-- PT Box -->
+<div class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black">
+    <!-- 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="my-modal-4" class="">
+            <svg
+                on:click={() => console.log(pt.name)}
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width={2}
+            >
+                <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+            </svg>
+        </label>
+
+        <input type="checkbox" id="my-modal-4" class="modal-toggle"/>
+        <label for="my-modal-4" class="modal cursor-pointer">
+            <label class="modal-box relative" for="">
+                <h3 class="text-lg font-bold ">
+                    {pt.name}
+                </h3>
+                {#each pt.events as e}
+                    <p class="py-4">
+                        {e.info}
+                    </p>
+                {/each}
+            </label>
+        </label>
+    </div>
+
+    <!-- Bottom -->
+    <div>Hours: {pt.lab_hours}</div>
 </div>
-- 
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')

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')

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 1d114affa1f09e9dd13a0163c27bf3ef38ac98f6 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 19:00:12 -0500
Subject: SVG wrapper component `Icon.svelte` for storing all SVGs, allowing
 SVG paths to be hidden away in one file

---
 src/components/AssignLabs/PT.svelte | 32 ++++++++++-----------------
 src/components/helpers/Icon.svelte  | 44 +++++++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 21 deletions(-)
 create mode 100644 src/components/helpers/Icon.svelte

(limited to 'src/components/AssignLabs')

diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
index 7db84f9..297ee21 100644
--- a/src/components/AssignLabs/PT.svelte
+++ b/src/components/AssignLabs/PT.svelte
@@ -1,36 +1,26 @@
 <script lang="ts">
     import type PeerTeacher from "../../models/PeerTeacher";
+    import Icon from "../helpers/Icon.svelte";
     export let pt: PeerTeacher;
 </script>
 
 <!-- PT Box -->
-<div class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black">
+<div
+    class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
+>
     <!-- Top half, name and button -->
-    <div class="flex flex-row items-center">
+    <div class="flex flex-row items-center ">
         <!-- Left half, name -->
         <strong class="flex-grow text-sm">{pt.name}</strong>
-        <!-- Right half, button -->
 
+        <!-- Right half, button -->
         <!-- The button to open modal -->
         <label for="my-modal-4" class="">
-            <svg
-                on:click={() => console.log(pt.name)}
-                xmlns="http://www.w3.org/2000/svg"
-                class="h-6 w-6"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-                stroke-width={2}
-            >
-                <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />
-            </svg>
+            <Icon name="info" class="h-6 w-6" />
         </label>
 
-        <input type="checkbox" id="my-modal-4" class="modal-toggle"/>
+        <!-- Modal PT event info -->
+        <input type="checkbox" id="my-modal-4" class="modal-toggle" />
         <label for="my-modal-4" class="modal cursor-pointer">
             <label class="modal-box relative" for="">
                 <h3 class="text-lg font-bold ">
@@ -45,6 +35,6 @@
         </label>
     </div>
 
-    <!-- Bottom -->
-    <div>Hours: {pt.lab_hours}</div>
+    <!-- Bottom half, hours -->
+    <div class="">Hours: {pt.lab_hours}</div>
 </div>
diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte
new file mode 100644
index 0000000..eb430fb
--- /dev/null
+++ b/src/components/helpers/Icon.svelte
@@ -0,0 +1,44 @@
+<script>
+    export let name;
+    export let width = "1rem";
+    export let height = "1rem";
+    export let focusable = false;
+    let icons = [
+        {
+            box: 24,
+            name: "plus-circle",
+            path: `<path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />`,
+        },
+        {
+            box: 24,
+            name: "minus-circle",
+            path: `<path stroke-linecap="round" stroke-linejoin="round" d="M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />`,
+        },
+        {
+            name: "info",
+            box: 24,
+            path: `<path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />`,
+        },
+    ];
+    let displayIcon = icons.find((e) => e.name === name);
+</script>
+
+<svg
+    class={$$props.class}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 {displayIcon.box} {displayIcon.box}"
+    stroke="currentColor"
+    stroke-width={2}
+    {width}
+    {height}
+    {focusable}>{@html displayIcon.path}</svg
+>
-- 
cgit v1.2.3


From 90d3e088d7e90e856bb8f406b5b70938a5e1c64e Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 19:01:47 -0500
Subject: Labs display for section Assign Labs

---
 src/components/AssignLabs/Lab.svelte | 43 ++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

(limited to 'src/components/AssignLabs')

diff --git a/src/components/AssignLabs/Lab.svelte b/src/components/AssignLabs/Lab.svelte
index 94e1d69..d3d8a6a 100644
--- a/src/components/AssignLabs/Lab.svelte
+++ b/src/components/AssignLabs/Lab.svelte
@@ -1,8 +1,43 @@
 <script lang="ts">
     import type Lab from "../../models/Lab";
-    export let datum: Lab;
+    import Icon from "../helpers/Icon.svelte";
+    export let lab: Lab;
+    export let assign: boolean = true;
 </script>
 
-<div>
-    {datum.course}
-</div>
\ No newline at end of file
+<!-- 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> -->
-- 
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')

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 d1d67eaec257ae5cba6caea55552c6e09ee8062c Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 26 Jun 2022 16:08:29 -0500
Subject: Generate a unique ID for each modal element to fix all modals opening
 up first PT

---
 src/components/AssignLabs/PT.svelte | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

(limited to 'src/components/AssignLabs')

diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
index 297ee21..3ad50d1 100644
--- a/src/components/AssignLabs/PT.svelte
+++ b/src/components/AssignLabs/PT.svelte
@@ -2,11 +2,15 @@
     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"
+    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 ">
@@ -15,19 +19,19 @@
 
         <!-- Right half, button -->
         <!-- The button to open modal -->
-        <label for="my-modal-4" class="">
+        <label for={modalID()} class="">
             <Icon name="info" class="h-6 w-6" />
         </label>
 
         <!-- Modal PT event info -->
-        <input type="checkbox" id="my-modal-4" class="modal-toggle" />
-        <label for="my-modal-4" class="modal cursor-pointer">
-            <label class="modal-box relative" for="">
-                <h3 class="text-lg font-bold ">
+        <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-4">
+                    <p class="py-2">
                         {e.info}
                     </p>
                 {/each}
-- 
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')

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 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/Lab.svelte    | 43 --------------------------
 src/components/AssignLabs/LabBox.svelte | 54 +++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 43 deletions(-)
 delete mode 100644 src/components/AssignLabs/Lab.svelte
 create mode 100644 src/components/AssignLabs/LabBox.svelte

(limited to 'src/components/AssignLabs')

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


From a997664bb30b1a79a17bebb7588db0fd68d81f04 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 26 Jun 2022 18:03:47 -0500
Subject: Rename

---
 src/components/AssignLabs/PT.svelte    | 44 ----------------------------------
 src/components/AssignLabs/PTBox.svelte | 44 ++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 44 deletions(-)
 delete mode 100644 src/components/AssignLabs/PT.svelte
 create mode 100644 src/components/AssignLabs/PTBox.svelte

(limited to 'src/components/AssignLabs')

diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
deleted file mode 100644
index 3ad50d1..0000000
--- a/src/components/AssignLabs/PT.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/AssignLabs/PTBox.svelte b/src/components/AssignLabs/PTBox.svelte
new file mode 100644
index 0000000..3ad50d1
--- /dev/null
+++ b/src/components/AssignLabs/PTBox.svelte
@@ -0,0 +1,44 @@
+<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>
-- 
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')

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')

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')

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


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')

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')

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')

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