From d0975a6e7ee57de4debda94e823011d813fbf4a1 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 5 Sep 2021 21:39:24 -0500
Subject: Initial rewrite in svelte

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

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

diff --git a/src/components/EditorLists.svelte b/src/components/EditorLists.svelte
new file mode 100644
index 0000000..1fc484b
--- /dev/null
+++ b/src/components/EditorLists.svelte
@@ -0,0 +1,118 @@
+<script lang="ts">
+  import IconButton from "@smui/icon-button";
+  import List, {
+    Item,
+    Meta,
+    PrimaryText,
+    SecondaryText,
+    Text,
+  } from "@smui/list";
+  import { labStore, ptStore } from "../stores";
+
+  $: 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);
+
+  const nothing: any[] = [];
+</script>
+
+<div id="editor-lists">
+  <div class="column">
+    <h3 class="col-header">Peer Teachers</h3>
+    <List twoline singleSelection class="editor-list">
+      {#each peerTeachers as pt}
+        <Item>
+          <Text>
+            <PrimaryText>{pt.firstname} {pt.lastname}</PrimaryText>
+            <SecondaryText>{pt.id}</SecondaryText>
+          </Text>
+          <Meta>
+            <IconButton
+              class="material-icons"
+              on:click$stopPropagation={() => {
+                ptStore.update((val) => {
+                  val.delete(pt.id);
+                  return val;
+                });
+              }}>remove_circle</IconButton
+            >
+          </Meta>
+        </Item>
+      {/each}
+    </List>
+  </div>
+  <div class="column">
+    <h3 class="col-header">Labs</h3>
+    <List twoline singleSelection class="editor-list">
+      {#each labs as lab}
+        <Item>
+          <Text>
+            <PrimaryText>{lab.course}-{lab.section} [{lab.time}]</PrimaryText>
+            <SecondaryText>
+              {lab.location}
+            </SecondaryText>
+          </Text>
+          <Meta class="material-icons"
+            ><IconButton
+              class="material-icons"
+              on:click$stopPropagation={() => {
+                console.log("hello");
+              }}>add_circle</IconButton
+            ></Meta
+          >
+        </Item>
+      {/each}
+    </List>
+  </div>
+  <div class="column">
+    <h3 class="col-header">PT - Assigned Labs</h3>
+    <List twoline singleSelection class="editor-list">
+      {#each nothing as n}
+        <Item>
+          <Text>
+            <PrimaryText>{n.course} {n.section}</PrimaryText>
+            <SecondaryText>
+              {n.event.days}
+              {n.event.start}-{n.event.end}
+            </SecondaryText>
+          </Text>
+          <Meta class="material-icons"
+            ><IconButton
+              class="material-icons"
+              on:click$stopPropagation={() => {
+                console.log("hello");
+              }}>remove_circle</IconButton
+            ></Meta
+          >
+        </Item>
+      {/each}
+    </List>
+  </div>
+</div>
+
+<style>
+  #editor-lists {
+    display: flex;
+    max-height: inherit;
+    min-height: 0;
+    overflow-x: auto;
+  }
+
+  .col-header {
+    font-family: Roboto, sans-serif;
+  }
+
+  .column {
+    flex: 1;
+    min-width: 15em;
+    overflow: auto;
+  }
+
+  * :global(.editor-list) {
+    border: 1px solid black;
+  }
+</style>
-- 
cgit v1.2.3


From bc95a18a5daf1c0b08bcfac04c543ddf194dd049 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 5 Sep 2021 23:04:14 -0500
Subject: Make lab lists a three-line display

---
 src/components/EditorLists.svelte | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

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

diff --git a/src/components/EditorLists.svelte b/src/components/EditorLists.svelte
index 1fc484b..2d9b9e9 100644
--- a/src/components/EditorLists.svelte
+++ b/src/components/EditorLists.svelte
@@ -23,7 +23,7 @@
 <div id="editor-lists">
   <div class="column">
     <h3 class="col-header">Peer Teachers</h3>
-    <List twoline singleSelection class="editor-list">
+    <List twoLine singleSelection class="editor-list">
       {#each peerTeachers as pt}
         <Item>
           <Text>
@@ -47,14 +47,13 @@
   </div>
   <div class="column">
     <h3 class="col-header">Labs</h3>
-    <List twoline singleSelection class="editor-list">
+    <List threeLine class="editor-list">
       {#each labs as lab}
         <Item>
           <Text>
-            <PrimaryText>{lab.course}-{lab.section} [{lab.time}]</PrimaryText>
-            <SecondaryText>
-              {lab.location}
-            </SecondaryText>
+            <PrimaryText>{lab.course}-{lab.section}</PrimaryText>
+            <SecondaryText>{lab.time}</SecondaryText>
+            <SecondaryText>{lab.location}</SecondaryText>
           </Text>
           <Meta class="material-icons"
             ><IconButton
@@ -70,7 +69,7 @@
   </div>
   <div class="column">
     <h3 class="col-header">PT - Assigned Labs</h3>
-    <List twoline singleSelection class="editor-list">
+    <List threeLine class="editor-list">
       {#each nothing as n}
         <Item>
           <Text>
-- 
cgit v1.2.3


From 9bce000c7b5799837fac15bd6339dfd27401b630 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 5 Sep 2021 23:57:27 -0500
Subject: Add ability to assign labs to PTs

---
 src/components/EditorLists.svelte | 99 ++++++++++++++++++++++++++++-----------
 src/models/EventInfo.ts           |  5 ++
 src/models/PeerTeacher.ts         |  8 ++++
 3 files changed, 84 insertions(+), 28 deletions(-)

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

diff --git a/src/components/EditorLists.svelte b/src/components/EditorLists.svelte
index 2d9b9e9..1b2084a 100644
--- a/src/components/EditorLists.svelte
+++ b/src/components/EditorLists.svelte
@@ -7,8 +7,11 @@
     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())
@@ -17,7 +20,44 @@
 
   $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
 
-  const nothing: any[] = [];
+  $: 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) =>
+      !selectedPeerTeacher?.labs.has(lab.id) &&
+      !selectedPeerTeacher?.conflictsWith(lab.event) &&
+      !assignedLabs.some((assignment) =>
+        assignment.event.conflictsWith(lab.event)
+      )
+  );
+
+  function deletePT(id: number) {
+    if (selectedPeerTeacher?.id === id) {
+      selectedPeerTeacher = undefined;
+    }
+
+    ptStore.update((val) => {
+      val.delete(id);
+      return val;
+    });
+  }
+
+  function assignLab(id: number) {
+    selectedPeerTeacher?.labs.add(id);
+    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
+    selectedPeerTeacher = selectedPeerTeacher;
+  }
+
+  function unassignLab(id: number) {
+    selectedPeerTeacher?.labs.delete(id);
+    // Self assignemnt to update `assignedLabs` and `compatibleLabs`
+    selectedPeerTeacher = selectedPeerTeacher;
+  }
 </script>
 
 <div id="editor-lists">
@@ -25,21 +65,20 @@
     <h3 class="col-header">Peer Teachers</h3>
     <List twoLine singleSelection class="editor-list">
       {#each peerTeachers as pt}
-        <Item>
+        <Item on:SMUI:action={() => (selectedPeerTeacher = pt)}>
           <Text>
-            <PrimaryText>{pt.firstname} {pt.lastname}</PrimaryText>
+            <PrimaryText>{pt.name}</PrimaryText>
             <SecondaryText>{pt.id}</SecondaryText>
           </Text>
           <Meta>
             <IconButton
               class="material-icons"
               on:click$stopPropagation={() => {
-                ptStore.update((val) => {
-                  val.delete(pt.id);
-                  return val;
-                });
-              }}>remove_circle</IconButton
+                deletePT(pt.id);
+              }}
             >
+              remove_circle
+            </IconButton>
           </Meta>
         </Item>
       {/each}
@@ -48,45 +87,49 @@
   <div class="column">
     <h3 class="col-header">Labs</h3>
     <List threeLine class="editor-list">
-      {#each labs as lab}
+      {#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
+          <Meta class="material-icons">
+            <IconButton
               class="material-icons"
               on:click$stopPropagation={() => {
-                console.log("hello");
-              }}>add_circle</IconButton
-            ></Meta
-          >
+                assignLab(lab.id);
+              }}
+            >
+              add_circle
+            </IconButton>
+          </Meta>
         </Item>
       {/each}
     </List>
   </div>
   <div class="column">
-    <h3 class="col-header">PT - Assigned Labs</h3>
+    <h3 class="col-header">
+      {selectedPeerTeacher?.name ?? "PT"} - Assigned Labs
+    </h3>
     <List threeLine class="editor-list">
-      {#each nothing as n}
+      {#each assignedLabs as lab}
         <Item>
           <Text>
-            <PrimaryText>{n.course} {n.section}</PrimaryText>
-            <SecondaryText>
-              {n.event.days}
-              {n.event.start}-{n.event.end}
-            </SecondaryText>
+            <PrimaryText>{lab.course}-{lab.section}</PrimaryText>
+            <SecondaryText>{lab.time}</SecondaryText>
+            <SecondaryText>{lab.location}</SecondaryText>
           </Text>
-          <Meta class="material-icons"
-            ><IconButton
+          <Meta class="material-icons">
+            <IconButton
               class="material-icons"
               on:click$stopPropagation={() => {
-                console.log("hello");
-              }}>remove_circle</IconButton
-            ></Meta
-          >
+                unassignLab(lab.id);
+              }}
+            >
+              remove_circle
+            </IconButton>
+          </Meta>
         </Item>
       {/each}
     </List>
diff --git a/src/models/EventInfo.ts b/src/models/EventInfo.ts
index 6fce60b..b0ac25b 100644
--- a/src/models/EventInfo.ts
+++ b/src/models/EventInfo.ts
@@ -43,6 +43,11 @@ export default class EventInfo {
         return `${hour}:${minute} ${meridiem}`;
     }
 
+    conflictsWith(event: EventInfo) {
+        const daysConflict = event.days.match(new RegExp(`[${this.days}]`));
+        return daysConflict && this.start <= event.end && event.start <= this.end;
+    }
+
     get info() {
         if(this.days === "") {
             return `WEB`;
diff --git a/src/models/PeerTeacher.ts b/src/models/PeerTeacher.ts
index f1a8739..5d955fd 100644
--- a/src/models/PeerTeacher.ts
+++ b/src/models/PeerTeacher.ts
@@ -37,4 +37,12 @@ export default class PeerTeacher {
         pt.labs = new Set(labs);
         return pt;
     }
+
+    conflictsWith(event: EventInfo) {
+        return this.events.some(item => item.conflictsWith(event));
+    }
+
+    get name() {
+        return `${this.firstname} ${this.lastname}`;
+    }
 }
\ No newline at end of file
-- 
cgit v1.2.3

