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

Seasonpicks: Hide accordion if signed out

Browse Source
This commit is contained in:
Christoph Urlacher
2025-03-18 12:13:54 +01:00
parent 1857755cfb
commit a9b37a8884
1 changed files with 30 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/routes/seasonpicks/+page.svelte
View File

@ -61,33 +61,29 @@
</svelte:head> </svelte:head>
<!-- Await this here so the accordion doesn't lag when opening --> <!-- Await this here so the accordion doesn't lag when opening -->
{#await Promise.all( [data.drivers, data.teams, data.seasonpicks, data.seasonpickedusers, pickedusers, outstandingusers], ) then [drivers, teams, seasonpicks, currentpicked, picked, outstanding]} <!-- Only show the stuff if signed in -->
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full"> {#if $pbUser}
<AccordionItem> {#await Promise.all( [data.drivers, data.teams, data.seasonpicks, data.seasonpickedusers, pickedusers, outstandingusers], ) then [drivers, teams, seasonpicks, currentpicked, picked, outstanding]}
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment> {@const teamwinners = data.seasonpick
<svelte:fragment slot="summary"> ? data.seasonpick.teamwinners
<span class="font-bold">Your Season Pick</span> .map((id: string) => get_by_value(drivers, "id", id) as Driver)
</svelte:fragment> .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
<svelte:fragment slot="content"> : [undefined]}
<div {@const podiums = data.seasonpick
class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit {pbUser ? data.seasonpick.podiums
? 'lg:grid-cols-5 2xl:grid-cols-10' .map((id: string) => get_by_value(drivers, "id", id) as Driver)
: 'lg:grid-cols-2 2xl:grid-cols-2'}" .sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
> .sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
<!-- Only show the stuff if signed in --> : [undefined]}
{#if $pbUser}
{@const teamwinners = data.seasonpick
? data.seasonpick.teamwinners
.map((id: string) => get_by_value(drivers, "id", id) as Driver)
.sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
: [undefined]}
{@const podiums = data.seasonpick
? data.seasonpick.podiums
.map((id: string) => get_by_value(drivers, "id", id) as Driver)
.sort((a: Driver, b: Driver) => a.code.localeCompare(b.code))
.sort((a: Driver, b: Driver) => a.team.localeCompare(b.team))
: [undefined]}
<Accordion class="card mx-auto bg-surface-500 shadow" regionPanel="pt-2" width="w-full">
<AccordionItem>
<svelte:fragment slot="lead"><ChequeredFlagIcon /></svelte:fragment>
<svelte:fragment slot="summary">
<span class="font-bold">Your Season Pick</span>
</svelte:fragment>
<svelte:fragment slot="content">
<div class="grid grid-cols-2 gap-2 lg:mx-auto lg:w-fit lg:grid-cols-5 2xl:grid-cols-10">
<!-- Hottake --> <!-- Hottake -->
<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="mb-2 text-nowrap font-bold">Hottake:</h1> <h1 class="mb-2 text-nowrap font-bold">Hottake:</h1>
@ -195,10 +191,8 @@
{/each} {/each}
</div> </div>
</div> </div>
{/if}
<!-- Show users that have picked --> <!-- Show users that have picked -->
{#if seasonpicks.length === 0}
<div class="card max-h-[155px] w-full min-w-40 p-2 shadow lg:max-w-40"> <div class="card max-h-[155px] 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}):
@ -233,15 +227,15 @@
{/each} {/each}
</div> </div>
</div> </div>
{/if} </div>
</div> </svelte:fragment>
</svelte:fragment> </AccordionItem>
</AccordionItem> </Accordion>
</Accordion> {/await}
{/await} {/if}
<!-- The fookin table --> <!-- The fookin table -->
<div class="flex"> <div class="{!$pbUser ? 'mt-[-8px]' : ''} flex">
<div> <div>
<!-- TODO: Points popup? --> <!-- TODO: Points popup? -->
<div class="mt-4 h-10 w-7 lg:w-36"></div> <div class="mt-4 h-10 w-7 lg:w-36"></div>