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

Compare commits

base: christoph:178adef32704175c1392b3eec27766ad410aa3b7
Branches Tags
christoph:master
...
compare: christoph:5f43c9ac526fb0943e839e76134f1fbb51e4fd8a
Branches Tags
christoph:master

2 Commits
178adef327 ... 5f43c9ac52

Author SHA1 Message Date
Christoph Urlacher
5f43c9ac52 Lib: Use Promise.all for nested {#await} blocks
All checks were successful
Build Formula11 Docker Image / pocketbase-docker (push) Successful in 31s
Details
2025-02-05 22:20:37 +01:00
Christoph Urlacher
894ad9aaa6 Racepicks: Use Promise.all for nested {#await} blocks 2025-02-05 22:14:57 +01:00
4 changed files with 339 additions and 381 deletions
Expand all files Collapse all files

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

@ -88,8 +88,7 @@
let dnf_select_value: string = $state(racepick?.dnf ?? "");
</script>
{#await data.graphics then graphics}
{#await data.drivers then drivers}
{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
<Card
imgsrc={get_by_value<Driver>(drivers, "id", racepick?.pxx ?? "")?.headshot_url ??
get_driver_headshot_template(graphics)}
@ -156,13 +155,7 @@
>
Save Changes
</Button>
<Button
formaction="?/delete_racepick"
color="primary"
{disabled}
submit
width="w-1/2"
>
<Button formaction="?/delete_racepick" color="primary" {disabled} submit width="w-1/2">
Delete
</Button>
{:else}
@ -181,4 +174,3 @@
</form>
</Card>
{/await}
{/await}

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

@ -172,8 +172,7 @@
<div class="mt-2 flex flex-col gap-2">
<!-- PXXs autocomplete chips -->
{#await currentrace then current}
{#await pxxs_whitelist then whitelist}
{#await Promise.all([currentrace, pxxs_whitelist]) then [current, whitelist]}
<InputChip
bind:input={pxxs_input}
bind:value={pxxs_chips}
@ -186,7 +185,6 @@
on:remove={on_pxxs_chip_remove}
/>
{/await}
{/await}
<div class="card max-h-48 w-full overflow-y-auto p-2" tabindex="-1">
{#await pxxs_options then options}
<Autocomplete

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

@ -56,8 +56,7 @@
let race_select_value: string = $state(substitution?.race ?? "");
</script>
{#await data.graphics then graphics}
{#await data.drivers then drivers}
{#await Promise.all([data.graphics, data.drivers]) then [graphics, drivers]}
<Card
imgsrc={get_by_value<Driver>(drivers, "id", substitution?.substitute ?? "")?.headshot_url ??
get_driver_headshot_template(graphics)}
@ -156,4 +155,3 @@
</form>
</Card>
{/await}
{/await}

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

@ -128,9 +128,7 @@
<!-- Only show the userguess if signed in -->
{#if data.user}
{#await data.graphics then graphics}
{#await data.drivers then drivers}
{#await racepick then pick}
{#await Promise.all( [data.graphics, data.drivers, racepick], ) then [graphics, drivers, pick]}
<div class="mt-2 flex gap-2">
<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>
@ -160,20 +158,16 @@
</div>
</div>
{/await}
{/await}
{/await}
{/if}
<!-- 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">
{#await pickedusers then picked}
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold">
Picked ({picked.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
{#await data.graphics then graphics}
{#each picked.slice(0, 16) as user}
<LazyImage
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
@ -183,17 +177,13 @@
imgclass="bg-surface-400 rounded-full"
/>
{/each}
{/await}
</div>
</div>
{/await}
{#await outstandingusers then outstanding}
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
<h1 class="text-nowrap font-bold">
Outstanding ({outstanding.length}/{currentpicked.length}):
</h1>
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
{#await data.graphics then graphics}
{#each outstanding.slice(0, 16) as user}
<LazyImage
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
@ -203,10 +193,8 @@
imgclass="bg-surface-400 rounded-full"
/>
{/each}
{/await}
</div>
</div>
{/await}
</div>
{/await}
</div>
@ -259,8 +247,7 @@
</div>
</div>
{#await data.races then races}
{#await data.raceresults then raceresults}
{#await Promise.all( [data.races, data.raceresults, data.drivers], ) then [races, raceresults, drivers]}
{#each raceresults as result}
{@const race = get_by_value(races, "id", result.race)}
@ -282,15 +269,11 @@
<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]};"
>
<span class="badge w-10 p-1 text-center" style="background: {PXX_COLORS[index]};">
{driver?.code}
</span>
</div>
@ -309,22 +292,15 @@
</span>
</div>
{/each}
{/await}
</div>
</div>
{/each}
{/await}
{/await}
</div>
<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 -->
<!-- TODO: Uhhh can I write this await stuff differently??? -->
{#await data.currentpickedusers then currentpicked}
{#await data.racepicks then racepicks}
{#await data.races then races}
{#await data.drivers then drivers}
{#await data.raceresults then raceresults}
{#await Promise.all( [data.currentpickedusers, data.racepicks, data.races, data.drivers, data.raceresults], ) then [currentpicked, racepicks, races, drivers, raceresults]}
{#each currentpicked as user}
{@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
@ -359,21 +335,19 @@
{@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]}
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"
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="p-1 text-center text-sm w-10 rounded-container-token"
class="w-10 p-1 text-center text-sm rounded-container-token"
style="background: {dnfcolor};"
>
{get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
@ -387,9 +361,5 @@
</div>
{/each}
{/await}
{/await}
{/await}
{/await}
{/await}
</div>
</div>