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/ActionBar.vue        |  85 --------------------
 src/components/Editor.svelte        |  20 +++++
 src/components/EditorActions.svelte |  86 ++++++++++++++++++++
 src/components/EditorLists.svelte   | 118 ++++++++++++++++++++++++++++
 src/components/EditorLists.vue      | 152 ------------------------------------
 src/components/FileUpload.svelte    |  11 +++
 src/components/FileUpload.vue       |  51 ------------
 src/components/List.vue             |  35 ---------
 src/components/UIButton.vue         |  32 --------
 9 files changed, 235 insertions(+), 355 deletions(-)
 delete mode 100644 src/components/ActionBar.vue
 create mode 100644 src/components/Editor.svelte
 create mode 100644 src/components/EditorActions.svelte
 create mode 100644 src/components/EditorLists.svelte
 delete mode 100644 src/components/EditorLists.vue
 create mode 100644 src/components/FileUpload.svelte
 delete mode 100644 src/components/FileUpload.vue
 delete mode 100644 src/components/List.vue
 delete mode 100644 src/components/UIButton.vue

(limited to 'src/components')

diff --git a/src/components/ActionBar.vue b/src/components/ActionBar.vue
deleted file mode 100644
index bfe3cdb..0000000
--- a/src/components/ActionBar.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div id="action-bar">
-    <FileUpload
-      :accept="'text/plain'"
-      :multiple="true"
-      @fileChanged="handlePtChange">Upload PT Schedule</FileUpload>
-    <FileUpload
-      :accept="'application/json'"
-      @fileChanged="handleLabChange">Import Lab Schedule</FileUpload>
-      <UIButton @click="save">Export</UIButton>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import FileUpload from '@/components/FileUpload.vue';
-import { parseLabFile, parsePtSchedule } from '@/features/parser';
-import UIButton from '@/components/UIButton.vue';
-import PeerTeacher from '@/models/PeerTeacher';
-
-export default defineComponent({
-  name: 'ActionBar',
-  components: {
-    FileUpload,
-    UIButton,
-  },
-  methods: {
-    async handleLabChange(files: File[]) {
-      const data = await parseLabFile(files[0]);
-      this.$store.commit('importLabs', data);
-    },
-    async handlePtChange(files: File[]) {
-      const promises: Promise<PeerTeacher>[] = [];
-
-      files.forEach((file) => {
-        promises.push(parsePtSchedule(file));
-      });
-
-      const result = await Promise.all(promises);
-      this.$store.commit('addPeerTeachers', result);
-    },
-    save() {
-      const database = {
-        labs: Object.fromEntries(this.$store.state.labs),
-        peerTeachers: Object.fromEntries(this.$store.state.peerTeachers),
-      };
-
-      const jsonObj = JSON.stringify(database, (_, value) => {
-        if (typeof value === 'object' && value instanceof Set) {
-          return [...value];
-        }
-        return value;
-      });
-
-      const blob = new Blob([jsonObj], { 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>
-
-<style>
-#action-bar {
-  max-width: 100vw;
-  overflow-x: auto;
-  white-space: nowrap;
-}
-
-#action-bar > * {
-  margin-left: 0.5rem;
-}
-
-#action-bar > *:first-child {
-  margin-left: 0;
-}
-</style>
diff --git a/src/components/Editor.svelte b/src/components/Editor.svelte
new file mode 100644
index 0000000..c8a30c6
--- /dev/null
+++ b/src/components/Editor.svelte
@@ -0,0 +1,20 @@
+<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/EditorActions.svelte b/src/components/EditorActions.svelte
new file mode 100644
index 0000000..a0372ed
--- /dev/null
+++ b/src/components/EditorActions.svelte
@@ -0,0 +1,86 @@
+<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 { 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) console.log(dbFile);
+  }
+
+  function exportDB() {}
+</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}>
+    <Label>Export DB</Label>
+  </Button>
+</div>
+<Snackbar bind:this={snackbar} labelText={snackbarText}>
+  <Label />
+  <Actions>
+    <IconButton class="material-icons" title="Dismiss">close</IconButton>
+  </Actions>
+</Snackbar>
+
+<style>
+  #action-bar {
+    max-width: 100vw;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+</style>
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>
diff --git a/src/components/EditorLists.vue b/src/components/EditorLists.vue
deleted file mode 100644
index dff34f4..0000000
--- a/src/components/EditorLists.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <div id="editor-lists">
-    <div class="column">
-      <h3 class="column-header">Peer Teachers</h3>
-      <List
-        :items="peerTeachers"
-        @selection-changed="handlePtClick"
-        #default="{ item: { id, name } }">
-        <span class="list-item">
-          {{ name }} <button @click.stop="deletePeerTeacher(id)">x</button>
-        </span>
-      </List>
-    </div>
-    <div class="column">
-      <h3 class="column-header">Labs</h3>
-      <List :items="compatibleLabs" #default="{ item: { fullInfo, id } }">
-        <span class="list-item">
-          {{ fullInfo }} <button @click.stop="assignLab(id)">+</button>
-        </span>
-      </List>
-    </div>
-    <div class="column">
-      <h3 class="column-header">{{ this.selectedPeerTeacher.name }}</h3>
-      <List :items="selectedPeerTeacherAssignments" #default="{ item: { fullInfo, id } }">
-        <span class="list-item">
-          {{ fullInfo }} <button @click.stop="unassignLab(id)">x</button>
-        </span>
-      </List>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, PropType } from 'vue';
-import List from '@/components/List.vue';
-import PeerTeacher from '@/models/PeerTeacher';
-import Lab from '@/models/Lab';
-
-export default defineComponent({
-  name: 'EditorLists',
-  components: {
-    List,
-  },
-  props: {
-    peerTeachers: {
-      type: Array as PropType<PeerTeacher[]>,
-      default: () => [],
-    },
-    labs: {
-      type: Array as PropType<Lab[]>,
-      default: () => [],
-    },
-  },
-  computed: {
-    compatibleLabs(): Lab[] {
-      const temp = this.labs.filter((lab) => (!this.selectedPeerTeacher.assignedLabs.has(lab.id)
-        && !this.selectedPeerTeacher.conflictsWith(lab.event)));
-
-      const currentAssignments = this.selectedPeerTeacherAssignments;
-      return temp.filter((lab) => !currentAssignments
-        .some((assignedLab) => lab.event.conflictsWith(assignedLab.event)));
-    },
-    selectedPeerTeacherAssignments(): Lab[] {
-      return Array.from(this.selectedPeerTeacher.assignedLabs.values())
-        .flatMap((id) => {
-          const lab = this.$store.state.labs.get(id);
-          return (lab === undefined) ? [] : [lab];
-        }).sort((a, b) => a.course - b.course || a.section - b.section);
-    },
-  },
-  data() {
-    return {
-      selectedPeerTeacher: new PeerTeacher(),
-    };
-  },
-  methods: {
-    handlePtClick(peerTeacher: PeerTeacher) {
-      this.selectedPeerTeacher = peerTeacher;
-    },
-    deletePeerTeacher(id: number) {
-      if (this.selectedPeerTeacher.id === id) {
-        this.selectedPeerTeacher = new PeerTeacher();
-      }
-      this.$store.commit('deletePeerTeacher', id);
-    },
-    assignLab(id: string) {
-      if (this.selectedPeerTeacher.id !== 0) {
-        this.selectedPeerTeacher.assignedLabs.add(id);
-      }
-    },
-    unassignLab(id: string) {
-      this.selectedPeerTeacher.assignedLabs.delete(id);
-    },
-  },
-});
-</script>
-
-<style>
-#editor-lists {
-  display: flex;
-  max-height: inherit;
-  min-height: 0;
-}
-
-.column-header {
-  margin: 0;
-}
-
-.column {
-  flex: 1;
-  overflow: auto;
-}
-
-.list-item {
-  align-items: center;
-  background-color: #f0f0f0;
-  display: flex;
-  justify-content: space-between;
-  margin: 0.5em;
-  padding: 0.5em;
-}
-
-.list-item:hover {
-  background-color: #c0c0c0;
-}
-
-.list-item > button {
-  background-color: #500000;
-  border: none;
-  color: white;
-  font-size: 1em;
-}
-
-@media (prefers-color-scheme: dark) {
-  .column-header {
-    color: white;
-  }
-
-  .list-item {
-    background-color: #303030;
-    color: white;
-  }
-
-  .list-item:hover {
-    background-color: #707070;
-  }
-
-  .list-item > button {
-    background-color: #81302b;
-  }
-}
-</style>
diff --git a/src/components/FileUpload.svelte b/src/components/FileUpload.svelte
new file mode 100644
index 0000000..d325e32
--- /dev/null
+++ b/src/components/FileUpload.svelte
@@ -0,0 +1,11 @@
+<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/FileUpload.vue b/src/components/FileUpload.vue
deleted file mode 100644
index 082fc9d..0000000
--- a/src/components/FileUpload.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <label class="file-upload-lbl">
-    <input
-      type="file"
-      :accept="accept"
-      @change="$emit('fileChanged', $event.target.files)"
-      :multiple="multiple" hidden />
-    <slot>Upload</slot>
-  </label>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'FileUpload',
-  props: {
-    accept: {
-      type: String,
-      required: false,
-    },
-    multiple: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: {
-    fileChanged: null,
-  },
-});
-</script>
-
-<style scoped>
-.file-upload-lbl {
-  background-color: #500000;
-  color: white;
-  padding: 0.5em;
-  text-align: center;
-}
-
-.file-upload-lbl:hover {
-  color: grey;
-  cursor: pointer;
-}
-
-@media (prefers-color-scheme: dark) {
-  .file-upload-lbl {
-    background-color: #81302b;
-  }
-}
-</style>
diff --git a/src/components/List.vue b/src/components/List.vue
deleted file mode 100644
index 4732a9e..0000000
--- a/src/components/List.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <ul class="list">
-    <li
-      v-for="item in items"
-      :key="item.id"
-      @click="$emit('selectionChanged', item)">
-      <slot :item="item">{{ item }}</slot>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'List',
-  props: {
-    items: {
-      type: Array,
-      default: [] as any[],
-    },
-  },
-  emits: {
-    selectionChanged: null,
-  },
-});
-</script>
-
-<style scoped>
-.list {
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-}
-</style>
diff --git a/src/components/UIButton.vue b/src/components/UIButton.vue
deleted file mode 100644
index 57b155b..0000000
--- a/src/components/UIButton.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <button class="ui-button"><slot></slot></button>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'UIButton',
-});
-</script>
-
-<style>
-.ui-button {
-  background-color: #500000;
-  border: none;
-  color: white;
-  font-size: 1em;
-  padding: 0.5em;
-}
-
-.ui-button:hover {
-  color: grey;
-  cursor: pointer;
-}
-
-@media (prefers-color-scheme: dark) {
-  .ui-button {
-    background-color: #81302b;
-  }
-}
-</style>
-- 
cgit v1.2.3


