From 474851c82cc9c9c93f80d9a41569e95272da2997 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 2 Jun 2022 08:26:33 -0500
Subject: Normally these would go inside a file named `tailwind.css` to be
 compiled into `index.css` included in `index.html`. I had trouble trying to
 set that up (no docs for this) so this solution I found works fine.

---
 src/App.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'src')

diff --git a/src/App.svelte b/src/App.svelte
index 4fbef54..260e037 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -2,4 +2,10 @@
   import Editor from "./components/Editor.svelte";
 </script>
 
+<style global>
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+</style>
+
 <Editor />
-- 
cgit v1.2.3


From 7a556a2981d4c0f78a9c8fe9836c00df9e396604 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 07:08:53 -0500
Subject: Add Sidebar component and @tailwind

---
 src/App.svelte | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/App.svelte b/src/App.svelte
index 260e037..2b497ee 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,11 +1,24 @@
+<!-- This is the Root component that loads other components -->
 <script lang="ts">
-  import Editor from "./components/Editor.svelte";
+	import Editor from "./components/Editor.svelte";
+	import Sidebar from "./Sidebar.svelte";
 </script>
 
+<Sidebar />
+<Editor />
+
 <style global>
 	@tailwind base;
 	@tailwind components;
 	@tailwind utilities;
-</style>
 
-<Editor />
+	@layer base {
+		html {
+			font-family: sans-serif, Proxima Nova;
+		}
+	}
+
+	* {
+		background-color: #EEEEEE;
+	}
+</style>
-- 
cgit v1.2.3


From dfa606185a796160370cbcf943442adccbb9b7b1 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 07:09:51 -0500
Subject: Sidebar scaffolding. Will handle switching between features

---
 src/Sidebar.svelte | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/Sidebar.svelte

(limited to 'src')

diff --git a/src/Sidebar.svelte b/src/Sidebar.svelte
new file mode 100644
index 0000000..b3fa352
--- /dev/null
+++ b/src/Sidebar.svelte
@@ -0,0 +1,27 @@
+<!-- Entire Page -->
+<div class="flex flex-row h-screen">
+    <!-- SIDEBAR -->
+    <div class="w-2/12 flex flex-col border-r">
+        <!-- Header for sidebar sections -->
+        <div
+            class="font-serif flex-none text-center text-2xl text-neutral-900 p-4 border-b font-black"
+        >
+            Peer Teacher Manager
+        </div>
+
+        <!-- Sidebar sections -->
+        <div class=" overflow-y-auto">
+            {#each Array(20) as _, i}
+                <div
+                    class="flex h-20 bg-sky-400 hover:bg-sky-700 active:bg-sky-800 border-b hover:drop-shadow-2xl font-bold justify-center items-center"
+                >
+                    Selection {i + 1}
+                </div>
+                <button class="btn btn-primary">Button</button>
+            {/each}
+        </div>
+    </div>
+
+    <!-- Main content -->
+    <div class="flex-auto">Content</div>
+</div>
-- 
cgit v1.2.3


From 642b291fea3d8fc9c4458720ec44bc0096c62d4e Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 11:24:29 -0500
Subject: Remove default gray background, now using daisyui themes

---
 src/App.svelte | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src')

diff --git a/src/App.svelte b/src/App.svelte
index 2b497ee..b0ec65c 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -17,8 +17,4 @@
 			font-family: sans-serif, Proxima Nova;
 		}
 	}
-
-	* {
-		background-color: #EEEEEE;
-	}
 </style>
-- 
cgit v1.2.3


From d1833b5f74464d0b0e73a31dfc21281241e88350 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 11:25:28 -0500
Subject: Darkmode component using DaisyUI

---
 src/DarkModeSwitch.svelte | 52 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 src/DarkModeSwitch.svelte

(limited to 'src')

