From f1d85554535de9a5daed34d0893b3cd90a379987 Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Wed, 22 Feb 2023 11:57:12 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Refactor:=20Improve=20UI=20for?=
 =?UTF-8?q?=20session=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add a button to the `[sessionId]/+page.svelte` file for column selection
- Update the class of the button to `z-20 flex justify-end items-center overflow-hidden sticky left-0 w-1/6 text-xs leading-5`
- Add an `on:click` event to the button to update

[src/routes/projects/[projectId]/sessionv2/[sessionId]/+page.svelte]
- Change class of button from `flex justify-end items-center overflow-hidden sticky left-0 z-20 w-1/6 text-xs leading-5` to `z-20 flex justify-end items-center overflow-hidden sticky left-0 w-1/6 text-xs leading-5`
- Add a `<button>` element for column selection
- Add `on:click` event to the `<button>` element to update
---
 .../sessionv2/[sessionId]/+page.svelte        | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/routes/projects/[projectId]/sessionv2/[sessionId]/+page.svelte b/src/routes/projects/[projectId]/sessionv2/[sessionId]/+page.svelte
index e33bef092..bbef69b9a 100644
--- a/src/routes/projects/[projectId]/sessionv2/[sessionId]/+page.svelte
+++ b/src/routes/projects/[projectId]/sessionv2/[sessionId]/+page.svelte
@@ -152,7 +152,7 @@
                                     : ''}"
                             >
                                 <button
-                                    class="flex justify-end items-center overflow-hidden sticky left-0 z-20   w-1/6 text-xs leading-5 
+                                    class="z-20 flex justify-end items-center overflow-hidden sticky left-0 w-1/6 text-xs leading-5 
                                     {selectedFileIdx == i
                                         ? 'text-zinc-200 cursor-default'
                                         : 'text-zinc-400 hover:text-zinc-200 cursor-pointer'}"
@@ -165,6 +165,7 @@
                         {/each}
                     </div>
 
+                    <!-- col selection -->
                     <div
                         class="col-start-1 col-end-2 row-start-1 grid"
                         style="grid-template-columns: repeat(88, minmax(0, 1fr));"
@@ -204,14 +205,20 @@
                                         new Date(delta.timestampMs)
                                     )} / span 1;"
                                 >
-                                    <a
-                                        href="/"
-                                        class="flex flex-col items-center justify-center  text-xs "
-                                    >
-                                        <p class="font-semibold text-zinc-800">
-                                            <!-- foo -->
-                                        </p>
-                                    </a>
+                                    <button
+                                        class="z-20 h-full flex flex-col w-full items-center justify-center  text-xs "
+                                        on:click={() => {
+                                            console.log(
+                                                timeStampToCol(
+                                                    new Date(delta.timestampMs)
+                                                )
+                                            );
+                                            value = timeStampToCol(
+                                                new Date(delta.timestampMs)
+                                            );
+                                            selectedFileIdx = idx;
+                                        }}
+                                    />
                                 </li>
                             {/each}
                         {/each}