From 332648e79b0041e8856988c1391f8851c1def83e Mon Sep 17 00:00:00 2001
From: Manuel Sanchez <manuel.sanchez@zeit.de>
Date: Wed, 4 Sep 2024 15:58:25 +0200
Subject: [PATCH] feat: make improvements in the new game view

---
 src/components/DashboardTable.svelte    |  1 +
 src/components/GenerateGameTable.svelte | 90 ++++++++++++++++++-------
 src/components/LogsTable.svelte         |  5 +-
 src/components/PopOver.svelte           |  5 +-
 src/types/index.ts                      |  1 +
 src/views/ActivityLogsView.svelte       | 17 ++++-
 6 files changed, 89 insertions(+), 30 deletions(-)

diff --git a/src/components/DashboardTable.svelte b/src/components/DashboardTable.svelte
index 337d9cf..1c3677e 100644
--- a/src/components/DashboardTable.svelte
+++ b/src/components/DashboardTable.svelte
@@ -100,6 +100,7 @@
 		filterDateDesc = true;
 		filterActive = false;
 		filterNotActive = false;
+		currentPage = 1;
 	}
 
 	function toggleFilter(filter: string) {
diff --git a/src/components/GenerateGameTable.svelte b/src/components/GenerateGameTable.svelte
index 64c7e47..f6c7cd4 100644
--- a/src/components/GenerateGameTable.svelte
+++ b/src/components/GenerateGameTable.svelte
@@ -21,6 +21,10 @@
 					console.log('Fields updated:', event.paths);
 				}
 			}
+
+			if ($form.csv) {
+				isDragging = false;
+			}
 		},
 		onUpdate({ form }) {
 			if (form.valid) {
@@ -51,46 +55,84 @@
 			}
 		}
 	});
