aboutsummaryrefslogtreecommitdiff
path: root/src/components/Labs.svelte
blob: fc5c0aeb392ab5c2087f8a0d65d147a2e3268448 (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
55
56
57
58
59
60
<script lang="ts">
    import { labStore, ptStore } from "../stores";
    import type Lab from "../models/Lab";

    let selected_lab: Lab | undefined;

    $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);


    let headers = ["", "Course", "Sec", "Time", "Location", "Assigned PT",""];
    
    $: pts = [...$ptStore.values()];
    
    // TODO Make this more efficient rather than checking each PT per each Lab
    $: labsAndPts = [...$labStore.values()].flatMap( (lab) => {
        return [{
            "lab" : lab,
            "pt" : pts.find( (pt) => {
                return pt.labs.has(lab.id)
            })
        }];
    });

</script>

<div class="overflow-auto h-full">
    <table class="table w-full">
      <!-- head -->
      <thead>
        <tr>
          {#each headers as header, i}
            <th> {i == 0 ? labs.length : header}</th>
          {/each}
        </tr>
      </thead>
      <tbody>
        {#each labsAndPts as l, i}
          <tr
            on:click={() => {
              selected_lab = l.lab;
            }}
            class={selected_lab == l.lab ? "active" : "hover"}
          >
            <th>{i + 1}</th>
            <th>{l.lab?.course}</th>
            <th>{l.lab?.section}</th>
            <th>{l.lab?.time}</th>
            <th>{l.lab?.location}</th>
            <th>{l.pt?.name ?? "UNASSIGNED"}</th>
            <th
              ><button
                class="btn btn-ghost btn-xs">Delete</button
              ></th
            >
          </tr>
        {/each}
      </tbody>
    </table>
  </div>