erman/scan-wave
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minor styling changes

Browse Source
This commit is contained in:
Roman Krček
2025-07-14 16:05:29 +02:00
parent f14213a5d4
commit d0f555a7c5
3 changed files with 96 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/routes/private/+layout.svelte
View File

@@ -3,7 +3,7 @@
import { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
import ToastContainer from '$lib/components/ToastContainer.svelte';
let { data } = $props();
let { data, children } = $props();
const queryClient = new QueryClient({
defaultOptions: {
@@ -19,10 +19,9 @@
<nav class="border-b border-gray-300 bg-gray-50 p-2 text-gray-900">
<div class="container mx-auto max-w-2xl p-2">
<div class="flex items-center justify-between">
<div class="text-lg font-bold">ScanWave</div>
<a href="/private/home" class="text-lg font-bold" aria-label="ScanWave Home">ScanWave</a>
<ul class="flex space-x-4">
<li><a href="/private/home">Home</a></li>
<li><a href="/private/scanner">Scanner</a></li>
{#if data.profile?.section_position === 'events_manager'}
<li><a href="/private/events">Events</a></li>
@@ -35,7 +34,7 @@
<div class="container mx-auto max-w-2xl bg-white p-2">
<QueryClientProvider client={queryClient}>
<slot />
{@render children()}
</QueryClientProvider>
</div>

51
src/routes/private/errors/events/denied/+page.svelte
View File

@@ -1 +1,50 @@
Access to events denied!
<script lang="ts">
// Get the profile from the page data if available
let { data } = $props();
let profile = $derived(data.profile);
</script>
<div class="flex flex-col items-center justify-center min-h-[70vh] p-6">
<div class="rounded-lg border border-gray-300 p-6 max-w-md w-full flex flex-col gap-6 text-center">
<div class="flex flex-col items-center gap-2">
<div class="text-red-600 bg-red-50 p-3 rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
</svg>
</div>
<h1 class="text-2xl font-semibold text-gray-800">Access Denied</h1>
<p class="text-gray-600">You don't have permission to access the events section.</p>
</div>
<div class="flex flex-col gap-4">
{#if profile}
<p class="text-sm text-gray-500">
Your current role: <span class="font-semibold">{profile.section_position || 'Not assigned'}</span>
</p>
{#if profile.section}
<p class="text-sm text-gray-500">
Section: <span class="font-semibold">{profile.section.name}</span>
</p>
{/if}
{/if}
<p class="text-gray-600">
You need the <span class="font-semibold">events_manager</span> role to access this section.
Please contact your administrator for assistance.
</p>
</div>
<div class="flex flex-col gap-3">
<a href="/private/home" class="rounded-md px-4 py-2 bg-blue-600 text-white">
Go to Dashboard
</a>
<button
onclick={() => window.history.back()}
class="rounded-md px-4 py-2 border border-gray-300 text-gray-700"
aria-label="Go back"
>
Go Back
</button>
</div>
</div>
</div>

78
src/routes/private/home/+page.svelte
View File

@@ -1,46 +1,54 @@
<script lang="ts">
let { data } = $props();
let { data } = $props();
</script>
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1>
<div class="mb-4 rounded border border-gray-300 bg-white p-6">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3 mb-4">
<div class="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center text-xl font-bold text-gray-600">
{data.user?.user_metadata.display_name?.[0] ?? "U"}
</div>
<div>
<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
<div class="text-sm text-gray-500">{data.user?.email}</div>
</div>
</div>
<div class="flex flex-col gap-1">
<div>
<span class="font-medium text-gray-700">Section:</span>
<span class="text-gray-900">{data.profile?.section.name ?? "N/A"}</span>
</div>
<div>
<span class="font-medium text-gray-700">Position:</span>
<span class="text-gray-900">{data.profile?.section_position ?? "N/A"}</span>
</div>
</div>
<h2 class="text-lg mb-2 mt-4">User guide</h2>
<p class="text-gray-700 text-sm leading-relaxed">
To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and allow camera permissions.
If you close and open your browser and your camera is stuck, simply refresh the page or click Stop scanning and then Start scanning again.
When you scan a QR code, a request is sent to the server to get the user's personal information and to mark their tickets as scanned.
</p>
<h2 class="text-lg mb-2 mt-4">Administrator guide</h2>
<p class="text-gray-700 text-sm leading-relaxed">
You can view events
</p>
</div>
<div class="flex flex-col gap-2">
<div class="rounded-lg overflow-hidden border border-gray-200">
<div class="bg-gray-50 p-4 flex items-center gap-4 border-b border-gray-200">
<div
class="flex h-14 w-14 items-center justify-center rounded-full bg-gray-200 text-xl font-bold text-gray-600 flex-shrink-0"
>
{data.user?.user_metadata.display_name?.[0] ?? 'U'}
</div>
<div class="flex flex-col">
<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
<div class="text-sm text-gray-500">{data.user?.email}</div>
</div>
</div>
<table class="min-w-full">
<tbody class="divide-y divide-gray-200 bg-white">
<tr>
<td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Section</td>
<td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section?.name ?? 'N/A'}</td>
</tr>
<tr>
<td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Position</td>
<td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section_position ?? 'N/A'}</td>
</tr>
</tbody>
</table>
</div>
<h2 class="mt-4 mb-2 text-lg">User guide</h2>
<p class="text-sm leading-relaxed text-gray-700">
To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and
allow camera permissions. If you close and open your browser and your camera is stuck, simply
refresh the page or click Stop scanning and then Start scanning again. When you scan a QR
code, a request is sent to the server to get the user's personal information and to mark their
tickets as scanned.
</p>
{#if data.profile?.section_position === 'events_manager'}
<h2 class="mt-4 mb-2 text-lg">Events manager guide</h2>
<p class="text-sm leading-relaxed text-gray-700">You can view events</p>
{/if}
</div>
</div>
<a
href="/auth/signout"
class="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-red-500 hover:bg-red-600 text-white font-semibold py-3 px-8 rounded-full shadow-none border border-gray-300 transition"
href="/auth/signout"
class="fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-full border border-gray-300 bg-red-500 px-8 py-3 font-semibold text-white shadow-none transition hover:bg-red-600"
>
Sign out
Sign out
</a>