+
+	let isDragging = $state(false);
+
+	function handleDragEnter(event: DragEvent) {
+		console.log('we are dragging');
+		isDragging = true;
+		event.preventDefault();
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		console.log('we are not dragging');
+		isDragging = false;
+		event.preventDefault();
+	}
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault();
+	}
 </script>
 
 {#if $message}<h1>{$message}</h1>{/if}
 
 <form
-	class="flex flex-col items-center my-12"
+	class="flex flex-col w-full items-center my-12"
 	method="POST"
 	enctype="multipart/form-data"
 	action="?/generateGame"
 	use:enhance
 >
-	<!-- <div>
-		<label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">First name</label>
-		<input type="text" id="name" aria-invalid={$errors.name ? 'true' : undefined}
-		bind:value={$form.name} class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="John" required />
-	</div>
-	{#if $errors.name}<span style="color: red;" class="invalid">{$errors.name}</span>{/if} -->
-
-	<!-- <label for="image">
-		Upload one image, max 100 Kb:
-		<input type="file" name="image" accept="image/png, image/jpeg" bind:files={$file} />
-	</label>
-	{#if $errors.image}<span style="color: red;">{$errors.image}</span>{/if} -->
-
-	<!-- <label for="email">E-mail</label>
-	<input type="email" name="email" bind:value={$form.email} {...$constraints.email} /> -->
-
-	<label class="text-sm flex flex-col text-center items-center font-bold gap-2" for="csv">
-		Upload one CSV, max 100 Kb:
+	<div class="group flex flex-col items-center w-fit">
 		<input
-			class="max-w-[200px] border text-center border-black text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 p-2.5"
+			ondragenter={handleDragEnter}
+			ondragleave={handleDragLeave}
+			ondragover={handleDragOver}
+			class="opacity-0 pointer-events-auto text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 p-4"
 			type="file"
 			name="csv"
 			accept=".csv"
 			oninput={(e) => ($form.csv = e.currentTarget.files?.item(0) as File)}
 		/>
-	</label>
+		<label
+			class="text-sm w-fit -mt-14 flex flex-col justify-center text-center items-center font-bold gap-2"
+			for="csv"
+			aria-live="polite"
+			aria-atomic="true"
+			role="status"
+			aria-dropeffect={isDragging ? 'copy' : 'none'}
+		>
+			<span
+				class={`
+				${isDragging ? 'bg-gray-200' : 'bg-white'} 
+				${$form.csv ? 'bg-white' : ''}
+				
+				border border-black px-5 py-4 group-hover:bg-gray-200 group-focus:bg-gray-200`}
+			>
+				{#if isDragging}
+					<span>Fast geschafft!</span>
+				{:else if $form.csv}
+					<p>Ausgewählte Datei: {$form.csv.name}</p>
+				{:else}
+					<span> Dragg und dropp eine CSV-Datei hier. Max 100kb.</span>
+				{/if}
+			</span>
+		</label>
+	</div>
+
 	{#if $errors.csv}<span style="color: red;">{$errors.csv}</span>{/if}
 
-	<div class="flex flex-col items-center my-12 mx-auto w-full justify-center">
-		<button class="z-ds-button">Submit</button>
-	</div>
+	{#if $form.csv}
+		<div class="flex flex-col items-center my-12 mx-auto w-full justify-center">
+			<button class="z-ds-button"> Submitten </button>
+		</div>
+	{/if}
 </form>
+
+<style>
+	input:focus + label {
+		outline: 2px solid #2563eb;
+		outline-offset: 2px;
+	}
+</style>
diff --git a/src/components/LogsTable.svelte b/src/components/LogsTable.svelte
index bed3f52..1b73198 100644
--- a/src/components/LogsTable.svelte
+++ b/src/components/LogsTable.svelte
@@ -17,7 +17,8 @@
 				<th class="text-nowrap">Datum</th>
 				<th>Game Id</th>
 				<th>Aktion</th>
-				<th>Benutzer</th>
+				<th>Detail</th>
+				<!-- <th>Benutzer</th> -->
 			</tr>
 		</thead>
 		<tbody>
@@ -31,7 +32,7 @@
                                 {item.action.toUpperCase()}         
                             </div>
                         </td>
-						<td>{item.user_name}</td>
+						<td>{item.detail}</td>
 					</tr>
 				{/each}
 			{:else}
diff --git a/src/components/PopOver.svelte b/src/components/PopOver.svelte
index ede52ca..5f3e291 100644
--- a/src/components/PopOver.svelte
+++ b/src/components/PopOver.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { onMount } from "svelte";
+
 	let positionLeft: number = $state(0);
 	let positionTop: number = $state(0);
 
@@ -69,7 +71,7 @@
 	>
 		{@render popoverOpener()}
 	</button>
-{/if}
+	{/if}
 
 	{#if popoverContent}
 		<div
@@ -91,7 +93,6 @@
 		</div>
 	{/if}
 
-
 </div>
 
 <style>
diff --git a/src/types/index.ts b/src/types/index.ts
index 72f2cdd..a165821 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -38,6 +38,7 @@ export type Log = {
     id: string;
     game_id: string;
     user_name: string;
+    detail: string;
     action: "create" | "update" | "delete";
     created_at: string;
 }
diff --git a/src/views/ActivityLogsView.svelte b/src/views/ActivityLogsView.svelte
index cc42070..1ffa9da 100644
--- a/src/views/ActivityLogsView.svelte
+++ b/src/views/ActivityLogsView.svelte
@@ -14,6 +14,7 @@
             action: 'create',
             created_at: '2024-08-22T10:00:00Z',
             user_name: 'Silja',
+            detail: 'Game with id 2033 was created'
         },
         {
             id: '2',
@@ -21,13 +22,15 @@
             action: 'update',
             created_at: '2024-08-22T11:00:00Z',
             user_name: 'Frieder',
+            detail: 'Question with id 1234 was updated'
         },
         {
             id: '3',
             game_id: '2034',
             action: 'delete',
             created_at: '2024-08-22T12:00:00Z',
-            user_name: 'Paco'
+            user_name: 'Paco',
+            detail: 'Game with id 2034 was deleted'
         },
         {
             id: '4',
@@ -35,6 +38,7 @@
             action: 'create',
             created_at: '2024-08-22T13:00:00Z',
             user_name: 'Emma',
+            detail: 'Game with id 2035 was created'
         },
         {
             id: '5',
@@ -42,6 +46,7 @@
             action: 'update',
             created_at: '2024-08-22T14:00:00Z',
             user_name: 'Liam',
+            detail: 'Question with id 3 was updated'
         },
         {
             id: '6',
@@ -49,6 +54,7 @@
             action: 'delete',
             created_at: '2024-08-22T15:00:00Z',
             user_name: 'Olivia',
+            detail: 'Game with id 2036 was deleted'
         },
         {
             id: '7',
@@ -56,6 +62,7 @@
             action: 'create',
             created_at: '2024-08-22T16:00:00Z',
             user_name: 'Noah',
+            detail: 'Game with id 2036 was created'
         },
         {
             id: '8',
@@ -63,6 +70,7 @@
             action: 'update',
             created_at: '2024-08-22T17:00:00Z',
             user_name: 'Ava',
+            detail: 'Question with id 1234 was updated'
         },
         {
             id: '9',
@@ -70,6 +78,7 @@
             action: 'delete',
             created_at: '2024-08-22T18:00:00Z',
             user_name: 'William',
+            detail: 'Game with id 2037 was deleted'
         },
         {
             id: '10',
@@ -77,6 +86,7 @@
             action: 'create',
             created_at: '2024-08-22T19:00:00Z',
             user_name: 'Sophia',
+            detail: 'Game with id 2038 was created'
         },
         {
             id: '11',
@@ -84,6 +94,7 @@
             action: 'update',
             created_at: '2024-08-22T20:00:00Z',
             user_name: 'Isabella',
+            detail: 'Question with id 1234 was updated'
         },
         {
             id: '12',
@@ -91,6 +102,7 @@
             action: 'delete',
             created_at: '2024-08-22T21:00:00Z',
             user_name: 'Mia',
+            detail: 'Game with id 2039 was deleted'
         },
         {
             id: '13',
@@ -98,11 +110,12 @@
             action: 'create',
             created_at: '2024-08-22T22:00:00Z',
             user_name: 'James',
+            detail: 'Game with id 2039 was created'
         }
     ]
 
 	const handleBackToDashboard = () => {
-		store.updateSelectedGameId('');
+		store.updateSelectedGameId(-1);
 		store.updateView('dashboard');
 	};
 </script>