diff --git a/src/DarkModeSwitch.svelte b/src/DarkModeSwitch.svelte
new file mode 100644
index 0000000..b119ad1
--- /dev/null
+++ b/src/DarkModeSwitch.svelte
@@ -0,0 +1,52 @@
+<script>
+    function selectDaisyTheme(new_theme) {
+        document.querySelector(":root").setAttribute("data-theme", new_theme);
+    }
+
+    function toggleDarkMode() {
+        const theme = localStorage.theme;
+        if (theme == "dark") {
+            localStorage.theme = "light";
+            selectDaisyTheme("light");
+        } else if (theme == "light") {
+            localStorage.theme = "dark";
+            selectDaisyTheme("dark");
+        }
+    }
+
+    function isDarkMode() {
+        return localStorage.theme == "dark";
+    }
+</script>
+
+<label class="swap swap-rotate">
+    <!-- this hidden checkbox controls the state -->
+    <!-- Make Moon/Sun icon based on current theme -->
+    {#if isDarkMode()}
+        <input type="checkbox" on:click={toggleDarkMode} />
+    {:else}
+        <input type="checkbox" checked="checked" on:click={toggleDarkMode} />
+    {/if}
+
+    <!-- sun icon -->
+    <svg
+        class="swap-on fill-current w-10 h-10"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+    >
+        <path
+            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+        />
+    </svg>
+
+    <!-- moon icon -->
+    <svg
+        class="swap-off fill-current w-10 h-10"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+    >
+        <path
+            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
+        />
+    </svg>
+</label>
-- 
cgit v1.2.3


From dc1829d00de895647847c3bb8fc7a4078f41ec52 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 11:27:49 -0500
Subject: Load DarkMode component in Sidebar

---
 src/Sidebar.svelte | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/Sidebar.svelte b/src/Sidebar.svelte
index b3fa352..c086452 100644
--- a/src/Sidebar.svelte
+++ b/src/Sidebar.svelte
@@ -1,3 +1,7 @@
+<script>
+    import DarkModeSwitch from "./DarkModeSwitch.svelte";
+</script>
+
 <!-- Entire Page -->
 <div class="flex flex-row h-screen">
     <!-- SIDEBAR -->
@@ -6,7 +10,11 @@
         <div
             class="font-serif flex-none text-center text-2xl text-neutral-900 p-4 border-b font-black"
         >
-            Peer Teacher Manager
+            <!-- Text -->
+            <div>Peer Teacher Manager</div>
+            <div>
+                <DarkModeSwitch/>
+            </div>
         </div>
 
         <!-- Sidebar sections -->
@@ -17,7 +25,6 @@
                 >
                     Selection {i + 1}
                 </div>
-                <button class="btn btn-primary">Button</button>
             {/each}
         </div>
     </div>
-- 
cgit v1.2.3


From 9053fa0c77b647a61ff18cfed9e6a203b73bdaae Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 12:03:35 -0500
Subject: Begin using Daisyui for sidebar

---
 src/Sidebar.svelte | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

(limited to 'src')

diff --git a/src/Sidebar.svelte b/src/Sidebar.svelte
index c086452..9fa8553 100644
--- a/src/Sidebar.svelte
+++ b/src/Sidebar.svelte
@@ -1,5 +1,16 @@
 <script>
     import DarkModeSwitch from "./DarkModeSwitch.svelte";
+
+    $: active_section = 2;
+
+    let sections = [
+        'File Uploads',
+        'Peer Teachers',
+        'Labs',
+        'Active Peer Teachers',
+        'Stats',
+        'TAMU html output'
+    ]
 </script>
 
 <!-- Entire Page -->
@@ -13,19 +24,17 @@
             <!-- Text -->
             <div>Peer Teacher Manager</div>
             <div>
-                <DarkModeSwitch/>
+                <DarkModeSwitch />
             </div>
         </div>
 
         <!-- Sidebar sections -->
-        <div class=" overflow-y-auto">
-            {#each Array(20) as _, i}
-                <div
-                    class="flex h-20 bg-sky-400 hover:bg-sky-700 active:bg-sky-800 border-b hover:drop-shadow-2xl font-bold justify-center items-center"
-                >
-                    Selection {i + 1}
-                </div>
-            {/each}
+        <div class="flex-col overflow-y-auto">
+            <ul class="menu bg-base-100 w-full">
+                {#each sections as sec, i}
+                    <li><div> {sec} </div></li>
+                {/each}
+            </ul>
         </div>
     </div>
 
-- 
cgit v1.2.3


From 9d3cf148bc0d9ebda4dd9ec3e2c71895f5706943 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 12:45:23 -0500
Subject: Begin handling sidebar selection

---
 src/Sidebar.svelte | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/Sidebar.svelte b/src/Sidebar.svelte
index 9fa8553..2ef585c 100644
--- a/src/Sidebar.svelte
+++ b/src/Sidebar.svelte
@@ -1,7 +1,7 @@
 <script>
     import DarkModeSwitch from "./DarkModeSwitch.svelte";
-
-    $: active_section = 2;
+    
+    let active_section : undefined;
 
     let sections = [
         'File Uploads',
@@ -11,6 +11,16 @@
         'Stats',
         'TAMU html output'
     ]
+
+    let sections2 = [
+        {name: 'File Uploads', file: null, isActive: 'active'},
+        {name: 'Peer Teachers', file: null, isActive: 'active'}
+    ]
+
+    function chooseSection(sec) {
+        active_section = sec;
+        console.log('Chose section', active_section)
+    }
 </script>
 
 <!-- Entire Page -->
@@ -30,9 +40,12 @@
 
         <!-- Sidebar sections -->
         <div class="flex-col overflow-y-auto">
-            <ul class="menu bg-base-100 w-full">
+            <ul class="menu bg-base-100 w-full text-xl">
                 {#each sections as sec, i}
-                    <li><div> {sec} </div></li>
+                    <li><div class=""> {sec} </div></li>
+                {/each}
+                {#each sections2 as sec, i}
+                    <li><div class="" on:click={() => chooseSection(sec)}> {sec.name} </div></li>
                 {/each}
             </ul>
         </div>
-- 
cgit v1.2.3


From fe0a572cba1959f6a9b36da29f03db8627539438 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 12:53:34 -0500
Subject: Move files

---
 src/DarkModeSwitch.svelte            | 52 ---------------------------------
 src/Sidebar.svelte                   | 56 ------------------------------------
 src/components/DarkModeSwitch.svelte | 52 +++++++++++++++++++++++++++++++++
 src/components/Sidebar.svelte        | 56 ++++++++++++++++++++++++++++++++++++
 4 files changed, 108 insertions(+), 108 deletions(-)
 delete mode 100644 src/DarkModeSwitch.svelte
 delete mode 100644 src/Sidebar.svelte
 create mode 100644 src/components/DarkModeSwitch.svelte
 create mode 100644 src/components/Sidebar.svelte

(limited to 'src')

diff --git a/src/DarkModeSwitch.svelte b/src/DarkModeSwitch.svelte
deleted file mode 100644
index b119ad1..0000000
--- a/src/DarkModeSwitch.svelte
+++ /dev/null
@@ -1,52 +0,0 @@
-<script>
-    function selectDaisyTheme(new_theme) {
-        document.querySelector(":root").setAttribute("data-theme", new_theme);
-    }
-
-    function toggleDarkMode() {
-        const theme = localStorage.theme;
-        if (theme == "dark") {
-            localStorage.theme = "light";
-            selectDaisyTheme("light");
-        } else if (theme == "light") {
-            localStorage.theme = "dark";
-            selectDaisyTheme("dark");
-        }
-    }
-
-    function isDarkMode() {
-        return localStorage.theme == "dark";
-    }
-</script>
-
-<label class="swap swap-rotate">
-    <!-- this hidden checkbox controls the state -->
-    <!-- Make Moon/Sun icon based on current theme -->
-    {#if isDarkMode()}
-        <input type="checkbox" on:click={toggleDarkMode} />
-    {:else}
-        <input type="checkbox" checked="checked" on:click={toggleDarkMode} />
-    {/if}
-
-    <!-- sun icon -->
-    <svg
-        class="swap-on fill-current w-10 h-10"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-    >
-        <path
-            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
-        />
-    </svg>
-
-    <!-- moon icon -->
-    <svg
-        class="swap-off fill-current w-10 h-10"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 24 24"
-    >
-        <path
-            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
-        />
-    </svg>
-</label>
diff --git a/src/Sidebar.svelte b/src/Sidebar.svelte
deleted file mode 100644
index 2ef585c..0000000
--- a/src/Sidebar.svelte
+++ /dev/null
@@ -1,56 +0,0 @@
-<script>
-    import DarkModeSwitch from "./DarkModeSwitch.svelte";
-    
-    let active_section : undefined;
-
-    let sections = [
-        'File Uploads',
-        'Peer Teachers',
-        'Labs',
-        'Active Peer Teachers',
-        'Stats',
-        'TAMU html output'
-    ]
-
-    let sections2 = [
-        {name: 'File Uploads', file: null, isActive: 'active'},
-        {name: 'Peer Teachers', file: null, isActive: 'active'}
-    ]
-
-    function chooseSection(sec) {
-        active_section = sec;
-        console.log('Chose section', active_section)
-    }
-</script>
-
-<!-- Entire Page -->
-<div class="flex flex-row h-screen">
-    <!-- SIDEBAR -->
-    <div class="w-2/12 flex flex-col border-r">
-        <!-- Header for sidebar sections -->
-        <div
-            class="font-serif flex-none text-center text-2xl text-neutral-900 p-4 border-b font-black"
-        >
-            <!-- Text -->
-            <div>Peer Teacher Manager</div>
-            <div>
-                <DarkModeSwitch />
-            </div>
-        </div>
-
-        <!-- Sidebar sections -->
-        <div class="flex-col overflow-y-auto">
-            <ul class="menu bg-base-100 w-full text-xl">
-                {#each sections as sec, i}
-                    <li><div class=""> {sec} </div></li>
-                {/each}
-                {#each sections2 as sec, i}
-                    <li><div class="" on:click={() => chooseSection(sec)}> {sec.name} </div></li>
-                {/each}
-            </ul>
-        </div>
-    </div>
-
-    <!-- Main content -->
-    <div class="flex-auto">Content</div>
-</div>
diff --git a/src/components/DarkModeSwitch.svelte b/src/components/DarkModeSwitch.svelte
new file mode 100644
index 0000000..b119ad1
--- /dev/null
+++ b/src/components/DarkModeSwitch.svelte
@@ -0,0 +1,52 @@
+<script>
+    function selectDaisyTheme(new_theme) {
+        document.querySelector(":root").setAttribute("data-theme", new_theme);
+    }
+
+    function toggleDarkMode() {
+        const theme = localStorage.theme;
+        if (theme == "dark") {
+            localStorage.theme = "light";
+            selectDaisyTheme("light");
+        } else if (theme == "light") {
+            localStorage.theme = "dark";
+            selectDaisyTheme("dark");
+        }
+    }
+
+    function isDarkMode() {
+        return localStorage.theme == "dark";
+    }
+</script>
+
+<label class="swap swap-rotate">
+    <!-- this hidden checkbox controls the state -->
+    <!-- Make Moon/Sun icon based on current theme -->
+    {#if isDarkMode()}
+        <input type="checkbox" on:click={toggleDarkMode} />
+    {:else}
+        <input type="checkbox" checked="checked" on:click={toggleDarkMode} />
+    {/if}
+
+    <!-- sun icon -->
+    <svg
+        class="swap-on fill-current w-10 h-10"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+    >
+        <path
+            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+        />
+    </svg>
+
+    <!-- moon icon -->
+    <svg
+        class="swap-off fill-current w-10 h-10"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+    >
+        <path
+            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
+        />
+    </svg>
+</label>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
new file mode 100644
index 0000000..eaea191
--- /dev/null
+++ b/src/components/Sidebar.svelte
@@ -0,0 +1,56 @@
+<script>
+    import DarkModeSwitch from "./components/DarkModeSwitch.svelte";
+    
+    let active_section : undefined;
+
+    let sections = [
+        'File Uploads',
+        'Peer Teachers',
+        'Labs',
+        'Active Peer Teachers',
+        'Stats',
+        'TAMU html output'
+    ]
+
+    let sections2 = [
+        {name: 'File Uploads', file: null, isActive: 'active'},
+        {name: 'Peer Teachers', file: null, isActive: 'active'}
+    ]
+
+    function chooseSection(sec) {
+        active_section = sec;
+        console.log('Chose section', active_section)
+    }
+</script>
+
+<!-- Entire Page -->
+<div class="flex flex-row h-screen">
+    <!-- SIDEBAR -->
+    <div class="w-2/12 flex flex-col border-r">
+        <!-- Header for sidebar sections -->
+        <div
+            class="font-serif flex-none text-center text-2xl text-neutral-900 p-4 border-b font-black"
+        >
+            <!-- Text -->
+            <div>Peer Teacher Manager</div>
+            <div>
+                <DarkModeSwitch />
+            </div>
+        </div>
+
+        <!-- Sidebar sections -->
+        <div class="flex-col overflow-y-auto">
+            <ul class="menu bg-base-100 w-full text-xl">
+                {#each sections as sec, i}
+                    <li><div class=""> {sec} </div></li>
+                {/each}
+                {#each sections2 as sec, i}
+                    <li><div class="" on:click={() => chooseSection(sec)}> {sec.name} </div></li>
+                {/each}
+            </ul>
+        </div>
+    </div>
+
+    <!-- Main content -->
+    <div class="flex-auto">Content</div>
+</div>
-- 
cgit v1.2.3


From ee2cc847d0ecd1868cfaff8d3ad2b9b0be2cd361 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 13:38:20 -0500
Subject: Rename EditorList to AssignLabs component

---
 src/components/AssignLabs.svelte  | 213 ++++++++++++++++++++++++++++++++++++++
 src/components/Editor.svelte      |  20 ----
 src/components/EditorLists.svelte | 213 --------------------------------------
 3 files changed, 213 insertions(+), 233 deletions(-)
 create mode 100644 src/components/AssignLabs.svelte
 delete mode 100644 src/components/Editor.svelte
 delete mode 100644 src/components/EditorLists.svelte

(limited to 'src')

diff --git a/src/components/AssignLabs.svelte b/src/components/AssignLabs.svelte
new file mode 100644
index 0000000..ce68dca
--- /dev/null
+++ b/src/components/AssignLabs.svelte
@@ -0,0 +1,213 @@
+<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";
+
+  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;
+</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>
+
+<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;
+    /* font-size: 0.90em; */
+
+    /* border: 5px solid red;
+    border-style: solid;
+    background-color: pink; */
+  }
+
+  .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/Editor.svelte b/src/components/Editor.svelte
deleted file mode 100644
index c8a30c6..0000000
--- a/src/components/Editor.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts">
-  import EditorActions from "./EditorActions.svelte";
-  import EditorLists from "./EditorLists.svelte";
-</script>
-
-<div id="editor">
-  <EditorActions />
-  <EditorLists />
-</div>
-
-<style>
-  #editor {
-    display: flex;
-    flex-direction: column;
-  }
-
-  :global(#action-bar) {
-    flex-shrink: 0;
-  }
-</style>
diff --git a/src/components/EditorLists.svelte b/src/components/EditorLists.svelte
deleted file mode 100644
index ce68dca..0000000
--- a/src/components/EditorLists.svelte
+++ /dev/null
@@ -1,213 +0,0 @@
-<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";
-
-  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;
-</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>
-
-<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;
-    /* font-size: 0.90em; */
-
-    /* border: 5px solid red;
-    border-style: solid;
-    background-color: pink; */
-  }
-
-  .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 87646af4d4451ea6e318f85a17f10354ff39e507 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 13:39:01 -0500
Subject: Only load Sidebar, Sidebar loads others

---
 src/App.svelte | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/App.svelte b/src/App.svelte
index b0ec65c..1242e0d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,11 +1,9 @@
 <!-- This is the Root component that loads other components -->
 <script lang="ts">
-	import Editor from "./components/Editor.svelte";
-	import Sidebar from "./Sidebar.svelte";
+	import Sidebar from "./components/Sidebar.svelte";
 </script>
 
 <Sidebar />
-<Editor />
 
 <style global>
 	@tailwind base;
-- 
cgit v1.2.3


From 4e4166a35600f7d5fee7476041bf841921de3042 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 13:39:39 -0500
Subject: List out all sections, dynamically load section component

---
 src/components/Sidebar.svelte | 45 +++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 23 deletions(-)

(limited to 'src')

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index eaea191..a650ab2 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,25 +1,21 @@
-<script>
-    import DarkModeSwitch from "./components/DarkModeSwitch.svelte";
-    
-    let active_section : undefined;
+<script lang="ts">
+    import DarkModeSwitch from "./DarkModeSwitch.svelte";
+    import AssignLabs from "./AssignLabs.svelte";
 
     let sections = [
-        'File Uploads',
-        'Peer Teachers',
-        'Labs',
-        'Active Peer Teachers',
-        'Stats',
-        'TAMU html output'
-    ]
+        { name: "File Uploads", component: null },
+        { name: "Peer Teachers", component: null },
+        { name: "Assign Labs", component: AssignLabs },
+        { name: "Labs", component: null },
+        { name: "Active Peer Teachers", component: null },
+        { name: "Stats", component: null },
+        { name: "TAMU Html Output", component: null },
+    ];
 
-    let sections2 = [
-        {name: 'File Uploads', file: null, isActive: 'active'},
-        {name: 'Peer Teachers', file: null, isActive: 'active'}
-    ]
+    let selected = sections[0];
 
     function chooseSection(sec) {
-        active_section = sec;
-        console.log('Chose section', active_section)
+        selected = sec;
     }
 </script>
 
@@ -42,15 +38,18 @@
         <div class="flex-col overflow-y-auto">
             <ul class="menu bg-base-100 w-full text-xl">
                 {#each sections as sec, i}
-                    <li><div class=""> {sec} </div></li>
-                {/each}
-                {#each sections2 as sec, i}
-                    <li><div class="" on:click={() => chooseSection(sec)}> {sec.name} </div></li>
+                    <li>
+                        <div class="" on:click={() => chooseSection(sec)}>
+                            {sec.name}
+                        </div>
+                    </li>
                 {/each}
             </ul>
         </div>
     </div>
 
-    <!-- Main content -->
-    <div class="flex-auto">Content</div>
+    <!-- Chosen Section / Component -->
+    <div class="flex-auto">
+        <svelte:component this={selected.component} />
+    </div>
 </div>
-- 
cgit v1.2.3


From 24d29149373fd63b8f85257868832965c152cadb Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 14:45:00 -0500
Subject: convert if/else to function for conciseness

---
 src/components/DarkModeSwitch.svelte | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

(limited to 'src')

diff --git a/src/components/DarkModeSwitch.svelte b/src/components/DarkModeSwitch.svelte
index b119ad1..709b717 100644
--- a/src/components/DarkModeSwitch.svelte
+++ b/src/components/DarkModeSwitch.svelte
@@ -15,18 +15,15 @@
     }
 
     function isDarkMode() {
-        return localStorage.theme == "dark";
+        if (localStorage.theme == "dark") return "";
+        return "checked"
     }
 </script>
 
 <label class="swap swap-rotate">
     <!-- this hidden checkbox controls the state -->
     <!-- Make Moon/Sun icon based on current theme -->
-    {#if isDarkMode()}
-        <input type="checkbox" on:click={toggleDarkMode} />
-    {:else}
-        <input type="checkbox" checked="checked" on:click={toggleDarkMode} />
-    {/if}
+    <input type="checkbox" checked={isDarkMode()} on:click={toggleDarkMode} />
 
     <!-- sun icon -->
     <svg
-- 
cgit v1.2.3


From 3fc1d1b7c2c7fd389878cff1bc4414458c167e31 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 14:56:05 -0500
Subject: keep selected section highlighted

---
 src/components/Sidebar.svelte | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index a650ab2..06cbba2 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -37,9 +37,12 @@
         <!-- Sidebar sections -->
         <div class="flex-col overflow-y-auto">
             <ul class="menu bg-base-100 w-full text-xl">
-                {#each sections as sec, i}
+                {#each sections as sec}
                     <li>
-                        <div class="" on:click={() => chooseSection(sec)}>
+                        <div
+                            class={selected == sec ? "active" : ""}
+                            on:click={() => chooseSection(sec)}
+                        >
                             {sec.name}
                         </div>
                     </li>
-- 
cgit v1.2.3


From 847b3846fa4d354c513a13458b21378cff4a479f Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 19:34:33 -0500
Subject: Reusable Card and Upload button, FileUpload page done for now

---
 src/components/Card.svelte          |  14 ++++
 src/components/EditorActions.svelte | 142 ---------------------------------
 src/components/FileUpload.svelte    |  11 ---
 src/components/FileUploads.svelte   | 155 ++++++++++++++++++++++++++++++++++++
 src/components/UploadButton.svelte  |  11 +++
 5 files changed, 180 insertions(+), 153 deletions(-)
 create mode 100644 src/components/Card.svelte
 delete mode 100644 src/components/EditorActions.svelte
 delete mode 100644 src/components/FileUpload.svelte
 create mode 100644 src/components/FileUploads.svelte
 create mode 100644 src/components/UploadButton.svelte

(limited to 'src')

diff --git a/src/components/Card.svelte b/src/components/Card.svelte
new file mode 100644
index 0000000..a063e96
--- /dev/null
+++ b/src/components/Card.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    export let title = "";
+    export let desc = "";
+</script>
+
+<div class="card w-96 bg-primary text-primary-content">
+    <div class="card-body">
+        <h2 class="card-title">{title}</h2>
+        <p>{desc}</p>
+        <div class="card-actions justify-end">
+            <slot/>
+        </div>
+    </div>
+</div>
diff --git a/src/components/EditorActions.svelte b/src/components/EditorActions.svelte
deleted file mode 100644
index aacbf0e..0000000
--- a/src/components/EditorActions.svelte
+++ /dev/null
@@ -1,142 +0,0 @@
-<script lang="ts">
-  import Button, { Label } from "@smui/button";
-  import IconButton from "@smui/icon-button";
-  import Snackbar, { Actions } from "@smui/snackbar";
-  import FileUpload from "./FileUpload.svelte";
-  import {
-    parseDatabaseFile,
-    parseLabScheduleFile,
-    parsePTFile,
-  } from "../logic/EditorActions";
-  import { labStore, ptStore } from "../stores";
-
-  let ptSchedules: FileList | null;
-  let labSchedule: FileList | null;
-  let dbFile: FileList | null;
-  let snackbar;
-  let snackbarText;
-
-  $: {
-    if (ptSchedules?.length) {
-      const promises = [...ptSchedules].map((file) => parsePTFile(file));
-      Promise.allSettled(promises)
-        .then((results) =>
-          results.flatMap((result) => {
-            if (result.status === "fulfilled") {
-              ptStore.update((val) => val.set(result.value.id, result.value));
-              return [];
-            } else {
-              return [result];
-            }
-          })
-        )
-        .then((failed) => {
-          if (failed.length) {
-            snackbarText = `Failed to add ${failed.length} PTs. See console for details.`;
-            snackbar.open();
-          }
-        });
-    }
-  }
-
-  $: {
-    if (labSchedule?.length) {
-      parseLabScheduleFile(labSchedule[0])
-        .then((labs) => {
-          labStore.update(() => new Map(labs.map((lab) => [lab.id, lab])));
-        })
-        .catch(() => {
-          snackbarText =
-            "Failed to import lab schedule. See console for details.";
-          snackbar.open();
-        });
-    }
-  }
-
-  $: {
-    if (dbFile?.length) {
-      parseDatabaseFile(dbFile[0])
-        .then((database) => {
-          labStore.set(database.labs);
-          ptStore.set(database.peerTeachers);
-        })
-        .catch(() => {
-          snackbarText = "Failed to import database. See console for details.";
-          snackbar.open();
-        });
-    }
-  }
-
-  function exportDB() {
-    const peerTeachers = [...$ptStore.values()];
-    const labs = [...$labStore.values()];
-    const database = {
-      labs: labs,
-      peerTeachers: peerTeachers,
-    };
-
-    const dbObj = JSON.stringify(database, (_, value) => {
-      // Need to manually convert the PeerTeacher objects'
-      // `labs` set to an array because `JSON.stringify` doesn't
-      // support "stringing" it out of the box
-      if (typeof value === "object" && value instanceof Set) {
-        return [...value];
-      }
-      return value;
-    });
-
-    const blob = new Blob([dbObj], { type: "text/json" });
-    const anchor = document.createElement("a");
-    const url = window.URL.createObjectURL(blob);
-    anchor.href = url;
-    anchor.download = "pt-db.json";
-    anchor.style.display = "none";
-    document.body.appendChild(anchor);
-    anchor.click();
-    document.body.removeChild(anchor);
-    window.URL.revokeObjectURL(url);
-  }
-</script>
-
-<div id="action-bar">
-  <FileUpload accept="text/plain" multiple={true} bind:files={ptSchedules}>
-    <Label>Add PT</Label>
-  </FileUpload>
-  <FileUpload accept="application/json" bind:files={labSchedule}>
-    <Label>Import Labs</Label>
-  </FileUpload>
-  <FileUpload accept="application/json" bind:files={dbFile}>
-    <Label>Import DB</Label>
-  </FileUpload>
-  <Button
-    variant="raised"
-    ripple={false}
-    on:click={exportDB}
-    style="overflow: hidden; margin-left: 0.1em; margin-right: 0.5em;"
-  >
-    <Label>Export DB</Label>
-  </Button>
-  <div id="info" />
-</div>
-<Snackbar bind:this={snackbar} labelText={snackbarText}>
-  <Label />
-  <Actions>
-    <IconButton class="material-icons" title="Dismiss">close</IconButton>
-  </Actions>
-</Snackbar>
-
-<style>
-
-  #action-bar {
-    display: flex;
-    justify-content: space-evenly;
-    align-content: center;
-    border-radius: 1em;
-    /* background-image: linear-gradient(to right, red, purple); */
-    background-size: 100vw;
-    max-height: 2em;
-    max-width: 100vw;
-    overflow: hidden;
-    padding: 0.6em;
-  }
-</style>
diff --git a/src/components/FileUpload.svelte b/src/components/FileUpload.svelte
deleted file mode 100644
index d325e32..0000000
--- a/src/components/FileUpload.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script lang="ts">
-  export let accept = "";
-  export let multiple = false;
-  export let files: FileList | null = null;
-</script>
-
-<label class="mdc-button mdc-button--raised mdc-ripple-upgraded">
-  <div class="mdc-button__ripple" />
-  <slot>Upload</slot>
-  <input type="file" {accept} {multiple} bind:files hidden />
-</label>
diff --git a/src/components/FileUploads.svelte b/src/components/FileUploads.svelte
new file mode 100644
index 0000000..d48f455
--- /dev/null
+++ b/src/components/FileUploads.svelte
@@ -0,0 +1,155 @@
+<script lang="ts">
+  import { Label } from "@smui/button";
+  import IconButton from "@smui/icon-button";
+  import Snackbar, { Actions } from "@smui/snackbar";
+  import UploadButton from "./UploadButton.svelte";
+  import Card from "./Card.svelte";
+  import {
+    parseDatabaseFile,
+    parseLabScheduleFile,
+    parsePTFile,
+  } from "../logic/EditorActions";
+  import { labStore, ptStore } from "../stores";
+
+  let ptSchedules: FileList | null;
+  let labSchedule: FileList | null;
+  let dbFile: FileList | null;
+  let snackbar;
+  let snackbarText;
+
+  $: {
+    if (ptSchedules?.length) {
+      const promises = [...ptSchedules].map((file) => parsePTFile(file));
+      Promise.allSettled(promises)
+        .then((results) =>
+          results.flatMap((result) => {
+            if (result.status === "fulfilled") {
+              ptStore.update((val) => val.set(result.value.id, result.value));
+              return [];
+            } else {
+              return [result];
+            }
+          })
+        )
+        .then((failed) => {
+          if (failed.length) {
+            snackbarText = `Failed to add ${failed.length} PTs. See console for details.`;
+            snackbar.open();
+          }
+        });
+    }
+  }
+
+  $: {
+    if (labSchedule?.length) {
+      parseLabScheduleFile(labSchedule[0])
+        .then((labs) => {
+          labStore.update(() => new Map(labs.map((lab) => [lab.id, lab])));
+        })
+        .catch(() => {
+          snackbarText =
+            "Failed to import lab schedule. See console for details.";
+          snackbar.open();
+        });
+    }
+  }
+
+  $: {
+    if (dbFile?.length) {
+      parseDatabaseFile(dbFile[0])
+        .then((database) => {
+          labStore.set(database.labs);
+          ptStore.set(database.peerTeachers);
+        })
+        .catch(() => {
+          snackbarText = "Failed to import database. See console for details.";
+          snackbar.open();
+        });
+    }
+  }
+
+  function exportDB() {
+    const peerTeachers = [...$ptStore.values()];
+    const labs = [...$labStore.values()];
+    const database = {
+      labs: labs,
+      peerTeachers: peerTeachers,
+    };
+
+    const dbObj = JSON.stringify(database, (_, value) => {
+      // Need to manually convert the PeerTeacher objects'
+      // `labs` set to an array because `JSON.stringify` doesn't
+      // support "stringing" it out of the box
+      if (typeof value === "object" && value instanceof Set) {
+        return [...value];
+      }
+      return value;
+    });
+
+    const blob = new Blob([dbObj], { type: "text/json" });
+    const anchor = document.createElement("a");
+    const url = window.URL.createObjectURL(blob);
+    anchor.href = url;
+    anchor.download = "pt-db.json";
+    anchor.style.display = "none";
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    window.URL.revokeObjectURL(url);
+  }
+</script>
+
+<div class="flex flex-col items-center justify-center h-full ">
+  <div class="flex grid grid-cols-2 gap-6">
+    <Card
+      title="Peer Teacher"
+      desc="Upload one or more Peer Teacher schedule txt files"
+    >
+      <UploadButton
+        accept="text/plain"
+        multiple={true}
+        bind:files={ptSchedules}
+      />
+    </Card>
+
+    <Card
+      title="Labs"
+      desc="Upload one or more Labs as json file. Acquired from Howdy"
+    >
+      <UploadButton
+        color="btn-success"
+        accept="application/json"
+        multiple={true}
+        bind:files={ptSchedules}
+      />
+    </Card>
+
+    <Card
+      title="Data Base"
+      desc="Upload the json database file to continue working"
+    >
+      <UploadButton
+        color="btn-info"
+        accept="application/json"
+        multiple={true}
+        bind:files={dbFile}
+      />
+    </Card>
+
+    <Card
+      title="Export DB"
+      desc="Download the json database file to save your work. Remember to save it on the cloud somewhere!"
+    >
+      <button class="btn btn-warning" on:click={exportDB}>Download</button>
+    </Card>
+  </div>
+</div>
+
+<!-- https://github.com/saadeghi/daisyui/issues/221 -->
+<!-- Snackbar is a work in progress for Daisyui. Until then, keep smui -->
+<Snackbar bind:this={snackbar} labelText={snackbarText}>
+  <Label />
+  <Actions>
+    <IconButton class="material-icons" title="Dismiss">close</IconButton>
+  </Actions>
+</Snackbar>
diff --git a/src/components/UploadButton.svelte b/src/components/UploadButton.svelte
new file mode 100644
index 0000000..a592a25
--- /dev/null
+++ b/src/components/UploadButton.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let accept = "";
+  export let multiple = false;
+  export let files: FileList | null = null;
+  export let color = "";
+</script>
+
+<label class="btn {color}">
+  Upload
+  <input type="file" {accept} {multiple} bind:files hidden />
+</label>
-- 
cgit v1.2.3


From 9886cdeaf9a67cf1b8a6e57709ff05d99d0fa67c Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 19:41:24 -0500
Subject: [rename] component is called assignlabs

---
 src/components/Sidebar.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 06cbba2..07a7b7f 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
     import DarkModeSwitch from "./DarkModeSwitch.svelte";
     import AssignLabs from "./AssignLabs.svelte";
+    import FileUploads from "./FileUploads.svelte"
 
     let sections = [
-        { name: "File Uploads", component: null },
+        { name: "File Uploads", component: FileUploads },
         { name: "Peer Teachers", component: null },
         { name: "Assign Labs", component: AssignLabs },
         { name: "Labs", component: null },
-- 
cgit v1.2.3


From f7179e431bbe13731ec3f51310276d2181679cf4 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 3 Jun 2022 19:41:50 -0500
Subject: Add success certification as snackbar message

---
 src/components/FileUploads.svelte | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/FileUploads.svelte b/src/components/FileUploads.svelte
index d48f455..2c246f7 100644
--- a/src/components/FileUploads.svelte
+++ b/src/components/FileUploads.svelte
@@ -36,6 +36,10 @@
             snackbarText = `Failed to add ${failed.length} PTs. See console for details.`;
             snackbar.open();
           }
+        })
+        .finally( () => {
+          snackbarText = "Sucessfullyed imported Peer Teacher/s!";
+          snackbar.open();
         });
     }
   }
@@ -50,6 +54,10 @@
           snackbarText =
             "Failed to import lab schedule. See console for details.";
           snackbar.open();
+        })
+        .finally(() => {
+          snackbarText = "Sucessfullyed imported Lab/s!";
+          snackbar.open();
         });
     }
   }
@@ -64,6 +72,10 @@
         .catch(() => {
           snackbarText = "Failed to import database. See console for details.";
           snackbar.open();
+        })
+        .finally(() => {
+          snackbarText = "Sucessfullyed imported database!";
+          snackbar.open();
         });
     }
   }
