Lib: Move teamcard into cards/ + implement new team schema
This commit is contained in:
@ -1,93 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { get_image_preview_event_handler } from "$lib/image";
|
||||
import { FileDropzone } from "@skeletonlabs/skeleton";
|
||||
import Button from "./Button.svelte";
|
||||
import type { Team } from "$lib/schema";
|
||||
import Input from "./Input.svelte";
|
||||
import {
|
||||
TEAM_CARD_ASPECT_HEIGHT,
|
||||
TEAM_CARD_ASPECT_WIDTH,
|
||||
TEAM_LOGO_HEIGHT,
|
||||
TEAM_LOGO_WIDTH,
|
||||
} from "$lib/config";
|
||||
import LazyCard from "./LazyCard.svelte";
|
||||
|
||||
interface TeamCardProps {
|
||||
/** The [Team] object used to prefill values. */
|
||||
team?: Team | undefined;
|
||||
|
||||
/** Disable all inputs if [true] */
|
||||
disable_inputs?: boolean;
|
||||
|
||||
/** Require all inputs if [true] */
|
||||
require_inputs?: boolean;
|
||||
|
||||
/** The [src] of the team logo template preview */
|
||||
logo_template?: string;
|
||||
}
|
||||
|
||||
let {
|
||||
team = undefined,
|
||||
disable_inputs = false,
|
||||
require_inputs = false,
|
||||
logo_template = "",
|
||||
}: TeamCardProps = $props();
|
||||
</script>
|
||||
|
||||
<LazyCard
|
||||
cardwidth={TEAM_CARD_ASPECT_WIDTH}
|
||||
cardheight={TEAM_CARD_ASPECT_HEIGHT}
|
||||
imgsrc={team?.logo_url ?? logo_template}
|
||||
imgwidth={TEAM_LOGO_WIDTH}
|
||||
imgheight={TEAM_LOGO_HEIGHT}
|
||||
imgid="update_team_logo_preview_{team?.id ?? 'create'}"
|
||||
>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<!-- This is also disabled, because the ID should only be -->
|
||||
<!-- "leaked" to users that are allowed to use the inputs -->
|
||||
{#if team && !disable_inputs}
|
||||
<input name="id" type="hidden" value={team.id} />
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Team name input -->
|
||||
<Input
|
||||
id="team_name_{team?.id ?? 'create'}"
|
||||
name="name"
|
||||
value={team?.name ?? ""}
|
||||
autocomplete="off"
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>
|
||||
Name
|
||||
</Input>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_{team?.id ?? 'create'}"
|
||||
onchange={get_image_preview_event_handler(
|
||||
`update_team_logo_preview_${team?.id ?? "create"}`,
|
||||
)}
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>
|
||||
<svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Save/Delete buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
{#if team}
|
||||
<Button formaction="?/update_team" color="secondary" disabled={disable_inputs} submit>
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button color="primary" submit disabled={disable_inputs} formaction="?/delete_team">
|
||||
Delete
|
||||
</Button>
|
||||
{:else}
|
||||
<Button formaction="?/create_team" color="tertiary" submit>Create Team</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</LazyCard>
|
||||
160
src/lib/components/cards/TeamCard.svelte
Normal file
160
src/lib/components/cards/TeamCard.svelte
Normal file
@ -0,0 +1,160 @@
|
||||
<script lang="ts">
|
||||
import { get_image_preview_event_handler } from "$lib/image";
|
||||
import { FileDropzone } from "@skeletonlabs/skeleton";
|
||||
import { Button, Input, LazyImage } from "$lib/components";
|
||||
import type { Team } from "$lib/schema";
|
||||
import {
|
||||
TEAM_CARD_ASPECT_HEIGHT,
|
||||
TEAM_CARD_ASPECT_WIDTH,
|
||||
TEAM_BANNER_HEIGHT,
|
||||
TEAM_BANNER_WIDTH,
|
||||
TEAM_LOGO_WIDTH,
|
||||
TEAM_LOGO_HEIGHT,
|
||||
} from "$lib/config";
|
||||
import LazyCard from "./LazyCard.svelte";
|
||||
|
||||
interface TeamCardProps {
|
||||
/** The [Team] object used to prefill values. */
|
||||
team?: Team | undefined;
|
||||
|
||||
/** 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 {
|
||||
team = undefined,
|
||||
disable_inputs = false,
|
||||
require_inputs = false,
|
||||
banner_template = "",
|
||||
logo_template = "",
|
||||
}: TeamCardProps = $props();
|
||||
|
||||
const labelwidth: string = "110px";
|
||||
|
||||
let colorpreview: string = $state(team?.color ?? "white");
|
||||
</script>
|
||||
|
||||
<LazyCard
|
||||
cardwidth={TEAM_CARD_ASPECT_WIDTH}
|
||||
cardheight={TEAM_CARD_ASPECT_HEIGHT}
|
||||
imgsrc={team?.banner_url ?? banner_template}
|
||||
imgwidth={TEAM_BANNER_WIDTH}
|
||||
imgheight={TEAM_BANNER_HEIGHT}
|
||||
imgid="update_team_banner_preview_{team?.id ?? 'create'}"
|
||||
>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<!-- This is also disabled, because the ID should only be -->
|
||||
<!-- "leaked" to users that are allowed to use the inputs -->
|
||||
{#if team && !disable_inputs}
|
||||
<input name="id" type="hidden" value={team.id} />
|
||||
{/if}
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
<!-- Team name input -->
|
||||
<Input
|
||||
id="team_name_{team?.id ?? 'create'}"
|
||||
name="name"
|
||||
value={team?.name ?? ""}
|
||||
{labelwidth}
|
||||
autocomplete="off"
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>
|
||||
Name
|
||||
</Input>
|
||||
|
||||
<!-- Team color input -->
|
||||
<Input
|
||||
id="team_color_{team?.id ?? 'create'}"
|
||||
name="color"
|
||||
value={team?.color ?? ""}
|
||||
{labelwidth}
|
||||
autocomplete="off"
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
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"><b>Upload Banner</b></svelte:fragment>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_{team?.id ?? 'create'}"
|
||||
onchange={get_image_preview_event_handler(
|
||||
`update_team_logo_preview_${team?.id ?? "create"}`,
|
||||
)}
|
||||
disabled={disable_inputs}
|
||||
required={require_inputs}
|
||||
>
|
||||
<svelte:fragment slot="message">
|
||||
<div class="inline-flex flex-nowrap items-center gap-2">
|
||||
<b>Upload Logo</b>
|
||||
<LazyImage
|
||||
src={team?.logo_url ?? logo_template}
|
||||
imgwidth={TEAM_LOGO_WIDTH}
|
||||
imgheight={TEAM_LOGO_HEIGHT}
|
||||
imgstyle="width: 32px; height: 32px;"
|
||||
id="update_team_logo_preview_{team?.id ?? 'create'}"
|
||||
/>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Save/Delete buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
{#if team}
|
||||
<Button
|
||||
formaction="?/update_team"
|
||||
color="secondary"
|
||||
disabled={disable_inputs}
|
||||
submit
|
||||
width="w-1/2"
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color="primary"
|
||||
submit
|
||||
disabled={disable_inputs}
|
||||
formaction="?/delete_team"
|
||||
width="w-1/2"
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
{:else}
|
||||
<Button formaction="?/create_team" color="tertiary" submit width="w-full"
|
||||
>Create Team</Button
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</LazyCard>
|
||||
Reference in New Issue
Block a user