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

Lib: Simplify TeamCard

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-05 01:15:17 +01:00
parent 347b5e1470
commit 603c7d0e40
2 changed files with 135 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,176 +5,136 @@
import type { Team } from "$lib/schema"; import type { Team } from "$lib/schema";
import { TEAM_BANNER_HEIGHT, TEAM_BANNER_WIDTH } from "$lib/config"; import { TEAM_BANNER_HEIGHT, TEAM_BANNER_WIDTH } from "$lib/config";
import { enhance } from "$app/forms"; import { enhance } from "$app/forms";
import { get_team_banner_template, get_team_logo_template } from "$lib/database";
interface TeamCardProps { interface TeamCardProps {
/** Data from the page context */
data: any;
/** The [Team] object used to prefill values. */ /** The [Team] object used to prefill values. */
team?: Team | undefined; team?: Team;
/** Disable all inputs if [true] */
disable_inputs?: boolean;
/** Require all inputs if [true] */
require_inputs?: boolean;
/** The [src] of the team banner template preview */
banner_template?: string;
/** The [src] of the team logo template preview */
logo_template?: string;
} }
let { let { data, team = undefined }: TeamCardProps = $props();
team = undefined,
disable_inputs = false,
require_inputs = false,
banner_template = "",
logo_template = "",
}: TeamCardProps = $props();
const modalStore: ModalStore = getModalStore(); const modalStore: ModalStore = getModalStore();
if ($modalStore[0].meta) { if ($modalStore[0].meta) {
const meta = $modalStore[0].meta; const meta = $modalStore[0].meta;
// Stuff thats required for the "update" card data = meta.data;
team = meta.team; team = meta.team;
disable_inputs = meta.disable_inputs;
// Stuff thats additionally required for the "create" card
require_inputs = meta.require_inputs;
banner_template = meta.banner_template;
logo_template = meta.logo_template;
} }
const required: boolean = $derived(!team);
const disabled: boolean = $derived(!data.admin);
const labelwidth: string = "110px"; const labelwidth: string = "110px";
let colorpreview: string = $state(team?.color ?? "white"); let colorpreview: string = $state(team?.color ?? "Invalid");
</script> </script>
<Card {#await data.graphics then graphics}
imgsrc={team?.banner_url ?? banner_template} <Card
imgid="update_team_banner_preview_{team?.id ?? 'create'}" imgsrc={team?.banner_url ?? get_team_banner_template(graphics)}
width="w-full sm:w-auto" imgid="banner_preview"
imgwidth={TEAM_BANNER_WIDTH} width="w-full sm:w-auto"
imgheight={TEAM_BANNER_HEIGHT} imgwidth={TEAM_BANNER_WIDTH}
imgonclick={(event: Event) => modalStore.close()} imgheight={TEAM_BANNER_HEIGHT}
> imgonclick={(event: Event) => modalStore.close()}
<form method="POST" enctype="multipart/form-data" use:enhance> >
<!-- This is also disabled, because the ID should only be --> <form
<!-- "leaked" to users that are allowed to use the inputs --> method="POST"
{#if team && !disable_inputs} enctype="multipart/form-data"
<input name="id" type="hidden" value={team.id} /> use:enhance
{/if} onsubmit={() => modalStore.close()}
>
<!-- This is also disabled, because the ID should only be -->
<!-- "leaked" to users that are allowed to use the inputs -->
{#if team && !disabled}
<input name="id" type="hidden" value={team.id} />
{/if}
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<!-- Team name input --> <!-- Team name input -->
<Input <Input
id="team_name_{team?.id ?? 'create'}" name="name"
name="name" value={team?.name ?? ""}
value={team?.name ?? ""} autocomplete="off"
{labelwidth} {labelwidth}
autocomplete="off" {disabled}
disabled={disable_inputs} {required}
required={require_inputs}
>
Name
</Input>
<!-- Team color input -->
<Input
id="team_color_{team?.id ?? 'create'}"
name="color"
value={team?.color ?? ""}
{labelwidth}
autocomplete="off"
placeholder="Enter as '#XXXXXX'"
disabled={disable_inputs}
required={require_inputs}
minlength={7}
maxlength={7}
onchange={(event: Event) => {
colorpreview = (event.target as HTMLInputElement).value;
}}
>
Color
<span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}">
C
</span>
</Input>
<!-- Banner upload -->
<FileDropzone
name="banner"
id="team_banner_{team?.id ?? 'create'}"
onchange={get_image_preview_event_handler(
`update_team_banner_preview_${team?.id ?? "create"}`,
)}
disabled={disable_inputs}
required={require_inputs}
>
<svelte:fragment slot="message"
><span class="font-bold">Upload Banner</span></svelte:fragment
> >
</FileDropzone> Name
</Input>
<!-- Logo upload --> <!-- Team color input -->
<FileDropzone <Input
name="logo" name="color"
id="team_logo_{team?.id ?? 'create'}" value={team?.color ?? ""}
onchange={get_image_preview_event_handler( autocomplete="off"
`update_team_logo_preview_${team?.id ?? "create"}`, placeholder="Enter as '#XXXXXX'"
)} minlength={7}
disabled={disable_inputs} maxlength={7}
required={require_inputs} oninput={(event: Event) => {
> colorpreview = (event.target as HTMLInputElement).value;
<svelte:fragment slot="message"> }}
<div class="inline-flex flex-nowrap items-center gap-2"> {labelwidth}
<span class="font-bold">Upload Logo</span> {disabled}
<LazyImage {required}
src={team?.logo_url ?? logo_template} >
id="update_team_logo_preview_{team?.id ?? 'create'}" Color
imgwidth={32} <span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}">
imgheight={32} C
/> </span>
</div> </Input>
</svelte:fragment>
</FileDropzone>
<!-- Save/Delete buttons --> <!-- Banner upload -->
<div class="flex justify-end gap-2"> <FileDropzone
{#if team} name="banner"
<Button onchange={get_image_preview_event_handler("banner_preview")}
formaction="?/update_team" {disabled}
color="secondary" {required}
disabled={disable_inputs} >
submit <svelte:fragment slot="message">
width="w-1/2" <span class="font-bold">Upload Banner</span>
onclick={() => modalStore.close()} </svelte:fragment>
> </FileDropzone>
Save
</Button> <!-- Logo upload -->
<Button <FileDropzone
color="primary" name="logo"
submit onchange={get_image_preview_event_handler("logo_preview")}
disabled={disable_inputs} {disabled}
formaction="?/delete_team" {required}
width="w-1/2" >
onclick={() => modalStore.close()} <svelte:fragment slot="message">
> <div class="inline-flex flex-nowrap items-center gap-2">
Delete <span class="font-bold">Upload Logo</span>
</Button> <LazyImage
{:else} src={team?.logo_url ?? get_team_logo_template(graphics)}
<Button id="logo_preview"
formaction="?/create_team" imgwidth={32}
color="tertiary" imgheight={32}
submit />
width="w-full" </div>
disabled={disable_inputs} </svelte:fragment>
onclick={() => modalStore.close()} </FileDropzone>
>
Create Team <!-- Save/Delete buttons -->
</Button> <div class="flex justify-end gap-2">
{/if} {#if team}
<Button formaction="?/update_team" color="secondary" {disabled} submit width="w-1/2">
Save
</Button>
<Button formaction="?/delete_team" color="primary" {disabled} submit width="w-1/2">
Delete
</Button>
{:else}
<Button formaction="?/create_team" color="tertiary" {disabled} submit width="w-full">
Create Team
</Button>
{/if}
</div>
</div> </div>
</div> </form>
</form> </Card>
</Card> {/await}

62
src/routes/data/season/teams/+page.svelte
View File

@ -3,11 +3,30 @@
import type { Team } from "$lib/schema"; import type { Team } from "$lib/schema";
import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton"; import { getModalStore, type ModalSettings, type ModalStore } from "@skeletonlabs/skeleton";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
import { get_by_value, get_team_banner_template, get_team_logo_template } from "$lib/database"; import { get_by_value } from "$lib/database";
let { data }: { data: PageData } = $props(); let { data }: { data: PageData } = $props();
const teams_columns: TableColumn[] = [ const modalStore: ModalStore = getModalStore();
const team_handler = async (event: Event, id?: string) => {
const team: Team | undefined = get_by_value(await data.teams, "id", id ?? "Invalid");
// If we expect to find a team but don't, abort
if (id && !team) return;
const modalSettings: ModalSettings = {
type: "component",
component: "teamCard",
meta: {
data,
team,
},
};
modalStore.trigger(modalSettings);
};
const teams_columns: TableColumn[] = $derived([
{ {
data_value_name: "name", data_value_name: "name",
label: "Name", label: "Name",
@ -20,47 +39,14 @@
valuefun: async (value: string): Promise<string> => valuefun: async (value: string): Promise<string> =>
`<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`, `<span class='badge border mr-2' style='color: ${value}; background: ${value};'>C</span>`,
}, },
]; ]);
const modalStore: ModalStore = getModalStore();
const teams_handler = async (event: Event, id: string) => {
const team: Team | undefined = get_by_value(await data.teams, "id", id);
if (!team) return;
const modalSettings: ModalSettings = {
type: "component",
component: "teamCard",
meta: {
team: team,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
const create_team_handler = async (event: Event) => {
const modalSettings: ModalSettings = {
type: "component",
component: "teamCard",
meta: {
banner_template: get_team_banner_template(await data.graphics),
logo_template: get_team_logo_template(await data.graphics),
require_inputs: true,
disable_inputs: !data.admin,
},
};
modalStore.trigger(modalSettings);
};
</script> </script>
<div class="pb-2"> <div class="pb-2">
<Button width="w-full" color="tertiary" onclick={create_team_handler} shadow> <Button width="w-full" color="tertiary" onclick={team_handler} shadow>
<span class="font-bold">Create New Team</span> <span class="font-bold">Create New Team</span>
</Button> </Button>
</div> </div>
{#await data.teams then teams} {#await data.teams then teams}
<Table data={teams} columns={teams_columns} handler={teams_handler} /> <Table data={teams} columns={teams_columns} handler={team_handler} />
{/await} {/await}