@@ -120,7 +132,7 @@
         color="btn-success"
         accept="application/json"
         multiple={true}
-        bind:files={ptSchedules}
+        bind:files={labSchedule}
       />
     </Card>
 
-- 
cgit v1.2.3


From 9fc501eaec2b87e5b9e3aeab8d696d3c312257fa Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 4 Jun 2022 22:20:24 -0500
Subject: Hide header overflow, Choose Assign Labs section by default as I am
 working on it

---
 src/components/Sidebar.svelte | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

(limited to 'src')

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 07a7b7f..35fc90b 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import DarkModeSwitch from "./DarkModeSwitch.svelte";
     import AssignLabs from "./AssignLabs.svelte";
-    import FileUploads from "./FileUploads.svelte"
+    import FileUploads from "./FileUploads.svelte";
 
     let sections = [
         { name: "File Uploads", component: FileUploads },
@@ -13,7 +13,8 @@
         { name: "TAMU Html Output", component: null },
     ];
 
-    let selected = sections[0];
+    // Set initial page to Assign Labs while I work on it
+    let selected = sections[2];
 
     function chooseSection(sec) {
         selected = sec;
@@ -26,7 +27,7 @@
     <div class="w-2/12 flex flex-col border-r">
         <!-- Header for sidebar sections -->
         <div
-            class="font-serif flex-none text-center text-2xl text-neutral-900 p-4 border-b font-black"
+            class="font-serif flex-none text-center text-2xl text-neutral-900 p-4 border-b font-black overflow-hidden"
         >
             <!-- Text -->
             <div>Peer Teacher Manager</div>
-- 
cgit v1.2.3


From 81a3ddbbf4188ee27d702e3005924efb5771a6b4 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 4 Jun 2022 22:50:45 -0500
Subject: WiP using for loop to define 3 columns

---
 src/App.svelte                   | 28 +++++++++++++++++++++++++++
 src/components/AssignLabs.svelte | 41 ++++++++++++++++++++++++++++++++--------
 2 files changed, 61 insertions(+), 8 deletions(-)

(limited to 'src')

diff --git a/src/App.svelte b/src/App.svelte
index 1242e0d..4664e1e 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -15,4 +15,32 @@
 			font-family: sans-serif, Proxima Nova;
 		}
 	}
