Merge pull request 'Log admin' (#20) from dev into main

Reviewed-on: #20

src/lib/components/layout/navbar/navbar-user.svelte

@@ -74,10 +74,6 @@
 			<Award class="mr-2 h-4 w-4" />
 			<span>Mes badges</span>
 		</DropdownMenu.Item>
-		<!-- <DropdownMenu.Item href="/groups">
-			<Users class="mr-2 h-4 w-4" />
-			<span>Mes équipes</span>
-		</DropdownMenu.Item> -->
 		<DropdownMenu.Separator />
 		<DropdownMenu.Item href="/git" target="_blank">
 			<Github class="mr-2 h-4 w-4" />

src/lib/stores/state.ts

@@ -0,0 +1,23 @@
+import { writable, type Writable } from 'svelte/store';
+
+export const createStateStore = <T>() => {
+  type State = {
+    requests: T[];
+  };
+
+  const initialState: State = { requests: [] };
+  const store: Writable<State> = writable(initialState);
+
+  return {
+    subscribe: store.subscribe,
+    addRequest: (newRequest: T) => {
+      store.update(state => ({
+        ...state,
+        requests: [...state.requests, newRequest]
+      }));
+    },
+    reset: () => store.set(initialState),
+  };
+}
+
+export type StateStore<T> = ReturnType<typeof createStateStore<T>>;

src/lib/stores/websocket.ts

@@ -0,0 +1,21 @@
+import type { StateStore } from "./state";
+
+export const connectWebSocket = <T>(path: string, token: string | undefined, store: StateStore<T>) => {
+  const ws = new WebSocket(`wss://api.peerat.dev${path}`);
+
+  ws.onopen = () => {
+    console.log('WebSocket connection opened');
+    if (token) {
+      ws.send(JSON.stringify({ token }));
+    }
+  };
+
+  ws.onclose = () => console.log('WebSocket connection closed');
+  ws.onerror = (event) => console.log('WebSocket error:', event);
+
+  ws.onmessage = (event) => {
+    console.log('WebSocket message:', event.data);
+    const data: T = JSON.parse(event.data);
+    store.addRequest(data);
+  };
+};

src/routes/(app)/+page.svelte

@@ -36,7 +36,7 @@
 					<span class="text-lg font-semibold">{data.event.name}</span>
 					<span class="text-muted-foreground"> Participer en équipe de 1 à 4 joueurs </span>
 				</div>
-				<Button href="/chapters/{data.event.id}">Participer</Button>
+				<Button href="/chapters/{data.event.id}/groups">Participer</Button>
 			</div>
 		{/if}
 		<!-- {#if data.daily && data.daily.puzzle}

src/routes/(app)/admin/logs/+page.server.ts

@@ -0,0 +1,15 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async ({ locals: { user }, cookies }) => {
+
+  if (!user) redirect(302, '/login');
+
+  if (!user.email.endsWith('@peerat.dev')) redirect(302, '/');
+
+  const session = cookies.get("session");
+  
+  return {
+    session
+  };
+};

src/routes/(app)/admin/logs/+page.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { derived } from 'svelte/store';
+	import type { PageData } from './$types';
+
+	import { cn } from '$lib/utils';
+
+	import { createStateStore } from '$lib/stores/state';
+	import { connectWebSocket } from '$lib/stores/websocket';
+
+	import Button from '$lib/components/ui/button/button.svelte';
+
+	export let data: PageData;
+
+	type Log = {
+		path: string;
+		code: number;
+		logged: boolean;
+		type: string;
+		pseudo?: string;
+	};
+
+	const stateStore = createStateStore<Log>();
+
+	onMount(() => {
+		connectWebSocket('/admin/logs', data.session, stateStore);
+	});
+
+	const logsStore = derived(stateStore, ($stateStore) =>
+		$stateStore.requests.reduce(
+			(acc, log) => {
+				const key = log.pseudo || 'Unknown';
+				if (!acc[key]) acc[key] = [];
+				acc[key].unshift(log);
+				return acc;
+			},
+			{} as Record<string, Log[]>
+		)
+	);
+
+	let selectedUser = '';
+	let logs: Record<string, Log[]> = {};
+
+	const unsubscribe = logsStore.subscribe((value) => {
+		logs = value;
+	});
+
+	const selectUser = (user: string) => {
+		selectedUser = user;
+	};
+
+	onDestroy(unsubscribe);
+</script>
+
+<div class="flex h-full flex-col gap-4 lg:flex-row">
+	<div class="overflow-auto lg:max-h-full lg:min-w-52">
+		<ul class="flex gap-2 lg:flex-col">
+			{#if !Object.keys(logs).length}
+				<li>No logs</li>
+			{/if}
+			{#each Object.keys(logs) as user (user)}
+				<li>
+					<Button
+						variant="outline"
+						class={cn('w-full', {
+							'bg-secondary': selectedUser === user
+						})}
+						on:click={() => selectUser(user)}
+					>
+						{user}
+					</Button>
+				</li>
+			{/each}
+		</ul>
+	</div>
+	{#if selectedUser && logs[selectedUser]}
+		<div class="flex flex-1 flex-col overflow-auto">
+			<main class="flex max-h-full flex-col gap-2">
+				{#each logs[selectedUser] as log}
+					<div class="rounded-lg border-border bg-card p-6 shadow-lg">
+						<div class="flex items-center justify-between">
+							<h5 class="text-xl font-semibold">{log.type}</h5>
+							<span class="rounded-full px-3 py-1 text-sm">
+								Code: {log.code}
+							</span>
+						</div>
+						<div class="mt-4">
+							<p class="text-sm font-medium text-muted-foreground">
+								Path: <span class="font-normal text-foreground">{log.path}</span>
+							</p>
+							<p class="text-sm font-medium text-muted-foreground">
+								Logged:
+								<span
+									class={cn({
+										'text-green-500': log.logged,
+										'text-red-500': !log.logged
+									})}
+								>
+									{log.logged ? 'Yes' : 'No'}
+								</span>
+							</p>
+							{#if log.pseudo}
+								<p class="text-sm font-medium text-muted-foreground">
+									Pseudo: <span class="font-normal text-foreground">{log.pseudo}</span>
+								</p>
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</main>
+		</div>
+	{/if}
+</div>