Migrate from DaisyUI to SkeletonUI
This commit is contained in:
@ -1,34 +1,31 @@
|
||||
<script lang="ts">
|
||||
import { page } from "$app/stores";
|
||||
import { navigating, page } from "$app/stores";
|
||||
import { Tab, TabGroup } from "@skeletonlabs/skeleton";
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
let { children }: { children: Snippet } = $props();
|
||||
|
||||
// This has to be a function, so $page access is deferred to route switches
|
||||
const get_tab = () => {
|
||||
return $page.url.pathname.split("/").at(-1);
|
||||
let current_tab: number = $state(0);
|
||||
const tabs: { [tab: string]: number } = {
|
||||
teams: 0,
|
||||
drivers: 1,
|
||||
races: 2,
|
||||
};
|
||||
|
||||
navigating.subscribe((nav) => {
|
||||
if (!nav?.to?.url) return;
|
||||
|
||||
current_tab = tabs[nav.to.url.toString().split("/").at(-1) || "teams"];
|
||||
});
|
||||
</script>
|
||||
|
||||
<h1>Season Data</h1>
|
||||
|
||||
<div role="tablist" class="tabs-boxed tabs">
|
||||
<a
|
||||
href="teams"
|
||||
role="tab"
|
||||
class={get_tab() === "teams" ? "tab tab-active" : "tab"}>Teams</a
|
||||
>
|
||||
<a
|
||||
href="drivers"
|
||||
role="tab"
|
||||
class={get_tab() === "drivers" ? "tab tab-active" : "tab"}>Drivers</a
|
||||
>
|
||||
<a
|
||||
href="races"
|
||||
role="tab"
|
||||
class={get_tab() === "races" ? "tab tab-active" : "tab"}>Races</a
|
||||
>
|
||||
</div>
|
||||
<TabGroup justify="justify-center">
|
||||
<a href="teams"> <Tab bind:group={current_tab} name="teams" value={0}>Teams</Tab></a>
|
||||
<a href="drivers"><Tab bind:group={current_tab} name="drivers" value={1}>Drivers</Tab></a>
|
||||
<a href="races"><Tab bind:group={current_tab} name="races" value={2}>Races</Tab></a>
|
||||
</TabGroup>
|
||||
|
||||
<div>
|
||||
{@render children()}
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
import type { Actions, PageServerLoad } from "./$types";
|
||||
import {
|
||||
form_data_clean,
|
||||
form_data_ensure_keys,
|
||||
form_data_get_and_remove_id,
|
||||
} from "$lib/form";
|
||||
import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
|
||||
|
||||
// These "actions" run serverside only, as they're located inside +page.server.ts
|
||||
export const actions = {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from "./$types";
|
||||
import { Input, FileInput, Button } from "$lib/components";
|
||||
import { Input, Button, Card } from "$lib/components";
|
||||
import { get_image_preview_event_handler } from "$lib/image";
|
||||
import { FileDropzone } from "@skeletonlabs/skeleton";
|
||||
|
||||
let { data }: { data: PageData } = $props();
|
||||
</script>
|
||||
@ -10,109 +11,90 @@
|
||||
<title>F11 - Teams</title>
|
||||
</svelte:head>
|
||||
|
||||
<div
|
||||
class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6"
|
||||
>
|
||||
<div class="mt-2 grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-6">
|
||||
<!-- List all teams inside the database -->
|
||||
{#each data.teams as team}
|
||||
<div class="card card-bordered card-compact shadow">
|
||||
<Card>
|
||||
<!-- Logo display -->
|
||||
<figure>
|
||||
<img
|
||||
id="update_team_logo_preview_{team.id}"
|
||||
src={team.logo_url}
|
||||
alt="Logo of {team.name} F1 team."
|
||||
draggable="false"
|
||||
class="select-none"
|
||||
/>
|
||||
</figure>
|
||||
<img
|
||||
id="update_team_logo_preview_{team.id}"
|
||||
src={team.logo_url}
|
||||
alt="Logo of {team.name} F1 team."
|
||||
draggable="false"
|
||||
class="select-none rounded-container-token"
|
||||
/>
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<input name="id" type="hidden" value={team.id} />
|
||||
|
||||
<div class="card-body gap-0 !p-2 !pt-0">
|
||||
<Input
|
||||
id="team_name_{team.id}"
|
||||
name="name"
|
||||
value={team.name}
|
||||
label="Name:"
|
||||
disabled={!data.admin}
|
||||
/>
|
||||
<div class="*:mt-2">
|
||||
<Input id="team_name_{team.id}" name="name" value={team.name} disabled={!data.admin}
|
||||
>Name</Input
|
||||
>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileInput
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_{team.id}"
|
||||
name="logo"
|
||||
label="Upload Logo"
|
||||
onchange={get_image_preview_event_handler(
|
||||
`update_team_logo_preview_${team.id}`,
|
||||
)}
|
||||
onchange={get_image_preview_event_handler(`update_team_logo_preview_${team.id}`)}
|
||||
disabled={!data.admin}
|
||||
/>
|
||||
>
|
||||
<svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="card-actions mt-2 justify-end">
|
||||
<Button
|
||||
formaction="?/update"
|
||||
color="secondary"
|
||||
label="Save Changes"
|
||||
disabled={!data.admin}
|
||||
/>
|
||||
<Button
|
||||
formaction="?/delete"
|
||||
color="primary"
|
||||
label="Delete"
|
||||
disabled={!data.admin}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
<!-- Add a new team -->
|
||||
{#if data.admin}
|
||||
<div class="card card-bordered card-compact shadow">
|
||||
<!-- Logo preview -->
|
||||
<figure>
|
||||
<img
|
||||
id="create_team_logo_preview"
|
||||
src=""
|
||||
alt="Logo preview"
|
||||
class="select-none"
|
||||
draggable="false"
|
||||
hidden
|
||||
/>
|
||||
</figure>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="card-body">
|
||||
<h2 class="card-title select-none">Add a New Team</h2>
|
||||
|
||||
<!-- Team name input -->
|
||||
<Input id="team_name_create" name="name" label="Name:" required />
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileInput
|
||||
id="team_logo_create"
|
||||
name="logo"
|
||||
label="Upload Logo"
|
||||
onchange={get_image_preview_event_handler(
|
||||
"create_team_logo_preview",
|
||||
)}
|
||||
required
|
||||
/>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="card-actions justify-end">
|
||||
<!-- By specifying the formaction on the button (instead of action on the form), -->
|
||||
<!-- we can have multiple buttons with different actions in a single form. -->
|
||||
|
||||
<button formaction="?/create" class="btn btn-secondary"
|
||||
>Create</button
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button formaction="?/update" color="secondary" disabled={!data.admin} submit
|
||||
>Save Changes</Button
|
||||
>
|
||||
<Button formaction="?/delete" color="primary" disabled={!data.admin} submit
|
||||
>Delete</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
|
||||
<!-- Add a new team -->
|
||||
{#if data.admin}
|
||||
<Card>
|
||||
<!-- Logo preview -->
|
||||
<img
|
||||
id="create_team_logo_preview"
|
||||
src=""
|
||||
alt="Logo preview"
|
||||
class="select-none"
|
||||
draggable="false"
|
||||
hidden
|
||||
/>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<div class="*:mt-2">
|
||||
<h4 class="h4 select-none">Add a New Team</h4>
|
||||
|
||||
<!-- Team name input -->
|
||||
<Input id="team_name_create" name="name" required>Name</Input>
|
||||
|
||||
<!-- Logo upload -->
|
||||
<FileDropzone
|
||||
name="logo"
|
||||
id="team_logo_create"
|
||||
onchange={get_image_preview_event_handler("create_team_logo_preview")}
|
||||
disabled={!data.admin}
|
||||
required
|
||||
>
|
||||
<svelte:fragment slot="message"><b>Upload Logo</b> or Drag and Drop</svelte:fragment>
|
||||
</FileDropzone>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="flex justify-end gap-2">
|
||||
<!-- By specifying the formaction on the button (instead of action on the form), -->
|
||||
<!-- we can have multiple buttons with different actions in a single form. -->
|
||||
|
||||
<Button formaction="?/create" color="secondary" submit>Create</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user