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

3 files changed, 81 insertions, 60 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>
diff --git a/src/components/PeerTeachers.svelte b/src/components/PeerTeachers.svelte
index 16ff449..f0d34de 100644
--- a/src/components/PeerTeachers.svelte
+++ b/src/components/PeerTeachers.svelte
@@ -3,6 +3,7 @@
   import type PeerTeacher from "../models/PeerTeacher";
 
   let selected_pt: PeerTeacher | undefined;
+  let editing: boolean = false;
 
   $: peerTeachers = [...$ptStore.values()].sort((a, b) =>
     a.lastname.toUpperCase() === b.lastname.toUpperCase()
@@ -49,7 +50,20 @@
           class={selected_pt == pt ? "active" : "hover"}
         >
           <th>{i + 1}</th>
-          <th>{pt.firstname}</th>
+          <th>
+            {#if editing && selected_pt == pt}
+              <input
+                bind:value={pt.firstname}
+                type="text"
+                class="input input-bordered input-primary  w-full max-w-xs"
+                on:blur={() => (editing = false)}
+              />
+            {:else}
+              <div on:dblclick={() => (editing = true)}>
+                {pt.firstname}
+              </div>
+            {/if}
+          </th>
           <th>{pt.lastname}</th>
           <th>{pt.id}</th>
           <th>{pt.email}</th>
diff --git a/src/components/helpers/Icon.svelte b/src/components/helpers/Icon.svelte
index e7b68d6..5224421 100644
--- a/src/components/helpers/Icon.svelte
+++ b/src/components/helpers/Icon.svelte
@@ -10,11 +10,7 @@
     {
       box: 24,
       name: "plus-circle",
-      path: `<path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />`,
+      path: `<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"/>`,
     },
     {
       box: 24,
@@ -24,11 +20,12 @@
     {
       name: "info",
       box: 24,
-      path: `<path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                />`,
+      path: `<path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />`,
+    },
+    {
+      name: "download",
+      box: 24,
+      path: `<path stroke-linecap="round" stroke-linejoin="round" d="M12 10v6m0 0l-3-3m3 3l3-3M3 17V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" `,
     },
   ];
   let displayIcon = icons.find((e) => e.name === name);