From b5cd6414c2f23e51420f97f326324ce0c614041b Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Thu, 9 Jun 2022 16:05:03 -0500
Subject: PT ready, however theres a bug with modals. Info button brings up
 modal of first PT, ignoring completely the pt that it is currently on. May
 come from each created modal sharing the same PT to be honest (after
 unrolling the for loop).

---
 src/components/AssignLabs/PT.svelte | 49 ++++++++++++++++++++++++++++++++++---
 1 file changed, 45 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AssignLabs/PT.svelte b/src/components/AssignLabs/PT.svelte
index 0976fe4..7db84f9 100644
--- a/src/components/AssignLabs/PT.svelte
+++ b/src/components/AssignLabs/PT.svelte
@@ -1,9 +1,50 @@
 <script lang="ts">
     import type PeerTeacher from "../../models/PeerTeacher";
-    export let datum: PeerTeacher;
-    
+    export let pt: PeerTeacher;
 </script>
 
-<div>
-    {datum.firstname}
+<!-- PT Box -->
+<div class="block border-b px-3 py-3 hover:bg-sky-100 hover:text-black">
+    <!-- Top half, name and button -->
+    <div class="flex flex-row items-center">
+        <!-- Left half, name -->
+        <strong class="flex-grow text-sm">{pt.name}</strong>
+        <!-- Right half, button -->
+
+        <!-- The button to open modal -->
+        <label for="my-modal-4" class="">
+            <svg
+                on:click={() => console.log(pt.name)}
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                stroke-width={2}
+            >
+                <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"
+                />
+            </svg>
+        </label>
+
+        <input type="checkbox" id="my-modal-4" class="modal-toggle"/>
+        <label for="my-modal-4" class="modal cursor-pointer">
+            <label class="modal-box relative" for="">
+                <h3 class="text-lg font-bold ">
+                    {pt.name}
+                </h3>
+                {#each pt.events as e}
+                    <p class="py-4">
+                        {e.info}
+                    </p>
+                {/each}
+            </label>
+        </label>
+    </div>
+
+    <!-- Bottom -->
+    <div>Hours: {pt.lab_hours}</div>
 </div>
-- 
cgit v1.2.3