From fea56ae09cd612003e1bafd2459556b67a5950e9 Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Sun, 5 Sep 2021 22:56:45 -0500
Subject: Add import/export functionality

---
 src/components/EditorActions.svelte | 48 ++++++++++++++++++++++++++++++++++---
 src/logic/EditorActions.ts          | 13 +++++++++-
 src/models/EventInfo.ts             | 10 ++++++++
 src/models/Lab.ts                   | 18 +++++++++++++-
 src/models/PeerTeacher.ts           | 21 +++++++++++++++-
 src/util/parser.ts                  | 48 +++++++++++++++++++++++++++++++++++++
 6 files changed, 152 insertions(+), 6 deletions(-)

(limited to 'src/components')

diff --git a/src/components/EditorActions.svelte b/src/components/EditorActions.svelte
index a0372ed..fa2a041 100644
--- a/src/components/EditorActions.svelte
+++ b/src/components/EditorActions.svelte
@@ -3,7 +3,11 @@
   import IconButton from "@smui/icon-button";
   import Snackbar, { Actions } from "@smui/snackbar";
   import FileUpload from "./FileUpload.svelte";
-  import { parseLabScheduleFile, parsePTFile } from "../logic/EditorActions";
+  import {
+    parseDatabaseFile,
+    parseLabScheduleFile,
+    parsePTFile,
+  } from "../logic/EditorActions";
   import { labStore, ptStore } from "../stores";
 
   let ptSchedules: FileList | null;
