Add create and show page for competition
This commit is contained in:
parent
1485f3daf5
commit
744308d0cb
10 changed files with 151 additions and 72 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
55
resources/js/pages/tournaments/Show.svelte
Normal 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>
|
||||
24
resources/js/types/index.d.ts
vendored
24
resources/js/types/index.d.ts
vendored
|
|
@ -44,3 +44,27 @@ export interface Permission {
|
|||
description: string;
|
||||
is_wildcard: boolean;
|
||||
}
|
||||
|
||||
export enum Status {
|
||||
DRAFT = 'draft',
|
||||
PUBLIC = 'public',
|
||||
PRIVATE = 'private',
|
||||
}
|
||||
|
||||
export interface Tournament {
|
||||
id: number;
|
||||
name: string;
|
||||
description?: string;
|
||||
start_date: string;
|
||||
status: Status;
|
||||
location?: string;
|
||||
max_teams: number;
|
||||
current_scheduling_mode_id?: number;
|
||||
owner: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
teams: object[];
|
||||
fields: object[];
|
||||
matches: object[];
|
||||
break_periods: object[];
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue