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/components/Sidebar.svelte | 56 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/Sidebar.svelte

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

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

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

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

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

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

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

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

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