Update

src/components/admin/pages/event/EventEdit.svelte

@@ -30,26 +30,30 @@
 
     dayjs.extend(utc);
 
-    export let data: ExtendedEvent;
-    let event = data.event;
-    let name = event.name;
-    let deadline = dayjs(event.deadline).utc(true).toISOString().slice(0, -1);
-    let start = dayjs(event.start).utc(true).toISOString().slice(0, -1);
-    let end = dayjs(event.end).utc(true).toISOString().slice(0, -1);
-    let member = event.maxTeamMembers;
-    let schemType = event.schemType;
-    let publicOnly = event.publicSchemsOnly;
+  interface Props {
+    data: ExtendedEvent;
+  }
+
+  let { data }: Props = $props();
+    let event = $state(data.event);
+    let name = $state(event.name);
+    let deadline = $state(dayjs(event.deadline).utc(true).toISOString().slice(0, -1));
+    let start = $state(dayjs(event.start).utc(true).toISOString().slice(0, -1));
+    let end = $state(dayjs(event.end).utc(true).toISOString().slice(0, -1));
+    let member = $state(event.maxTeamMembers);
+    let schemType = $state(event.schemType);
+    let publicOnly = $state(event.publicSchemsOnly);
     let addReferee: {name: string, id: number}[] = [];
     let removeReferee: {name: string, id: number}[] = [];
 
-    let errorOpen = false;
-    let error: any = undefined;
-    let deleteOpen = false;
+    let errorOpen = $state(false);
+    let error: any = $state(undefined);
+    let deleteOpen = $state(false);
 
-    $: deadlineDate = dayjs(deadline);
-    $: startDate = dayjs(start);
-    $: endDate = dayjs(end);
-    $: selectTypes = [{
+    let deadlineDate = $derived(dayjs(deadline));
+    let startDate = $derived(dayjs(start));
+    let endDate = $derived(dayjs(end));
+    let selectTypes = $derived([{
         value: null,
         name: "None"
     }, ...$schemTypes.map((type) => {
@@ -57,9 +61,9 @@
             value: type.db,
             name: type.name
         };
-    })];
+    })]);
 
-    $: changed = name !== event.name ||
+    let changed = $derived(name !== event.name ||
         deadlineDate.diff(dayjs(event.deadline)) !== 0 ||
         startDate.diff(dayjs(event.start)) !== 0 ||
         endDate.diff(dayjs(event.end)) !== 0 ||
@@ -67,7 +71,7 @@
         schemType != event.schemType ||
         publicOnly !== event.publicSchemsOnly ||
         addReferee.length > 0 ||
-        removeReferee.length > 0;
+        removeReferee.length > 0);
 
 
     async function del() {
@@ -80,7 +84,7 @@
         }
     }
 
-    let successToast: boolean = false;
+    let successToast: boolean = $state(false);
 
     async function update() {
         let ev: UpdateEvent = {
@@ -117,20 +121,26 @@
     </div>
     <div class="mt-4">
         <Label for="event-deadline">Deadline</Label>
-        <Input id="event-deadline" bind:value={name} class="w-80" let:props size="lg">
+        <Input id="event-deadline" bind:value={name} class="w-80"  size="lg">
+            {#snippet children({ props })}
             <input type="datetime-local" {...props} bind:value={deadline}/>
+                    {/snippet}
         </Input>
     </div>
     <div class="mt-4">
         <Label for="event-start">Start</Label>
-        <Input id="event-start" bind:value={name} class="w-80" let:props size="lg">
+        <Input id="event-start" bind:value={name} class="w-80"  size="lg">
+            {#snippet children({ props })}
             <input type="datetime-local" {...props} bind:value={start}/>
+                    {/snippet}
         </Input>
     </div>
     <div class="mt-4">
         <Label for="event-end">End</Label>
-        <Input id="event-end" bind:value={name} class="w-80" let:props size="lg">
+        <Input id="event-end" bind:value={name} class="w-80"  size="lg">
+            {#snippet children({ props })}
             <input type="datetime-local" {...props} bind:value={end}/>
+                    {/snippet}
         </Input>
     </div>
     <div class="mt-4">
@@ -159,6 +169,8 @@
 </Modal>
 
 <Toast bind:open={successToast} position="bottom-left" color="green">
-    <CheckCircleOutline slot="icon"/>
+    {#snippet icon()}
+    <CheckCircleOutline />
+  {/snippet}
     Updated Successfully
 </Toast>