Fixed problems with changing height

Got rid of more old APIs
Get rid of old APIs
2025-07-12 14:10:50 +02:00 · 2025-07-12 14:10:33 +02:00 · 2025-07-12 13:49:31 +02:00
9 changed files with 117 additions and 199 deletions
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,4 +1,7 @@
 GitHub Copilot Instructions for This Repository
+
+If you have any questions, always ask me first.
+
 Use Svelte 5 runes exclusively

 Declare reactive state with $state(); derive values with $derived(); run side-effect logic with $effect() etc. 
--- a/src/routes/api/auth/refresh/+server.ts
+++ b/src/routes/api/auth/refresh/+server.ts
@@ -1,30 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { getOAuthClient } from '$lib/google/auth/server.js';
-
-export const POST: RequestHandler = async ({ request }) => {
-	try {
-		const { refreshToken } = await request.json();
-		
-		if (!refreshToken) {
-			return json({ error: 'Refresh token is required' }, { status: 400 });
-		}
-
-	const oauth = getOAuthClient();
-		oauth.setCredentials({ refresh_token: refreshToken });
-
-		const { credentials } = await oauth.refreshAccessToken();
-		
-		if (!credentials.access_token) {
-			return json({ error: 'Failed to refresh token' }, { status: 500 });
-		}
-
-		return json({ 
-			accessToken: credentials.access_token,
-			expiresIn: credentials.expiry_date 
-		});
-	} catch (error) {
-		console.error('Error refreshing access token:', error);
-		return json({ error: 'Failed to refresh access token' }, { status: 500 });
-	}
-};
--- a/src/routes/api/events/+server.ts
+++ b/src/routes/api/events/+server.ts
--- a/src/routes/api/sheets/[sheetId]/data/+server.ts
+++ b/src/routes/api/sheets/[sheetId]/data/+server.ts
@@ -1,22 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { googleSheetsServer } from '$lib/google/sheets/server';
-
-export const GET: RequestHandler = async ({ params, request }) => {
-	try {
-		const { sheetId } = params;
-		const authHeader = request.headers.get('authorization');
-		
-		if (!authHeader?.startsWith('Bearer ')) {
-			return json({ error: 'Missing or invalid authorization header' }, { status: 401 });
-		}
-
-		const refreshToken = authHeader.slice(7);
-		const sheetData = await googleSheetsServer.getSpreadsheetData(refreshToken, sheetId, 'A1:Z10');
-
-		return json(sheetData);
-	} catch (error) {
-		console.error('Error fetching spreadsheet data:', error);
-		return json({ error: 'Failed to fetch spreadsheet data' }, { status: 500 });
-	}
-};
--- a/src/routes/api/sheets/recent/+server.ts
+++ b/src/routes/api/sheets/recent/+server.ts
@@ -1,20 +0,0 @@
-import { json } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-import { googleSheetsServer } from '$lib/google/sheets/server';
-
-export const GET: RequestHandler = async ({ request }) => {
-	try {
-		const authHeader = request.headers.get('authorization');
-		if (!authHeader?.startsWith('Bearer ')) {
-			return json({ error: 'Missing or invalid authorization header' }, { status: 401 });
-		}
-
-		const refreshToken = authHeader.slice(7);
-		const spreadsheets = await googleSheetsServer.getRecentSpreadsheets(refreshToken, 20);
-
-		return json(spreadsheets);
-	} catch (error) {
-		console.error('Error fetching recent spreadsheets:', error);
-		return json({ error: 'Failed to fetch spreadsheets' }, { status: 500 });
-	}
-};
--- a/src/routes/private/api/google/gmail/+server.ts
+++ b/src/routes/private/api/google/gmail/+server.ts
--- a/src/routes/private/events/event/view/+page.svelte
+++ b/src/routes/private/events/event/view/+page.svelte
@@ -197,7 +197,7 @@

 		try {
 			// Send all emails in batch
-			const response = await fetch('/private/api/gmail', {
+			const response = await fetch('/private/api/google/gmail', {
 				method: 'POST',
 				headers: {
 					'Content-Type': 'application/json'
--- a/src/routes/private/scanner/+page.svelte
+++ b/src/routes/private/scanner/+page.svelte
@@ -7,7 +7,7 @@
 	import { ScanState, defaultTicketData } from '$lib/types/types';

 	let { data } = $props();
-	let scanned_id = $state<string>("");
+	let scanned_id = $state<string>('');
 	let ticket_data = $state<TicketData>(defaultTicketData);
 	let scan_state = $state<ScanState>(ScanState.scanning);

@@ -19,9 +19,9 @@
 	}

 	let events = $state<Event[]>([]);
-	let selectedEventId = $state<string>("");
+	let selectedEventId = $state<string>('');
 	let isLoadingEvents = $state(true);
-	let eventsError = $state("");
+	let eventsError = $state('');

 	onMount(async () => {
 		await loadEvents();
@@ -54,16 +54,16 @@

 	// Process a scanned QR code
 	$effect(() => {
-		if (scanned_id === "") return;
+		if (scanned_id === '') return;
 		scan_state = ScanState.scanning;

-		console.log("Scanned ID:", scanned_id);
+		console.log('Scanned ID:', scanned_id);

 		data.supabase
 			.from('participants')
 			.select(`*, event ( id, name ), scanned_by ( id, display_name )`)
 			.eq('id', scanned_id)
-			.then(response => {
+			.then((response) => {
 				if (response.data && response.data.length > 0) {
 					const participant = response.data[0];
 					ticket_data = participant;
@@ -84,38 +84,34 @@

 				// Reset the scanned_id after 3 seconds to allow for a new scan
 				setTimeout(() => {
-					scanned_id = "";
+					scanned_id = '';
 				}, 3000);
 			});
 	});
 </script>

-<div class="mx-auto p-4">
-	<h1 class="text-2xl font-bold mb-6 text-center">Code Scanner</h1>
+<h1 class="text-2xl font-bold mb-4 mt-2 text-center">Code Scanner</h1>

-	<!-- Event Selector -->
-	<div class="rounded-lg border border-gray-300 p-4 mb-4">
-		<h2 class="text-lg font-semibold mb-3">Select Event</h2>
+<!-- Event Selector -->
+<div class="mb-4 rounded-lg border border-gray-300 p-4">
+	<h2 class="mb-3 text-lg font-semibold">Select Event</h2>
 	{#if isLoadingEvents}
-			<div class="flex items-center justify-center h-10">
-				<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
+		<div class="flex h-10 items-center justify-center">
+			<div
+				class="h-5 w-5 animate-spin rounded-full border-2 border-gray-500 border-t-transparent"
+			></div>
 		</div>
 	{:else if eventsError}
-			<div class="text-red-600 text-center py-2">
+		<div class="py-2 text-center text-red-600">
 			{eventsError}
-				<button 
-					onclick={loadEvents}
-					class="ml-2 text-blue-600 underline"
-				>
-					Try again
-				</button>
+			<button onclick={loadEvents} class="ml-2 text-blue-600 underline"> Try again </button>
 		</div>
 	{:else if events.length === 0}
-			<p class="text-gray-500 text-center py-2">No events found</p>
+		<p class="py-2 text-center text-gray-500">No events found</p>
 	{:else}
 		<select
 			bind:value={selectedEventId}
-				class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
+			class="w-full rounded border border-gray-300 p-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
 		>
 			{#each events as event}
 				<option value={event.id}>
@@ -124,30 +120,13 @@
 			{/each}
 		</select>
 	{/if}
-	</div>
-
-	<!-- Scanner Section -->
-	<div class="mb-4">
-		<QRScanner bind:message={scanned_id} />
-	</div>
-
-	<!-- Ticket Display Section -->
-	<h2 class="text-lg font-semibold mb-4">Ticket Information</h2>
-	<TicketDisplay {ticket_data} {scan_state} />
-	
-	<!-- Reset button -->
-	{#if scan_state !== ScanState.scanning}
-		<div class="flex justify-center mt-6 mb-4">
-			<button 
-				onclick={() => {
-					scanned_id = "";
-					scan_state = ScanState.scanning;
-				}}
-				class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-6 rounded-lg transition"
-				aria-label="Reset scanner"
-			>
-				Reset Scanner
-			</button>
-		</div>
-	{/if}
 </div>
+
+<!-- Scanner Section -->
+<div class="mb-4">
+	<QRScanner bind:message={scanned_id} />
+</div>
+
+<!-- Ticket Display Section -->
+<h2 class="mb-2 text-lg font-semibold">Ticket Information</h2>
+<TicketDisplay {ticket_data} {scan_state} />
--- a/src/routes/private/scanner/TicketDisplay.svelte
+++ b/src/routes/private/scanner/TicketDisplay.svelte
@@ -15,65 +15,73 @@
 	}
 </script>

-<div class="border border-gray-300 rounded-lg overflow-hidden">
+<div class="border border-gray-300 rounded-lg overflow-hidden h-[200px]">
+	<div class="h-full flex flex-col">
 		{#if scan_state === ScanState.scanning}
-		<div class="bg-gray-50 p-4 flex items-center justify-center gap-3">
-			<div class="animate-spin h-5 w-5 border-2 border-gray-500 rounded-full border-t-transparent"></div>
-			<p class="text-gray-700">Waiting for QR code...</p>
+			<div class="bg-gray-50 p-4 flex-1 flex flex-col justify-center items-center">
+				<div class="animate-spin h-8 w-8 border-2 border-gray-500 rounded-full border-t-transparent mb-3"></div>
+				<p class="text-gray-700 text-center">Waiting for QR code...</p>
 			</div>
 		{:else if scan_state === ScanState.scan_failed}
-		<div class="bg-red-50 p-4">
-			<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+			<div class="bg-red-50 p-4 flex-1 flex flex-col">
+				<div class="flex items-center gap-2 mb-3">
+					<svg class="h-6 w-6 text-red-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
 					</svg>
 					<h3 class="font-semibold text-red-800">Invalid Code</h3>
 				</div>
-			<p class="text-red-700">This QR code is not a valid ticket or doesn't exist in our system.</p>
+				<p class="text-red-700 flex-grow">This QR code is not a valid ticket or doesn't exist in our system.</p>
+				<div class="mt-auto pt-2 opacity-0">
+					<!-- Spacer to maintain consistent height -->
+					<p class="font-medium invisible">Placeholder</p>
+					<p class="invisible">Placeholder</p>
+				</div>
 			</div>
 		{:else if scan_state === ScanState.wrong_event}
-		<div class="bg-amber-50 p-4">
+			<div class="bg-amber-50 p-4 flex-1 flex flex-col">
 				<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
 					</svg>
 					<h3 class="font-semibold text-amber-800">Wrong Event</h3>
 				</div>
 				<p class="text-amber-700 mb-2">This ticket belongs to a different event:</p>
-			<div class="bg-white rounded p-3 border border-amber-200">
-				<p class="font-medium">{ticket_data.event.name}</p>
-				<p>{ticket_data.name} {ticket_data.surname}</p>
+				<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
 				</div>
 			</div>
 		{:else if scan_state === ScanState.already_scanned}
-		<div class="bg-amber-50 p-4">
+			<div class="bg-amber-50 p-4 flex-1 flex flex-col">
 				<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<svg class="h-6 w-6 text-amber-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
 					</svg>
 					<h3 class="font-semibold text-amber-800">Already Scanned</h3>
 				</div>
-			<p class="text-amber-700 mb-1">
-				This ticket was already scanned by {ticket_data.scanned_by?.display_name || 'someone'} 
+				<p class="text-amber-700">
+					This ticket was already scanned by: <br/> {ticket_data.scanned_by?.display_name || 'someone'} 
 					{ticket_data.scanned_at ? `on ${formatScannedAt(ticket_data.scanned_at)}` : ''}
 				</p>
-			<div class="bg-white rounded p-3 border border-amber-200 mt-2">
-				<p class="font-medium">{ticket_data.event.name}</p>
-				<p>{ticket_data.name} {ticket_data.surname}</p>
+				<div class="bg-white rounded p-3 border border-amber-200 mt-auto">
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
 				</div>
 			</div>
 		{:else if scan_state === ScanState.scan_successful}
-		<div class="bg-green-50 p-4">
+			<div class="bg-green-50 p-4 flex-1 flex flex-col">
 				<div class="flex items-center gap-2 mb-2">
-				<svg class="h-6 w-6 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+					<svg class="h-6 w-6 text-green-600 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
 						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
 					</svg>
 					<h3 class="font-semibold text-green-800">Valid Ticket</h3>
 				</div>
-			<div class="bg-white rounded p-3 border border-green-200">
-				<p class="font-medium">{ticket_data.event.name}</p>
-				<p>{ticket_data.name} {ticket_data.surname}</p>
+				<p class="text-green-700">Ticket successfully validated.</p>
+				<div class="bg-white rounded p-3 border border-green-200 mt-auto">
+					<p class="font-medium">{ticket_data.event?.name || ''}</p>
+					<p>{ticket_data.name || ''} {ticket_data.surname || ''}</p>
 				</div>
 			</div>
 		{/if}
+	</div>
 </div>
Author	SHA1	Message	Date
Roman Krček	0e5d39b149	Fixed problems with changing height	2025-07-12 14:10:50 +02:00
Roman Krček	8247cd33a6	Got rid of more old APIs	2025-07-12 14:10:33 +02:00
Roman Krček	b7483e7ff0	Get rid of old APIs	2025-07-12 13:49:31 +02:00