Racepicks: Use Promise.all for nested {#await} blocks
This commit is contained in:
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user