christoph/svelte-formula11
1
Fork 0
Code Issues 23 Actions Packages Projects 1 Activity

Compare commits

base: christoph:c67ee16641e14c5c41688ea746b6e57e25331784
Branches Tags
christoph:master
..
compare: christoph:6c8738366a5750c029ad0827b8ee566517cc8db4
Branches Tags
christoph:master

13 Commits
c67ee16641 ... 6c8738366a

Author SHA1 Message Date
Christoph Urlacher
6c8738366a Seasonpicks: Implement first (rough) seasonpick display page
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 57s
Details
2025-02-25 20:47:43 +01:00
Christoph Urlacher
cd31d50cb2 Lib: Fix double semicolon in LazyImage 2025-02-25 20:11:30 +01:00
Christoph Urlacher
d31576a4d5 Racepicks: Make vertical race name font smaller on small screens 2025-02-25 18:59:39 +01:00
Christoph Urlacher
98e4f92485 Seasonpicks: Fetch users that already made their seasonpick 2025-02-18 01:21:15 +01:00
Christoph Urlacher
fcf389bf29 Lib: Add seasonpickedusers fetcher 2025-02-18 01:21:03 +01:00
Christoph Urlacher
f06fdb3c2e Lib: Add SeasonPickedUser to schema 2025-02-18 01:20:57 +01:00
Christoph Urlacher
9b1de1d4b7 Data/Users: Don't await graphics 2025-02-18 01:20:45 +01:00
Christoph Urlacher
03c19480a0 Racepicks: Don't await graphics 2025-02-18 01:20:37 +01:00
Christoph Urlacher
34c8ef57bf Lib: Don't await graphics 2025-02-18 01:20:32 +01:00
Christoph Urlacher
2fb7a7d597 Seasonpicks: Fetch teams/drivers/seasonpicks 2025-02-18 00:43:05 +01:00
Christoph Urlacher
036733b287 Racepicks: Use pointer cursor for race column (to highlight result popups) 2025-02-18 00:42:49 +01:00
Christoph Urlacher
55765d2d42 Lib: Add SeasonPick schema 2025-02-18 00:42:22 +01:00
Christoph Urlacher
c8a0a3d5f2 Lib: Add fetcher for seasonpicks 2025-02-18 00:42:15 +01:00
11 changed files with 624 additions and 298 deletions
Expand all files Collapse all files

4
src/lib/components/LazyImage.svelte
View File

