From 76a5388e1855874732c655438850e59f92a89a4f Mon Sep 17 00:00:00 2001 From: Christoph Urlacher Date: Thu, 6 Feb 2025 23:09:40 +0100 Subject: [PATCH] Lib: Reorder card scripts --- src/lib/components/cards/DriverCard.svelte | 6 ++- src/lib/components/cards/RaceCard.svelte | 52 ++++++++++--------- .../components/cards/SubstitutionCard.svelte | 34 ++++++------ src/lib/components/cards/TeamCard.svelte | 18 +++---- 4 files changed, 56 insertions(+), 54 deletions(-) diff --git a/src/lib/components/cards/DriverCard.svelte b/src/lib/components/cards/DriverCard.svelte index aec3254..a119748 100644 --- a/src/lib/components/cards/DriverCard.svelte +++ b/src/lib/components/cards/DriverCard.svelte @@ -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); diff --git a/src/lib/components/cards/RaceCard.svelte b/src/lib/components/cards/RaceCard.svelte index 0d03afc..2f472be 100644 --- a/src/lib/components/cards/RaceCard.svelte +++ b/src/lib/components/cards/RaceCard.svelte @@ -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); + } + } {#await data.graphics then graphics} @@ -79,7 +81,7 @@ 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 @@ {#await data.graphics then graphics} @@ -57,7 +60,7 @@ { - colorpreview = (event.target as HTMLInputElement).value; - }} {labelwidth} {disabled} {required} > Color - + C