Init labs page

2 files changed, 68 insertions, 2 deletions

diff --git a/src/components/Labs/Labs.svelte b/src/components/Labs/Labs.svelte
new file mode 100644
index 0000000..8e6e445
--- /dev/null
+++ b/src/components/Labs/Labs.svelte
@@ -0,0 +1,65 @@
+<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)
+            })
+        }];
+    });
+
+    // $: console.log("pt", pts.find( (pt) => {
+    //    return pt.firstname == "Adam"
+    // }))
+
+
+</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>
+  
\ No newline at end of file
diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte
index f40332f..84121a7 100644
--- a/src/components/Sidebar.svelte
+++ b/src/components/Sidebar.svelte
@@ -3,6 +3,7 @@
   import AssignLabs from "./AssignLabs/AssignLabs.svelte";
   import FileUploads from "./FileUploads.svelte";
   import PeerTeachers from "./PeerTeachers/PeerTeachers.svelte";
+  import Labs from "./Labs/Labs.svelte";
   import { onMount } from "svelte";
   import { parseDatabaseLocalStorage } from "../util/parser";
 
@@ -10,13 +11,13 @@
     { name: "File Uploads", component: FileUploads },
     { name: "Peer Teachers", component: PeerTeachers }, // TODO
     { name: "Assign Labs", component: AssignLabs },
-    { name: "Labs", component: null }, // TODO
+    { name: "Labs", component: Labs }, // TODO
     { name: "Active Peer Teachers", component: null }, // TODO
     { name: "Stats", component: null }, // TODO
     { name: "TAMU Html Output", component: null }, // TODO
   ];
 
-  let selected = sections[1];
+  let selected = sections[3];
 
   // Load from local storage. FOR TESTING PURPOSES ONLY. REMOVE THIS FROM PRODUCTION
   onMount(() => {