aboutsummaryrefslogtreecommitdiff
path: root/src/components/AssignLabs
diff options
context:
space:
mode:
authorFurkan Sahin <furkan-dev@proton.me>2022-07-23 23:38:33 -0500
committerFurkan Sahin <furkan-dev@proton.me>2022-07-23 23:38:33 -0500
commite4915154c6bb71b3d0fb8da6e971783156548b8e (patch)
tree0894a1c35280389e2c7d1067cfcb734712d93c17 /src/components/AssignLabs
parent31530fcb5b881d3ac83f202f0b2c913aba935b8b (diff)
Restructure file organization
Diffstat (limited to 'src/components/AssignLabs')
-rw-r--r--src/components/AssignLabs/AssignLabs.svelte151
-rw-r--r--src/components/AssignLabs/LabBox.svelte32
-rw-r--r--src/components/AssignLabs/PTBox.svelte44
3 files changed, 0 insertions, 227 deletions
diff --git a/src/components/AssignLabs/AssignLabs.svelte b/src/components/AssignLabs/AssignLabs.svelte
deleted file mode 100644
index e27abfc..0000000
--- a/src/components/AssignLabs/AssignLabs.svelte
+++ /dev/null
@@ -1,151 +0,0 @@
-<script lang="ts">
- import type PeerTeacher from "../../models/PeerTeacher";
- import type Lab from "../../models/Lab";
- import { labStore, ptStore } from "../../stores";
- import LabBox from "./LabBox.svelte";
- import PT from "./PTBox.svelte";
-
- let selectedPeerTeacher: PeerTeacher | undefined;
- let selectedLab: Lab | 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);
-
- $: selectedPtAssignedLabs = [...(selectedPeerTeacher?.labs.values() ?? [])]
- .flatMap((labId) => {
- const lab = $labStore.get(labId);
- return lab === undefined ? [] : [lab];
- })
- .sort((a, b) => a.id - b.id);
-
- $: unassignedLabs = labs.filter((lab) => !lab.assigned);
-
- $: compatibleLabs = labs.filter((lab) =>
- isPTandLabCompatible(lab, selectedPeerTeacher)
- );
-
- $: compatiblePTs = peerTeachers.filter((pt) =>
- isPTandLabCompatible(selectedLab, pt)
- );
-
- function isPTandLabCompatible(
- lab: Lab | undefined,
- pt: PeerTeacher | undefined
- ): boolean {
- return (
- pt != undefined &&
- lab != undefined &&
- !lab?.assigned &&
- !pt?.conflictsWith(lab.event)
- );
- }
-
- function updateReactiveDeclarations() {
- selectedPeerTeacher = selectedPeerTeacher;
- selectedLab = selectedLab;
- peerTeachers = peerTeachers;
- labs = labs;
- }
-
- function assignLab(id: number) {
- const lab = $labStore.get(id);
- if (lab === undefined) return;
- lab.assigned = true;
- selectedPeerTeacher?.labs.add(id);
- updateReactiveDeclarations();
- }
-
- function unassignLab(id: number) {
- const lab = $labStore.get(id);
- if (lab === undefined) return;
- lab.assigned = false;
- selectedPeerTeacher?.labs.delete(id);
- updateReactiveDeclarations();
- }
-</script>
-
-<div
- class="flex-none overflow-hidden flex-col h-[100vh] w-[80vw] px-[2vw] pt-[1vh]"
->
- <!-- Top half: 3 Columns -->
- <div class="flex flex-row h-[80vh]">
- <!-- PT Box -->
- <div class="assign-box rounded-l-xl">
- <!-- PT Header -->
- <div class="assign-box-header">Peer Teacher</div>
- <!-- PT Body -->
- <div class="assign-box-body">
- {#each peerTeachers as pt}
- <div
- class={compatiblePTs.includes(pt) //selectedPeerTeacher == pt
- ? "bg-info text-info-content" // "border-l-8 border-blue-500"
- : "bg-base-100 text-base-100-content"}
- on:click={() => {
- selectedPeerTeacher = pt;
- }}
- >
- <svelte:component this={PT} {pt} />
- </div>
- {/each}
- </div>
- </div>
-
- <!-- Available Labs -->
- <div class="assign-box">
- <div class="assign-box-header">Labs: {labs.length}</div>
- <div class="assign-box-body">
- {#each compatibleLabs as lab}
- <svelte:component
- this={LabBox}
- {lab}
- iconName="plus-circle"
- iconClick={() => {
- assignLab(lab.id);
- }}
- />
- {/each}
- </div>
- </div>
-
- <!-- Selected PT's Labs -->
- <div class="assign-box rounded-r-xl">
- <div class="assign-box-header">
- {selectedPeerTeacher?.name ?? "PT's Labs"}
- </div>
- <div class="assign-box-body">
- {#each selectedPtAssignedLabs as lab}
- <svelte:component
- this={LabBox}
- {lab}
- iconName="minus-circle"
- iconClick={() => {
- unassignLab(lab.id);
- }}
- />
- {/each}
- </div>
- </div>
- </div>
-
- <!-- Bottom half: Universal unassigned labs -->
- <div class="flex flex-col mt-2 text-center">
- <h1>Unassigned Labs: {unassignedLabs.length}</h1>
- <ul class="menu menu-horizontal bg-base-100 rounded-box overflow-auto">
- {#each unassignedLabs as lab}
- <li
- on:click={() => {
- selectedLab = lab;
- }}
- class={selectedLab == lab ? "bg-info text-info-content" : ""}
- >
- <span>{lab.course} {lab.section}</span>
- </li>
- {/each}
- </ul>
- </div>
-</div>
diff --git a/src/components/AssignLabs/LabBox.svelte b/src/components/AssignLabs/LabBox.svelte
deleted file mode 100644
index 9805c51..0000000
--- a/src/components/AssignLabs/LabBox.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
- import type Lab from "../../models/Lab";
- import Icon from "../helpers/Icon.svelte";
- export let lab: Lab;
- export let iconClick = () => {};
- export let iconName: string;
-</script>
-
-<!-- Lab box -->
-<div
- class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden"
->
- <!-- Lab content -->
- <div class="flex flex-col">
- <!-- Top Half -->
- <div class="flex flex-row">
- <strong class="flex-grow">CSCE {lab.course} - {lab.section}</strong>
- <Icon
- name={iconName}
- class="h-6 w-6"
- handleClick={() => {
- iconClick();
- }}
- />
- </div>
- </div>
- <!-- Bottom half -->
- <div>
- <p class="text-xs">{lab.event.info}</p>
- <p class="text-xs">{lab.building} {lab.room}</p>
- </div>
-</div>
diff --git a/src/components/AssignLabs/PTBox.svelte b/src/components/AssignLabs/PTBox.svelte
deleted file mode 100644
index 3ad50d1..0000000
--- a/src/components/AssignLabs/PTBox.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
- import type PeerTeacher from "../../models/PeerTeacher";
- import Icon from "../helpers/Icon.svelte";
- export let pt: PeerTeacher;
-
- let modalID = () => {
- return `my-modal-${pt.id}`;
- }
-</script>
-
-<!-- PT Box -->
-<div
- class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black h-20 overflow-hidden group"
->
- <!-- Top half, name and button -->
- <div class="flex flex-row items-center ">
- <!-- Left half, name -->
- <strong class="flex-grow text-sm">{pt.name}</strong>
-
- <!-- Right half, button -->
- <!-- The button to open modal -->
- <label for={modalID()} class="">
- <Icon name="info" class="h-6 w-6" />
- </label>
-
- <!-- Modal PT event info -->
- <input type="checkbox" id={modalID()} class="modal-toggle" />
- <label for={modalID()} class="modal cursor-pointer">
- <label class="modal-box relative bg-slate-300" for="">
- <h3 class="text-lg font-bold font-serif underline">
- {pt.name}
- </h3>
- {#each pt.events as e}
- <p class="py-2">
- {e.info}
- </p>
- {/each}
- </label>
- </label>
- </div>
-
- <!-- Bottom half, hours -->
- <div class="">Hours: {pt.lab_hours}</div>
-</div>