+
+	/* Custom Styles */
+	@layer utilities {
+		.assign-box {
+			/* w-1/3 bg-green-500 flex flex-col border-solid hover:border-4 border-2 border-slate-400 */
+			width: 33.33%;
+			display: flex;
+			flex-direction: column;
+			border-width: 4px;
+			border: solid;
+			border-color: rgb(148 163 184);
+		}
+		.assign-box:hover {
+			border-width: 6px;
+			border-color: black;
+		}
+
+		.assign-box-header {
+			font-size: 1.5rem;
+			font-family: sans;
+			border: solid;
+			text-align: center;
+			height: 10%;
+			overflow: hidden;
+		}
+
+
+	}
 </style>
diff --git a/src/components/AssignLabs.svelte b/src/components/AssignLabs.svelte
index ce68dca..2655853 100644
--- a/src/components/AssignLabs.svelte
+++ b/src/components/AssignLabs.svelte
@@ -88,9 +88,18 @@
   }
 
   $: clicked = 0;
+
+  $: columns = [
+    { header: "Peer Teachers", body: [...peerTeachers] },
+    { header: "Labs", body: [...compatibleLabs] },
+    {
+      header: selectedPeerTeacher?.name ?? "PT's Labs",
+      body: [...assignedLabs],
+    },
+  ];
 </script>
 
