86 lines
3 KiB
Svelte
86 lines
3 KiB
Svelte
<script lang="ts">
|
|
import Button from '@/components/ui/button/button.svelte';
|
|
import * as Card from '@/components/ui/card/index.js';
|
|
import Input from '@/components/ui/input/input.svelte';
|
|
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();
|
|
|
|
let addTeam = $state(false);
|
|
let teamName = $state('');
|
|
|
|
async function handleAddTeam() {
|
|
// add a new row to write the team name, on write complete save it
|
|
tournament.teams.push({ name: teamName });
|
|
|
|
// post request to /tournaments/{tournament}/addTeam
|
|
|
|
const response = await fetch(`/api/tournaments/${tournament.id}/addTeam`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({
|
|
team_name: teamName,
|
|
}),
|
|
});
|
|
|
|
if (response.ok) {
|
|
addTeam = false;
|
|
teamName = '';
|
|
} else {
|
|
// handle error
|
|
console.log('response', JSON.stringify(response));
|
|
const data = await response.json();
|
|
console.log('data', JSON.stringify(data));
|
|
}
|
|
}
|
|
</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}
|
|
{#if addTeam}
|
|
<Table.Row>
|
|
<Table.Cell><Input bind:value={teamName} placeholder="Team Name" /></Table.Cell>
|
|
<Table.Cell><Button onclick={handleAddTeam}>Save</Button></Table.Cell>
|
|
</Table.Row>
|
|
{/if}
|
|
</Table.Body>
|
|
</Table.Root>
|
|
</Card.Content>
|
|
<Card.Footer>
|
|
<Button onclick={() => (addTeam = true)} variant="outline">+ Add Team</Button>
|
|
</Card.Footer>
|
|
</Card.Root>
|
|
</AppLayout>
|