aboutsummaryrefslogtreecommitdiff
path: root/src/components/AssignLabs/LabBox.svelte
blob: 7888884fa1b8c07a7548277ed9a3a94e43dc078f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script lang="ts">
    import type Lab from "../../models/Lab";
    import type PeerTeacher from "../../models/PeerTeacher";
    import Icon from "../helpers/Icon.svelte";
    export let lab: Lab;
    export let assign: boolean = true;
    export let selectedPeerTeacher: PeerTeacher | null = null;

    function onIconClick() {
        console.log("Clicked lab", lab.course, lab.section);
    }
</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>
            {#if assign}
                <Icon
                    name="plus-circle"
                    class="h-6 w-6"
                    handleClick={() => {
                        selectedPeerTeacher?.assignLab(lab.id);
                        //TODO Adding a lab to a PT doesn't update the current "Labs" and "PT's Labs" columns 
                        //TODO This was handled by self assignment in the assign labs function in Scott's version, but now this logic is passed down into a child component (this component) and self-assigning down here does not seem to help
                        selectedPeerTeacher = selectedPeerTeacher;
                    }}
                />
            {:else}
                <Icon
                    name="minus-circle"
                    class="h-6 w-6"
                    handleClick={() => {
                        console.log(
                            selectedPeerTeacher?.name,
                            lab.course,
                            lab.section
                        );
                    }}
                />
            {/if}
        </div>
    </div>
    <!-- Bottom half -->
    <div>
        <p class="text-xs">{lab.event.info}</p>
        <p class="text-xs">{lab.building} {lab.room}</p>
    </div>
</div>