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

Lib: Reorder card scripts

Browse Source
This commit is contained in:
Christoph Urlacher
2025-02-06 23:09:40 +01:00
parent bbd700f755
commit 76a5388e18
4 changed files with 56 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,10 +31,12 @@
driver = meta.driver;
}
const required: boolean = $derived(!driver);
const disabled: boolean = $derived(!data.admin);
// Constants
const labelwidth: string = "120px";
// Reactive state
let required: boolean = $derived(!driver);
let disabled: boolean = $derived(!data.admin);
let team_select_value: string = $state(driver?.team ?? "");
let active_value: boolean = $state(driver?.active ?? true);
</script>

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

@ -3,10 +3,10 @@
import { FileDropzone, getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
import { Button, Card, Input } from "$lib/components";
import type { Race, SkeletonData } from "$lib/schema";
import { format } from "date-fns";
import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
import { enhance } from "$app/forms";
import { get_race_pictogram_template } from "$lib/database";
import { format_date } from "$lib/date";
interface RaceCardProps {
/** Data passed from the page context */
@ -26,32 +26,34 @@
race = meta.race;
}
// Constants
const labelwidth = "80px";
const dateformat: string = "yyyy-MM-dd'T'HH:mm";
const clear_sprint = () => {
(document.getElementById("sqdate") as HTMLInputElement).value = "";
(document.getElementById("sdate") as HTMLInputElement).value = "";
};
const required: boolean = $derived(!race);
const disabled: boolean = $derived(!data.admin);
const labelwidth = "80px";
// Dates have to be formatted to datetime-local format
const dateformat: string = "yyyy-MM-dd'T'HH:mm";
const sprintqualidate: string | undefined = $derived(
race?.sprintqualidate ? format(new Date(race.sprintqualidate), dateformat) : undefined,
);
const sprintdate: string | undefined = $derived(
race?.sprintdate ? format(new Date(race.sprintdate), dateformat) : undefined,
);
const qualidate: string | undefined = $derived(
race ? format(new Date(race.qualidate), dateformat) : undefined,
);
const racedate: string | undefined = $derived(
race ? format(new Date(race.racedate), dateformat) : undefined,
);
// Reactive state
let required: boolean = $derived(!race);
let disabled: boolean = $derived(!data.admin);
let name_value: string = $state(race?.name ?? "");
let step_value: string = $state(race?.step.toString() ?? "");
let pxx_value: string = $state(race?.pxx.toString() ?? "");
let sprintqualidate_value: string = $state("");
let sprintdate_value: string = $state("");
let qualidate_value: string = $state("");
let racedate_value: string = $state("");
if (race) {
if (race.sprintqualidate && race.sprintdate) {
sprintqualidate_value = format_date(race.sprintqualidate, dateformat);
sprintdate_value = format_date(race.sprintdate, dateformat);
qualidate_value = format_date(race.qualidate, dateformat);
racedate_value = format_date(race.racedate, dateformat);
}
}
</script>
{#await data.graphics then graphics}
@ -79,7 +81,7 @@
<!-- Driver name input -->
<Input
name="name"
value={race?.name ?? ""}
bind:value={name_value}
autocomplete="off"
{labelwidth}
{disabled}
@ -118,7 +120,7 @@
<Input
id="sqdate"
name="sprintqualidate"
value={sprintqualidate ?? ""}
bind:value={sprintqualidate_value}
autocomplete="off"
type="datetime-local"
{labelwidth}
@ -129,7 +131,7 @@
<Input
id="sdate"
name="sprintdate"
value={sprintdate ?? ""}
bind:value={sprintdate_value}
autocomplete="off"
type="datetime-local"
{labelwidth}
@ -139,7 +141,7 @@
</Input>
<Input
name="qualidate"
value={qualidate ?? ""}
bind:value={qualidate_value}
autocomplete="off"
type="datetime-local"
{labelwidth}
@ -150,7 +152,7 @@
</Input>
<Input
name="racedate"
value={racedate ?? ""}
bind:value={racedate_value}
autocomplete="off"
type="datetime-local"
{labelwidth}

34
src/lib/components/cards/SubstitutionCard.svelte
View File

@ -1,8 +1,7 @@
<script lang="ts">
import { Card, Button, Dropdown } from "$lib/components";
import type { Driver, Race, SkeletonData, Substitution } from "$lib/schema";
import type { Driver, SkeletonData, Substitution } from "$lib/schema";
import { get_by_value, get_driver_headshot_template } from "$lib/database";
import type { Action } from "svelte/action";
import { getModalStore, type ModalStore } from "@skeletonlabs/skeleton";
import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
import { driver_dropdown_options, race_dropdown_options } from "$lib/dropdown";
@ -30,23 +29,22 @@
let drivers: Driver[] | undefined = $state(undefined);
data.drivers.then((d: Driver[]) => (drivers = d));
const active_drivers = (drivers: Driver[]): Driver[] =>
drivers.filter((driver: Driver) => driver.active);
const inactive_drivers = (drivers: Driver[]): Driver[] =>
drivers.filter((driver: Driver) => !driver.active);
const required: boolean = $derived(!substitution);
const disabled: boolean = $derived(!data.admin);
// Constants
const labelwidth: string = "120px";
let substitute_select_value: string = $state(substitution?.substitute ?? "");
let driver_select_value: string = $state(substitution?.for ?? "");
let race_select_value: string = $state(substitution?.race ?? "");
// Reactive state
let required: boolean = $derived(!substitution);
let disabled: boolean = $derived(!data.admin);
let active_drivers: Driver[] = $derived((drivers ?? []).filter((d: Driver) => d.active));
let inactive_drivers: Driver[] = $derived((drivers ?? []).filter((d: Driver) => !d.active));
let substitute_value: string = $state(substitution?.substitute ?? "");
let driver_value: string = $state(substitution?.for ?? "");
let race_value: string = $state(substitution?.race ?? "");
// Update preview
$effect(() => {
if (!drivers) return;
const src: string = get_by_value(drivers, "id", substitute_select_value)?.headshot_url ?? "";
const src: string = get_by_value(drivers, "id", substitute_value)?.headshot_url ?? "";
const img: HTMLImageElement = document.getElementById("headshot_preview") as HTMLImageElement;
if (img) img.src = src;
});
@ -78,8 +76,8 @@
<!-- Substitute select -->
<Dropdown
name="substitute"
bind:value={substitute_select_value}
options={driver_dropdown_options(inactive_drivers(drivers))}
bind:value={substitute_value}
options={driver_dropdown_options(inactive_drivers)}
{labelwidth}
{disabled}
{required}
@ -90,8 +88,8 @@
<!-- Driver select -->
<Dropdown
name="for"
bind:value={driver_select_value}
options={driver_dropdown_options(active_drivers(drivers))}
bind:value={driver_value}
options={driver_dropdown_options(active_drivers)}
{labelwidth}
{disabled}
{required}
@ -103,7 +101,7 @@
{#await data.races then races}
<Dropdown
name="race"
bind:value={race_select_value}
bind:value={race_value}
options={race_dropdown_options(races)}
{labelwidth}
{disabled}

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

@ -25,11 +25,14 @@
team = meta.team;
}
const required: boolean = $derived(!team);
const disabled: boolean = $derived(!data.admin);
// Constants
const labelwidth: string = "110px";
let colorpreview: string = $state(team?.color ?? "Invalid");
// Reactive state
let required: boolean = $derived(!team);
let disabled: boolean = $derived(!data.admin);
let name_value: string = $state(team?.name ?? "");
let color_value: string = $state(team?.color ?? "");
</script>
{#await data.graphics then graphics}
@ -57,7 +60,7 @@
<!-- Team name input -->
<Input
name="name"
value={team?.name ?? ""}
bind:value={name_value}
autocomplete="off"
{labelwidth}
{disabled}
@ -69,20 +72,17 @@
<!-- Team color input -->
<Input
name="color"
value={team?.color ?? ""}
bind:value={color_value}
autocomplete="off"
placeholder="Enter as '#XXXXXX'"
minlength={7}
maxlength={7}
oninput={(event: Event) => {
colorpreview = (event.target as HTMLInputElement).value;
}}
{labelwidth}
{disabled}
{required}
>
Color
<span class="badge ml-2 border" style="color: {colorpreview}; background: {colorpreview}">
<span class="badge ml-2 border" style="color: {color_value}; background: {color_value}">
C
</span>
</Input>