PmP/vbytes-lan-attendence
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

quick ui cleanup

Browse source
This commit is contained in:
Sebastian 2025-10-17 15:58:54 +02:00
parent af4dbdea91
commit be9470d669
3 changed files with 74 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
web/src/routes/(tournament)/tournament/+page.svelte
View file

@ -20,17 +20,19 @@
const tournaments = $derived(() => sortTournaments(tournamentList)); const tournaments = $derived(() => sortTournaments(tournamentList));
function upsertTournament(tournament: TournamentInfo) { function upsertTournament(tournament: TournamentInfo) {
const index = tournamentList.findIndex((item) => item.id === tournament.id); const index = tournamentList.findIndex((item: { id: number }) => item.id === tournament.id);
if (index >= 0) { if (index >= 0) {
tournamentList = tournamentList.map((item, idx) => (idx === index ? tournament : item)); tournamentList = tournamentList.map((item: any, idx: any) =>
idx === index ? tournament : item
);
return; return;
} }
tournamentList = [...tournamentList, tournament]; tournamentList = [...tournamentList, tournament];
} }
function removeTournament(id: number) { function removeTournament(id: number) {
if (!tournamentList.some((item) => item.id === id)) return; if (!tournamentList.some((item: { id: number }) => item.id === id)) return;
tournamentList = tournamentList.filter((item) => item.id !== id); tournamentList = tournamentList.filter((item: { id: number }) => item.id !== id);
} }
function formatDate(value: string | null) { function formatDate(value: string | null) {
@ -63,10 +65,10 @@
return `${count} ${count === 1 ? 'spelare' : 'spelare'}`; return `${count} ${count === 1 ? 'spelare' : 'spelare'}`;
} }
onMount(() => { onMount(() => {
const stop = listenToTournamentEvents(upsertTournament, removeTournament, { const stop = listenToTournamentEvents(upsertTournament, removeTournament, {
endpoint: '/api/public-events' endpoint: '/api/public-events'
}); });
return () => { return () => {
stop(); stop();
}; };
@ -80,66 +82,59 @@ onMount(() => {
<div class="min-h-screen bg-slate-950 text-slate-100"> <div class="min-h-screen bg-slate-950 text-slate-100">
<div class="mx-auto max-w-6xl space-y-12 px-4 py-16 sm:py-20"> <div class="mx-auto max-w-6xl space-y-12 px-4 py-16 sm:py-20">
<header class="space-y-3 text-center"> <header class="space-y-3 text-center">
<p class="text-xs uppercase tracking-[0.4em] text-indigo-300">VBytes LAN</p> <p class="text-xs tracking-[0.4em] text-indigo-300 uppercase">VBytes LAN</p>
<h1 class="text-4xl font-bold sm:text-5xl">Turneringar</h1> <h1 class="text-4xl font-bold sm:text-5xl">Turneringar</h1>
<p class="mx-auto max-w-2xl text-base text-slate-300">
Samla laget, följ brackets i realtid och håll koll på allt som händer under turneringarna.
</p>
</header> </header>
{#if tournaments().length > 0} {#if tournaments().length > 0}
<div class="flex flex-wrap justify-center gap-8"> <div class="flex flex-wrap justify-center gap-8">
{#each tournaments() as tournament} {#each tournaments() as tournament}
<article class="group w-full max-w-md flex flex-col rounded-3xl border border-slate-800 bg-gradient-to-br from-slate-900/80 via-slate-900/70 to-slate-900/50 p-8 shadow-xl transition duration-200 hover:-translate-y-1 hover:border-indigo-400/70 hover:shadow-indigo-500/25"> <a href={`/tournament/${tournament.slug}`}>
<div class="flex items-center justify-between gap-3 text-xs uppercase tracking-wide"> <article
<span class="font-semibold text-indigo-200">{tournament.game}</span> class="group flex w-full max-w-md flex-col rounded-3xl border border-slate-800 bg-gradient-to-br from-slate-900/80 via-slate-900/70 to-slate-900/50 p-8 shadow-xl transition duration-200 hover:-translate-y-1 hover:border-indigo-400/70 hover:shadow-indigo-500/25"
<span class="rounded-full border border-slate-700 px-3 py-1 text-[0.7rem] font-semibold text-slate-300"> >
{registrationSummary(tournament)} <div class="flex items-center justify-between gap-3 text-xs tracking-wide uppercase">
</span> <span class="font-semibold text-indigo-200">{tournament.game}</span>
</div> <span
<h2 class="mt-4 text-3xl font-semibold text-slate-50">{tournament.title}</h2> class="rounded-full border border-slate-700 px-3 py-1 text-[0.7rem] font-semibold text-slate-300"
{#if tournament.tagline}
<p class="mt-3 text-base text-slate-300">{tournament.tagline}</p>
{:else if tournament.description}
<p class="mt-3 text-base text-slate-400">{tournament.description}</p>
{/if}
<dl class="mt-6 space-y-3 text-sm text-slate-300">
{#if tournament.start_at}
<div class="flex items-center gap-3 text-[0.95rem]">
<span class="text-indigo-200">Start:</span>
<span>{formatDate(tournament.start_at) ?? tournament.start_at}</span>
</div>
{/if}
{#if tournament.location}
<div class="flex items-center gap-3 text-[0.95rem]">
<span class="text-indigo-200">Plats:</span>
<span>{tournament.location}</span>
</div>
{/if}
{#if tournament.contact}
<div class="flex items-center gap-3 text-[0.95rem]">
<span class="text-indigo-200">Kontakt:</span>
<span>{tournament.contact}</span>
</div>
{/if}
</dl>
<div class="mt-auto pt-8">
{#if tournament.slug}
<a
href={`/tournament/${tournament.slug}`}
class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-5 py-2 text-sm font-semibold uppercase tracking-wide text-white transition hover:bg-indigo-600"
> >
Visa turnering {registrationSummary(tournament)}
</a> </span>
{:else} </div>
<span class="text-xs text-slate-500">Ingen publik sida tillgänglig.</span> <h2 class="mt-4 text-3xl font-semibold text-slate-50">{tournament.title}</h2>
{#if tournament.tagline}
<p class="mt-3 text-base text-slate-300">{tournament.tagline}</p>
{:else if tournament.description}
<p class="mt-3 text-base text-slate-400">{tournament.description}</p>
{/if} {/if}
</div> <dl class="mt-6 space-y-3 text-sm text-slate-300">
</article> {#if tournament.start_at}
<div class="flex items-center gap-3 text-[0.95rem]">
<span class="text-indigo-200">Start:</span>
<span>{formatDate(tournament.start_at) ?? tournament.start_at}</span>
</div>
{/if}
{#if tournament.location}
<div class="flex items-center gap-3 text-[0.95rem]">
<span class="text-indigo-200">Plats:</span>
<span>{tournament.location}</span>
</div>
{/if}
{#if tournament.contact}
<div class="flex items-center gap-3 text-[0.95rem]">
<span class="text-indigo-200">Kontakt:</span>
<span>{tournament.contact}</span>
</div>
{/if}
</dl>
</article>
</a>
{/each} {/each}
</div> </div>
{:else} {:else}
<p class="rounded-2xl border border-dashed border-slate-700 bg-slate-900/40 px-6 py-12 text-center text-sm text-slate-400"> <p
class="rounded-2xl border border-dashed border-slate-700 bg-slate-900/40 px-6 py-12 text-center text-sm text-slate-400"
>
Inga turneringar är publicerade ännu. Kom tillbaka senare! Inga turneringar är publicerade ännu. Kom tillbaka senare!
</p> </p>
{/if} {/if}
@ -147,7 +142,7 @@ onMount(() => {
<div class="text-center"> <div class="text-center">
<a <a
href="/admin" href="/admin"
class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-6 py-3 text-sm font-semibold uppercase tracking-wide text-white transition hover:bg-indigo-600" class="inline-flex items-center justify-center rounded-full bg-indigo-500 px-6 py-3 text-sm font-semibold tracking-wide text-white uppercase transition hover:bg-indigo-600"
> >
Till admin Till admin
</a> </a>

5
web/src/routes/(tournament)/tournament/[slug]/+page.svelte
View file

@ -418,11 +418,6 @@
Anmälan bekräftad Anmälan bekräftad
</h2> </h2>
<p class="text-sm text-slate-300">Du är registrerad till {tournament.title}.</p> <p class="text-sm text-slate-300">Du är registrerad till {tournament.title}.</p>
{#if signup.successRegistrationId}
<p class="text-xs tracking-wide text-indigo-200 uppercase">
Anmälan #{signup.successRegistrationId}
</p>
{/if}
</header> </header>
<section <section

39
web/src/routes/(tournament)/tournament/[slug]/signup-success/[registration]/+page.svelte
View file

@ -1,8 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { import type { TournamentRegistrationDetail, TournamentSignupField } from '$lib/types';
TournamentRegistrationDetail,
TournamentSignupField
} from '$lib/types';
const props = $props<{ data: TournamentRegistrationDetail }>(); const props = $props<{ data: TournamentRegistrationDetail }>();
const { tournament, registration } = props.data; const { tournament, registration } = props.data;
@ -39,18 +36,20 @@
<div class="min-h-screen bg-slate-950 text-slate-100"> <div class="min-h-screen bg-slate-950 text-slate-100">
<div class="mx-auto flex min-h-screen max-w-4xl flex-col gap-8 px-4 py-12"> <div class="mx-auto flex min-h-screen max-w-4xl flex-col gap-8 px-4 py-12">
<header class="space-y-4 rounded-2xl bg-slate-900/70 p-6 text-center shadow-lg"> <header class="space-y-4 rounded-2xl bg-slate-900/70 p-6 text-center shadow-lg">
<p class="text-xs uppercase tracking-[0.4em] text-indigo-300">VBytes LAN</p> <p class="text-xs tracking-[0.4em] text-indigo-300 uppercase">VBytes LAN</p>
<h1 class="text-3xl font-bold sm:text-4xl">Anmälan bekräftad</h1> <h1 class="text-3xl font-bold sm:text-4xl">Anmälan bekräftad</h1>
<p class="text-sm text-slate-300">Du är registrerad till {tournament.title}.</p> <p class="text-sm text-slate-300">Du är registrerad till {tournament.title}.</p>
<p class="text-xs uppercase tracking-wide text-indigo-200">
Skapad {formatDateTime(registration.created_at) ?? registration.created_at}
</p>
</header> </header>
<section class="grid gap-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6 md:grid-cols-2"> <section
class="grid gap-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6 md:grid-cols-2"
>
<div class="space-y-3"> <div class="space-y-3">
<h2 class="text-lg font-semibold text-slate-100">Turnering</h2> <h2 class="text-lg font-semibold text-slate-100">Turnering</h2>
<p class="text-sm text-slate-300"><span class="font-medium text-slate-100">Spel:</span> {tournament.game}</p> <p class="text-sm text-slate-300">
<span class="font-medium text-slate-100">Spel:</span>
{tournament.game}
</p>
{#if tournament.start_at} {#if tournament.start_at}
<p class="text-sm text-slate-300"> <p class="text-sm text-slate-300">
<span class="font-medium text-slate-100">Start:</span> <span class="font-medium text-slate-100">Start:</span>
@ -59,7 +58,8 @@
{/if} {/if}
{#if tournament.location} {#if tournament.location}
<p class="text-sm text-slate-300"> <p class="text-sm text-slate-300">
<span class="font-medium text-slate-100">Plats:</span> {tournament.location} <span class="font-medium text-slate-100">Plats:</span>
{tournament.location}
</p> </p>
{/if} {/if}
</div> </div>
@ -75,7 +75,8 @@
{/if} {/if}
{#if tournament.contact} {#if tournament.contact}
<p class="text-sm text-slate-300"> <p class="text-sm text-slate-300">
<span class="font-medium text-slate-100">Kontakt:</span> {tournament.contact} <span class="font-medium text-slate-100">Kontakt:</span>
{tournament.contact}
</p> </p>
{/if} {/if}
</div> </div>
@ -84,14 +85,16 @@
<section class="space-y-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6"> <section class="space-y-4 rounded-2xl border border-slate-800 bg-slate-900/60 p-6">
<h2 class="text-lg font-semibold text-slate-100">Anmälningsuppgifter</h2> <h2 class="text-lg font-semibold text-slate-100">Anmälningsuppgifter</h2>
{#if entryFields.length === 0} {#if entryFields.length === 0}
<p class="rounded-md border border-dashed border-slate-700 px-4 py-3 text-sm text-slate-300"> <p
class="rounded-md border border-dashed border-slate-700 px-4 py-3 text-sm text-slate-300"
>
Den här turneringen kräver inga uppgifter utöver spelare. Den här turneringen kräver inga uppgifter utöver spelare.
</p> </p>
{:else} {:else}
<div class="grid gap-3 md:grid-cols-2"> <div class="grid gap-3 md:grid-cols-2">
{#each entryFields as field} {#each entryFields as field}
<div class="rounded-md border border-slate-800 bg-slate-900 px-4 py-3"> <div class="rounded-md border border-slate-800 bg-slate-900 px-4 py-3">
<p class="text-xs uppercase tracking-wide text-indigo-200">{field.label}</p> <p class="text-xs tracking-wide text-indigo-200 uppercase">{field.label}</p>
<p class="mt-1 text-sm text-slate-100">{fieldValue(entryValues, field) || '—'}</p> <p class="mt-1 text-sm text-slate-100">{fieldValue(entryValues, field) || '—'}</p>
</div> </div>
{/each} {/each}
@ -113,7 +116,9 @@
<div class="space-y-3"> <div class="space-y-3">
{#each participantValues as participant, index} {#each participantValues as participant, index}
<div class="rounded-md border border-slate-800 bg-slate-900 px-4 py-3"> <div class="rounded-md border border-slate-800 bg-slate-900 px-4 py-3">
<p class="text-xs font-semibold uppercase tracking-wide text-indigo-200">Spelare {index + 1}</p> <p class="text-xs font-semibold tracking-wide text-indigo-200 uppercase">
Spelare {index + 1}
</p>
<ul class="mt-2 space-y-1 text-sm text-slate-100"> <ul class="mt-2 space-y-1 text-sm text-slate-100">
{#each participantFields as field} {#each participantFields as field}
<li> <li>
@ -129,9 +134,7 @@
</section> </section>
<footer class="mt-auto flex flex-col gap-3 text-center text-sm text-slate-400"> <footer class="mt-auto flex flex-col gap-3 text-center text-sm text-slate-400">
<p> <p>Behöver du uppdatera informationen? Kontakta arrangören eller skicka in en ny anmälan.</p>
Behöver du uppdatera informationen? Kontakta arrangören eller skicka in en ny anmälan.
</p>
<div class="flex flex-wrap justify-center gap-3"> <div class="flex flex-wrap justify-center gap-3">
<a <a
href="/" href="/"