Migrate from DaisyUI to SkeletonUI
This commit is contained in:
@ -1,20 +1,24 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
id = "",
|
||||
name = "",
|
||||
formaction = "",
|
||||
label,
|
||||
children,
|
||||
color,
|
||||
disabled = false,
|
||||
submit = false,
|
||||
href = undefined,
|
||||
fullwidth = false,
|
||||
...restProps
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
<!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
|
||||
<button
|
||||
{id}
|
||||
{name}
|
||||
{formaction}
|
||||
{disabled}
|
||||
class="btn btn-{color}"
|
||||
style="--tw-bg-opacity: 1">{label}</button
|
||||
>
|
||||
{#if href}
|
||||
<a {href} class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
|
||||
{@render children()}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
type={submit ? "submit" : "button"}
|
||||
class="btn p-2 variant-filled-{color} {fullwidth ? 'w-full' : 'w-auto'}"
|
||||
{...restProps}
|
||||
>
|
||||
{@render children()}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
7
src/lib/components/Card.svelte
Normal file
7
src/lib/components/Card.svelte
Normal file
@ -0,0 +1,7 @@
|
||||
<script lang="ts">
|
||||
let { children, fullwidth = false, ...restProps } = $props();
|
||||
</script>
|
||||
|
||||
<div class="card bg-white p-2 shadow {fullwidth ? 'w-full' : 'w-auto'}" {...restProps}>
|
||||
{@render children()}
|
||||
</div>
|
||||
@ -1,35 +0,0 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
accept = "*",
|
||||
onchange = undefined,
|
||||
disabled = false,
|
||||
required = false,
|
||||
} = $props();
|
||||
</script>
|
||||
|
||||
{#if disabled}
|
||||
<!-- HACK: Set --tw-bg-opacity to 1 so the disabled label/button looks like the disabled input -->
|
||||
<label
|
||||
for={id}
|
||||
class="btn btn-disabled mt-2 w-full"
|
||||
style="--tw-bg-opacity: 1">{label}</label
|
||||
>
|
||||
{:else}
|
||||
<label for={id} class="btn btn-ghost input-bordered mt-2 w-full"
|
||||
>{label}</label
|
||||
>
|
||||
{/if}
|
||||
<input
|
||||
{id}
|
||||
{name}
|
||||
class="file-input file-input-bordered file-input-ghost"
|
||||
type="file"
|
||||
hidden
|
||||
{disabled}
|
||||
{required}
|
||||
{onchange}
|
||||
{accept}
|
||||
/>
|
||||
@ -1,29 +1,10 @@
|
||||
<script lang="ts">
|
||||
let {
|
||||
id,
|
||||
name,
|
||||
label,
|
||||
placeholder = "",
|
||||
type = "text",
|
||||
value = "",
|
||||
disabled = false,
|
||||
required = false,
|
||||
} = $props();
|
||||
let { children, type = "text", ...restProps } = $props();
|
||||
</script>
|
||||
|
||||
<label
|
||||
for={id}
|
||||
class="input input-bordered mt-2 flex !cursor-default select-none items-center gap-2"
|
||||
>
|
||||
{label}
|
||||
<input
|
||||
{id}
|
||||
{name}
|
||||
{type}
|
||||
class={disabled ? "pointer-events-none grow !cursor-default" : "grow"}
|
||||
{disabled}
|
||||
{required}
|
||||
{placeholder}
|
||||
{value}
|
||||
/>
|
||||
</label>
|
||||
<div class="input-group input-group-divider grid-cols-[auto_1fr_auto]">
|
||||
<div class="input-group-shim select-none text-neutral-900">
|
||||
{@render children()}
|
||||
</div>
|
||||
<input {type} {...restProps} />
|
||||
</div>
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
<script lang="ts">
|
||||
let { id, name, disabled = false } = $props();
|
||||
</script>
|
||||
|
||||
<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
{id}
|
||||
{name}
|
||||
type="password"
|
||||
class="grow"
|
||||
{disabled}
|
||||
required
|
||||
placeholder="Password"
|
||||
/>
|
||||
</label>
|
||||
@ -1,26 +0,0 @@
|
||||
<script lang="ts">
|
||||
let { id, name, value = "", disabled = false } = $props();
|
||||
</script>
|
||||
|
||||
<label for={id} class="input input-bordered mt-2 flex items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
|
||||
/>
|
||||
</svg>
|
||||
<input
|
||||
{id}
|
||||
{name}
|
||||
type="text"
|
||||
class="grow"
|
||||
{value}
|
||||
{disabled}
|
||||
required
|
||||
placeholder="Username"
|
||||
/>
|
||||
</label>
|
||||
@ -1,7 +1,9 @@
|
||||
import FileInput from "./FileInput.svelte";
|
||||
import Input from "./Input.svelte";
|
||||
import Password from "./Password.svelte";
|
||||
import Username from "./Username.svelte";
|
||||
import Button from "./Button.svelte";
|
||||
import Card from "./Card.svelte";
|
||||
|
||||
export { FileInput, Input, Username, Password, Button };
|
||||
import MenuDrawerIcon from "./svg/MenuDrawerIcon.svelte";
|
||||
import UserIcon from "./svg/UserIcon.svelte";
|
||||
import PasswordIcon from "./svg/PasswordIcon.svelte";
|
||||
|
||||
export { Input, Button, Card, MenuDrawerIcon, UserIcon, PasswordIcon };
|
||||
|
||||
14
src/lib/components/svg/MenuDrawerIcon.svelte
Normal file
14
src/lib/components/svg/MenuDrawerIcon.svelte
Normal file
@ -0,0 +1,14 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mt-1 h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h8m-8 6h16"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 254 B |
12
src/lib/components/svg/PasswordIcon.svelte
Normal file
12
src/lib/components/svg/PasswordIcon.svelte
Normal file
@ -0,0 +1,12 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 424 B |
10
src/lib/components/svg/UserIcon.svelte
Normal file
10
src/lib/components/svg/UserIcon.svelte
Normal file
@ -0,0 +1,10 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 16 16"
|
||||
fill="currentColor"
|
||||
class="h-4 w-4 opacity-70"
|
||||
>
|
||||
<path
|
||||
d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM12.735 14c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139h9.47Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 279 B |
@ -1,11 +1,37 @@
|
||||
export const get_image_preview_event_handler = (id: string) => {
|
||||
const handler = (event) => {
|
||||
const target = event.target;
|
||||
const files = target.files;
|
||||
/**
|
||||
* Use this on <Avatar> components.
|
||||
*/
|
||||
export const get_avatar_preview_event_handler = (id: string) => {
|
||||
const handler = (event: Event) => {
|
||||
const target: HTMLInputElement = event.target as HTMLInputElement;
|
||||
const files: FileList | null = target.files;
|
||||
|
||||
if (files.length > 0) {
|
||||
const src = URL.createObjectURL(files[0]);
|
||||
const preview = document.getElementById(id) as HTMLImageElement;
|
||||
if (files && files.length > 0) {
|
||||
const src: string = URL.createObjectURL(files[0]);
|
||||
const preview: HTMLImageElement = document.querySelector(
|
||||
`#${id} > img:first-of-type`,
|
||||
) as HTMLImageElement;
|
||||
if (preview) {
|
||||
preview.src = src;
|
||||
preview.hidden = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return handler;
|
||||
};
|
||||
|
||||
/**
|
||||
* Use this on raw <img> elements.
|
||||
*/
|
||||
export const get_image_preview_event_handler = (id: string) => {
|
||||
const handler = (event: Event) => {
|
||||
const target: HTMLInputElement = event.target as HTMLInputElement;
|
||||
const files: FileList | null = target.files;
|
||||
|
||||
if (files && files.length > 0) {
|
||||
const src: string = URL.createObjectURL(files[0]);
|
||||
const preview: HTMLImageElement = document.getElementById(id) as HTMLImageElement;
|
||||
if (preview) {
|
||||
preview.src = src;
|
||||
preview.hidden = false;
|
||||
|
||||
@ -2,182 +2,221 @@
|
||||
import "../app.css";
|
||||
import type { Snippet } from "svelte";
|
||||
import type { LayoutData } from "./$types";
|
||||
import { FileInput, Password, Username } from "$lib/components";
|
||||
import { get_image_preview_event_handler } from "$lib/image";
|
||||
import { Button, MenuDrawerIcon, UserIcon, Input, PasswordIcon, Card } from "$lib/components";
|
||||
import { get_avatar_preview_event_handler, get_image_preview_event_handler } from "$lib/image";
|
||||
import {
|
||||
AppBar,
|
||||
popup,
|
||||
storePopup,
|
||||
type PopupSettings,
|
||||
initializeStores,
|
||||
Drawer,
|
||||
getDrawerStore,
|
||||
type DrawerSettings,
|
||||
Avatar,
|
||||
FileDropzone,
|
||||
} from "@skeletonlabs/skeleton";
|
||||
import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
|
||||
|
||||
let { data, children }: { data: LayoutData; children: Snippet } = $props();
|
||||
|
||||
// Drawer config
|
||||
initializeStores();
|
||||
const drawerStore = getDrawerStore();
|
||||
|
||||
const menu_drawer = () => {
|
||||
const drawerSettings: DrawerSettings = {
|
||||
id: "menu_drawer",
|
||||
position: "top",
|
||||
height: "auto",
|
||||
padding: "lg:px-96",
|
||||
};
|
||||
drawerStore.open(drawerSettings);
|
||||
};
|
||||
|
||||
const data_drawer = () => {
|
||||
const drawerSettings: DrawerSettings = {
|
||||
id: "data_drawer",
|
||||
position: "top",
|
||||
height: "auto",
|
||||
padding: "lg:px-96",
|
||||
};
|
||||
drawerStore.open(drawerSettings);
|
||||
};
|
||||
|
||||
const login_drawer = () => {
|
||||
const drawerSettings: DrawerSettings = {
|
||||
id: "login_drawer",
|
||||
position: "top",
|
||||
height: "auto",
|
||||
padding: "lg:px-96",
|
||||
};
|
||||
drawerStore.open(drawerSettings);
|
||||
};
|
||||
|
||||
const profile_drawer = () => {
|
||||
const drawerSettings: DrawerSettings = {
|
||||
id: "profile_drawer",
|
||||
position: "top",
|
||||
height: "auto",
|
||||
padding: "lg:px-96",
|
||||
};
|
||||
drawerStore.open(drawerSettings);
|
||||
};
|
||||
|
||||
const close_drawer = () => drawerStore.close();
|
||||
|
||||
// Popups config
|
||||
storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
|
||||
|
||||
// Example: https://www.skeleton.dev/utilities/popups
|
||||
// const data_popup_settings: PopupSettings = {
|
||||
// event: "click",
|
||||
// target: "data_popup",
|
||||
// placement: "bottom",
|
||||
// middleware: {
|
||||
// offset: { mainAxis: 22, crossAxis: 0 },
|
||||
// // shift: { mainAxis: true, crossAxis: false },
|
||||
// },
|
||||
// };
|
||||
</script>
|
||||
|
||||
<Drawer>
|
||||
{#if $drawerStore.id === "menu_drawer"}
|
||||
<!-- Menu Drawer -->
|
||||
<!-- Menu Drawer -->
|
||||
<!-- Menu Drawer -->
|
||||
<div class="p-2 pt-0 *:mt-2">
|
||||
<Button href="/racepicks" onclick={close_drawer} color="surface" fullwidth>Race Picks</Button>
|
||||
<Button href="/seasonpicks" onclick={close_drawer} color="surface" fullwidth
|
||||
>Season Picks
|
||||
</Button>
|
||||
<Button href="/leaderboard" onclick={close_drawer} color="surface" fullwidth
|
||||
>Leaderboard
|
||||
</Button>
|
||||
<Button href="/statistics" onclick={close_drawer} color="surface" fullwidth
|
||||
>Statistics
|
||||
</Button>
|
||||
<Button href="/rules" onclick={close_drawer} color="surface" fullwidth>Rules</Button>
|
||||
</div>
|
||||
{:else if $drawerStore.id === "data_drawer"}
|
||||
<!-- Data Drawer -->
|
||||
<!-- Data Drawer -->
|
||||
<!-- Data Drawer -->
|
||||
<div class="p-2 pt-0 *:mt-2">
|
||||
<Button href="/data/seasondata/teams" onclick={close_drawer} color="surface" fullwidth
|
||||
>Season</Button
|
||||
>
|
||||
<Button href="/data/userdata" onclick={close_drawer} color="surface" fullwidth>Users</Button>
|
||||
</div>
|
||||
{:else if $drawerStore.id === "login_drawer"}
|
||||
<!-- Login Drawer -->
|
||||
<!-- Login Drawer -->
|
||||
<!-- Login Drawer -->
|
||||
<div class="p-2">
|
||||
<h4 class="h4 select-none">Enter Username and Password</h4>
|
||||
<form method="POST" class="*:mt-2">
|
||||
<Input name="username" placeholder="Username" required>
|
||||
<UserIcon />
|
||||
</Input>
|
||||
<Input name="password" type="password" placeholder="Password" required
|
||||
><PasswordIcon />
|
||||
</Input>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button formaction="/user?/login" onclick={close_drawer} color="tertiary" submit
|
||||
>Login</Button
|
||||
>
|
||||
<Button formaction="/user?/create" onclick={close_drawer} color="tertiary" submit
|
||||
>Register</Button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{:else if $drawerStore.id === "profile_drawer"}
|
||||
<!-- Profile Drawer -->
|
||||
<!-- Profile Drawer -->
|
||||
<!-- Profile Drawer -->
|
||||
<div class="p-2">
|
||||
<h4 class="h4 select-none">Edit Profile</h4>
|
||||
<form method="POST" enctype="multipart/form-data" class="*:mt-2">
|
||||
<input type="hidden" name="id" value={data.user.id} />
|
||||
<Input name="username" value={data.user.username} placeholder="Username"><UserIcon /></Input
|
||||
>
|
||||
<FileDropzone
|
||||
name="avatar"
|
||||
onchange={get_avatar_preview_event_handler("user_avatar_preview")}
|
||||
>
|
||||
<svelte:fragment slot="message"><b>Upload Avatar</b> or Drag and Drop</svelte:fragment>
|
||||
</FileDropzone>
|
||||
<div class="flex justify-end gap-2">
|
||||
<Button formaction="/user?/update" onclick={close_drawer} color="secondary" submit
|
||||
>Save Changes</Button
|
||||
>
|
||||
<Button formaction="/user?/logout" onclick={close_drawer} color="primary" submit
|
||||
>Logout</Button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
</Drawer>
|
||||
|
||||
<nav>
|
||||
<!-- TODO: Make this stick to the top somehow. -->
|
||||
<!-- Fixed breaks the flexbox and sticky doesn't work. -->
|
||||
<div class="navbar h-16 bg-primary shadow">
|
||||
<div class="navbar-start">
|
||||
<!-- Side menu be visible on low width devices -->
|
||||
<div class="dropdown">
|
||||
<!-- Side menu open/close icon -->
|
||||
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h8m-8 6h16"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Side menu navigation items -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
|
||||
>
|
||||
<li><a draggable="false" href="/racepicks">Race Picks</a></li>
|
||||
<li><a draggable="false" href="/seasonpicks">Season Picks</a></li>
|
||||
<li><a draggable="false" href="/leaderboard">Leaderboard</a></li>
|
||||
<li><a draggable="false" href="/statistics">Statistics</a></li>
|
||||
<li><a draggable="false" href="/rules">Rules</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Fixed breaks flexbox and sticky doesn't work. -->
|
||||
<AppBar
|
||||
slotDefault="place-self-center"
|
||||
slotTrail="place-content-end"
|
||||
background="bg-primary-500"
|
||||
shadow="shadow"
|
||||
padding="p-2"
|
||||
>
|
||||
<svelte:fragment slot="lead">
|
||||
<!-- Navigation drawer -->
|
||||
<button
|
||||
class="variant-filled-primary btn p-2 lg:hidden"
|
||||
style="height: 44px;"
|
||||
onclick={menu_drawer}
|
||||
>
|
||||
<MenuDrawerIcon />
|
||||
</button>
|
||||
|
||||
<!-- Site logo -->
|
||||
<a href="/" draggable="false" class="btn btn-ghost select-none text-xl"
|
||||
>Formula 11</a
|
||||
<a
|
||||
href="/"
|
||||
draggable="false"
|
||||
class="variant-filled-primary btn ml-2 select-none p-2 text-xl lg:ml-0">Formula 11</a
|
||||
>
|
||||
</svelte:fragment>
|
||||
|
||||
<!-- Large navigation -->
|
||||
<div class="hidden lg:block">
|
||||
<a href="/racepicks" class="variant-filled-primary btn p-2">Race Picks</a>
|
||||
<a href="/seasonpicks" class="variant-filled-primary btn p-2">Season Picks</a>
|
||||
<a href="/leaderboard" class="variant-filled-primary btn p-2">Leaderboard</a>
|
||||
<a href="/statistics" class="variant-filled-primary btn p-2">Statistics</a>
|
||||
<a href="/rules" class="variant-filled-primary btn p-2">Rules</a>
|
||||
</div>
|
||||
|
||||
<!-- Centered navigation -->
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
<li>
|
||||
<a draggable="false" class="btn btn-ghost btn-sm" href="/racepicks"
|
||||
>Race Picks</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a draggable="false" class="btn btn-ghost btn-sm" href="/seasonpicks"
|
||||
>Season Picks</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a draggable="false" class="btn btn-ghost btn-sm" href="/leaderboard"
|
||||
>Leaderboard</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a draggable="false" class="btn btn-ghost btn-sm" href="/statistics"
|
||||
>Statistics</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a draggable="false" class="btn btn-ghost btn-sm" href="/rules"
|
||||
>Rules</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<svelte:fragment slot="trail">
|
||||
<!-- Data drawer -->
|
||||
<Button color="primary" onclick={data_drawer}>Data</Button>
|
||||
|
||||
<div class="navbar-end">
|
||||
<!-- Admin button -->
|
||||
<div class="dropdown dropdown-end mr-2">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost">Data</div>
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<ul
|
||||
tabindex="0"
|
||||
class="menu dropdown-content z-[1] mt-4 w-52 rounded-box border bg-base-100 p-2 shadow"
|
||||
>
|
||||
<li>
|
||||
<a draggable="false" href="/data/seasondata/teams">Season Data</a>
|
||||
</li>
|
||||
<li><a draggable="false" href="/data/userdata">User Data</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Login/profile stuff -->
|
||||
<!-- Login/Profile drawer -->
|
||||
{#if !data.user}
|
||||
<!-- No user is logged in -->
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost m-1">Login</div>
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div
|
||||
tabindex="0"
|
||||
class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
|
||||
>
|
||||
<h1 class="text-lg">Enter Username and Password</h1>
|
||||
<form method="POST">
|
||||
<Username id="signin_username" name="username" />
|
||||
<Password id="signin_password" name="password" />
|
||||
<div class="card-actions mt-2 justify-end">
|
||||
<button
|
||||
formaction="/user?/create"
|
||||
type="button"
|
||||
class="btn btn-accent">Register</button
|
||||
>
|
||||
<button
|
||||
formaction="/user?/login"
|
||||
type="submit"
|
||||
class="btn btn-accent">Login</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<Button color="primary" onclick={login_drawer}>Login</Button>
|
||||
{:else}
|
||||
<!-- The user is logged in -->
|
||||
<div class="dropdown dropdown-end">
|
||||
<div tabindex="0" role="button" class="avatar ml-2 mr-2">
|
||||
<div class="mask mask-squircle w-10">
|
||||
<img
|
||||
id="user_avatar_preview"
|
||||
src={data.user.avatar_url}
|
||||
alt="User avatar"
|
||||
class="select-none"
|
||||
draggable="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<div
|
||||
tabindex="0"
|
||||
class="menu dropdown-content z-[1] mt-4 w-[150] rounded-box border bg-base-100 p-2 shadow"
|
||||
>
|
||||
<h1 class="select-none text-lg">Edit Profile</h1>
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
<input type="hidden" name="id" value={data.user.id} />
|
||||
<Username
|
||||
id="update_username"
|
||||
name="username"
|
||||
value={data.user.username}
|
||||
/>
|
||||
<FileInput
|
||||
id="update_avatar"
|
||||
name="avatar"
|
||||
label="Upload Avatar"
|
||||
onchange={get_image_preview_event_handler(
|
||||
"user_avatar_preview",
|
||||
)}
|
||||
/>
|
||||
<div class="card-actions mt-2 justify-end">
|
||||
<button formaction="/user?/update" class="btn btn-secondary"
|
||||
>Save Changes</button
|
||||
>
|
||||
<button formaction="/user?/logout" class="btn btn-primary"
|
||||
>Logout</button
|
||||
>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<Avatar
|
||||
id="user_avatar_preview"
|
||||
src={data.user.avatar_url}
|
||||
rounded="rounded-full"
|
||||
width="w-10"
|
||||
onclick={profile_drawer}
|
||||
cursor="cursor-pointer"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
</AppBar>
|
||||
</nav>
|
||||
|
||||
<!-- Each child's contents will be inserted here -->
|
||||
|
||||
@ -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