-<div class="assign-labs">
+<!-- <div class="assign-labs">
   <div class="column">
     <div class="col-header">Peer Teachers</div>
     <List threeLine avatarList singleSelection class="editor-list">
@@ -165,10 +174,31 @@
       {/each}
     </List>
   </div>
+</div> -->
+
+<div class="flex flex-row h-full px-[10%] pt-[3%] pb-[10%]">
+  <!-- Peer Teachers -->
+  <div class="flex flex-none flex-col w-1/3 border-4 border-solid rounded-lg border-slate-500 hover:border-8 hover:border-slate-700 overflow-hidden">
+    <!-- Header -->
+    <div class="flex font-sans text-lg text-center flex-none h-10 border-2 rounded-t-md border-slate-400 overflow-hidden">
+      Peer Teachers
+    </div>
+    <!-- Body -->
+    <div class="">Body</div>
+  </div>
+
+  <!-- Labs -->
+  <!-- <div class="assign-box bg-red-500">
+    <div class="assign-box-header">Labs</div>
+    <div />
+  </div> -->
+
+  <!-- Currently assigned to PT -->
+  <!-- <div class="assign-box bg-blue-500">Current</div> -->
 </div>
 
 <style>
-  .assign-labs {
+  /* .assign-labs {
     display: flex;
     min-height: 0;
     max-width: 100vw;
@@ -188,11 +218,6 @@
     border: 0.1em solid rgb(6, 69, 48);
     border-radius: 20em 20em;
     margin: 0.3em 1em 0em 1em;
-    /* font-size: 0.90em; */
-
-    /* border: 5px solid red;
-    border-style: solid;
-    background-color: pink; */
   }
 
   .column {
@@ -209,5 +234,5 @@
     font-weight: 600;
     height: 70vh;
     overflow: auto;
-  }
+  } */
 </style>
