App: Add TS type information
This commit is contained in:
113
src/routes/data/season/+page.server.ts
Normal file
113
src/routes/data/season/+page.server.ts
Normal file
@ -0,0 +1,113 @@
|
||||
import type { Actions, PageServerLoad } from "./$types";
|
||||
import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
|
||||
import type { Team, Driver, Race, Substitution } from "$lib/schema";
|
||||
|
||||
// These "actions" run serverside only, as they're located inside +page.server.ts
|
||||
export const actions = {
|
||||
create_team: async ({ request, locals }) => {
|
||||
if (!locals.admin) return { unauthorized: true };
|
||||
|
||||
const data: FormData = form_data_clean(await request.formData());
|
||||
form_data_ensure_keys(data, ["name", "logo"]);
|
||||
|
||||
const record: Team = await locals.pb.collection("teams").create(data);
|
||||
|
||||
return { tab: 0 };
|
||||
},
|
||||
|
||||
update_team: async ({ request, locals }) => {
|
||||
if (!locals.admin) return { unauthorized: true };
|
||||
|
||||
const data: FormData = form_data_clean(await request.formData());
|
||||
const id: string = form_data_get_and_remove_id(data);
|
||||
|
||||
const record: Team = await locals.pb.collection("teams").update(id, data);
|
||||
|
||||
return { tab: 0 };
|
||||
},
|
||||
|
||||
delete_team: async ({ request, locals }) => {
|
||||
if (!locals.admin) return { unauthorized: true };
|
||||
|
||||
const data: FormData = form_data_clean(await request.formData());
|
||||
const id: string = form_data_get_and_remove_id(data);
|
||||
|
||||
await locals.pb.collection("teams").delete(id);
|
||||
|
||||
return { tab: 0 };
|
||||
},
|
||||
|
||||
create_driver: async ({ request, locals }) => {
|
||||
return { tab: 1 };
|
||||
},
|
||||
update_driver: async ({ request, locals }) => {
|
||||
return { tab: 1 };
|
||||
},
|
||||
delete_driver: async ({ request, locals }) => {
|
||||
return { tab: 1 };
|
||||
},
|
||||
|
||||
create_race: async ({ request, locals }) => {
|
||||
return { tab: 2 };
|
||||
},
|
||||
update_race: async ({ request, locals }) => {
|
||||
return { tab: 2 };
|
||||
},
|
||||
delete_race: async ({ request, locals }) => {
|
||||
return { tab: 2 };
|
||||
},
|
||||
|
||||
create_substitution: async ({ request, locals }) => {
|
||||
return { tab: 2 };
|
||||
},
|
||||
update_substitution: async ({ request, locals }) => {
|
||||
return { tab: 2 };
|
||||
},
|
||||
delete_substitution: async ({ request, locals }) => {
|
||||
return { tab: 2 };
|
||||
},
|
||||
} satisfies Actions;
|
||||
|
||||
// This "load" function runs serverside only, as it's located inside +page.server.ts
|
||||
export const load: PageServerLoad = async ({ fetch, locals }) => {
|
||||
const fetch_teams = async (): Promise<Array<Team>> => {
|
||||
const teams: Array<Team> = await locals.pb.collection("teams").getFullList({
|
||||
sort: "+name",
|
||||
fetch: fetch,
|
||||
});
|
||||
|
||||
teams.map((team: Team) => {
|
||||
team.logo_url = locals.pb.files.getURL(team, team.logo);
|
||||
});
|
||||
|
||||
return teams;
|
||||
};
|
||||
|
||||
const fetch_drivers = async (): Promise<Array<Driver>> => {
|
||||
const drivers: Array<Driver> = await locals.pb.collection("drivers").getFullList({
|
||||
sort: "+lastname",
|
||||
fetch: fetch,
|
||||
});
|
||||
|
||||
drivers.map((driver: Driver) => {
|
||||
driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
|
||||
});
|
||||
|
||||
return drivers;
|
||||
};
|
||||
|
||||
const fetch_races = async (): Promise<Array<Race>> => {
|
||||
return [];
|
||||
};
|
||||
|
||||
const fetch_substitutions = async (): Promise<Array<Substitution>> => {
|
||||
return [];
|
||||
};
|
||||
|
||||
return {
|
||||
teams: await fetch_teams(),
|
||||
drivers: await fetch_drivers(),
|
||||
races: await fetch_races(),
|
||||
substitutions: await fetch_substitutions(),
|
||||
};
|
||||
};
|
||||
262
src/routes/data/season/+page.svelte
Normal file
262
src/routes/data/season/+page.svelte
Normal file
@ -0,0 +1,262 @@
|
||||
<script lang="ts">
|
||||
import { Input, Button, Card } from "$lib/components";
|
||||
import { get_image_preview_event_handler } from "$lib/image";
|
||||
import { get_by_id } from "$lib/database";
|
||||
import type { Team } from "$lib/schema";
|
||||
|
||||
import { type PageData, type ActionData } from "./$types";
|
||||
import { FileDropzone, Tab, TabGroup } from "@skeletonlabs/skeleton";
|
||||
|
||||
let { data, form }: { data: PageData; form: ActionData } = $props();
|
||||
|
||||
let current_tab: number = $state(0);
|
||||
if (form?.tab) {
|
||||
// console.log(`Form returned current_tab=${form.current_tab}`);
|
||||
current_tab = form.tab;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>F11 - Season Data</title>
|
||||
</svelte:head>
|
||||
|
||||
<TabGroup
|
||||
justify="justify-center"
|
||||
active="variant-filled-primary"
|
||||
hover="hover:variant-filled-primary"
|
||||
regionList="gap-2 shadow rounded-container-token p-2"
|
||||
regionPanel="!mt-0"
|
||||
rounded="rounded-container-token"
|
||||
border=""
|
||||
class="w-full rounded-container-token"
|
||||
padding="p-2"
|
||||
>
|
||||
<Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab>
|
||||
<Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab>
|
||||
<Tab bind:group={current_tab} name="races" value={2}>Races</Tab>
|
||||
<Tab bind:group={current_tab} name="substitutions" value={3}>Substitutions</Tab>
|
||||
|
||||
<svelte:fragment slot="panel">
|
||||
{#if current_tab === 0}
|
||||
<!-- Teams Tab -->
|
||||
<!-- Teams Tab -->
|
||||
<!-- Teams Tab -->
|
||||
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
||||
<!-- List all teams inside the database -->
|
||||
{#each data.teams as team}
|
||||
<Card imgsrc={team.logo_url} imgid="update_team_logo_preview_{team.id}">
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{#if data.admin}
|
||||
<input name="id" type="hidden" value={team.id} />
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
|
||||
>Name</Input
|
||||
>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_{team.id}"
|
||||
onchange={get_image_preview_event_handler(`update_team_logo_preview_${team.id}`)}
|
||||
disabled={!data.admin}
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><b>Upload Logo</b> or Drag and Drop</svelte:fragment
|
||||
>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button formaction="?/update_team" color="secondary" disabled={!data.admin} submit
|
||||
>Save Changes</Button
|
||||
>
|
||||
<Button color="primary" submit disabled={!data.admin} formaction="?/delete_team"
|
||||
>Delete</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
{/each}
|
||||
|
||||
<!-- Add a new team -->
|
||||
{#if data.admin}
|
||||
<Card imgsrc="" imgid="create_team_logo_preview" imghidden>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h4 class="h4 select-none">Add a New Team</h4>
|
||||
|
||||
<!-- Team name input -->
|
||||
<Input id="team_name_create" name="name" required>Name</Input>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_create"
|
||||
onchange={get_image_preview_event_handler("create_team_logo_preview")}
|
||||
disabled={!data.admin}
|
||||
required
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><b>Upload Logo</b> or Drag and Drop</svelte:fragment
|
||||
>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<!-- By specifying the formaction on the button (instead of action on the form), -->
|
||||
<!-- we can have multiple buttons with different actions in a single form. -->
|
||||
|
||||
<Button formaction="?/create_team" color="secondary" submit>Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_tab === 1}
|
||||
<!-- Drivers Tab -->
|
||||
<!-- Drivers Tab -->
|
||||
<!-- Drivers Tab -->
|
||||
|
||||
<!-- TODO: Team select -->
|
||||
<!-- TODO: Active switch -->
|
||||
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
||||
<!-- List all drivers inside the database -->
|
||||
{#each data.drivers as driver}
|
||||
<Card imgsrc={driver.headshot_url} imgid="update_driver_headshot_preview_{driver.id}">
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{#if data.admin}
|
||||
<input name="id" type="hidden" value={driver.id} />
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Driver data input -->
|
||||
<Input
|
||||
id="driver_first_name_{driver.id}"
|
||||
name="firstname"
|
||||
value={driver.firstname}
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}>First Name</Input
|
||||
>
|
||||
<Input
|
||||
id="driver_last_name_{driver.id}"
|
||||
name="lastname"
|
||||
value={driver.lastname}
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}>Last Name</Input
|
||||
>
|
||||
<Input
|
||||
id="driver_code_{driver.id}"
|
||||
name="code"
|
||||
value={driver.code}
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}>Driver Code</Input
|
||||
>
|
||||
<Button>
|
||||
<img src={get_by_id<Team>(data.teams, driver.team)?.logo_url} alt="" />
|
||||
</Button>
|
||||
|
||||
<!-- Headshot upload -->
|
||||
<FileDropzone
|
||||
name="headshot"
|
||||
id="driver_headshot_{driver.id}"
|
||||
onchange={get_image_preview_event_handler(
|
||||
`update_driver_headshot_preview_${driver.id}`,
|
||||
)}
|
||||
disabled={!data.admin}
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><b>Upload Headshot</b> or Drag and Drop</svelte:fragment
|
||||
>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button
|
||||
formaction="?/update_driver"
|
||||
color="secondary"
|
||||
disabled={!data.admin}
|
||||
submit>Save Changes</Button
|
||||
>
|
||||
<Button formaction="?/delete_driver" color="primary" disabled={!data.admin} submit
|
||||
>Delete</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
{/each}
|
||||
|
||||
<!-- Add a new driver -->
|
||||
{#if data.admin}
|
||||
<Card imgsrc="" imgid="create_driver_headshot_preview" imghidden>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="flex flex-col gap-2">
|
||||
<h4 class="h4 select-none">Add a New Driver</h4>
|
||||
|
||||
<!-- Driver data input -->
|
||||
<Input
|
||||
id="driver_first_name_create"
|
||||
name="firstname"
|
||||
placeholder="First Name"
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}
|
||||
required>First Name</Input
|
||||
>
|
||||
<Input
|
||||
id="driver_last_name_create"
|
||||
name="lastname"
|
||||
placeholder="Last Name"
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}
|
||||
required>Last Name</Input
|
||||
>
|
||||
<Input
|
||||
id="driver_code_create"
|
||||
name="code"
|
||||
placeholder="Driver Code"
|
||||
labelwidth="120px"
|
||||
disabled={!data.admin}
|
||||
required>Driver Code</Input
|
||||
>
|
||||
|
||||
<!-- Headshot upload -->
|
||||
<FileDropzone
|
||||
name="headshot"
|
||||
id="driver_headshot_create"
|
||||
onchange={get_image_preview_event_handler("create_driver_headshot_preview")}
|
||||
disabled={!data.admin}
|
||||
required
|
||||
>
|
||||
<svelte:fragment slot="message"
|
||||
><b>Upload Headshot</b> or Drag and Drop</svelte:fragment
|
||||
>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button formaction="?/create_driver" color="secondary" submit>Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if current_tab === 2}
|
||||
<!-- Races Tab -->
|
||||
<!-- Races Tab -->
|
||||
<!-- Races Tab -->
|
||||
|
||||
<span>Races</span>
|
||||
{:else if current_tab === 3}
|
||||
<!-- Substitutions Tab -->
|
||||
<!-- Substitutions Tab -->
|
||||
<!-- Substitutions Tab -->
|
||||
|
||||
<span>Substitutions</span>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</TabGroup>
|
||||
@ -1,32 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { navigating, page } from "$app/stores";
|
||||
import { Tab, TabGroup } from "@skeletonlabs/skeleton";
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
let { children }: { children: Snippet } = $props();
|
||||
|
||||
let current_tab: number = $state(0);
|
||||
const tabs: { [tab: string]: number } = {
|
||||
teams: 0,
|
||||
drivers: 1,
|
||||
races: 2,
|
||||
};
|
||||
|
||||
navigating.subscribe((nav) => {
|
||||
if (!nav?.to?.url) return;
|
||||
|
||||
current_tab = tabs[nav.to.url.toString().split("/").at(-1) || "teams"];
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1>Season Data</h1>
|
||||
|
||||
<TabGroup justify="justify-center">
|
||||
<a href="teams"> <Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab></a>
|
||||
<a href="drivers"><Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab></a>
|
||||
<a href="races"><Tab bind:group={current_tab} name="races" value={2}>Races</Tab></a>
|
||||
</TabGroup>
|
||||
|
||||
<div>
|
||||
{@render children()}
|
||||
</div>
|
||||
@ -1 +0,0 @@
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
import type { Actions, PageServerLoad } from "./$types";
|
||||
import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
|
||||
|
||||
// These "actions" run serverside only, as they're located inside +page.server.ts
|
||||
export const actions = {
|
||||
// We destructure the RequestEvent with ({cookies, request}).
|
||||
// Alternatively use (event) and event.cookies or event.request to access.
|
||||
create: async ({ cookies, request, locals }) => {
|
||||
if (!locals.admin) return { success: false };
|
||||
|
||||
const data = form_data_clean(await request.formData());
|
||||
form_data_ensure_keys(data, ["name", "logo"]);
|
||||
|
||||
const record = await locals.pb.collection("teams").create(data);
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
update: async ({ cookies, request, locals }) => {
|
||||
if (!locals.admin) return { success: false };
|
||||
|
||||
const data = form_data_clean(await request.formData());
|
||||
const id = form_data_get_and_remove_id(data);
|
||||
|
||||
// Destructure the FormData object
|
||||
const record = await locals.pb.collection("teams").update(id, data);
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
|
||||
delete: async ({ cookies, request, locals }) => {
|
||||
if (!locals.admin) return { success: false };
|
||||
|
||||
const data: FormData = form_data_clean(await request.formData());
|
||||
const id = form_data_get_and_remove_id(data);
|
||||
|
||||
await locals.pb.collection("teams").delete(id);
|
||||
|
||||
return { success: true };
|
||||
},
|
||||
} satisfies Actions;
|
||||
|
||||
// This "load" function runs serverside only, as it's located inside +page.server.ts
|
||||
export const load: PageServerLoad = async ({ fetch, locals }) => {
|
||||
const fetch_teams = async () => {
|
||||
const teams = await locals.pb.collection("teams").getFullList({
|
||||
sort: "+name",
|
||||
fetch: fetch,
|
||||
});
|
||||
|
||||
// Fill in the file URLs
|
||||
teams.map((team) => {
|
||||
team.logo_url = locals.pb.files.getURL(team, team.logo);
|
||||
});
|
||||
|
||||
return teams;
|
||||
};
|
||||
|
||||
return {
|
||||
teams: await fetch_teams(),
|
||||
};
|
||||
};
|
||||
@ -1,100 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from "./$types";
|
||||
import { Input, Button, Card } from "$lib/components";
|
||||
import { get_image_preview_event_handler } from "$lib/image";
|
||||
import { FileDropzone } from "@skeletonlabs/skeleton";
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>F11 - Teams</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
||||
<!-- List all teams inside the database -->
|
||||
{#each data.teams as team}
|
||||
<Card>
|
||||
<!-- Logo display -->
|
||||
<img
|
||||
id="update_team_logo_preview_{team.id}"
|
||||
src={team.logo_url}
|
||||
alt="Logo of {team.name} F1 team."
|
||||
draggable="false"
|
||||
class="select-none rounded-container-token"
|
||||
/>
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<input name="id" type="hidden" value={team.id} />
|
||||
|
||||
<div class="*:mt-2">
|
||||
<Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
|
||||
>Name</Input
|
||||
>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_{team.id}"
|
||||
onchange={get_image_preview_event_handler(`update_team_logo_preview_${team.id}`)}
|
||||
disabled={!data.admin}
|
||||
>
|
||||
<svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button formaction="?/update" color="secondary" disabled={!data.admin} submit
|
||||
>Save Changes</Button
|
||||
>
|
||||
<Button formaction="?/delete" color="primary" disabled={!data.admin} submit
|
||||
>Delete</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
{/each}
|
||||
|
||||
<!-- Add a new team -->
|
||||
{#if data.admin}
|
||||
<Card>
|
||||
<!-- Logo preview -->
|
||||
<img
|
||||
id="create_team_logo_preview"
|
||||
src=""
|
||||
alt="Logo preview"
|
||||
class="select-none"
|
||||
draggable="false"
|
||||
hidden
|
||||
/>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="*:mt-2">
|
||||
<h4 class="h4 select-none">Add a New Team</h4>
|
||||
|
||||
<!-- Team name input -->
|
||||
<Input id="team_name_create" name="name" required>Name</Input>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_create"
|
||||
onchange={get_image_preview_event_handler("create_team_logo_preview")}
|
||||
disabled={!data.admin}
|
||||
required
|
||||
>
|
||||
<svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<!-- By specifying the formaction on the button (instead of action on the form), -->
|
||||
<!-- we can have multiple buttons with different actions in a single form. -->
|
||||
|
||||
<Button formaction="?/create" color="secondary" submit>Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user