aboutsummaryrefslogtreecommitdiff
path: root/src/components/AssignLabs.svelte
diff options
context:
space:
mode:
authorFurkan Sahin <furkan-dev@proton.me>2022-06-05 21:06:09 -0500
committerFurkan Sahin <furkan-dev@proton.me>2022-06-05 21:06:09 -0500
commitf8915cfa1f70d837fe89f0af61fb36ed9bcf52f8 (patch)
tree59c18d20f15a9acd1c1484e99203c37e3c6db013 /src/components/AssignLabs.svelte
parentfe45c328fbd83a0659b16598ad91d7d5d2361b02 (diff)
WiP
Diffstat (limited to 'src/components/AssignLabs.svelte')
-rw-r--r--src/components/AssignLabs.svelte238
1 files changed, 0 insertions, 238 deletions
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>