diff options
Diffstat (limited to 'src/components/AssignLabs')
| -rw-r--r-- | src/components/AssignLabs/AssignLabs.svelte | 151 | ||||
| -rw-r--r-- | src/components/AssignLabs/LabBox.svelte | 32 | ||||
| -rw-r--r-- | src/components/AssignLabs/PTBox.svelte | 44 |
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> |