-- 
cgit v1.2.3


From fe45c328fbd83a0659b16598ad91d7d5d2361b02 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 5 Jun 2022 16:37:02 -0500
Subject: Remove custom css, use inline

---
 src/App.svelte | 24 ------------------------
 1 file changed, 24 deletions(-)

(limited to 'src')

diff --git a/src/App.svelte b/src/App.svelte
index 4664e1e..b775e86 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -18,29 +18,5 @@
 
 	/* Custom Styles */
 	@layer utilities {
-		.assign-box {
-			/* w-1/3 bg-green-500 flex flex-col border-solid hover:border-4 border-2 border-slate-400 */
-			width: 33.33%;
-			display: flex;
-			flex-direction: column;
-			border-width: 4px;
-			border: solid;
-			border-color: rgb(148 163 184);
-		}
-		.assign-box:hover {
-			border-width: 6px;
-			border-color: black;
-		}
-
-		.assign-box-header {
-			font-size: 1.5rem;
-			font-family: sans;
-			border: solid;
-			text-align: center;
-			height: 10%;
-			overflow: hidden;
-		}
-
-
 	}
 </style>
-- 
cgit v1.2.3


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/App.svelte                              |  23 +++
 src/components/AssignLabs.svelte            | 238 ----------------------------
 src/components/AssignLabs/AssignLabs.svelte | 232 +++++++++++++++++++++++++++
 src/components/AssignLabs/Lab.svelte        |   8 +
 src/components/AssignLabs/PT.svelte         |   9 ++
 src/components/Sidebar.svelte               |   2 +-
 src/models/PeerTeacher.ts                   |   2 +-
 7 files changed, 274 insertions(+), 240 deletions(-)
 delete mode 100644 src/components/AssignLabs.svelte
 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')

diff --git a/src/App.svelte b/src/App.svelte
index b775e86..5b453a1 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -18,5 +18,28 @@
 
 	/* Custom Styles */
 	@layer utilities {
+		.assign-box {
+			/* w-1/3 bg-green-500 flex flex-col border-solid hover:border-4 border-2 border-slate-400 */
+			flex: none;
+			flex-direction: column;
+			width: 33.33%;
+			display: flex;
+			border-width: 4px;
+			border: solid;
+			border-color: rgb(148 163 184);
+		}
+		.assign-box:hover {
+			/* border-width: 6px; */
+			border-color: black;
+		}
+
+		.assign-box-header {
+			font-size: 1.5rem;
+			font-family: sans;
+			border-bottom: solid;
+			text-align: center;
+			height: 10%;
+			overflow: hidden;
+		}
 	}
 </style>
diff --git a/src/components/AssignLabs.svelte b/src/components/AssignLabs.svelte
deleted file mode 100644
index 2655853..0000000
--- a/src/components/AssignLabs.svelte
+++ /dev/null
@@ -1,238 +0,0 @@
-<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";
-
-  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", body: [...peerTeachers] },
-    { header: "Labs", body: [...compatibleLabs] },
-    {
-      header: selectedPeerTeacher?.name ?? "PT's Labs",
-      body: [...assignedLabs],
-    },
-  ];
-</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%]">
-  <!-- Peer Teachers -->
-  <div class="flex flex-none flex-col w-1/3 border-4 border-solid rounded-lg border-slate-500 hover:border-8 hover:border-slate-700 overflow-hidden">
-    <!-- Header -->
-    <div class="flex font-sans text-lg text-center flex-none h-10 border-2 rounded-t-md border-slate-400 overflow-hidden">
-      Peer Teachers
-    </div>
-    <!-- Body -->
-    <div class="">Body</div>
-  </div>
-
-  <!-- Labs -->
-  <!-- <div class="assign-box bg-red-500">
-    <div class="assign-box-header">Labs</div>
-    <div />
-  </div> -->
-
-  <!-- Currently assigned to PT -->
-  <!-- <div class="assign-box bg-blue-500">Current</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/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>
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 35fc90b..53982bb 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import DarkModeSwitch from "./DarkModeSwitch.svelte";
-    import AssignLabs from "./AssignLabs.svelte";
+    import AssignLabs from "./AssignLabs/AssignLabs.svelte";
     import FileUploads from "./FileUploads.svelte";
 
     let sections = [
diff --git a/src/models/PeerTeacher.ts b/src/models/PeerTeacher.ts
index 557b36b..4020a00 100644
--- a/src/models/PeerTeacher.ts
+++ b/src/models/PeerTeacher.ts
@@ -11,7 +11,7 @@ interface PeerTeacherSerializeInfo {
         start: number,
         end: number
     }[],
-    labs: number[]
+    labs: number[],
 }
 
 export default class PeerTeacher {
-- 
cgit v1.2.3


From da3e73d1dabb2a881b840dc223d27369597e134c Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Wed, 8 Jun 2022 19:50:42 -0500
Subject: Add support to manually parse a db file and update the lab and PT
 stores

---
 src/util/parser.ts | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

(limited to 'src')

diff --git a/src/util/parser.ts b/src/util/parser.ts
index 844f87d..0f82996 100644
--- a/src/util/parser.ts
+++ b/src/util/parser.ts
@@ -1,6 +1,7 @@
 import EventInfo from "../models/EventInfo";
 import Lab from "../models/Lab";
 import PeerTeacher from "../models/PeerTeacher";
+import { labStore, ptStore } from "../stores";
 import { PeerTeacherImportError } from "./error";
 
 interface LabSchedule {
@@ -156,4 +157,27 @@ export function parseDatabase(database: DatabaseFile) {
     });
 
     return result;
+}
+
+/**
+ * Parses a JSON database into maps of Lab and Peer Teachers
+ * and updates local storage
+ * @param database The database object from a db file
+ */
+export function parseDatabaseLocal(database: DatabaseFile) {
+    const result = {
+        labs: new Map<number, Lab>(),
+        peerTeachers: new Map<number, PeerTeacher>()
+    }
+
+    database.labs.forEach(lab => {
+        result.labs.set(lab.id, Lab.fromJSON(lab));
+    });
+
+    database.peerTeachers.forEach(pt => {
+        result.peerTeachers.set(pt.id, PeerTeacher.fromJSON(pt));
+    });
+
+    labStore.set(result.labs);
+    ptStore.set(result.peerTeachers)
 }
