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

Lib: Use Promise.all for nested {#await} blocks
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 31s
Details

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-05 22:20:37 +01:00
parent 894ad9aaa6
commit 5f43c9ac52
3 changed files with 175 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
src/lib/components/cards/RacePickCard.svelte
View File

@ -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}

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

@ -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}

174
src/lib/components/cards/SubstitutionCard.svelte
View File

@ -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}