flambeaux/flbxcup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add create and show page for competition

Browse source
This commit is contained in:
unurled 2025-07-03 20:18:53 +02:00
parent 1485f3daf5
commit 744308d0cb
10 changed files with 151 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

84
resources/js/pages/Home.svelte
View file

@ -87,11 +87,11 @@
<div class="flex flex-col gap-2 text-sm">
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4 text-muted-foreground" />
<span>{formatDate(tournament.date)}</span>
<span>{formatDate(tournament.start_date)}</span>
</div>
<div class="flex items-center gap-2">
<Users class="h-4 w-4 text-muted-foreground" />
<span>{tournament.participantsCount} participants</span>
<span>{tournament.max_teams} participants</span>
</div>
</div>
</CardContent>
@ -107,7 +107,7 @@
</div>
</TabsContent>
<TabsContent value="my" class="mt-6">
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 w-full">
{#if !userTournaments.original.data || userTournaments.original.data.length === 0}
<div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
<Trophy class="h-10 w-10 text-muted-foreground" />
@ -118,47 +118,45 @@
</Button>
</div>
{:else}
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#each userTournaments.original.data as tournament (tournament.id)}
<Card>
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Trophy class="h-5 w-5 text-primary" />
{tournament.name}
</CardTitle>
<CardDescription>{tournament.description}</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-2 text-sm">
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4 text-muted-foreground" />
<span>{formatDate(tournament.date)}</span>
</div>
<div class="flex items-center gap-2">
<Users class="h-4 w-4 text-muted-foreground" />
<span>{tournament.participantsCount} participants</span>
</div>
<div class="flex items-center gap-2">
<User class="h-4 w-4 text-muted-foreground" />
<span>Created by you</span>
</div>
{#each userTournaments.original.data as tournament (tournament.id)}
<Card>
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Trophy class="h-5 w-5 text-primary" />
{tournament.name}
</CardTitle>
<CardDescription>{tournament.description}</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-2 text-sm">
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4 text-muted-foreground" />
<span>{formatDate(tournament.start_date)}</span>
</div>
</CardContent>
<CardFooter class="flex gap-2">
<Button variant="outline" class="flex-1">
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full"
>View</Link
>
</Button>
<Button variant="secondary" class="flex-1">
<Link href={`/tournaments/${tournament.id}/edit`} class="flex items-center justify-center w-full">
Edit
</Link>
</Button>
</CardFooter>
</Card>
{/each}
</div>
<div class="flex items-center gap-2">
<Users class="h-4 w-4 text-muted-foreground" />
<span>{tournament.max_teams} participants</span>
</div>
<div class="flex items-center gap-2">
<User class="h-4 w-4 text-muted-foreground" />
<span>Created by you</span>
</div>
</div>
</CardContent>
<CardFooter class="flex gap-2">
<Button variant="outline" class="flex-1">
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full"
>View</Link
>
</Button>
<Button class="flex-1">
<Link href={`/tournaments/${tournament.id}/edit`} class="flex items-center justify-center w-full">
Edit
</Link>
</Button>
</CardFooter>
</Card>
{/each}
{/if}
</div>
</TabsContent>

1
resources/js/pages/tournaments/Create.svelte
View file

@ -72,7 +72,6 @@
<AppLayout {breadcrumbs}>
<div class="container mx-auto py-10">
<h1 class="text-2xl font-bold mb-6">Create New Tournament</h1>
<div class="bg-white dark:bg-gray-800 shadow-sm rounded-lg p-6">
<form onsubmit={handleSubmit} class="space-y-6">
<!-- Tournament Name -->

55
resources/js/pages/tournaments/Show.svelte Normal file
View file

@ -0,0 +1,55 @@
<script lang="ts">
import Button from '@/components/ui/button/button.svelte';
import * as Card from '@/components/ui/card/index.js';
import * as Table from '@/components/ui/table';
import AppLayout from '@/layouts/AppLayout.svelte';
import { type Tournament } from '@/types';
const breadcrumbs = [
{ title: 'Home', href: '/' },
{ title: 'Tournaments', href: '/tournaments' },
{ title: 'Tournament Name', href: '/tournaments/1' },
];
let { tournament }: { tournament: Tournament } = $props();
function handleAddTeam() {
// add a new row to write the team name, on write complete save it
}
</script>
<AppLayout {breadcrumbs}>
{JSON.stringify(tournament)}
<!-- Teams -->
<Card.Root>
<Card.Header>
<Card.Title>Teams</Card.Title>
</Card.Header>
<Card.Content>
<Table.Root>
<Table.Header>
<Table.Row>
<Table.Head>Name</Table.Head>
<Table.Head>Actions</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{#each tournament.teams as team (team)}
<Table.Row>
<Table.Cell>{JSON.stringify(team)}</Table.Cell>
<Table.Cell>
<Button variant="outline">Edit</Button>
<Button variant="destructive">Delete</Button>
</Table.Cell>
</Table.Row>
{/each}
<Table.Row>
<Table.Cell>
<Button onsubmit={handleAddTeam} variant="outline">+ Add Team</Button>
</Table.Cell>
</Table.Row>
</Table.Body>
</Table.Root>
</Card.Content>
</Card.Root>
</AppLayout>