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

Lib: Don't await graphics

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-18 01:20:32 +01:00
parent 2fb7a7d597
commit 34c8ef57bf
3 changed files with 251 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
src/lib/components/cards/DriverCard.svelte
View File

@ -147,93 +147,79 @@
}; };
</script> </script>
{#await data.graphics then graphics} <Card
<Card imgsrc={driver?.headshot_url ?? get_driver_headshot_template(data.graphics)}
imgsrc={driver?.headshot_url ?? 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()} >
> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2"> <!-- Driver name input -->
<!-- Driver name input --> <Input bind:value={firstname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
<Input First Name
bind:value={firstname_input_value} </Input>
autocomplete="off" <Input bind:value={lastname_input_value} autocomplete="off" {labelwidth} {disabled} {required}>
{labelwidth} Last Name
{disabled} </Input>
{required} <Input
> bind:value={code_input_value}
First Name autocomplete="off"
</Input> minlength={3}
<Input maxlength={3}
bind:value={lastname_input_value} {labelwidth}
autocomplete="off" {disabled}
{labelwidth} {required}
{disabled} >
{required} Driver Code
> </Input>
Last Name
</Input>
<Input
bind:value={code_input_value}
autocomplete="off"
minlength={3}
maxlength={3}
{labelwidth}
{disabled}
{required}
>
Driver Code
</Input>
<!-- Driver team input --> <!-- Driver team input -->
{#await data.teams then teams} {#await data.teams then teams}
<Dropdown <Dropdown
bind:value={team_select_value} bind:value={team_select_value}
options={team_dropdown_options(teams)} options={team_dropdown_options(teams)}
{labelwidth} {labelwidth}
{disabled}
{required}
>
Team
</Dropdown>
{/await}
<!-- Headshot upload -->
<FileDropzone
name="headshot"
bind:files={headshot_file_value}
onchange={get_image_preview_event_handler("headshot_preview")}
{disabled}
{required}
>
<svelte:fragment slot="message">
<span class="font-bold">Upload Headshot</span>
</svelte:fragment>
</FileDropzone>
<!-- Save/Delete buttons -->
<div class="flex items-center justify-end gap-2">
<div class="mr-auto">
<SlideToggle
name="active"
background="bg-primary-500"
active="bg-tertiary-500"
bind:checked={active_value}
{disabled} {disabled}
{required} />
>
Team
</Dropdown>
{/await}
<!-- Headshot upload -->
<FileDropzone
name="headshot"
bind:files={headshot_file_value}
onchange={get_image_preview_event_handler("headshot_preview")}
{disabled}
{required}
>
<svelte:fragment slot="message">
<span class="font-bold">Upload Headshot</span>
</svelte:fragment>
</FileDropzone>
<!-- Save/Delete buttons -->
<div class="flex items-center justify-end gap-2">
<div class="mr-auto">
<SlideToggle
name="active"
background="bg-primary-500"
active="bg-tertiary-500"
bind:checked={active_value}
{disabled}
/>
</div>
{#if driver}
<Button onclick={update_driver()} color="secondary" {disabled} width="w-1/2">Save</Button>
<Button onclick={delete_driver} color="primary" {disabled} width="w-1/2">Delete</Button>
{:else}
<Button onclick={update_driver(true)} color="tertiary" {disabled} width="w-full">
Create Driver
</Button>
{/if}
</div> </div>
{#if driver}
<Button onclick={update_driver()} color="secondary" {disabled} width="w-1/2">Save</Button>
<Button onclick={delete_driver} color="primary" {disabled} width="w-1/2">Delete</Button>
{:else}
<Button onclick={update_driver(true)} color="tertiary" {disabled} width="w-full">
Create Driver
</Button>
{/if}
</div> </div>
</Card> </div>
{/await} </Card>

219
src/lib/components/cards/RaceCard.svelte
View File

@ -173,121 +173,114 @@
}; };
</script> </script>
{#await data.graphics then graphics} <Card
<Card imgsrc={race?.pictogram_url ?? get_race_pictogram_template(data.graphics)}
imgsrc={race?.pictogram_url ?? get_race_pictogram_template(graphics)} imgid="pictogram_preview"
imgid="pictogram_preview" width="w-full sm:w-auto"
width="w-full sm:w-auto" imgwidth={RACE_PICTOGRAM_WIDTH}
imgwidth={RACE_PICTOGRAM_WIDTH} imgheight={RACE_PICTOGRAM_HEIGHT}
imgheight={RACE_PICTOGRAM_HEIGHT} imgonclick={(event: Event) => modalStore.close()}
imgonclick={(event: Event) => modalStore.close()} >
> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2"> <!-- Driver name input -->
<!-- Driver name input --> <Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}>
<Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}> Name
Name </Input>
</Input> <Input
<Input bind:value={step_value}
bind:value={step_value} autocomplete="off"
autocomplete="off" type="number"
type="number" min={1}
min={1} max={24}
max={24} {labelwidth}
{labelwidth} {disabled}
{disabled} {required}
{required} >
> Step
Step </Input>
</Input> <Input
<Input bind:value={pxx_value}
bind:value={pxx_value} autocomplete="off"
autocomplete="off" type="number"
type="number" min={1}
min={1} max={20}
max={20} {labelwidth}
{labelwidth} {disabled}
{disabled} {required}
{required} >
> PXX
PXX </Input>
</Input>
<!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format --> <!-- NOTE: Input datetime-local accepts YYYY-mm-ddTHH:MM format -->
<Input <Input
id="sqdate" id="sqdate"
bind:value={sprintqualidate_value} bind:value={sprintqualidate_value}
autocomplete="off" autocomplete="off"
type="datetime-local" type="datetime-local"
{labelwidth} {labelwidth}
{disabled} {disabled}
> >
SQuali SQuali
</Input> </Input>
<Input <Input
id="sdate" id="sdate"
bind:value={sprintdate_value} bind:value={sprintdate_value}
autocomplete="off" autocomplete="off"
type="datetime-local" type="datetime-local"
{labelwidth} {labelwidth}
{disabled} {disabled}
> >
SRace SRace
</Input> </Input>
<Input <Input
bind:value={qualidate_value} bind:value={qualidate_value}
autocomplete="off" autocomplete="off"
type="datetime-local" type="datetime-local"
{labelwidth} {labelwidth}
{disabled} {disabled}
{required} {required}
> >
Quali Quali
</Input> </Input>
<Input <Input
bind:value={racedate_value} bind:value={racedate_value}
autocomplete="off" autocomplete="off"
type="datetime-local" type="datetime-local"
{labelwidth} {labelwidth}
{disabled} {disabled}
{required} {required}
> >
Race Race
</Input> </Input>
<!-- Headshot upload --> <!-- Headshot upload -->
<FileDropzone <FileDropzone
name="pictogram" name="pictogram"
onchange={get_image_preview_event_handler("pictogram_preview")} onchange={get_image_preview_event_handler("pictogram_preview")}
bind:files={pictogram_value} bind:files={pictogram_value}
{disabled} {disabled}
{required} {required}
> >
<svelte:fragment slot="message"> <svelte:fragment slot="message">
<span class="font-bold">Upload Pictogram</span> <span class="font-bold">Upload Pictogram</span>
</svelte:fragment> </svelte:fragment>
</FileDropzone> </FileDropzone>
<!-- Save/Delete buttons --> <!-- Save/Delete buttons -->
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<Button <Button onclick={clear_sprint} color="secondary" {disabled} width={race ? "w-1/3" : "w-1/2"}>
onclick={clear_sprint} Remove Sprint
color="secondary" </Button>
{disabled} {#if race}
width={race ? "w-1/3" : "w-1/2"} <Button onclick={update_race()} color="secondary" {disabled} width="w-1/3">
> Save Changes
Remove Sprint
</Button> </Button>
{#if race} <Button onclick={delete_race} color="primary" {disabled} width="w-1/3">Delete</Button>
<Button onclick={update_race()} color="secondary" {disabled} width="w-1/3"> {:else}
Save Changes <Button onclick={update_race(true)} color="tertiary" {disabled} width="w-1/2">
</Button> Create Race
<Button onclick={delete_race} color="primary" {disabled} width="w-1/3">Delete</Button> </Button>
{:else} {/if}
<Button onclick={update_race(true)} color="tertiary" {disabled} width="w-1/2">
Create Race
</Button>
{/if}
</div>
</div> </div>
</Card> </div>
{/await} </Card>

148
src/lib/components/cards/TeamCard.svelte
View File

@ -176,83 +176,81 @@
}; };
</script> </script>
{#await data.graphics then graphics} <Card
<Card imgsrc={team?.banner_url ?? get_team_banner_template(data.graphics)}
imgsrc={team?.banner_url ?? get_team_banner_template(graphics)} imgid="banner_preview"
imgid="banner_preview" width="w-full sm:w-auto"
width="w-full sm:w-auto" imgwidth={TEAM_BANNER_WIDTH}
imgwidth={TEAM_BANNER_WIDTH} imgheight={TEAM_BANNER_HEIGHT}
imgheight={TEAM_BANNER_HEIGHT} imgonclick={(event: Event) => modalStore.close()}
imgonclick={(event: Event) => modalStore.close()} >
> <div class="flex flex-col gap-2">
<div class="flex flex-col gap-2"> <!-- Team name input -->
<!-- Team name input --> <Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}>
<Input bind:value={name_value} autocomplete="off" {labelwidth} {disabled} {required}> Name
Name </Input>
</Input>
<!-- Team color input --> <!-- Team color input -->
<Input <Input
bind:value={color_value} bind:value={color_value}
autocomplete="off" autocomplete="off"
placeholder="Enter as '#XXXXXX'" placeholder="Enter as '#XXXXXX'"
minlength={7} minlength={7}
maxlength={7} maxlength={7}
{labelwidth} {labelwidth}
{disabled} {disabled}
{required} {required}
> >
Color Color
<span class="badge ml-2 border" style="color: {color_value}; background: {color_value}"> <span class="badge ml-2 border" style="color: {color_value}; background: {color_value}">
C C
</span> </span>
</Input> </Input>
<!-- Banner upload --> <!-- Banner upload -->
<FileDropzone <FileDropzone
name="banner" name="banner"
bind:files={banner_value} bind:files={banner_value}
onchange={get_image_preview_event_handler("banner_preview")} onchange={get_image_preview_event_handler("banner_preview")}
{disabled} {disabled}
{required} {required}
> >
<svelte:fragment slot="message"> <svelte:fragment slot="message">
<span class="font-bold">Upload Banner</span> <span class="font-bold">Upload Banner</span>
</svelte:fragment> </svelte:fragment>
</FileDropzone> </FileDropzone>
<!-- Logo upload --> <!-- Logo upload -->
<FileDropzone <FileDropzone
name="logo" name="logo"
bind:files={logo_value} bind:files={logo_value}
onchange={get_image_preview_event_handler("logo_preview")} onchange={get_image_preview_event_handler("logo_preview")}
{disabled} {disabled}
{required} {required}
> >
<svelte:fragment slot="message"> <svelte:fragment slot="message">
<div class="inline-flex flex-nowrap items-center gap-2"> <div class="inline-flex flex-nowrap items-center gap-2">
<span class="font-bold">Upload Logo</span> <span class="font-bold">Upload Logo</span>
<LazyImage <LazyImage
src={team?.logo_url ?? get_team_logo_template(graphics)} src={team?.logo_url ?? get_team_logo_template(data.graphics)}
id="logo_preview" id="logo_preview"
imgwidth={32} imgwidth={32}
imgheight={32} imgheight={32}
/> />
</div> </div>
</svelte:fragment> </svelte:fragment>
</FileDropzone> </FileDropzone>
<!-- Save/Delete buttons --> <!-- Save/Delete buttons -->
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
{#if team} {#if team}
<Button onclick={update_team()} color="secondary" {disabled} width="w-1/2">Save</Button> <Button onclick={update_team()} color="secondary" {disabled} width="w-1/2">Save</Button>
<Button onclick={delete_team} color="primary" {disabled} width="w-1/2">Delete</Button> <Button onclick={delete_team} color="primary" {disabled} width="w-1/2">Delete</Button>
{:else} {:else}
<Button onclick={update_team(true)} color="tertiary" {disabled} width="w-full"> <Button onclick={update_team(true)} color="tertiary" {disabled} width="w-full">
Create Team Create Team
</Button> </Button>
{/if} {/if}
</div>
</div> </div>
</Card> </div>
{/await} </Card>