Editable PT name (wip), Download button for labs (doesn't function)

1 files changed, 59 insertions, 49 deletions

diff --git a/src/components/Labs.svelte b/src/components/Labs.svelte
index fc5c0ae..465b87a 100644
--- a/src/components/Labs.svelte
+++ b/src/components/Labs.svelte
@@ -1,60 +1,70 @@
 <script lang="ts">
-    import { labStore, ptStore } from "../stores";
-    import type Lab from "../models/Lab";
+  import { labStore, ptStore } from "../stores";
+  import type Lab from "../models/Lab";
+  import Icon from "./helpers/Icon.svelte";
+  var csvwriter = require("csvwriter");
 
-    let selected_lab: Lab | undefined;
+  let selected_lab: Lab | undefined;
 
-    $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
+  $: labs = [...$labStore.values()].sort((a, b) => a.id - b.id);
 
+  let headers = ["", "Course", "Sec", "Time", "Location", "Assigned PT", ""];
 
-    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)
-            })
-        }];
-    });
+  $: 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);
+        }),
+      },
+    ];
+  });
 
+  function download() {
+    // prepare data in CSV format
+    let data: [""];
+    
+  }
 </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
+  <table class="table w-full">
+    <!-- head -->
+    <thead>
+      <tr>
+        {#each headers as header, i}
+          {#if i == 0}
+            <th>
+              {labs.length}
+              <Icon name="info" class="h-4 w-4" handleClick={download} /></th
             >
-          </tr>
+          {:else}
+            <th>{header}</th>
+          {/if}
         {/each}
-      </tbody>
-    </table>
-  </div>
-  
\ No newline at end of file
+      </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>