Lib: Simplify RacePickCard
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { Card, Button, Dropdown } from "$lib/components";
|
||||
import type { Driver, Race, RacePick, User } from "$lib/schema";
|
||||
import { get_by_value } from "$lib/database";
|
||||
import type { Driver, Race, RacePick, Substitution } from "$lib/schema";
|
||||
import { get_by_value, get_driver_headshot_template } from "$lib/database";
|
||||
import type { Action } from "svelte/action";
|
||||
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
|
||||
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
|
||||
@ -9,158 +9,158 @@
|
||||
import { enhance } from "$app/forms";
|
||||
|
||||
interface RacePickCardProps {
|
||||
/** Data passed from the page context */
|
||||
data: any;
|
||||
|
||||
/** The [RacePick] object used to prefill values. */
|
||||
racepick?: RacePick | undefined;
|
||||
|
||||
/** The [Race] object containing the place to guess */
|
||||
currentrace: Race | null;
|
||||
|
||||
/** The [User] currently logged in */
|
||||
user?: User;
|
||||
|
||||
/** The drivers (to display the headshot) */
|
||||
drivers: Driver[];
|
||||
|
||||
/** Disable all inputs if [true] */
|
||||
disable_inputs?: boolean;
|
||||
|
||||
/** The [src] of the driver headshot template preview */
|
||||
headshot_template?: string;
|
||||
|
||||
/** The value this component's pxx select dropdown will bind to */
|
||||
pxx_select_value: string;
|
||||
|
||||
/** The value this component's dnf select dropdown will bind to */
|
||||
dnf_select_value: string;
|
||||
racepick?: RacePick;
|
||||
}
|
||||
|
||||
let {
|
||||
racepick = undefined,
|
||||
currentrace = null,
|
||||
user = undefined,
|
||||
drivers,
|
||||
disable_inputs = false,
|
||||
headshot_template = "",
|
||||
pxx_select_value,
|
||||
dnf_select_value,
|
||||
}: RacePickCardProps = $props();
|
||||
let { data, racepick = undefined }: RacePickCardProps = $props();
|
||||
|
||||
const modalStore: ModalStore = getModalStore();
|
||||
if ($modalStore[0].meta) {
|
||||
const meta = $modalStore[0].meta;
|
||||
|
||||
// Stuff thats required for the "update" card
|
||||
data = meta.data;
|
||||
racepick = meta.racepick;
|
||||
currentrace = meta.currentrace;
|
||||
user = meta.user;
|
||||
drivers = meta.drivers;
|
||||
disable_inputs = meta.disable_inputs;
|
||||
headshot_template = meta.headshot_template;
|
||||
pxx_select_value = meta.pxx_select_value;
|
||||
dnf_select_value = meta.dnf_select_value;
|
||||
}
|
||||
|
||||
// This action is used on the <Dropdown> element.
|
||||
// It will trigger once the Dropdown's <input> elements is mounted.
|
||||
// This way we'll receive a reference to the object so we can register our event handler.
|
||||
// This is executed on mount of the element specifying the "action"
|
||||
const register_pxx_preview_handler: Action = (node: HTMLElement) => {
|
||||
node.addEventListener("DropdownChange", update_pxx_preview);
|
||||
};
|
||||
|
||||
// This event handler is registered to the Dropdown's <input> element through the action above.
|
||||
const update_pxx_preview = (event: Event) => {
|
||||
const update_pxx_preview = async (event: Event) => {
|
||||
const target: HTMLInputElement = event.target as HTMLInputElement;
|
||||
|
||||
// The option "label" gets put into the Dropdown's input value,
|
||||
// so we need to lookup the driver by "code".
|
||||
const src: string = get_by_value(drivers, "code", target.value)?.headshot_url || "";
|
||||
if (src) {
|
||||
const preview: HTMLImageElement = document.getElementById(
|
||||
`update_substitution_headshot_preview_${racepick?.id ?? "create"}`,
|
||||
) as HTMLImageElement;
|
||||
|
||||
if (preview) preview.src = src;
|
||||
}
|
||||
const src: string =
|
||||
get_by_value<Driver>(await data.drivers, "code", target.value)?.headshot_url || "";
|
||||
(document.getElementById("headshot_preview") as HTMLImageElement).src = src;
|
||||
};
|
||||
|
||||
const required: boolean = $derived(!racepick);
|
||||
const disabled: boolean = $derived(!data.admin);
|
||||
const labelwidth: string = "60px";
|
||||
|
||||
const active_drivers_and_substitutes: Promise<Driver[]> = $derived.by(async () => {
|
||||
if (!data.currentrace) return [];
|
||||
|
||||
let drivers: Driver[] = await data.drivers;
|
||||
let substitutions: Substitution[] = await data.substitutions;
|
||||
|
||||
let active_and_substitutes: Driver[] = drivers.filter((driver: Driver) => driver.active);
|
||||
|
||||
substitutions
|
||||
.filter((substitution: Substitution) => substitution.race === data.currentrace?.id)
|
||||
.forEach((substitution: Substitution) => {
|
||||
const for_index = active_and_substitutes.findIndex(
|
||||
(driver: Driver) => driver.id === substitution.for,
|
||||
);
|
||||
const sub_index = drivers.findIndex(
|
||||
(driver: Driver) => driver.id === substitution.substitute,
|
||||
);
|
||||
|
||||
active_and_substitutes[for_index] = drivers[sub_index];
|
||||
});
|
||||
|
||||
return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
|
||||
});
|
||||
|
||||
let pxx_select_value: string = $state(racepick?.pxx ?? "");
|
||||
let dnf_select_value: string = $state(racepick?.dnf ?? "");
|
||||
</script>
|
||||
|
||||
<Card
|
||||
imgsrc={get_by_value(drivers, "id", racepick?.pxx ?? "")?.headshot_url ?? headshot_template}
|
||||
imgid="update_substitution_headshot_preview_{racepick?.id ?? 'create'}"
|
||||
width="w-full sm:w-auto"
|
||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||
imgonclick={(event: Event) => modalStore.close()}
|
||||
>
|
||||
<form method="POST" enctype="multipart/form-data" use:enhance>
|
||||
<!-- This is also disabled, because the ID should only be -->
|
||||
<!-- "leaked" to users that are allowed to use the inputs -->
|
||||
{#if racepick && !disable_inputs}
|
||||
<input name="id" type="hidden" value={racepick.id} />
|
||||
{/if}
|
||||
|
||||
<input name="user" type="hidden" value={user?.id} />
|
||||
<input name="race" type="hidden" value={currentrace?.id} />
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- PXX select -->
|
||||
<Dropdown
|
||||
name="pxx"
|
||||
input_variable={pxx_select_value}
|
||||
action={register_pxx_preview_handler}
|
||||
options={driver_dropdown_options(drivers)}
|
||||
labelwidth="60px"
|
||||
disabled={disable_inputs}
|
||||
{#await data.graphics then graphics}
|
||||
{#await data.drivers then drivers}
|
||||
<Card
|
||||
imgsrc={get_by_value<Driver>(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
|
||||
get_driver_headshot_template(graphics)}
|
||||
imgid="headshot_preview"
|
||||
width="w-full sm:w-auto"
|
||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||
imgonclick={(event: Event) => modalStore.close()}
|
||||
>
|
||||
<form
|
||||
method="POST"
|
||||
enctype="multipart/form-data"
|
||||
use:enhance
|
||||
onsubmit={() => modalStore.close()}
|
||||
>
|
||||
P{currentrace?.pxx ?? "XX"}
|
||||
</Dropdown>
|
||||
|
||||
<!-- DNF select -->
|
||||
<Dropdown
|
||||
name="dnf"
|
||||
input_variable={dnf_select_value}
|
||||
options={driver_dropdown_options(drivers)}
|
||||
labelwidth="60px"
|
||||
disabled={disable_inputs}
|
||||
>
|
||||
DNF
|
||||
</Dropdown>
|
||||
|
||||
<!-- Save/Delete buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
{#if racepick}
|
||||
<Button
|
||||
formaction="?/update_racepick"
|
||||
color="secondary"
|
||||
disabled={disable_inputs}
|
||||
submit
|
||||
width="w-1/2"
|
||||
onclick={() => modalStore.close()}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
submit
|
||||
disabled={disable_inputs}
|
||||
formaction="?/delete_racepick"
|
||||
width="w-1/2"
|
||||
onclick={() => modalStore.close()}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
formaction="?/create_racepick"
|
||||
color="tertiary"
|
||||
submit
|
||||
width="w-full"
|
||||
onclick={() => modalStore.close()}
|
||||
>
|
||||
Make Pick
|
||||
</Button>
|
||||
<!-- This is also disabled, because the ID should only be -->
|
||||
<!-- "leaked" to users that are allowed to use the inputs -->
|
||||
{#if racepick && !disabled}
|
||||
<input name="id" type="hidden" value={racepick.id} />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
<input name="user" type="hidden" value={data.user?.id} />
|
||||
<input name="race" type="hidden" value={data.currentrace?.id} />
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- PXX select -->
|
||||
{#await active_drivers_and_substitutes then pxx_drivers}
|
||||
<Dropdown
|
||||
name="pxx"
|
||||
input_variable={pxx_select_value}
|
||||
action={register_pxx_preview_handler}
|
||||
options={driver_dropdown_options(pxx_drivers)}
|
||||
{labelwidth}
|
||||
{disabled}
|
||||
>
|
||||
P{data.currentrace?.pxx ?? "XX"}
|
||||
</Dropdown>
|
||||
{/await}
|
||||
|
||||
<!-- DNF select -->
|
||||
{#await active_drivers_and_substitutes then pxx_drivers}
|
||||
<Dropdown
|
||||
name="dnf"
|
||||
input_variable={dnf_select_value}
|
||||
options={driver_dropdown_options(pxx_drivers)}
|
||||
{labelwidth}
|
||||
{disabled}
|
||||
>
|
||||
DNF
|
||||
</Dropdown>
|
||||
{/await}
|
||||
|
||||
<!-- Save/Delete buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
{#if racepick}
|
||||
<Button
|
||||
formaction="?/update_racepick"
|
||||
color="secondary"
|
||||
{disabled}
|
||||
submit
|
||||
width="w-1/2"
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button
|
||||
formaction="?/delete_racepick"
|
||||
color="primary"
|
||||
{disabled}
|
||||
submit
|
||||
width="w-1/2"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
formaction="?/create_racepick"
|
||||
color="tertiary"
|
||||
{disabled}
|
||||
submit
|
||||
width="w-full"
|
||||
>
|
||||
Make Pick
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
{/await}
|
||||
{/await}
|
||||
|
||||
@ -19,13 +19,13 @@
|
||||
RACE_PICTOGRAM_HEIGHT,
|
||||
RACE_PICTOGRAM_WIDTH,
|
||||
} from "$lib/config";
|
||||
import type { CurrentPickedUser, Driver, RacePick, Substitution } from "$lib/schema";
|
||||
import type { CurrentPickedUser, RacePick } from "$lib/schema";
|
||||
import { get_by_value, get_driver_headshot_template } from "$lib/database";
|
||||
import { format } from "date-fns";
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
|
||||
const currentpick: RacePick | undefined = $derived(
|
||||
const racepick: RacePick | undefined = $derived(
|
||||
data.racepicks.filter(
|
||||
(racepick: RacePick) =>
|
||||
racepick.expand.user.username === data.user?.username &&
|
||||
@ -33,58 +33,28 @@
|
||||
)[0] ?? undefined,
|
||||
);
|
||||
|
||||
const pxx_select_value: string = $derived(currentpick?.pxx ?? "");
|
||||
const dnf_select_value: string = $derived(currentpick?.dnf ?? "");
|
||||
|
||||
const active_drivers_and_substitutes: Promise<Driver[]> = $derived.by(async () => {
|
||||
if (!data.currentrace) return [];
|
||||
|
||||
let drivers: Driver[] = await data.drivers;
|
||||
let substitutions: Substitution[] = await data.substitutions;
|
||||
|
||||
let active_and_substitutes: Driver[] = drivers.filter((driver: Driver) => driver.active);
|
||||
|
||||
substitutions
|
||||
.filter((substitution: Substitution) => substitution.race === data.currentrace?.id)
|
||||
.forEach((substitution: Substitution) => {
|
||||
const for_index = active_and_substitutes.findIndex(
|
||||
(driver: Driver) => driver.id === substitution.for,
|
||||
);
|
||||
const sub_index = drivers.findIndex(
|
||||
(driver: Driver) => driver.id === substitution.substitute,
|
||||
);
|
||||
|
||||
active_and_substitutes[for_index] = drivers[sub_index];
|
||||
});
|
||||
|
||||
return active_and_substitutes.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code));
|
||||
});
|
||||
|
||||
const modalStore: ModalStore = getModalStore();
|
||||
const create_guess_handler = async (event: Event) => {
|
||||
const racepick_handler = async (event: Event) => {
|
||||
const modalSettings: ModalSettings = {
|
||||
type: "component",
|
||||
component: "racePickCard",
|
||||
meta: {
|
||||
racepick: currentpick,
|
||||
currentrace: data.currentrace,
|
||||
user: data.user,
|
||||
drivers: await active_drivers_and_substitutes,
|
||||
disable_inputs: false, // TODO: Datelock
|
||||
headshot_template: get_driver_headshot_template(await data.graphics),
|
||||
pxx_select_value: pxx_select_value,
|
||||
dnf_select_value: dnf_select_value,
|
||||
data,
|
||||
racepick,
|
||||
},
|
||||
};
|
||||
|
||||
modalStore.trigger(modalSettings);
|
||||
};
|
||||
|
||||
// Users that have already picked the current race
|
||||
let pickedusers: CurrentPickedUser[] = $derived(
|
||||
data.currentpickedusers.filter(
|
||||
(currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
|
||||
),
|
||||
);
|
||||
|
||||
// Users that didn't already pick the current race
|
||||
let outstandingusers: CurrentPickedUser[] = $derived(
|
||||
data.currentpickedusers.filter(
|
||||
(currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
|
||||
@ -114,7 +84,7 @@
|
||||
<!-- Show information about the next race -->
|
||||
<div class="justify-center gap-2 lg:flex">
|
||||
<div class="mt-2 flex gap-2">
|
||||
<div class="card flex w-full flex-col p-2 shadow">
|
||||
<div class="card flex w-full min-w-40 flex-col p-2 shadow">
|
||||
<span class="font-bold">
|
||||
Step {data.currentrace.step}: {data.currentrace.name}
|
||||
</span>
|
||||
@ -143,13 +113,13 @@
|
||||
<Countdown date={data.currentrace.racedate} extraclass="font-bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="card w-full p-2 shadow">
|
||||
<span class="text-nowrap font-bold">Track Layout:</span>
|
||||
<div class="card w-full min-w-40 p-2 shadow">
|
||||
<h1 class="mb-2 text-nowrap font-bold">Track Layout:</h1>
|
||||
<LazyImage
|
||||
src={data.currentrace.pictogram_url ?? "Invalid"}
|
||||
imgwidth={RACE_PICTOGRAM_WIDTH}
|
||||
imgheight={RACE_PICTOGRAM_HEIGHT}
|
||||
containerstyle="height: 115px; margin: auto;"
|
||||
containerstyle="height: 105px; margin: auto;"
|
||||
imgstyle="background: transparent;"
|
||||
/>
|
||||
</div>
|
||||
@ -158,36 +128,36 @@
|
||||
<!-- Only show the userguess if signed in -->
|
||||
{#if data.user}
|
||||
<div class="mt-2 flex gap-2">
|
||||
<div class="card w-full 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>
|
||||
{#await data.graphics then graphics}
|
||||
{#await data.drivers then drivers}
|
||||
<LazyImage
|
||||
src={get_by_value(drivers, "id", currentpick?.pxx ?? "")?.headshot_url ??
|
||||
src={get_by_value(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
|
||||
get_driver_headshot_template(graphics)}
|
||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||
containerstyle="height: 115px; margin: auto;"
|
||||
imgclass="bg-transparent cursor-pointer"
|
||||
hoverzoom
|
||||
onclick={create_guess_handler}
|
||||
onclick={racepick_handler}
|
||||
/>
|
||||
{/await}
|
||||
{/await}
|
||||
</div>
|
||||
<div class="card w-full 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 DNF Pick:</h1>
|
||||
{#await data.graphics then graphics}
|
||||
{#await data.drivers then drivers}
|
||||
<LazyImage
|
||||
src={get_by_value(drivers, "id", currentpick?.dnf ?? "")?.headshot_url ??
|
||||
src={get_by_value(drivers, "id", racepick?.dnf ?? "")?.headshot_url ??
|
||||
get_driver_headshot_template(graphics)}
|
||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||
containerstyle="height: 115px; margin: auto;"
|
||||
imgclass="bg-transparent cursor-pointer"
|
||||
hoverzoom
|
||||
onclick={create_guess_handler}
|
||||
onclick={racepick_handler}
|
||||
/>
|
||||
{/await}
|
||||
{/await}
|
||||
@ -197,7 +167,7 @@
|
||||
|
||||
<!-- Show users that have and have not picked yet -->
|
||||
<div class="mt-2 flex gap-2">
|
||||
<div class="card w-full p-2 shadow">
|
||||
<div class="card w-full min-w-40 p-2 shadow">
|
||||
<h1 class="text-nowrap font-bold">
|
||||
Picked ({pickedusers.length}/{data.currentpickedusers.length}):
|
||||
</h1>
|
||||
@ -215,7 +185,7 @@
|
||||
{/await}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card w-full p-2 shadow">
|
||||
<div class="card w-full min-w-40 p-2 shadow">
|
||||
<h1 class="text-nowrap font-bold">
|
||||
Outstanding ({outstandingusers.length}/{data.currentpickedusers.length}):
|
||||
</h1>
|
||||
@ -404,12 +374,3 @@
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- "Table" of past guesses (not an actual table this time): -->
|
||||
<!-- - Left column (rounded div column with race information: name, step, pxx) -->
|
||||
<!-- - Show full result on-click? -->
|
||||
<!-- - Rounded middle block (rest of width) with guesses: -->
|
||||
<!-- - Just avatar at the top (reduce width) with points below, username on hover? -->
|
||||
<!-- - Color-coded compact pxx + dnf picks (with podium + skull icons to differentiate?) -->
|
||||
|
||||
<!-- Make 2 variations (races as rows and races as columns) + settings toggle? -->
|
||||
|
||||
Reference in New Issue
Block a user