Racepicks: Stream loaded data and resolve promises in markup
This commit is contained in:
@ -1,6 +1,14 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Card, Button, Dropdown } from "$lib/components";
|
import { Card, Button, Dropdown } from "$lib/components";
|
||||||
import type { Driver, Race, RacePick, SkeletonData, Substitution } from "$lib/schema";
|
import type {
|
||||||
|
CurrentPickedUser,
|
||||||
|
Driver,
|
||||||
|
Race,
|
||||||
|
RacePick,
|
||||||
|
RaceResult,
|
||||||
|
SkeletonData,
|
||||||
|
Substitution,
|
||||||
|
} from "$lib/schema";
|
||||||
import { get_by_value, get_driver_headshot_template } from "$lib/database";
|
import { get_by_value, get_driver_headshot_template } from "$lib/database";
|
||||||
import type { Action } from "svelte/action";
|
import type { Action } from "svelte/action";
|
||||||
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
|
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
|
||||||
@ -10,7 +18,12 @@
|
|||||||
|
|
||||||
interface RacePickCardProps {
|
interface RacePickCardProps {
|
||||||
/** Data passed from the page context */
|
/** Data passed from the page context */
|
||||||
data: SkeletonData & { currentrace: Race };
|
data: SkeletonData & {
|
||||||
|
currentrace: Race;
|
||||||
|
racepicks: Promise<RacePick[]>;
|
||||||
|
currentpickedusers: Promise<CurrentPickedUser[]>;
|
||||||
|
raceresults: Promise<RaceResult[]>;
|
||||||
|
};
|
||||||
|
|
||||||
/** The [RacePick] object used to prefill values. */
|
/** The [RacePick] object used to prefill values. */
|
||||||
racepick?: RacePick;
|
racepick?: RacePick;
|
||||||
|
|||||||
@ -2,65 +2,6 @@ import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } f
|
|||||||
import type { CurrentPickedUser, Race, RacePick, RaceResult } from "$lib/schema";
|
import type { CurrentPickedUser, Race, RacePick, RaceResult } from "$lib/schema";
|
||||||
import type { Actions, PageServerLoad } from "./$types";
|
import type { Actions, PageServerLoad } from "./$types";
|
||||||
|
|
||||||
export const load: PageServerLoad = async ({ fetch, locals }) => {
|
|
||||||
const fetch_racepicks = async (): Promise<RacePick[]> => {
|
|
||||||
// Don't expand race/pxx/dnf since we already fetched those
|
|
||||||
const racepicks: RacePick[] = await locals.pb
|
|
||||||
.collection("racepicks")
|
|
||||||
.getFullList({ fetch: fetch, expand: "user" });
|
|
||||||
|
|
||||||
// TODO: Fill in the expanded race pictogram_url fields
|
|
||||||
|
|
||||||
return racepicks;
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetch_currentrace = async (): Promise<Race | null> => {
|
|
||||||
const currentrace: Race[] = await locals.pb.collection("currentrace").getFullList();
|
|
||||||
|
|
||||||
// The currentrace collection either has a single or no entries
|
|
||||||
if (currentrace.length == 0) return null;
|
|
||||||
|
|
||||||
currentrace[0].pictogram_url = await locals.pb.files.getURL(
|
|
||||||
currentrace[0],
|
|
||||||
currentrace[0].pictogram,
|
|
||||||
);
|
|
||||||
|
|
||||||
return currentrace[0];
|
|
||||||
};
|
|
||||||
|
|
||||||
const fetch_currentpickedusers = async (): Promise<CurrentPickedUser[]> => {
|
|
||||||
const currentpickedusers: CurrentPickedUser[] = await locals.pb
|
|
||||||
.collection("currentpickedusers")
|
|
||||||
.getFullList();
|
|
||||||
|
|
||||||
currentpickedusers.map((currentpickeduser: CurrentPickedUser) => {
|
|
||||||
if (currentpickeduser.avatar) {
|
|
||||||
currentpickeduser.avatar_url = locals.pb.files.getURL(
|
|
||||||
currentpickeduser,
|
|
||||||
currentpickeduser.avatar,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return currentpickedusers;
|
|
||||||
};
|
|
||||||
|
|
||||||
// TODO: Duplicated code from data/raceresults/+page.server.ts
|
|
||||||
const fetch_raceresults = async (): Promise<RaceResult[]> => {
|
|
||||||
// Don't expand races/pxxs/dnfs since we already fetched those
|
|
||||||
const raceresults: RaceResult[] = await locals.pb.collection("raceresultsdesc").getFullList();
|
|
||||||
|
|
||||||
return raceresults;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
racepicks: await fetch_racepicks(),
|
|
||||||
currentrace: await fetch_currentrace(),
|
|
||||||
currentpickedusers: await fetch_currentpickedusers(),
|
|
||||||
raceresults: await fetch_raceresults(),
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export const actions = {
|
export const actions = {
|
||||||
create_racepick: async ({ request, locals }) => {
|
create_racepick: async ({ request, locals }) => {
|
||||||
const data: FormData = form_data_clean(await request.formData());
|
const data: FormData = form_data_clean(await request.formData());
|
||||||
@ -91,3 +32,61 @@ export const actions = {
|
|||||||
await locals.pb.collection("racepicks").delete(id);
|
await locals.pb.collection("racepicks").delete(id);
|
||||||
},
|
},
|
||||||
} satisfies Actions;
|
} satisfies Actions;
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ fetch, locals }) => {
|
||||||
|
const fetch_currentrace = async (): Promise<Race | null> => {
|
||||||
|
const currentrace: Race[] = await locals.pb.collection("currentrace").getFullList();
|
||||||
|
|
||||||
|
// The currentrace collection either has a single or no entries
|
||||||
|
if (currentrace.length == 0) return null;
|
||||||
|
|
||||||
|
currentrace[0].pictogram_url = await locals.pb.files.getURL(
|
||||||
|
currentrace[0],
|
||||||
|
currentrace[0].pictogram,
|
||||||
|
);
|
||||||
|
|
||||||
|
return currentrace[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetch_racepicks = async (): Promise<RacePick[]> => {
|
||||||
|
// Don't expand race/pxx/dnf since we already fetched those
|
||||||
|
const racepicks: RacePick[] = await locals.pb
|
||||||
|
.collection("racepicks")
|
||||||
|
.getFullList({ fetch: fetch, expand: "user" });
|
||||||
|
|
||||||
|
return racepicks;
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetch_currentpickedusers = async (): Promise<CurrentPickedUser[]> => {
|
||||||
|
const currentpickedusers: CurrentPickedUser[] = await locals.pb
|
||||||
|
.collection("currentpickedusers")
|
||||||
|
.getFullList();
|
||||||
|
|
||||||
|
currentpickedusers.map((currentpickeduser: CurrentPickedUser) => {
|
||||||
|
if (currentpickeduser.avatar) {
|
||||||
|
currentpickeduser.avatar_url = locals.pb.files.getURL(
|
||||||
|
currentpickeduser,
|
||||||
|
currentpickeduser.avatar,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return currentpickedusers;
|
||||||
|
};
|
||||||
|
|
||||||
|
// TODO: Duplicated code from data/raceresults/+page.server.ts
|
||||||
|
const fetch_raceresults = async (): Promise<RaceResult[]> => {
|
||||||
|
// Don't expand races/pxxs/dnfs since we already fetched those
|
||||||
|
const raceresults: RaceResult[] = await locals.pb.collection("raceresultsdesc").getFullList();
|
||||||
|
|
||||||
|
return raceresults;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
currentrace: await fetch_currentrace(),
|
||||||
|
|
||||||
|
racepicks: fetch_racepicks(),
|
||||||
|
currentpickedusers: fetch_currentpickedusers(),
|
||||||
|
raceresults: fetch_raceresults(),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|||||||
@ -25,12 +25,13 @@
|
|||||||
|
|
||||||
let { data }: { data: PageData } = $props();
|
let { data }: { data: PageData } = $props();
|
||||||
|
|
||||||
const racepick: RacePick | undefined = $derived(
|
const racepick: Promise<RacePick | undefined> = $derived.by(
|
||||||
data.racepicks.filter(
|
async () =>
|
||||||
(racepick: RacePick) =>
|
(await data.racepicks).filter(
|
||||||
racepick.expand.user.username === data.user?.username &&
|
(racepick: RacePick) =>
|
||||||
racepick.race === data.currentrace?.id,
|
racepick.expand.user.username === data.user?.username &&
|
||||||
)[0] ?? undefined,
|
racepick.race === data.currentrace?.id,
|
||||||
|
)[0] ?? undefined,
|
||||||
);
|
);
|
||||||
|
|
||||||
const modalStore: ModalStore = getModalStore();
|
const modalStore: ModalStore = getModalStore();
|
||||||
@ -40,7 +41,7 @@
|
|||||||
component: "racePickCard",
|
component: "racePickCard",
|
||||||
meta: {
|
meta: {
|
||||||
data,
|
data,
|
||||||
racepick,
|
racepick: await racepick,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -48,15 +49,15 @@
|
|||||||
};
|
};
|
||||||
|
|
||||||
// Users that have already picked the current race
|
// Users that have already picked the current race
|
||||||
let pickedusers: CurrentPickedUser[] = $derived(
|
let pickedusers: Promise<CurrentPickedUser[]> = $derived.by(async () =>
|
||||||
data.currentpickedusers.filter(
|
(await data.currentpickedusers).filter(
|
||||||
(currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
|
(currentpickeduser: CurrentPickedUser) => currentpickeduser.picked,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
// Users that didn't already pick the current race
|
// Users that didn't already pick the current race
|
||||||
let outstandingusers: CurrentPickedUser[] = $derived(
|
let outstandingusers: Promise<CurrentPickedUser[]> = $derived.by(async () =>
|
||||||
data.currentpickedusers.filter(
|
(await data.currentpickedusers).filter(
|
||||||
(currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
|
(currentpickeduser: CurrentPickedUser) => !currentpickeduser.picked,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
@ -127,83 +128,87 @@
|
|||||||
|
|
||||||
<!-- Only show the userguess if signed in -->
|
<!-- Only show the userguess if signed in -->
|
||||||
{#if data.user}
|
{#if data.user}
|
||||||
<div class="mt-2 flex gap-2">
|
{#await data.graphics then graphics}
|
||||||
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
{#await data.drivers then drivers}
|
||||||
<h1 class="mb-2 text-nowrap font-bold">Your P{data.currentrace.pxx} Pick:</h1>
|
{#await racepick then pick}
|
||||||
{#await data.graphics then graphics}
|
<div class="mt-2 flex gap-2">
|
||||||
{#await data.drivers then drivers}
|
<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", racepick?.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}
|
||||||
{/await}
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
||||||
|
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
|
||||||
|
<LazyImage
|
||||||
|
src={get_by_value(drivers, "id", pick?.dnf ?? "")?.headshot_url ??
|
||||||
|
get_driver_headshot_template(graphics)}
|
||||||
|
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
||||||
|
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
||||||
|
containerstyle="height: 115px; margin: auto;"
|
||||||
|
imgclass="bg-transparent cursor-pointer"
|
||||||
|
hoverzoom
|
||||||
|
onclick={racepick_handler}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{/await}
|
{/await}
|
||||||
</div>
|
{/await}
|
||||||
<div class="card w-full min-w-40 p-2 pb-0 shadow">
|
{/await}
|
||||||
<h1 class="mb-2 text-nowrap font-bold">Your DNF Pick:</h1>
|
|
||||||
{#await data.graphics then graphics}
|
|
||||||
{#await data.drivers then drivers}
|
|
||||||
<LazyImage
|
|
||||||
src={get_by_value(drivers, "id", racepick?.dnf ?? "")?.headshot_url ??
|
|
||||||
get_driver_headshot_template(graphics)}
|
|
||||||
imgwidth={DRIVER_HEADSHOT_WIDTH}
|
|
||||||
imgheight={DRIVER_HEADSHOT_HEIGHT}
|
|
||||||
containerstyle="height: 115px; margin: auto;"
|
|
||||||
imgclass="bg-transparent cursor-pointer"
|
|
||||||
hoverzoom
|
|
||||||
onclick={racepick_handler}
|
|
||||||
/>
|
|
||||||
{/await}
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- Show users that have and have not picked yet -->
|
<!-- Show users that have and have not picked yet -->
|
||||||
<div class="mt-2 flex gap-2">
|
{#await data.currentpickedusers then currentpicked}
|
||||||
<div class="card w-full min-w-40 p-2 shadow">
|
<div class="mt-2 flex gap-2">
|
||||||
<h1 class="text-nowrap font-bold">
|
{#await pickedusers then picked}
|
||||||
Picked ({pickedusers.length}/{data.currentpickedusers.length}):
|
<div class="card w-full min-w-40 p-2 shadow lg:max-w-40">
|
||||||
</h1>
|
<h1 class="text-nowrap font-bold">
|
||||||
<div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
|
Picked ({picked.length}/{currentpicked.length}):
|
||||||
{#await data.graphics then graphics}
|
</h1>
|
||||||
{#each pickedusers.slice(0, 16) as user}
|
<div class="mt-1 grid grid-cols-4 gap-x-2 gap-y-0.5">
|
||||||
<LazyImage
|
{#await data.graphics then graphics}
|
||||||
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
{#each picked.slice(0, 16) as user}
|
||||||
imgwidth={AVATAR_WIDTH}
|
<LazyImage
|
||||||
imgheight={AVATAR_HEIGHT}
|
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
||||||
containerstyle="height: 35px; width: 35px;"
|
imgwidth={AVATAR_WIDTH}
|
||||||
imgclass="bg-surface-400 rounded-full"
|
imgheight={AVATAR_HEIGHT}
|
||||||
/>
|
containerstyle="height: 35px; width: 35px;"
|
||||||
{/each}
|
imgclass="bg-surface-400 rounded-full"
|
||||||
{/await}
|
/>
|
||||||
</div>
|
{/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)}
|
||||||
|
imgwidth={AVATAR_WIDTH}
|
||||||
|
imgheight={AVATAR_HEIGHT}
|
||||||
|
containerstyle="height: 35px; width: 35px;"
|
||||||
|
imgclass="bg-surface-400 rounded-full"
|
||||||
|
/>
|
||||||
|
{/each}
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
<div class="card w-full min-w-40 p-2 shadow">
|
{/await}
|
||||||
<h1 class="text-nowrap font-bold">
|
|
||||||
Outstanding ({outstandingusers.length}/{data.currentpickedusers.length}):
|
|
||||||
</h1>
|
|
||||||
<div class="mt-1 grid grid-cols-4 gap-x-0 gap-y-0.5">
|
|
||||||
{#await data.graphics then graphics}
|
|
||||||
{#each outstandingusers.slice(0, 16) as user}
|
|
||||||
<LazyImage
|
|
||||||
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
|
||||||
imgwidth={AVATAR_WIDTH}
|
|
||||||
imgheight={AVATAR_HEIGHT}
|
|
||||||
containerstyle="height: 35px; width: 35px;"
|
|
||||||
imgclass="bg-surface-400 rounded-full"
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
{/await}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</svelte:fragment>
|
</svelte:fragment>
|
||||||
</AccordionItem>
|
</AccordionItem>
|
||||||
@ -255,122 +260,136 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#await data.races then races}
|
{#await data.races then races}
|
||||||
{#each data.raceresults as result}
|
{#await data.raceresults then raceresults}
|
||||||
{@const race = get_by_value(races, "id", result.race)}
|
{#each raceresults as result}
|
||||||
|
{@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">
|
|
||||||
{#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>
|
||||||
</div>
|
|
||||||
{/each}
|
<!-- 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">
|
||||||
|
{#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 -->
|
||||||
{#each data.currentpickedusers as user}
|
<!-- TODO: Uhhh can I write this await stuff differently??? -->
|
||||||
{@const picks = data.racepicks.filter((pick: RacePick) => pick.user === user.id)}
|
{#await data.currentpickedusers then currentpicked}
|
||||||
|
{#await data.racepicks then racepicks}
|
||||||
<div
|
|
||||||
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
|
|
||||||
? 'bg-primary-300'
|
|
||||||
: ''}"
|
|
||||||
>
|
|
||||||
<!-- Avatar + name display at the top -->
|
|
||||||
<div class="mx-auto flex h-10 w-fit">
|
|
||||||
{#await data.graphics then graphics}
|
|
||||||
<LazyImage
|
|
||||||
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
|
||||||
imgwidth={AVATAR_WIDTH}
|
|
||||||
imgheight={AVATAR_HEIGHT}
|
|
||||||
containerstyle="height: 40px; width: 40px;"
|
|
||||||
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>
|
|
||||||
|
|
||||||
{#await data.races then races}
|
{#await data.races then races}
|
||||||
{#await data.drivers then drivers}
|
{#await data.drivers then drivers}
|
||||||
{#each data.raceresults as result}
|
{#await data.raceresults then raceresults}
|
||||||
{@const race = get_by_value(races, "id", result.race)}
|
{#each currentpicked as user}
|
||||||
{@const pick = picks.filter((pick: RacePick) => pick.race === race?.id)[0]}
|
{@const picks = racepicks.filter((pick: RacePick) => pick.user === user.id)}
|
||||||
{@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
|
||||||
<div class="mt-2 h-20 w-full border bg-surface-300 p-1 lg:p-2">
|
class="card ml-1 mt-2 w-full min-w-12 overflow-hidden py-2 shadow lg:ml-2 {data.user &&
|
||||||
<div class="mx-auto flex h-full w-fit flex-col justify-evenly">
|
data.user.username === user.username
|
||||||
<span
|
? 'bg-primary-300'
|
||||||
class="p-1 text-center text-sm rounded-container-token"
|
: ''}"
|
||||||
style="background: {pxxcolor};"
|
>
|
||||||
|
<!-- Avatar + name display at the top -->
|
||||||
|
<div class="mx-auto flex h-10 w-fit">
|
||||||
|
{#await data.graphics then graphics}
|
||||||
|
<LazyImage
|
||||||
|
src={user.avatar_url ?? get_driver_headshot_template(graphics)}
|
||||||
|
imgwidth={AVATAR_WIDTH}
|
||||||
|
imgheight={AVATAR_HEIGHT}
|
||||||
|
containerstyle="height: 40px; width: 40px;"
|
||||||
|
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"
|
||||||
>
|
>
|
||||||
{get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
|
<!-- TODO: Setting to toggle between username or firstname display -->
|
||||||
</span>
|
{user.username}
|
||||||
<span
|
</div>
|
||||||
class="p-1 text-center text-sm rounded-container-token"
|
|
||||||
style="background: {dnfcolor};"
|
|
||||||
>
|
|
||||||
{get_by_value(drivers, "id", pick?.dnf ?? "")?.code}
|
|
||||||
</span>
|
|
||||||
</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 rounded-container-token"
|
||||||
|
style="background: {pxxcolor};"
|
||||||
|
>
|
||||||
|
{get_by_value(drivers, "id", pick?.pxx ?? "")?.code}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
class="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>
|
</div>
|
||||||
{:else}
|
{/each}
|
||||||
<div class="mt-2 h-20 w-full"></div>
|
{/await}
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{/await}
|
{/await}
|
||||||
{/await}
|
{/await}
|
||||||
</div>
|
{/await}
|
||||||
{/each}
|
{/await}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user