@ -56,8 +56,8 @@
use:lazyload use:lazyload
onLazyVisible={lazy_visible_handler} onLazyVisible={lazy_visible_handler}
class="overflow-hidden" class="overflow-hidden"
style="aspect-ratio: {imgwidth} / {imgheight}; {containerstyle ?? style="aspect-ratio: {imgwidth} / {imgheight}; max-width: {imgwidth}px; max-height: {imgheight}px; {containerstyle ??
''}; max-width: {imgwidth}px; max-height: {imgheight}px" ''}"
> >
{#if load} {#if load}
{#await fetch_image_base64(src) then data} {#await fetch_image_base64(src) then data}

158
src/lib/components/cards/DriverCard.svelte
View File

@ -147,93 +147,79 @@
}; };
</script> </script>
{#await data.graphics then graphics} <Card
<Card imgsrc={driver?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgsrc={driver?.headshot_url ?? get_driver_headshot_template(graphics)} imgid="headshot_preview"
imgid="headshot_preview" width="w-full sm:w-auto"
width="w-full sm:w-auto" imgwidth={DRIVER_HEADSHOT_WIDTH}
imgwidth={DRIVER_HEADSHOT_WIDTH} imgheight={DRIVER_HEADSHOT_HEIGHT}
imgheight={DRIVER_HEADSHOT_HEIGHT} imgonclick={(event: Event) => modalStore.close()}
imgonclick={(event: Event) => modalStore.close()} >
> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2"> <!-- Driver name input -->
<!-- Driver name input --> <Input bind:value={firstname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
<Input First Name
bind:value={firstname_input_value} </Input>
autocomplete="off" <Input bind:value={lastname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
{labelwidth} Last Name
{disabled} </Input>
{required} <Input
> bind:value={code_input_value}
First Name autocomplete="off"
</Input> minlength={3}
<Input maxlength={3}
bind:value={lastname_input_value} {labelwidth}
autocomplete="off" {disabled}
{labelwidth} {required}
{disabled} >
{required} Driver Code
> </Input>
Last Name
</Input>
<Input
bind:value={code_input_value}
autocomplete="off"
minlength={3}
maxlength={3}
{labelwidth}
{disabled}
{required}
>
Driver Code
</Input>
<!-- Driver team input --> <!-- Driver team input -->
{#await data.teams then teams} {#await data.teams then teams}
<Dropdown <Dropdown
bind:value={team_select_value} bind:value={team_select_value}
options={team_dropdown_options(teams)} options={team_dropdown_options(teams)}
{labelwidth} {labelwidth}
{disabled}
{required}
>
Team
</Dropdown>
{/await}
<!-- Headshot upload -->
<FileDropzone
name="headshot"
bind:files={headshot_file_value}
onchange={get_image_preview_event_handler("headshot_preview")}
{disabled}
{required}
>
<svelte:fragment slot="message">
<span class="font-bold">Upload Headshot</span>
</svelte:fragment>
</FileDropzone>
<!-- Save/Delete buttons -->
<div class="flex items-center justify-end gap-2">
<div class="mr-auto">
<SlideToggle
name="active"
background="bg-primary-500"
active="bg-tertiary-500"
bind:checked={active_value}
{disabled} {disabled}
{required} />
>
Team
</Dropdown>
{/await}
<!-- Headshot upload -->
<FileDropzone
name="headshot"
bind:files={headshot_file_value}
onchange={get_image_preview_event_handler("headshot_preview")}
{disabled}
{required}
>
<svelte:fragment slot="message">
<span class="font-bold">Upload Headshot</span>
</svelte:fragment>
</FileDropzone>
<!-- Save/Delete buttons -->
<div class="flex items-center justify-end gap-2">
<div class="mr-auto">
<SlideToggle
name="active"
background="bg-primary-500"
active="bg-tertiary-500"
bind:checked={active_value}
{disabled}
/>
</div>
{#if driver}
<Button onclick={update_driver()} color="secondary" {disabled} width="w-1/2">Save</Button>
<Button onclick={delete_driver} color="primary" {disabled} width="w-1/2">Delete</Button>
{:else}
<Button onclick={update_driver(true)} color="tertiary" {disabled} width="w-full">
Create Driver
</Button>
{/if}
</div> </div>
{#if driver}
<Button onclick={update_driver()} color="secondary" {disabled} width="w-1/2">Save</Button>
<Button onclick={delete_driver} color="primary" {disabled} width="w-1/2">Delete</Button>
{:else}
<Button onclick={update_driver(true)} color="tertiary" {disabled} width="w-full">
Create Driver
</Button>
{/if}
</div> </div>
</Card> </div>
{/await} </Card>

219
src/lib/components/cards/RaceCard.svelte
View File

@ -173,121 +173,114 @@
}; };
</script> </script>
{#await data.graphics then graphics} <Card
<Card imgsrc={race?.pictogram_url ?? get_race_pictogram_template(data.graphics)}
imgsrc={race?.pictogram_url ?? get_race_pictogram_template(graphics)} imgid="pictogram_preview"
imgid="pictogram_preview" width="w-full sm:w-auto"
width="w-full sm:w-auto" imgwidth={RACE_PICTOGRAM_WIDTH}
imgwidth={RACE_PICTOGRAM_WIDTH} imgheight={RACE_PICTOGRAM_HEIGHT}
imgheight={RACE_PICTOGRAM_HEIGHT} imgonclick={(event: Event) => modalStore.close()}
imgonclick={(event: Event) => modalStore.close()} >
> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2"> <!-- Driver name input -->
<!-- Driver name input --> <Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}>
<Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}> Name
Name </Input>
</Input> <Input
<Input bind:value={step_value}
bind:value={step_value} autocomplete="off"
autocomplete="off" type="number"
type="number" min={1}
min={1} max={24}
max={24} {labelwidth}
{labelwidth} {disabled}
{disabled} {required}
{required} >
> Step
Step </Input>
</Input> <Input
<Input bind:value={pxx_value}
bind:value={pxx_value} autocomplete="off"
autocomplete="off" type="number"
type="number" min={1}
min={1} max={20}
max={20} {labelwidth}
{labelwidth} {disabled}
{disabled} {required}
{required} >
> PXX
PXX </Input>
</Input>
<!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format --> <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
<Input <Input
id="sqdate" id="sqdate"
bind:value={sprintqualidate_value} bind:value={sprintqualidate_value}
autocomplete="off" autocomplete="off"
type="datetime-local" type="datetime-local"
{labelwidth} {labelwidth}
{disabled} {disabled}
> >
SQuali SQuali
</Input> </Input>
<Input <Input
id="sdate" id="sdate"
bind:value={sprintdate_value} bind:value={sprintdate_value}
autocomplete="off" autocomplete="off"
type="datetime-local" type="datetime-local"
{labelwidth} {labelwidth}
{disabled} {disabled}
> >
SRace SRace
</Input> </Input>
<Input <Input
bind:value={qualidate_value} bind:value={qualidate_value}
autocomplete="off" autocomplete="off"
type="datetime-local" type="datetime-local"
{labelwidth} {labelwidth}
{disabled} {disabled}
{required} {required}
> >
Quali Quali
</Input> </Input>
<Input <Input
bind:value={racedate_value} bind:value={racedate_value}
autocomplete="off" autocomplete="off"
type="datetime-local" type="datetime-local"
{labelwidth} {labelwidth}
{disabled} {disabled}
{required} {required}
> >
Race Race
</Input> </Input>
<!-- Headshot upload --> <!-- Headshot upload -->
<FileDropzone <FileDropzone
name="pictogram" name="pictogram"
onchange={get_image_preview_event_handler("pictogram_preview")} onchange={get_image_preview_event_handler("pictogram_preview")}
bind:files={pictogram_value} bind:files={pictogram_value}
{disabled} {disabled}
{required} {required}
> >
<svelte:fragment slot="message"> <svelte:fragment slot="message">
<span class="font-bold">Upload Pictogram</span> <span class="font-bold">Upload Pictogram</span>
</svelte:fragment> </svelte:fragment>
</FileDropzone> </FileDropzone>
<!-- Save/Delete buttons --> <!-- Save/Delete buttons -->
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<Button <Button onclick={clear_sprint} color="secondary" {disabled} width={race ? "w-1/3" : "w-1/2"}>
onclick={clear_sprint} Remove Sprint
color="secondary" </Button>
{disabled} {#if race}
width={race ? "w-1/3" : "w-1/2"} <Button onclick={update_race()} color="secondary" {disabled} width="w-1/3">
> Save Changes
Remove Sprint
</Button> </Button>
{#if race} <Button onclick={delete_race} color="primary" {disabled} width="w-1/3">Delete</Button>
<Button onclick={update_race()} color="secondary" {disabled} width="w-1/3"> {:else}
Save Changes <Button onclick={update_race(true)} color="tertiary" {disabled} width="w-1/2">
</Button> Create Race
<Button onclick={delete_race} color="primary" {disabled} width="w-1/3">Delete</Button> </Button>
{:else} {/if}
<Button onclick={update_race(true)} color="tertiary" {disabled} width="w-1/2">
Create Race
</Button>
{/if}
</div>
</div> </div>
</Card> </div>
{/await} </Card>

2
src/lib/components/cards/RaceResultCard.svelte
View File

@ -47,7 +47,7 @@
// Reactive state // Reactive state
let required: boolean = $derived(!result); let required: boolean = $derived(!result);
let disabled: boolean = $derived(!data.admin); let disabled: boolean = $derived(!data.admin); // TODO: Datelock (prevent entering future result)
let race_select_value: string = $state(result?.race ?? ""); let race_select_value: string = $state(result?.race ?? "");
let currentrace: Race | undefined = $derived( let currentrace: Race | undefined = $derived(

148
src/lib/components/cards/TeamCard.svelte
View File

@ -176,83 +176,81 @@
}; };
</script> </script>
{#await data.graphics then graphics} <Card
<Card imgsrc={team?.banner_url ?? get_team_banner_template(data.graphics)}
imgsrc={team?.banner_url ?? get_team_banner_template(graphics)} imgid="banner_preview"
imgid="banner_preview" width="w-full sm:w-auto"
width="w-full sm:w-auto" imgwidth={TEAM_BANNER_WIDTH}
imgwidth={TEAM_BANNER_WIDTH} imgheight={TEAM_BANNER_HEIGHT}
imgheight={TEAM_BANNER_HEIGHT} imgonclick={(event: Event) => modalStore.close()}
imgonclick={(event: Event) => modalStore.close()} >
> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2"> <!-- Team name input -->
<!-- Team name input --> <Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}>
<Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}> Name
Name </Input>
</Input>
<!-- Team color input --> <!-- Team color input -->
<Input <Input
bind:value={color_value} bind:value={color_value}
autocomplete="off" autocomplete="off"
placeholder="Enter as '#XXXXXX'" placeholder="Enter as '#XXXXXX'"
minlength={7} minlength={7}
maxlength={7} maxlength={7}
{labelwidth} {labelwidth}
{disabled} {disabled}
{required} {required}
> >
Color Color
<span class="badge ml-2 border" style="color: {color_value}; background: {color_value}"> <span class="badge ml-2 border" style="color: {color_value}; background: {color_value}">
C C
</span> </span>
</Input> </Input>
<!-- Banner upload --> <!-- Banner upload -->
<FileDropzone <FileDropzone
name="banner" name="banner"
bind:files={banner_value} bind:files={banner_value}
onchange={get_image_preview_event_handler("banner_preview")} onchange={get_image_preview_event_handler("banner_preview")}
{disabled} {disabled}
{required} {required}
> >
<svelte:fragment slot="message"> <svelte:fragment slot="message">
<span class="font-bold">Upload Banner</span> <span class="font-bold">Upload Banner</span>
</svelte:fragment> </svelte:fragment>
</FileDropzone> </FileDropzone>
<!-- Logo upload --> <!-- Logo upload -->
<FileDropzone <FileDropzone
name="logo" name="logo"
bind:files={logo_value} bind:files={logo_value}
onchange={get_image_preview_event_handler("logo_preview")} onchange={get_image_preview_event_handler("logo_preview")}
{disabled} {disabled}
{required} {required}
> >
<svelte:fragment slot="message"> <svelte:fragment slot="message">
<div class="inline-flex flex-nowrap items-center gap-2"> <div class="inline-flex flex-nowrap items-center gap-2">
<span class="font-bold">Upload Logo</span> <span class="font-bold">Upload Logo</span>
<LazyImage <LazyImage
src={team?.logo_url ?? get_team_logo_template(graphics)} src={team?.logo_url ?? get_team_logo_template(data.graphics)}
id="logo_preview" id="logo_preview"
imgwidth={32} imgwidth={32}
imgheight={32} imgheight={32}
/> />
</div> </div>
</svelte:fragment> </svelte:fragment>
</FileDropzone> </FileDropzone>
<!-- Save/Delete buttons --> <!-- Save/Delete buttons -->
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
{#if team} {#if team}
<Button onclick={update_team()} color="secondary" {disabled} width="w-1/2">Save</Button> <Button onclick={update_team()} color="secondary" {disabled} width="w-1/2">Save</Button>
<Button onclick={delete_team} color="primary" {disabled} width="w-1/2">Delete</Button> <Button onclick={delete_team} color="primary" {disabled} width="w-1/2">Delete</Button>
{:else} {:else}
<Button onclick={update_team(true)} color="tertiary" {disabled} width="w-full"> <Button onclick={update_team(true)} color="tertiary" {disabled} width="w-full">
Create Team Create Team
</Button> </Button>
{/if} {/if}
</div>
</div> </div>
</Card> </div>
{/await} </Card>

36
src/lib/fetch.ts
View File

@ -6,6 +6,8 @@ import type {
Race, Race,
RacePick, RacePick,
RaceResult, RaceResult,
SeasonPick,
SeasonPickedUser,
Substitution, Substitution,
Team, Team,
User, User,
@ -142,7 +144,6 @@ export const fetch_currentrace = async (
export const fetch_racepicks = async ( export const fetch_racepicks = async (
fetch: (_: any) => Promise<Response>, fetch: (_: any) => Promise<Response>,
): Promise<RacePick[]> => { ): Promise<RacePick[]> => {
// Don't expand race/pxx/dnf since we already fetched those
const racepicks: RacePick[] = await pb const racepicks: RacePick[] = await pb
.collection("racepicks") .collection("racepicks")
.getFullList({ fetch: fetch, expand: "user" }); .getFullList({ fetch: fetch, expand: "user" });
@ -150,6 +151,19 @@ export const fetch_racepicks = async (
return racepicks; return racepicks;
}; };
/**
* Fetch all [SeasonPicks] from the database
*/
export const fetch_seasonpicks = async (
fetch: (_: any) => Promise<Response>,
): Promise<SeasonPick[]> => {
const seasonpicks: SeasonPick[] = await pb
.collection("seasonpicks")
.getFullList({ fetch: fetch, expand: "user" });
return seasonpicks;
};
/** /**
* Fetch all [Users] (with the extra field "picked" that is truthy * Fetch all [Users] (with the extra field "picked" that is truthy
* if the user already picked for the current race) * if the user already picked for the current race)
@ -170,3 +184,23 @@ export const fetch_currentpickedusers = async (
return currentpickedusers; return currentpickedusers;
}; };
/**
* Fetch all [Users] (with the extra field "picked" that is truthy
* if the user already picked for the season) with file URLs for the avatars
*/
export const fetch_seasonpickedusers = async (
fetch: (_: any) => Promise<Response>,
): Promise<SeasonPickedUser[]> => {
const seasonpickedusers: SeasonPickedUser[] = await pb
.collection("seasonpickedusers")
.getFullList({ fetch: fetch });
seasonpickedusers.map((seasonpickeduser: SeasonPickedUser) => {
if (seasonpickeduser.avatar) {
seasonpickeduser.avatar_url = pb.files.getURL(seasonpickeduser, seasonpickeduser.avatar);
}
});
return seasonpickedusers;
};

26
src/lib/schema.ts
View File

@ -77,6 +77,22 @@ export interface RacePick {
}; };
} }
export interface SeasonPick {
id: string;
user: string;
hottake: string;
wdcwinner: string;
wccwinner: string;
mostovertakes: string;
mostdnfs: string;
doohanstarts: number;
teamwinners: string[];
podiums: string[];
expand: {
user: User;
};
}
export interface RaceResult { export interface RaceResult {
id: string; id: string;
race: string; race: string;
@ -93,3 +109,13 @@ export interface CurrentPickedUser {
admin: boolean; admin: boolean;
picked: boolean; picked: boolean;
} }
export interface SeasonPickedUser {
id: string;
username: string;
firstname: string;
avatar: string;
avatar_url?: string;
admin: boolean;
picked: boolean;
}

2
src/routes/data/users/+page.svelte
View File

@ -21,7 +21,7 @@
data_value_name: "avatar_url", data_value_name: "avatar_url",
label: "Avatar", label: "Avatar",
valuefun: async (value: string): Promise<string> => valuefun: async (value: string): Promise<string> =>
`<img class='rounded-full w-10 bg-surface-400' src='${value ? value : get_by_value(await data.graphics, "name", "driver_headshot_template")?.file_url}'/>`, `<img class='rounded-full w-10 bg-surface-400' src='${value ? value : get_by_value(data.graphics, "name", "driver_headshot_template")?.file_url}'/>`,
}, },
{ {
data_value_name: "admin", data_value_name: "admin",

41
src/routes/racepicks/+page.svelte
View File

@ -131,13 +131,13 @@
<!-- Only show the userguess if signed in --> <!-- Only show the userguess if signed in -->
{#if data.user} {#if data.user}
{#await Promise.all( [data.graphics, data.drivers, racepick], ) then [graphics, drivers, pick]} {#await Promise.all([data.drivers, racepick]) then [drivers, pick]}
<div class="mt-2 flex gap-2"> <div class="mt-2 flex gap-2">
<div class="card w-full min-w-40 p-2 pb-0 shadow"> <div class="card w-full min-w-40 p-2 pb-0 shadow">
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1> <h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
<LazyImage <LazyImage
src={get_by_value(drivers, "id", pick?.pxx ?? "")?.headshot_url ?? src={get_by_value(drivers, "id", pick?.pxx ?? "")?.headshot_url ??
get_driver_headshot_template(graphics)} get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH} imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT} imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;" containerstyle="height: 115px; margin: auto;"
@ -150,7 +150,7 @@
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1> <h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
<LazyImage <LazyImage
src={get_by_value(drivers, "id", pick?.dnf ?? "")?.headshot_url ?? src={get_by_value(drivers, "id", pick?.dnf ?? "")?.headshot_url ??
get_driver_headshot_template(graphics)} get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_WIDTH} imgwidth={DRIVER_HEADSHOT_WIDTH}
imgheight={DRIVER_HEADSHOT_HEIGHT} imgheight={DRIVER_HEADSHOT_HEIGHT}
containerstyle="height: 115px; margin: auto;" containerstyle="height: 115px; margin: auto;"
@ -164,7 +164,7 @@
{/if} {/if}
<!-- Show users that have and have not picked yet --> <!-- Show users that have and have not picked yet -->
{#await Promise.all( [data.graphics, data.currentpickedusers, pickedusers, outstandingusers], ) then [graphics, currentpicked, picked, outstanding]} {#await Promise.all( [data.currentpickedusers, pickedusers, outstandingusers], ) then [currentpicked, picked, outstanding]}
<div class="mt-2 flex gap-2"> <div class="mt-2 flex gap-2">
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40"> <div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold"> <h1 class="text-nowrap font-bold">
@ -173,7 +173,7 @@
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each picked.slice(0, 16) as user} {#each picked.slice(0, 16) as user}
<LazyImage <LazyImage
src={user.avatar_url ?? get_driver_headshot_template(graphics)} src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={AVATAR_WIDTH} imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT} imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;" containerstyle="height: 35px; width: 35px;"
@ -189,7 +189,7 @@
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5"> <div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#each outstanding.slice(0, 16) as user} {#each outstanding.slice(0, 16) as user}
<LazyImage <LazyImage
src={user.avatar_url ?? get_driver_headshot_template(graphics)} src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={AVATAR_WIDTH} imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT} imgheight={AVATAR_HEIGHT}
containerstyle="height: 35px; width: 35px;" containerstyle="height: 35px; width: 35px;"
@ -254,20 +254,24 @@
{#each raceresults as result} {#each raceresults as result}
{@const race = get_by_value(races, "id", result.race)} {@const race = get_by_value(races, "id", result.race)}
<!-- Race name display -->
<div <div
use:popup={race_popupsettings(race?.id ?? "Invalid")} use:popup={race_popupsettings(race?.id ?? "Invalid")}
class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36" class="card mt-2 flex h-20 w-7 cursor-pointer flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
> >
<!-- For large screens -->
<span class="hidden text-sm font-bold lg:block"> <span class="hidden text-sm font-bold lg:block">
{race?.step}: {race?.name} {race?.step}: {race?.name}
</span> </span>
<span class="block rotate-90 text-sm font-bold lg:hidden">
{race?.name.slice(0, 8)}{(race?.name.length ?? 8) > 8 ? "." : ""}
</span>
<span class="hidden text-sm lg:block"> <span class="hidden text-sm lg:block">
Date: {format_date(race?.racedate ?? "", dateformat)} Date: {format_date(race?.racedate ?? "", dateformat)}
</span> </span>
<span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span> <span class="hidden text-sm lg:block">Guessed: P{race?.pxx}</span>
<!-- For small screens -->
<span class="block rotate-90 text-xs font-bold lg:hidden">
{race?.name.slice(0, 9)}{(race?.name.length ?? 9) > 9 ? "." : ""}
</span>
</div> </div>
<!-- The race result popup is triggered on click on the race --> <!-- The race result popup is triggered on click on the race -->
@ -303,6 +307,7 @@
{/await} {/await}
</div> </div>
<!-- TODO: If no guess is made, the table will probably be too short? -->
<!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? --> <!-- TODO: Horizontal scrollbar missing in desktop chrome (fuck chrome)??? -->
<div class="flex w-full overflow-x-scroll pb-2"> <div class="flex w-full overflow-x-scroll pb-2">
<!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately --> <!-- Not ideal but currentpickedusers contains all users, so we do not need to fetch the users separately -->
@ -318,15 +323,13 @@
> >
<!-- Avatar + name display at the top --> <!-- Avatar + name display at the top -->
<div class="mx-auto flex h-10 w-fit"> <div class="mx-auto flex h-10 w-fit">
{#await data.graphics then graphics} <LazyImage
<LazyImage src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
src={user.avatar_url ?? get_driver_headshot_template(graphics)} imgwidth={AVATAR_WIDTH}
imgwidth={AVATAR_WIDTH} imgheight={AVATAR_HEIGHT}
imgheight={AVATAR_HEIGHT} containerstyle="height: 40px; width: 40px;"
containerstyle="height: 40px; width: 40px;" imgclass="bg-surface-400 rounded-full"
imgclass="bg-surface-400 rounded-full" />
/>
{/await}
<div <div
style="height: 40px; line-height: 40px;" style="height: 40px; line-height: 40px;"
class="ml-2 hidden text-nowrap text-center align-middle lg:block" class="ml-2 hidden text-nowrap text-center align-middle lg:block"

273
src/routes/seasonpicks/+page.svelte
View File

@ -1,3 +1,276 @@
<script lang="ts">
import {
Accordion,
AccordionItem,
getModalStore,
type ModalSettings,
type ModalStore,
} from "@skeletonlabs/skeleton";
import type { PageData } from "./$types";
import type { SeasonPick, SeasonPickedUser } from "$lib/schema";
import { ChequeredFlagIcon, LazyImage } from "$lib/components";
import {
get_by_value,
get_driver_headshot_template,
get_team_banner_template,
} from "$lib/database";
import {
AVATAR_HEIGHT,
AVATAR_WIDTH,
DRIVER_HEADSHOT_HEIGHT,
DRIVER_HEADSHOT_WIDTH,
TEAM_BANNER_HEIGHT,
TEAM_BANNER_WIDTH,
} from "$lib/config";
let { data }: { data: PageData } = $props();
const seasonpick: Promise<SeasonPick | undefined> = $derived.by(
async () =>
(await data.seasonpicks).filter(
(seasonpick: SeasonPick) => seasonpick.expand.user.username === data.user?.username,
)[0] ?? undefined,
);
const modalStore: ModalStore = getModalStore();
const seasonpick_handler = async (event: Event) => {
const modalSettings: ModalSettings = {
type: "component",
component: "seasonPickcard",
meta: {
data,
seasonpick: await seasonpick,
},
};
modalStore.trigger(modalSettings);
};
</script>
<svelte:head> <svelte:head>
<title>Formula 11 - Season Picks</title> <title>Formula 11 - Season Picks</title>
</svelte:head> </svelte:head>
{#await seasonpick then pick}
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
<AccordionItem>
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
<svelte:fragment slot="summary">
<span class="font-bold">Your Season Pick</span>
</svelte:fragment>
<svelte:fragment slot="content">
{pick?.hottake ?? "Invalid"}
</svelte:fragment>
</AccordionItem>
</Accordion>
{/await}
<!-- The fookin table -->
<div class="flex">
<div>
<!-- TODO: Points popup? -->
<div class="mt-4 h-10 w-7 lg:w-32"></div>
<!-- TODO: Show the guess categories like the races in racepicks -->
<!-- Hottake -->
<div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
<span class="hidden text-nowrap text-sm font-bold lg:block">Hottake</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Hottake</span>
</div>
<!-- Drivers Champion -->
<div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
<span class="hidden text-nowrap text-sm font-bold lg:block">Drivers<br />Champion</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WDC</span>
</div>
<!-- Constructors Champion -->
<div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
<span class="hidden text-nowrap text-sm font-bold lg:block">Constructors<br />Champion</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">WCC</span>
</div>
<!-- Overtakes -->
<div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
<span class="hidden text-nowrap text-sm font-bold lg:block">Most Overtakes</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Overtakes</span>
</div>
<!-- DNFs -->
<div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
<span class="hidden text-nowrap text-sm font-bold lg:block">Most DNFs</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">DNFs</span>
</div>
<!-- Doohan Starts -->
<div class="card mt-2 flex h-20 w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-32">
<span class="hidden text-nowrap text-sm font-bold lg:block">Doohan Starts</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Doohan</span>
</div>
<!-- Teamwinners -->
<div
class="card mt-2 flex h-[360px] w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow sm:h-[220px] md:h-[150px] lg:w-32"
>
<span class="hidden text-nowrap text-sm font-bold lg:block">Team-Battle<br />Winners</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Teamwin.</span>
</div>
<!-- Podiums -->
<div
class="card mt-2 flex h-[360px] w-7 flex-col !rounded-r-none bg-surface-300 p-2 shadow md:h-[220px] lg:w-32 xl:h-[150px]"
>
<span class="hidden text-nowrap text-sm font-bold lg:block">Podiums</span>
<span class="block rotate-90 text-nowrap text-xs font-bold lg:hidden">Podiums</span>
</div>
</div>
<!-- TODO: Datelock the guess display (except hottake for review) -->
<div class="flex w-full overflow-x-scroll pb-2">
{#await Promise.all( [data.seasonpickedusers, data.seasonpicks, data.drivers, data.teams], ) then [seasonpicked, seasonpicks, drivers, teams]}
{#each seasonpicked.filter((user: SeasonPickedUser) => user.picked) as user}
{@const pick = seasonpicks.filter((pick: SeasonPick) => pick.user === user.id)[0]}
{@const wdcwinner = get_by_value(drivers, "id", pick.wdcwinner)}
{@const wccwinner = get_by_value(teams, "id", pick.wccwinner)}
{@const mostovertakes = get_by_value(drivers, "id", pick.mostovertakes)}
{@const mostdnfs = get_by_value(drivers, "id", pick.mostdnfs)}
{@const teamwinners = pick.teamwinners.map((id: string) => get_by_value(drivers, "id", id))}
{@const podiums = pick.podiums.map((id: string) => get_by_value(drivers, "id", id))}
<div
class="card ml-1 mt-2 w-full min-w-36 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
data.user.username === user.username
? 'bg-primary-300'
: ''}"
>
<!-- Avatar + name display at the top -->
<div class="mx-auto flex h-10 w-fit">
<LazyImage
src={user.avatar_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={AVATAR_WIDTH}
imgheight={AVATAR_HEIGHT}
containerstyle="height: 40px; width: 40px;"
imgclass="bg-surface-400 rounded-full"
/>
<div
style="height: 40px; line-height: 40px;"
class="ml-2 hidden text-nowrap text-center align-middle lg:block"
>
<!-- TODO: Setting to toggle between username or firstname display -->
{user.username}
</div>
</div>
<!-- Hottake -->
<div
class="mt-2 h-20 w-full overflow-y-scroll border bg-surface-300 px-1 py-2 leading-3 lg:px-2"
>
<div class="mx-auto w-fit text-xs lg:text-sm">{pick.hottake}</div>
</div>
<!-- Drivers Champion -->
<div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
<div class="mx-auto w-fit">
<!-- NOTE: The containerstyle should be 64x64, don't know why that doesn't fit... (also below) -->
<LazyImage
src={wdcwinner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_HEIGHT}
imgheight={DRIVER_HEADSHOT_WIDTH}
containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md"
/>
</div>
</div>
<!-- Constructors Champion -->
<div class="mt-2 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
<div class="mx-auto w-fit">
<LazyImage
src={wccwinner?.banner_url ?? get_team_banner_template(data.graphics)}
imgwidth={TEAM_BANNER_WIDTH}
imgheight={TEAM_BANNER_HEIGHT}
containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md"
/>
</div>
</div>
<!-- Most Overtakes -->
<div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
<div class="mx-auto w-fit">
<LazyImage
src={mostovertakes?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_HEIGHT}
imgheight={DRIVER_HEADSHOT_WIDTH}
containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md"
/>
</div>
</div>
<!-- Most DNFs -->
<div class="mt-2 h-20 w-full border bg-surface-300 px-1 py-2 leading-3 lg:px-2">
<div class="mx-auto w-fit">
<LazyImage
src={mostdnfs?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_HEIGHT}
imgheight={DRIVER_HEADSHOT_WIDTH}
containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md"
/>
</div>
</div>
<!-- Doohan Starts -->
<div class="mt-2 h-20 w-full border bg-surface-300 p-1 px-1 py-2 leading-3 lg:px-2">
<div class="mx-auto w-fit text-xs lg:text-sm">
Jack Doohan startet <span class="font-bold">{pick.doohanstarts}</span> mal.
</div>
</div>
<!-- Teamwinners -->
<!-- TODO: The grid spacing is not correct (too much space in the middle). Also for the grid below... -->
<div
class="mt-2 h-[360px] w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 sm:h-[220px] md:h-[150px] lg:px-2"
>
<div
class="grid gap-2"
style="grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); grid-template-rows: repeat(auto, 62px);"
>
{#each teamwinners as teamwinner}
<LazyImage
src={teamwinner?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_HEIGHT}
imgheight={DRIVER_HEADSHOT_WIDTH}
containerstyle="height: 62px;"
imgclass="bg-surface-400 rounded-md"
/>
{/each}
</div>
</div>
<!-- Podiums -->
<!-- TODO: Replace all style tags with custom classes like height here -->
<div
class="mt-2 h-[360px] w-full overflow-y-scroll border bg-surface-300 p-1 px-1 py-2 leading-3 md:h-[220px] lg:px-2 xl:h-[150px]"
>
<div
class="mx-auto grid gap-2"
style="grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));"
>
{#each podiums as podium}
<LazyImage
src={podium?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgwidth={DRIVER_HEADSHOT_HEIGHT}
imgheight={DRIVER_HEADSHOT_WIDTH}
containerstyle="height: 62px; width: 62px;"
imgclass="bg-surface-400 rounded-md"
/>
{/each}
</div>
</div>
</div>
{/each}
{/await}
</div>
</div>

13
src/routes/seasonpicks/+page.ts Normal file
View File

@ -0,0 +1,13 @@
import { fetch_drivers, fetch_seasonpickedusers, fetch_seasonpicks, fetch_teams } from "$lib/fetch";
import type { PageLoad } from "../$types";
export const load: PageLoad = async ({ fetch, depends }) => {
depends("data:teams", "data:drivers", "data:seasonpicks");
return {
teams: fetch_teams(fetch),
drivers: fetch_drivers(fetch),
seasonpicks: fetch_seasonpicks(fetch),
seasonpickedusers: fetch_seasonpickedusers(fetch),
};
};