Compare commits
2 Commits
178adef327
...
5f43c9ac52
| Author | SHA1 | Date | |
|---|---|---|---|
| 5f43c9ac52 | |||
| 894ad9aaa6 |
@ -88,97 +88,89 @@
|
|||||||
let dnf_select_value: string = $state(racepick?.dnf ?? "");
|
let dnf_select_value: string = $state(racepick?.dnf ?? "");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await data.graphics then graphics}
|
{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
|
||||||
{#await data.drivers then drivers}
|
<Card
|
||||||
<Card
|
imgsrc={get_by_value<Driver>(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
|
||||||
imgsrc={get_by_value<Driver>(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
|
get_driver_headshot_template(graphics)}
|
||||||
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()}
|
>
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
enctype="multipart/form-data"
|
||||||
|
use:enhance
|
||||||
|
onsubmit={() => modalStore.close()}
|
||||||
>
|
>
|
||||||
<form
|
<!-- This is also disabled, because the ID should only be -->
|
||||||
method="POST"
|
<!-- "leaked" to users that are allowed to use the inputs -->
|
||||||
enctype="multipart/form-data"
|
{#if racepick && !disabled}
|
||||||
use:enhance
|
<input name="id" type="hidden" value={racepick.id} />
|
||||||
onsubmit={() => modalStore.close()}
|
{/if}
|
||||||
>
|
|
||||||
<!-- 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}
|
|
||||||
|
|
||||||
<input name="user" type="hidden" value={data.user?.id} />
|
<input name="user" type="hidden" value={data.user?.id} />
|
||||||
<input name="race" type="hidden" value={data.currentrace?.id} />
|
<input name="race" type="hidden" value={data.currentrace?.id} />
|
||||||
|
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<!-- PXX select -->
|
<!-- PXX select -->
|
||||||
{#await active_drivers_and_substitutes then pxx_drivers}
|
{#await active_drivers_and_substitutes then pxx_drivers}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
name="pxx"
|
name="pxx"
|
||||||
input_variable={pxx_select_value}
|
input_variable={pxx_select_value}
|
||||||
action={register_pxx_preview_handler}
|
action={register_pxx_preview_handler}
|
||||||
options={driver_dropdown_options(pxx_drivers)}
|
options={driver_dropdown_options(pxx_drivers)}
|
||||||
{labelwidth}
|
{labelwidth}
|
||||||
|
{disabled}
|
||||||
|
{required}
|
||||||
|
>
|
||||||
|
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}
|
||||||
|
{required}
|
||||||
|
>
|
||||||
|
DNF
|
||||||
|
</Dropdown>
|
||||||
|
{/await}
|
||||||
|
|
||||||
|
<!-- Save/Delete buttons -->
|
||||||
|
<div class="flex justify-end gap-2">
|
||||||
|
{#if racepick}
|
||||||
|
<Button
|
||||||
|
formaction="?/update_racepick"
|
||||||
|
color="secondary"
|
||||||
{disabled}
|
{disabled}
|
||||||
{required}
|
submit
|
||||||
|
width="w-1/2"
|
||||||
>
|
>
|
||||||
P{data.currentrace?.pxx ?? "XX"}
|
Save Changes
|
||||||
</Dropdown>
|
</Button>
|
||||||
{/await}
|
<Button formaction="?/delete_racepick" color="primary" {disabled} submit width="w-1/2">
|
||||||
|
Delete
|
||||||
<!-- DNF select -->
|
</Button>
|
||||||
{#await active_drivers_and_substitutes then pxx_drivers}
|
{:else}
|
||||||
<Dropdown
|
<Button
|
||||||
name="dnf"
|
formaction="?/create_racepick"
|
||||||
input_variable={dnf_select_value}
|
color="tertiary"
|
||||||
options={driver_dropdown_options(pxx_drivers)}
|
|
||||||
{labelwidth}
|
|
||||||
{disabled}
|
{disabled}
|
||||||
{required}
|
submit
|
||||||
|
width="w-full"
|
||||||
>
|
>
|
||||||
DNF
|
Make Pick
|
||||||
</Dropdown>
|
</Button>
|
||||||
{/await}
|
{/if}
|
||||||
|
|
||||||
<!-- 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>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</Card>
|
</form>
|
||||||
{/await}
|
</Card>
|
||||||
{/await}
|
{/await}
|
||||||
|
|||||||
@ -172,20 +172,18 @@
|
|||||||
|
|
||||||
<div class="mt-2 flex flex-col gap-2">
|
<div class="mt-2 flex flex-col gap-2">
|
||||||
<!-- PXXs autocomplete chips -->
|
<!-- PXXs autocomplete chips -->
|
||||||
{#await currentrace then current}
|
{#await Promise.all([currentrace, pxxs_whitelist]) then [current, whitelist]}
|
||||||
{#await pxxs_whitelist then whitelist}
|
<InputChip
|
||||||
<InputChip
|
bind:input={pxxs_input}
|
||||||
bind:input={pxxs_input}
|
bind:value={pxxs_chips}
|
||||||
bind:value={pxxs_chips}
|
{whitelist}
|
||||||
{whitelist}
|
allowUpperCase
|
||||||
allowUpperCase
|
placeholder="Select P{(current?.pxx ?? -10) - 3} to P{(current?.pxx ?? -10) + 3}..."
|
||||||
placeholder="Select P{(current?.pxx ?? -10) - 3} to P{(current?.pxx ?? -10) + 3}..."
|
name="pxxs_codes"
|
||||||
name="pxxs_codes"
|
{disabled}
|
||||||
{disabled}
|
{required}
|
||||||
{required}
|
on:remove={on_pxxs_chip_remove}
|
||||||
on:remove={on_pxxs_chip_remove}
|
/>
|
||||||
/>
|
|
||||||
{/await}
|
|
||||||
{/await}
|
{/await}
|
||||||
<div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
|
<div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
|
||||||
{#await pxxs_options then options}
|
{#await pxxs_options then options}
|
||||||
|
|||||||
@ -56,104 +56,102 @@
|
|||||||
let race_select_value: string = $state(substitution?.race ?? "");
|
let race_select_value: string = $state(substitution?.race ?? "");
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#await data.graphics then graphics}
|
{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
|
||||||
{#await data.drivers then drivers}
|
<Card
|
||||||
<Card
|
imgsrc={get_by_value<Driver>(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
|
||||||
imgsrc={get_by_value<Driver>(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
|
get_driver_headshot_template(graphics)}
|
||||||
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()}
|
>
|
||||||
|
<form
|
||||||
|
method="POST"
|
||||||
|
enctype="multipart/form-data"
|
||||||
|
use:enhance
|
||||||
|
onsubmit={() => modalStore.close()}
|
||||||
>
|
>
|
||||||
<form
|
<!-- This is also disabled, because the ID should only be -->
|
||||||
method="POST"
|
<!-- "leaked" to users that are allowed to use the inputs -->
|
||||||
enctype="multipart/form-data"
|
{#if substitution && !disabled}
|
||||||
use:enhance
|
<input name="id" type="hidden" value={substitution.id} />
|
||||||
onsubmit={() => modalStore.close()}
|
{/if}
|
||||||
>
|
|
||||||
<!-- This is also disabled, because the ID should only be -->
|
|
||||||
<!-- "leaked" to users that are allowed to use the inputs -->
|
|
||||||
{#if substitution && !disabled}
|
|
||||||
<input name="id" type="hidden" value={substitution.id} />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<!-- Substitute select -->
|
<!-- Substitute select -->
|
||||||
|
<Dropdown
|
||||||
|
name="substitute"
|
||||||
|
input_variable={substitute_select_value}
|
||||||
|
action={register_substitute_preview_handler}
|
||||||
|
options={driver_dropdown_options(inactive_drivers(drivers))}
|
||||||
|
{labelwidth}
|
||||||
|
{disabled}
|
||||||
|
{required}
|
||||||
|
>
|
||||||
|
Substitute
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<!-- Driver select -->
|
||||||
|
<Dropdown
|
||||||
|
name="for"
|
||||||
|
input_variable={driver_select_value}
|
||||||
|
options={driver_dropdown_options(active_drivers(drivers))}
|
||||||
|
{labelwidth}
|
||||||
|
{disabled}
|
||||||
|
{required}
|
||||||
|
>
|
||||||
|
For
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<!-- Race select -->
|
||||||
|
{#await data.races then races}
|
||||||
<Dropdown
|
<Dropdown
|
||||||
name="substitute"
|
name="race"
|
||||||
input_variable={substitute_select_value}
|
input_variable={race_select_value}
|
||||||
action={register_substitute_preview_handler}
|
options={race_dropdown_options(races)}
|
||||||
options={driver_dropdown_options(inactive_drivers(drivers))}
|
|
||||||
{labelwidth}
|
{labelwidth}
|
||||||
{disabled}
|
{disabled}
|
||||||
{required}
|
{required}
|
||||||
>
|
>
|
||||||
Substitute
|
Race
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
{/await}
|
||||||
|
|
||||||
<!-- Driver select -->
|
<!-- Save/Delete buttons -->
|
||||||
<Dropdown
|
<div class="flex justify-end gap-2">
|
||||||
name="for"
|
{#if substitution}
|
||||||
input_variable={driver_select_value}
|
<Button
|
||||||
options={driver_dropdown_options(active_drivers(drivers))}
|
formaction="?/update_substitution"
|
||||||
{labelwidth}
|
color="secondary"
|
||||||
{disabled}
|
|
||||||
{required}
|
|
||||||
>
|
|
||||||
For
|
|
||||||
</Dropdown>
|
|
||||||
|
|
||||||
<!-- Race select -->
|
|
||||||
{#await data.races then races}
|
|
||||||
<Dropdown
|
|
||||||
name="race"
|
|
||||||
input_variable={race_select_value}
|
|
||||||
options={race_dropdown_options(races)}
|
|
||||||
{labelwidth}
|
|
||||||
{disabled}
|
{disabled}
|
||||||
{required}
|
submit
|
||||||
|
width="w-1/2"
|
||||||
>
|
>
|
||||||
Race
|
Save Changes
|
||||||
</Dropdown>
|
</Button>
|
||||||
{/await}
|
<Button
|
||||||
|
formaction="?/delete_substitution"
|
||||||
<!-- Save/Delete buttons -->
|
color="primary"
|
||||||
<div class="flex justify-end gap-2">
|
{disabled}
|
||||||
{#if substitution}
|
submit
|
||||||
<Button
|
width="w-1/2"
|
||||||
formaction="?/update_substitution"
|
>
|
||||||
color="secondary"
|
Delete
|
||||||
{disabled}
|
</Button>
|
||||||
submit
|
{:else}
|
||||||
width="w-1/2"
|
<Button
|
||||||
>
|
formaction="?/create_substitution"
|
||||||
Save Changes
|
color="tertiary"
|
||||||
</Button>
|
{disabled}
|
||||||
<Button
|
submit
|
||||||
formaction="?/delete_substitution"
|
width="w-full"
|
||||||
color="primary"
|
>
|
||||||
{disabled}
|
Create Substitution
|
||||||
submit
|
</Button>
|
||||||
width="w-1/2"
|
{/if}
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
{:else}
|
|
||||||
<Button
|
|
||||||
formaction="?/create_substitution"
|
|
||||||
color="tertiary"
|
|
||||||
{disabled}
|
|
||||||
submit
|
|
||||||
width="w-full"
|
|
||||||
>
|
|
||||||
Create Substitution
|
|
||||||
</Button>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</div>
|
||||||
</Card>
|
</form>
|
||||||
{/await}
|
</Card>
|
||||||
{/await}
|
{/await}
|
||||||
|
|||||||
@ -128,85 +128,73 @@
|
|||||||
|
|
||||||
<!-- Only show the userguess if signed in -->
|
<!-- Only show the userguess if signed in -->
|
||||||
{#if data.user}
|
{#if data.user}
|
||||||
{#await data.graphics then graphics}
|
{#await Promise.all( [data.graphics, data.drivers, racepick], ) then [graphics, drivers, pick]}
|
||||||
{#await data.drivers then drivers}
|
<div class="mt-2 flex gap-2">
|
||||||
{#await racepick then pick}
|
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
||||||
<div class="mt-2 flex gap-2">
|
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
|
||||||
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
<LazyImage
|
||||||
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
|
src={get_by_value(drivers, "id", pick?.pxx ?? "")?.headshot_url ??
|
||||||
<LazyImage
|
get_driver_headshot_template(graphics)}
|
||||||
src={get_by_value(drivers, "id", pick?.pxx ?? "")?.headshot_url ??
|
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||||
get_driver_headshot_template(graphics)}
|
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
containerstyle="height: 115px; margin: auto;"
|
||||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
imgclass="bg-transparent cursor-pointer"
|
||||||
containerstyle="height: 115px; margin: auto;"
|
hoverzoom
|
||||||
imgclass="bg-transparent cursor-pointer"
|
onclick={racepick_handler}
|
||||||
hoverzoom
|
/>
|
||||||
onclick={racepick_handler}
|
</div>
|
||||||
/>
|
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
||||||
</div>
|
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
|
||||||
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
<LazyImage
|
||||||
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
|
src={get_by_value(drivers, "id", pick?.dnf ?? "")?.headshot_url ??
|
||||||
<LazyImage
|
get_driver_headshot_template(graphics)}
|
||||||
src={get_by_value(drivers, "id", pick?.dnf ?? "")?.headshot_url ??
|
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||||
get_driver_headshot_template(graphics)}
|
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
containerstyle="height: 115px; margin: auto;"
|
||||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
imgclass="bg-transparent cursor-pointer"
|
||||||
containerstyle="height: 115px; margin: auto;"
|
hoverzoom
|
||||||
imgclass="bg-transparent cursor-pointer"
|
onclick={racepick_handler}
|
||||||
hoverzoom
|
/>
|
||||||
onclick={racepick_handler}
|
</div>
|
||||||
/>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/await}
|
|
||||||
{/await}
|
|
||||||
{/await}
|
{/await}
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Show users that have and have not picked yet -->
|
<!-- Show users that have and have not picked yet -->
|
||||||
{#await data.currentpickedusers then currentpicked}
|
{#await Promise.all( [data.graphics, data.currentpickedusers, pickedusers, outstandingusers], ) then [graphics, currentpicked, picked, outstanding]}
|
||||||
<div class="mt-2 flex gap-2">
|
<div class="mt-2 flex gap-2">
|
||||||
{#await pickedusers then picked}
|
<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">
|
Picked ({picked.length}/{currentpicked.length}):
|
||||||
Picked ({picked.length}/{currentpicked.length}):
|
</h1>
|
||||||
</h1>
|
<div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
|
||||||
<div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
|
{#each picked.slice(0, 16) as user}
|
||||||
{#await data.graphics then graphics}
|
<LazyImage
|
||||||
{#each picked.slice(0, 16) as user}
|
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
||||||
<LazyImage
|
imgwidth={AVATAR_WIDTH}
|
||||||
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
imgheight={AVATAR_HEIGHT}
|
||||||
imgwidth={AVATAR_WIDTH}
|
containerstyle="height: 35px; width: 35px;"
|
||||||
imgheight={AVATAR_HEIGHT}
|
imgclass="bg-surface-400 rounded-full"
|
||||||
containerstyle="height: 35px; width: 35px;"
|
/>
|
||||||
imgclass="bg-surface-400 rounded-full"
|
{/each}
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
</div>
|
||||||
{#await outstandingusers then outstanding}
|
<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">
|
Outstanding ({outstanding.length}/{currentpicked.length}):
|
||||||
Outstanding ({outstanding.length}/{currentpicked.length}):
|
</h1>
|
||||||
</h1>
|
<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}
|
||||||
{#await data.graphics then graphics}
|
<LazyImage
|
||||||
{#each outstanding.slice(0, 16) as user}
|
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
||||||
<LazyImage
|
imgwidth={AVATAR_WIDTH}
|
||||||
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
imgheight={AVATAR_HEIGHT}
|
||||||
imgwidth={AVATAR_WIDTH}
|
containerstyle="height: 35px; width: 35px;"
|
||||||
imgheight={AVATAR_HEIGHT}
|
imgclass="bg-surface-400 rounded-full"
|
||||||
containerstyle="height: 35px; width: 35px;"
|
/>
|
||||||
imgclass="bg-surface-400 rounded-full"
|
{/each}
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/await}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
@ -259,137 +247,119 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#await data.races then races}
|
{#await Promise.all( [data.races, data.raceresults, data.drivers], ) then [races, raceresults, drivers]}
|
||||||
{#await data.raceresults then raceresults}
|
{#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)}
|
|
||||||
|
|
||||||
<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 flex-col !rounded-r-none bg-surface-300 p-2 shadow lg:w-36"
|
||||||
>
|
>
|
||||||
<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">
|
<span class="block rotate-90 text-sm font-bold lg:hidden">
|
||||||
{race?.name.slice(0, 8)}{(race?.name.length ?? 8) > 8 ? "." : ""}
|
{race?.name.slice(0, 8)}{(race?.name.length ?? 8) > 8 ? "." : ""}
|
||||||
</span>
|
</span>
|
||||||
<span class="hidden text-sm lg:block">Date: {formatdate(race?.racedate ?? "")}</span>
|
<span class="hidden text-sm lg:block">Date: {formatdate(race?.racedate ?? "")}</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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- The race result popup is triggered on click on the race -->
|
||||||
|
<div data-popup={race?.id ?? "Invalid"} class="card z-50 p-2 shadow">
|
||||||
|
<span class="font-bold">Result:</span>
|
||||||
|
<div class="mt-2 flex flex-col gap-1">
|
||||||
|
{#each result.pxxs as pxx, index}
|
||||||
|
{@const driver = get_by_value(drivers, "id", pxx)}
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
|
||||||
|
<span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index]};">
|
||||||
|
{driver?.code}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
{#if result.dnfs.length > 0}
|
||||||
|
<hr class="border-black" style="border-style: inset;" />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#each result.dnfs as dnf}
|
||||||
|
{@const driver = get_by_value(drivers, "id", dnf)}
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="w-8">DNF:</span>
|
||||||
|
<span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[3]};">
|
||||||
|
{driver?.code}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- The race result popup is triggered on click on the race -->
|
{/each}
|
||||||
<div data-popup={race?.id ?? "Invalid"} class="card z-50 p-2 shadow">
|
|
||||||
<span class="font-bold">Result:</span>
|
|
||||||
<div class="mt-2 flex flex-col gap-1">
|
|
||||||
{#await data.drivers then drivers}
|
|
||||||
{#each result.pxxs as pxx, index}
|
|
||||||
{@const driver = get_by_value(drivers, "id", pxx)}
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<span class="w-8">P{(race?.pxx ?? -100) - 3 + index}:</span>
|
|
||||||
<span
|
|
||||||
class="badge w-10 p-1 text-center"
|
|
||||||
style="background: {PXX_COLORS[index]};"
|
|
||||||
>
|
|
||||||
{driver?.code}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#if result.dnfs.length > 0}
|
|
||||||
<hr class="border-black" style="border-style: inset;" />
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
{#each result.dnfs as dnf}
|
|
||||||
{@const driver = get_by_value(drivers, "id", dnf)}
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<span class="w-8">DNF:</span>
|
|
||||||
<span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[3]};">
|
|
||||||
{driver?.code}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{/await}
|
|
||||||
{/await}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="hide-scrollbar flex w-full overflow-x-scroll pb-2">
|
<div class="hide-scrollbar 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 -->
|
||||||
<!-- TODO: Uhhh can I write this await stuff differently??? -->
|
{#await Promise.all( [data.currentpickedusers, data.racepicks, data.races, data.drivers, data.raceresults], ) then [currentpicked, racepicks, races, drivers, raceresults]}
|
||||||
{#await data.currentpickedusers then currentpicked}
|
{#each currentpicked as user}
|
||||||
{#await data.racepicks then racepicks}
|
{@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
|
||||||
{#await data.races then races}
|
|
||||||
{#await data.drivers then drivers}
|
|
||||||
{#await data.raceresults then raceresults}
|
|
||||||
{#each currentpicked as user}
|
|
||||||
{@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
|
class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
|
||||||
data.user.username === user.username
|
data.user.username === user.username
|
||||||
? 'bg-primary-300'
|
? 'bg-primary-300'
|
||||||
: ''}"
|
: ''}"
|
||||||
>
|
>
|
||||||
<!-- 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}
|
{#await data.graphics then graphics}
|
||||||
<LazyImage
|
<LazyImage
|
||||||
src={user.avatar_url ?? get_driver_headshot_template(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
|
|
||||||
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>
|
|
||||||
|
|
||||||
{#each raceresults as result}
|
|
||||||
{@const race = get_by_value(races, "id", result.race)}
|
|
||||||
{@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
|
|
||||||
{@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
|
|
||||||
{@const dnfcolor =
|
|
||||||
result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0
|
|
||||||
? PXX_COLORS[3]
|
|
||||||
: PXX_COLORS[-1]}
|
|
||||||
|
|
||||||
{#if pick}
|
|
||||||
<div class="mt-2 h-20 w-full border bg-surface-300 p-1 lg:p-2">
|
|
||||||
<div class="mx-auto flex h-full w-fit flex-col justify-evenly">
|
|
||||||
<span
|
|
||||||
class="p-1 text-center text-sm w-10 rounded-container-token"
|
|
||||||
style="background: {pxxcolor};"
|
|
||||||
>
|
|
||||||
{get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="p-1 text-center text-sm w-10 rounded-container-token"
|
|
||||||
style="background: {dnfcolor};"
|
|
||||||
>
|
|
||||||
{get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<div class="mt-2 h-20 w-full"></div>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{/await}
|
{/await}
|
||||||
{/await}
|
<div
|
||||||
{/await}
|
style="height: 40px; line-height: 40px;"
|
||||||
{/await}
|
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>
|
||||||
|
|
||||||
|
{#each raceresults as result}
|
||||||
|
{@const race = get_by_value(races, "id", result.race)}
|
||||||
|
{@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
|
||||||
|
{@const pxxcolor = PXX_COLORS[result.pxxs.indexOf(pick?.pxx ?? "Invalid")]}
|
||||||
|
{@const dnfcolor =
|
||||||
|
result.dnfs.indexOf(pick?.dnf ?? "Invalid") >= 0 ? PXX_COLORS[3] : PXX_COLORS[-1]}
|
||||||
|
|
||||||
|
{#if pick}
|
||||||
|
<div class="mt-2 h-20 w-full border bg-surface-300 p-1 lg:p-2">
|
||||||
|
<div class="mx-auto flex h-full w-fit flex-col justify-evenly">
|
||||||
|
<span
|
||||||
|
class="w-10 p-1 text-center text-sm rounded-container-token"
|
||||||
|
style="background: {pxxcolor};"
|
||||||
|
>
|
||||||
|
{get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="w-10 p-1 text-center text-sm rounded-container-token"
|
||||||
|
style="background: {dnfcolor};"
|
||||||
|
>
|
||||||
|
{get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="mt-2 h-20 w-full"></div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
{/await}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user