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 { QueryClient, QueryClientProvider } from '@tanstack/svelte-query';
import ToastContainer from '$lib/components/ToastContainer.svelte'; import ToastContainer from '$lib/components/ToastContainer.svelte';
let { data } = $props(); let { data, children } = $props();
const queryClient = new QueryClient({ const queryClient = new QueryClient({
defaultOptions: { defaultOptions: {
@@ -19,10 +19,9 @@
<nav class="border-b border-gray-300 bg-gray-50 p-2 text-gray-900"> <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="container mx-auto max-w-2xl p-2">
<div class="flex items-center justify-between"> <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"> <ul class="flex space-x-4">
<li><a href="/private/home">Home</a></li>
<li><a href="/private/scanner">Scanner</a></li> <li><a href="/private/scanner">Scanner</a></li>
{#if data.profile?.section_position === 'events_manager'} {#if data.profile?.section_position === 'events_manager'}
<li><a href="/private/events">Events</a></li> <li><a href="/private/events">Events</a></li>
@@ -35,7 +34,7 @@
<div class="container mx-auto max-w-2xl bg-white p-2"> <div class="container mx-auto max-w-2xl bg-white p-2">
<QueryClientProvider client={queryClient}> <QueryClientProvider client={queryClient}>
<slot /> {@render children()}
</QueryClientProvider> </QueryClientProvider>
</div> </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"> <script lang="ts">
let { data } = $props(); let { data } = $props();
</script> </script>
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">User Profile</h1> <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="mb-4 rounded border border-gray-300 bg-white p-6">
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<div class="flex items-center gap-3 mb-4"> <div class="rounded-lg overflow-hidden border border-gray-200">
<div class="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center text-xl font-bold text-gray-600"> <div class="bg-gray-50 p-4 flex items-center gap-4 border-b border-gray-200">
{data.user?.user_metadata.display_name?.[0] ?? "U"} <div
</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"
<div> >
<span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span> {data.user?.user_metadata.display_name?.[0] ?? 'U'}
<div class="text-sm text-gray-500">{data.user?.email}</div> </div>
</div> <div class="flex flex-col">
</div> <span class="text-lg font-semibold text-gray-800">{data.profile?.display_name}</span>
<div class="flex flex-col gap-1"> <div class="text-sm text-gray-500">{data.user?.email}</div>
<div> </div>
<span class="font-medium text-gray-700">Section:</span> </div>
<span class="text-gray-900">{data.profile?.section.name ?? "N/A"}</span> <table class="min-w-full">
</div> <tbody class="divide-y divide-gray-200 bg-white">
<div> <tr>
<span class="font-medium text-gray-700">Position:</span> <td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Section</td>
<span class="text-gray-900">{data.profile?.section_position ?? "N/A"}</span> <td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section?.name ?? 'N/A'}</td>
</div> </tr>
</div> <tr>
<h2 class="text-lg mb-2 mt-4">User guide</h2> <td class="whitespace-nowrap px-4 py-3 font-medium text-gray-700 w-1/3">Position</td>
<p class="text-gray-700 text-sm leading-relaxed"> <td class="whitespace-nowrap px-4 py-3 text-gray-900">{data.profile?.section_position ?? 'N/A'}</td>
To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and allow camera permissions. </tr>
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. </tbody>
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. </table>
</p> </div>
<h2 class="text-lg mb-2 mt-4">Administrator guide</h2> <h2 class="mt-4 mb-2 text-lg">User guide</h2>
<p class="text-gray-700 text-sm leading-relaxed"> <p class="text-sm leading-relaxed text-gray-700">
You can view events To scan a QR code, head over to Scanner in the top right corner. Click on Start scanning and
</p> allow camera permissions. If you close and open your browser and your camera is stuck, simply
</div> 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> </div>
<a <a
href="/auth/signout" 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" 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> </a>