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/App.svelte')

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/App.svelte')

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 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/App.svelte')

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 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/App.svelte')

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 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/App.svelte')

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/App.svelte')

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/App.svelte')

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 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/App.svelte')

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 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/App.svelte')

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