\ No newline at end of file
-- 
cgit v1.2.3


From 850d3ec3de34597702ac97809a8310cd390b4bbd Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 16:03:42 -0500
Subject: Need 3 separate columns of `assign-box` rather than for loop 3
 identical ones because of upper right and upper left borders. Each column
 should have a different `border`

---
 src/App.svelte | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/App.svelte b/src/App.svelte
index 5b453a1..d2765c4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -25,21 +25,37 @@
 			width: 33.33%;
 			display: flex;
 			border-width: 4px;
-			border: solid;
 			border-color: rgb(148 163 184);
 		}
 		.assign-box:hover {
 			/* border-width: 6px; */
 			border-color: black;
+			border-width: 6px;
+			/* border-width: 8px; */
+			/* transition-timing-function: ease-in-out; */
+		}
+
+		.assign-box:hover > .assign-box-header {
+			border-bottom-color: black;
+			border-bottom-width: 6px;
 		}
 
 		.assign-box-header {
 			font-size: 1.5rem;
 			font-family: sans;
-			border-bottom: solid;
+			border-bottom-color: rgb(148 163 184);
+			border-bottom-width: 4px;
 			text-align: center;
 			height: 10%;
 			overflow: hidden;
+			flex: none;
+		}
+
+		.assign-box-body {
+			/* flex-direction: row; */
+			flex: 1 1 auto;
+			overflow-y: auto;
+			/* height: 100%; */
 		}
 	}
 </style>
-- 
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')

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

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

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

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

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

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

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 49a33e6e3a96ae723653cdb6925b88c1474d4775 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 26 Jun 2022 16:09:18 -0500
Subject: Event dump spacing fix

---
 src/models/EventInfo.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/models/EventInfo.ts b/src/models/EventInfo.ts
index 693c8bb..d42cd94 100644
--- a/src/models/EventInfo.ts
+++ b/src/models/EventInfo.ts
@@ -54,7 +54,7 @@ export default class EventInfo {
         } else if (this.start === -1 || this.end === -1) {
             return `${this.days}`;
         } else {
-            return `${this.days} ${EventInfo.timeToStr(this.start)}-${EventInfo.timeToStr(this.end)}`;
+            return `${this.days} ${EventInfo.timeToStr(this.start)} - ${EventInfo.timeToStr(this.end)}`;
         }
     }
 
-- 
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')

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

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 a059ee3c7c7c0b502eb4d796f3e42736cdb70a50 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 26 Jun 2022 18:03:06 -0500
Subject: Icon on:click is now a parameter

---
 src/components/helpers/Icon.svelte | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte
index eb430fb..7c96dd2 100644
--- a/src/components/helpers/Icon.svelte
+++ b/src/components/helpers/Icon.svelte
@@ -1,8 +1,11 @@
-<script>
+<script lang="ts">
     export let name;
     export let width = "1rem";
     export let height = "1rem";
     export let focusable = false;
+    export let handleClick = () => {
+        console.log("Default icon on:click function prints this");
+    };
     let icons = [
         {
             box: 24,
@@ -32,6 +35,7 @@
 </script>
 
 <svg
+    on:click={handleClick}
     class={$$props.class}
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
-- 
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')

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

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 8d759b8d5c66f91029da3544b634e5f6c7335994 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 26 Jun 2022 18:07:11 -0500
Subject: Use viewport (vh or vw) rather than percent (percent of parent
 container)

---
 src/App.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/App.svelte b/src/App.svelte
index d2765c4..a9084c4 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -46,7 +46,8 @@
 			border-bottom-color: rgb(148 163 184);
 			border-bottom-width: 4px;
 			text-align: center;
-			height: 10%;
+			/* height: 9%; */
+			height: 10vh;
 			overflow: hidden;
 			flex: none;
 		}
@@ -55,7 +56,7 @@
 			/* flex-direction: row; */
 			flex: 1 1 auto;
 			overflow-y: auto;
-			/* height: 100%; */
+			height: 100%;
 		}
 	}
 </style>
-- 
cgit v1.2.3


From 0f290ef69316311eda5179f2d64ee22be822c8e7 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 15 Jul 2022 22:12:01 -0400
Subject: `focusable` should be string, not bool

---
 src/components/helpers/Icon.svelte | 72 ++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 35 deletions(-)

(limited to 'src')

diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte
index 7c96dd2..c9154f3 100644
--- a/src/components/helpers/Icon.svelte
+++ b/src/components/helpers/Icon.svelte
@@ -1,48 +1,50 @@
 <script lang="ts">
