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

Responsivness improvements

Browse Source
This commit is contained in:
Roman Krček
2025-06-27 22:36:45 +02:00
parent e856ed0304
commit 4d8e65f280
3 changed files with 138 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/private/events/event/+page.server.ts → src/lib/helpers/event.ts
View File

@@ -1,4 +1,4 @@
export async function load({ locals, url }) { export async function load({ data, url }) {
const event_id = url.searchParams.get('id'); const event_id = url.searchParams.get('id');
const { data: event_data, error: eventError } = await locals.supabase const { data: event_data, error: eventError } = await locals.supabase
.from('events') .from('events')

46
src/routes/private/events/+page.svelte
View File

@@ -1,20 +1,44 @@
<script lang="ts"> <script lang="ts">
export let data; import { onMount } from 'svelte';
let { data } = $props();
let events: any[] = $state([]);
let loading = $state(true);
onMount(async () => {
const { data: evs } = await data.supabase
.from('events')
.select('*')
.order('date', { ascending: false });
events = evs || [];
loading = false;
});
</script> </script>
<h1 class="text-2xl font-bold mb-4 mt-2 text-center">All Events</h1> <h1 class="text-2xl font-bold mb-4 mt-2 text-center">All Events</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4 max-w-2xl mx-auto">
{#each data.events as event} {#if loading}
<a {#each Array(4) as _}
href={`/private/events/event?id=${event.id}`} <div class="block border border-gray-300 rounded bg-white p-4 shadow-none min-h-[72px] h-full w-full">
class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group" <div class="flex flex-col gap-1">
> <span class="font-semibold text-lg text-gray-300 bg-gray-200 rounded w-1/2 h-6 mb-2 inline-block"></span>
<div class="flex flex-col gap-1"> <span class="text-gray-300 text-sm bg-gray-100 rounded w-1/3 h-4 inline-block"></span>
<span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span> </div>
<span class="text-gray-500 text-sm">{event.date}</span>
</div> </div>
</a> {/each}
{/each} {:else}
{#each events as event}
<a
href={`/private/events/event?id=${event.id}`}
class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group min-h-[72px] h-full w-full"
>
<div class="flex flex-col gap-1">
<span class="font-semibold text-lg text-black-700 group-hover:underline">{event.name}</span>
<span class="text-gray-500 text-sm">{event.date}</span>
</div>
</a>
{/each}
{/if}
</div> </div>
<a <a

151
src/routes/private/events/event/+page.svelte
View File

@@ -1,17 +1,50 @@
<script lang="ts"> <script lang="ts">
import { onMount } from 'svelte';
let { data } = $props(); let { data } = $props();
const scannedCount = data.participants.filter((p) => p.scanned).length; let event_data: any = $state(null);
const notScannedCount = data.participants.length - scannedCount; let participants: any[] = $state([]);
let loading = $state(true);
let scannedCount: number = $state(0);
let notScannedCount: number = $state(0);
onMount(async () => {
const event_id = new URLSearchParams(window.location.search).get('id');
if (!event_id) {
loading = false;
return;
}
const { data: event } = await data.supabase
.from('events')
.select('*')
.eq('id', event_id)
.single();
event_data = event;
const { data: parts } = await data.supabase
.from('participants')
.select('*, scanned_by:profiles (id, display_name)')
.eq('event', event_id);
participants = parts || [];
scannedCount = participants.filter((p) => p.scanned).length;
notScannedCount = participants.length - scannedCount;
loading = false;
});
</script> </script>
<h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1> <h1 class="mt-2 mb-4 text-center text-2xl font-bold">Event Overview</h1>
<div class="mb-2 rounded border border-gray-300 bg-white p-4"> <div class="mb-2 rounded border border-gray-300 bg-white p-4">
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<span class="text-black-700 text-lg font-semibold">{data.event_data.name}</span> {#if loading}
<span class="text-black-500 text-sm">{data.event_data.date}</span> <div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
<div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
{:else}
<span class="text-black-700 text-lg font-semibold">{event_data?.name}</span>
<span class="text-black-500 text-sm">{event_data?.date}</span>
{/if}
</div> </div>
</div> </div>
@@ -26,7 +59,11 @@
> >
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" /> <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg> </svg>
<span class="text-sm text-gray-700">Scanned ({scannedCount})</span> {#if loading}
<div class="h-4 w-16 bg-gray-200 rounded animate-pulse"></div>
{:else}
<span class="text-sm text-gray-700">Scanned ({scannedCount})</span>
{/if}
</div> </div>
<div class="mx-4 h-8 w-px bg-gray-300"></div> <div class="mx-4 h-8 w-px bg-gray-300"></div>
<div class="flex flex-1 items-center justify-center gap-2"> <div class="flex flex-1 items-center justify-center gap-2">
@@ -41,55 +78,71 @@
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" /> <line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" /> <line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
</svg> </svg>
<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span> {#if loading}
<div class="h-4 w-24 bg-gray-200 rounded animate-pulse"></div>
{:else}
<span class="text-sm text-gray-700">Not scanned ({notScannedCount})</span>
{/if}
</div> </div>
</div> </div>
<div class="rounded border border-gray-300 bg-white p-4"> <div class="rounded border border-gray-300 bg-white p-4">
<h2 class="mb-2 rounded text-xl font-bold">Participants ({data.participants.length})</h2> <h2 class="mb-2 rounded text-xl font-bold">
{#if loading}
<div class="h-6 w-32 bg-gray-200 rounded animate-pulse"></div>
{:else}
Participants ({participants.length})
{/if}
</h2>
<ul class="space-y-1"> <ul class="space-y-1">
{#each data.participants as p} {#if loading}
<li class="flex items-center gap-2 border-b pb-1 last:border-b-0"> <li>
{#if p.scanned} <div class="h-10 w-full bg-gray-200 rounded animate-pulse"></div>
<svg
title="Scanned"
class="mr-2 inline h-4 w-4 text-green-600"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
{:else}
<svg
title="Not scanned"
class="mr-2 inline h-4 w-4 text-red-600"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
</svg>
{/if}
<span class="font-semibold">{p.name} {p.surname}</span>
<span class="flex-1"></span>
{#if p.scanned_by}
<div class="flex flex-row items-end ml-2">
<span class="mr-1 text-xs text-gray-500">
{new Date(p.scanned_at).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false
})}
</span>
<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
</div>
{/if}
</li> </li>
{/each} {:else}
{#each participants as p}
<li class="flex items-center gap-2 border-b border-gray-300 pb-1 last:border-b-0">
{#if p.scanned}
<svg
title="Scanned"
class="mr-2 inline h-4 w-4 text-green-600"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
{:else}
<svg
title="Not scanned"
class="mr-2 inline h-4 w-4 text-red-600"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
<line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" stroke-width="2" />
<line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" stroke-width="2" />
</svg>
{/if}
<span class="font-semibold">{p.name} {p.surname}</span>
<span class="flex-1"></span>
{#if p.scanned_by}
<div class="ml-2 flex flex-row items-end">
<span class="mr-1 text-xs text-gray-500">
{new Date(p.scanned_at).toLocaleTimeString([], {
hour: '2-digit',
minute: '2-digit',
hour12: false
})}
</span>
<span class="text-xs text-gray-500">by {p.scanned_by.display_name}</span>
</div>
{/if}
</li>
{/each}
{/if}
</ul> </ul>
</div> </div>