@@ -50,10 +54,48 @@
   }
 
   $: {
-    if (dbFile?.length) console.log(dbFile);
+    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() {}
+  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">
diff --git a/src/logic/EditorActions.ts b/src/logic/EditorActions.ts
index 875fdc4..4a83fbc 100644
--- a/src/logic/EditorActions.ts
+++ b/src/logic/EditorActions.ts
@@ -1,4 +1,4 @@
-import { parseLabSchedule, parsePTSchedule } from "../util/parser";
+import { parseDatabase, parseLabSchedule, parsePTSchedule } from "../util/parser";
 
 export async function parsePTFile(file: File) {
     try {
@@ -20,3 +20,14 @@ export async function parseLabScheduleFile(file: File) {
         throw error;
     }
 }
+
+export async function parseDatabaseFile(file: File) {
+    const text = await file.text();
+    try {
+        const database = JSON.parse(text);
+        return parseDatabase(database);
+    } catch (error) {
+        console.error(file.name, error);
+        throw error;
+    }
+}
diff --git a/src/models/EventInfo.ts b/src/models/EventInfo.ts
index d20682c..6fce60b 100644
--- a/src/models/EventInfo.ts
+++ b/src/models/EventInfo.ts
@@ -1,3 +1,9 @@
+interface EventInfoSerializeInfo {
+    days: string,
+    start: number,
+    end: number
+}
+
 export default class EventInfo {
     days: string;
     start: number;
@@ -16,6 +22,10 @@ export default class EventInfo {
         this.end = end;
     }
 
+    static fromJSON({days, start, end}: EventInfoSerializeInfo) {
+        return new EventInfo(days, start, end);
+    }
+
     static timeToStr(time: number) {
         let hour = Math.floor(time / 100);
         const minute = time % 100;
diff --git a/src/models/Lab.ts b/src/models/Lab.ts
index 8636f74..d23cffb 100644
--- a/src/models/Lab.ts
+++ b/src/models/Lab.ts
@@ -1,4 +1,16 @@
-import type EventInfo from "./EventInfo";
+import EventInfo from "./EventInfo";
+
+interface LabSerializeInfo {
+    course: number,
+    section: number,
+    event: {
+        days: string,
+        start: number,
+        end: number
+    },
+    building: string,
+    room: string
+}
 
 export default class Lab {
     id: number;
@@ -24,6 +36,10 @@ export default class Lab {
         this.room = room;
     }
 
+    static fromJSON({course, section, event, building, room}: LabSerializeInfo) {
+        return new Lab(course, section, EventInfo.fromJSON(event), building, room);
+    }
+
     get time() {
         return this.event.info;
     }
diff --git a/src/models/PeerTeacher.ts b/src/models/PeerTeacher.ts
index 6518a80..f1a8739 100644
--- a/src/models/PeerTeacher.ts
+++ b/src/models/PeerTeacher.ts
@@ -1,4 +1,16 @@
-import type EventInfo from "./EventInfo";
+import EventInfo from "./EventInfo";
+
+interface PeerTeacherSerializeInfo {
+    id: number,
+    firstname: string,
+    lastname: string,
+    events: {
+        days: string,
+        start: number,
+        end: number
+    }[],
+    labs: number[]
+}
 
 export default class PeerTeacher {
     id: number;
@@ -18,4 +30,11 @@ export default class PeerTeacher {
         this.events = [];
         this.labs = new Set();
     }
+
+    static fromJSON({id, firstname, lastname, events, labs}: PeerTeacherSerializeInfo) {
+        const pt = new PeerTeacher(id, firstname, lastname);
+        pt.events = events.map(e => EventInfo.fromJSON(e));
+        pt.labs = new Set(labs);
+        return pt;
+    }
 }
\ No newline at end of file
diff --git a/src/util/parser.ts b/src/util/parser.ts
index 6d706d7..2f1bdd4 100644
--- a/src/util/parser.ts
+++ b/src/util/parser.ts
@@ -24,6 +24,32 @@ interface LabSchedule {
     }[]
 };
 
+interface DatabaseFile {
+    labs: {
+        id: number,
+        course: number,
+        section: number,
+        event: {
+            days: string,
+            start: number,
+            end: number
+        },
+        building: string,
+        room: string
+    }[],
+    peerTeachers: {
+        id: number,
+        firstname: string,
+        lastname: string,
+        events: {
+            days: string,
+            start: number,
+            end: number
+        }[],
+        labs: number[]
+    }[]
+}
+
 /**
  * Parses a peer teacher schedule
  * @param schedule The schedule to parse
@@ -104,4 +130,26 @@ export function parseLabSchedule(schedule: LabSchedule) {
     }
 
     return results;
+}
+
+/**
+ * Parses a database file into maps of Lab and PeerTeacher objects
+ * @param database The database object from a database file
+ * @returns And object with lab and peer teacher maps
+ */
+export function parseDatabase(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));
+    });
+
+    return result;
 }
\ No newline at end of file
-- 
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')

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

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