-    export let name;
-    export let width = "1rem";
-    export let height = "1rem";
-    export let focusable = false;
-    export let handleClick = () => {
-        console.log("Default icon on:click function prints this");
-    };
-    let icons = [
-        {
-            box: 24,
-            name: "plus-circle",
-            path: `<path
+  export let name;
+  export let width = "1rem";
+  export let height = "1rem";
+  export let focusable = "false";
+  export let handleClick = () => {
+    console.log("Default icon on:click function prints this");
+  };
+  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
+    },
+    {
+      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);
+    },
+  ];
+  let displayIcon = icons.find((e) => e.name === name);
 </script>
 
 <svg
-    on:click={handleClick}
-    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
+  on:click={handleClick}
+  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 982d2cb09f9793fbdfcf8a1d2b2b27e4fd272469 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Fri, 15 Jul 2022 23:18:36 -0400
Subject: Read database from local file for TESTING purposes

---
 package-lock.json             |  34 +++++++++++---
 package.json                  |   1 +
 rollup.config.js              |   6 ++-
 src/components/Sidebar.svelte | 106 +++++++++++++++++++++++-------------------
 4 files changed, 92 insertions(+), 55 deletions(-)

(limited to 'src')

diff --git a/package-lock.json b/package-lock.json
index b5f2182..f2e64c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
       },
       "devDependencies": {
         "@rollup/plugin-commonjs": "^17.0.0",
+        "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^11.0.0",
         "@rollup/plugin-typescript": "^8.3.0",
         "@smui/button": "^4.2.0",
@@ -330,6 +331,18 @@
         "rollup": "^2.30.0"
       }
     },
+    "node_modules/@rollup/plugin-json": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+      "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^3.0.8"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0 || ^2.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-node-resolve": {
       "version": "11.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
@@ -2235,9 +2248,9 @@
       }
     },
     "node_modules/svelte": {
-      "version": "3.44.2",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.2.tgz",
-      "integrity": "sha512-jrZhZtmH3ZMweXg1Q15onb8QlWD+a5T5Oca4C1jYvSURp2oD35h4A5TV6t6MEa93K4LlX6BkafZPdQoFjw/ylA==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "dev": true,
       "engines": {
         "node": ">= 8"
@@ -2933,6 +2946,15 @@
         "resolve": "^1.17.0"
       }
     },
+    "@rollup/plugin-json": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-json/-/plugin-json-4.1.0.tgz",
+      "integrity": "sha512-yfLbTdNS6amI/2OpmbiBoW12vngr5NW2jCJVZSBEz+H5KfUJZ2M7sDjk0U6GOOdCWFVScShte29o9NezJ53TPw==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^3.0.8"
+      }
+    },
     "@rollup/plugin-node-resolve": {
       "version": "11.2.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-11.2.1.tgz",
@@ -4320,9 +4342,9 @@
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
     "svelte": {
-      "version": "3.44.2",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.44.2.tgz",
-      "integrity": "sha512-jrZhZtmH3ZMweXg1Q15onb8QlWD+a5T5Oca4C1jYvSURp2oD35h4A5TV6t6MEa93K4LlX6BkafZPdQoFjw/ylA==",
+      "version": "3.49.0",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.49.0.tgz",
+      "integrity": "sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==",
       "dev": true
     },
     "svelte-check": {
diff --git a/package.json b/package.json
index 2279014..def4f0a 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@rollup/plugin-typescript": "^8.3.0",
     "@smui/button": "^4.2.0",
diff --git a/rollup.config.js b/rollup.config.js
index f97c6cc..a4ce770 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,6 +6,7 @@ import { terser } from 'rollup-plugin-terser';
 import sveltePreprocess from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
 import css from 'rollup-plugin-css-only';
+import json from '@rollup/plugin-json';
 
 const production = !process.env.ROLLUP_WATCH;
 
@@ -78,7 +79,10 @@ export default {
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify
-    production && terser()
+    production && terser(),
+
+    // Reading from local json should only happen in development - Furkan
+    !production && json()
   ],
   watch: {
     clearScreen: false
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 53982bb..b5b33c9 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -1,60 +1,70 @@
 <script lang="ts">
-    import DarkModeSwitch from "./DarkModeSwitch.svelte";
-    import AssignLabs from "./AssignLabs/AssignLabs.svelte";
-    import FileUploads from "./FileUploads.svelte";
+  import DarkModeSwitch from "./DarkModeSwitch.svelte";
+  import AssignLabs from "./AssignLabs/AssignLabs.svelte";
+  import FileUploads from "./FileUploads.svelte";
+  import { onMount } from "svelte";
+  import { parseDatabase, parseDatabaseLocal } from "../util/parser";
+  import { parseDatabaseFile } from "../logic/EditorActions";
+  import * as local_db from "../../pt-db.json";
 
-    let sections = [
-        { name: "File Uploads", component: FileUploads },
-        { name: "Peer Teachers", component: null },
-        { name: "Assign Labs", component: AssignLabs },
-        { name: "Labs", component: null },
-        { name: "Active Peer Teachers", component: null },
-        { name: "Stats", component: null },
-        { name: "TAMU Html Output", component: null },
-    ];
+  let sections = [
+    { name: "File Uploads", component: FileUploads },
+    { name: "Peer Teachers", component: null },
+    { name: "Assign Labs", component: AssignLabs },
+    { name: "Labs", component: null },
+    { name: "Active Peer Teachers", component: null },
+    { name: "Stats", component: null },
+    { name: "TAMU Html Output", component: null },
+  ];
 
-    // Set initial page to Assign Labs while I work on it
-    let selected = sections[2];
+  // Set initial page to Assign Labs while I work on it
+  let selected = sections[2];
 
-    function chooseSection(sec) {
-        selected = sec;
-    }
+  onMount(async () => {
+    // load database on mount for testing purposes
+    console.log("reading local database")
+    parseDatabaseLocal(local_db)
+  });
+
+  function chooseSection(sec) {
+    selected = sec;
+  }
 </script>
 
 <!-- Entire Page -->
 <div class="flex flex-row h-screen">
-    <!-- SIDEBAR -->
-    <div class="w-2/12 flex flex-col border-r">
-        <!-- Header for sidebar sections -->
-        <div
-            class="font-serif flex-none text-center text-2xl text-neutral-900 p-4 border-b font-black overflow-hidden"
-        >
-            <!-- Text -->
-            <div>Peer Teacher Manager</div>
-            <div>
-                <DarkModeSwitch />
-            </div>
-        </div>
-
-        <!-- Sidebar sections -->
-        <div class="flex-col overflow-y-auto">
-            <ul class="menu bg-base-100 w-full text-xl">
-                {#each sections as sec}
-                    <li>
-                        <div
-                            class={selected == sec ? "active" : ""}
-                            on:click={() => chooseSection(sec)}
-                        >
-                            {sec.name}
-                        </div>
-                    </li>
-                {/each}
-            </ul>
-        </div>
+  <!-- SIDEBAR -->
+  <div class="w-2/12 flex flex-col border-r">
+    <!-- Header for sidebar sections -->
+    <div
+      class="font-serif flex-none text-center text-2xl text-neutral-900 p-4 border-b font-black overflow-hidden"
+    >
+      <!-- Text -->
+      <div>Peer Teacher Manager</div>
+      <div>
+        <DarkModeSwitch />
+      </div>
     </div>
 
-    <!-- Chosen Section / Component -->
-    <div class="flex-auto">
-        <svelte:component this={selected.component} />
+    <!-- Sidebar sections -->
+    <div class="flex-col overflow-y-auto">
+      <ul class="menu bg-base-100 w-full text-xl">
+        {#each sections as sec}
+          <li>
+            <div
+              class={selected == sec ? "active" : ""}
+              on:click={() => chooseSection(sec)}
+            >
+              {sec.name}
+            </div>
+          </li>
+        {/each}
+      </ul>
     </div>
+  </div>
+
+  <!-- Chosen Section / Component -->
+  <div class="flex-auto">
+    <svelte:component this={selected.component} />
+  </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')

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 3e9a18c412acf28ea5a23d686244c77e4342bd68 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 16 Jul 2022 00:34:57 -0400
Subject: default click handler changed

---
 src/components/helpers/Icon.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte
index 8dc2a89..e7b68d6 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 on:click handler for Icon.svelte. No handler passed");
+    console.log(`No click handler passed to icon "${name}"`);
   };
   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')

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

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

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

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


From 1abb8a91b8b25432fb1e8ee34cc34b94bfbb3113 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sat, 16 Jul 2022 01:30:08 -0400
Subject: add todos

---
 src/components/Sidebar.svelte | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index b5b33c9..723e073 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -9,12 +9,12 @@
 
   let sections = [
     { name: "File Uploads", component: FileUploads },
-    { name: "Peer Teachers", component: null },
+    { name: "Peer Teachers", component: null }, // TODO
     { name: "Assign Labs", component: AssignLabs },
-    { name: "Labs", component: null },
-    { name: "Active Peer Teachers", component: null },
-    { name: "Stats", component: null },
-    { name: "TAMU Html Output", component: null },
+    { name: "Labs", component: null }, // TODO
+    { name: "Active Peer Teachers", component: null }, // TODO
+    { name: "Stats", component: null }, // TODO
+    { name: "TAMU Html Output", component: null }, // TODO
   ];
 
   // Set initial page to Assign Labs while I work on it
@@ -22,8 +22,8 @@
 
   onMount(async () => {
     // load database on mount for testing purposes
-    console.log("reading local database")
-    parseDatabaseLocal(local_db)
+    console.log("reading local database");
+    parseDatabaseLocal(local_db);
   });
 
   function chooseSection(sec) {
-- 
cgit v1.2.3


From 99aee9a7281aa9c5794cc062e41384dc3701906d Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 17 Jul 2022 23:22:08 -0400
Subject: Remove unnecessary function

---
 src/components/Sidebar.svelte | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index 723e073..4a53452 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -25,10 +25,6 @@
     console.log("reading local database");
     parseDatabaseLocal(local_db);
   });
-
-  function chooseSection(sec) {
-    selected = sec;
-  }
 </script>
 
 <!-- Entire Page -->
@@ -53,7 +49,9 @@
           <li>
             <div
               class={selected == sec ? "active" : ""}
-              on:click={() => chooseSection(sec)}
+              on:click={() => {
+                selected = sec;
+              }}
             >
               {sec.name}
             </div>
-- 
cgit v1.2.3