Refactor code for consistency: standardize formatting and improve readability across multiple Svelte components

src/components/admin/components/FightEditPart.svelte

@@ -44,57 +44,77 @@
         map = $bindable(""),
         spectatePort = $bindable(null),
         group = $bindable(""),
-    groupSearch = $bindable("")
+        groupSearch = $bindable(""),
     }: Props = $props();
 
-    let selectableTeams = $derived(teams.map(team => {
+    let selectableTeams = $derived(
+        teams
+            .map((team) => {
                 return {
                     name: team.name,
-            value: team.id.toString()
+                    value: team.id.toString(),
                 };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
 
-    let selectableGamemodes = $derived($gamemodes.map(gamemode => {
+    let selectableGamemodes = $derived(
+        $gamemodes
+            .map((gamemode) => {
                 return {
                     name: gamemode,
-            value: gamemode
+                    value: gamemode,
                 };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
     let customGamemode = $derived(!selectableGamemodes.some((e) => e.name === gamemode) && gamemode !== "");
     let selectableCustomGamemode = $derived([
-        ...selectableGamemodes, {
+        ...selectableGamemodes,
+        {
             name: gamemode + " (custom)",
-            value: gamemode
+            value: gamemode,
-        }
+        },
     ]);
 
     let mapsStore = $derived(maps(gamemode));
-    let selectableMaps = $derived($mapsStore.map(map => {
+    let selectableMaps = $derived(
+        $mapsStore
+            .map((map) => {
                 return {
                     name: map,
-            value: map
+                    value: map,
                 };
-    }).sort((a, b) => a.name.localeCompare(b.name)));
+            })
+            .sort((a, b) => a.name.localeCompare(b.name))
+    );
     let customMap = $derived(!selectableMaps.some((e) => e.name === map) && map !== "");
     let selectableCustomMaps = $derived([
-        ...selectableMaps, {
+        ...selectableMaps,
+        {
             name: map + " (custom)",
-            value: map
+            value: map,
-        }
+        },
     ]);
 
-    let selectableGroups = $derived([{
+    let selectableGroups = $derived([
+        {
             name: "None",
-        value: ""
+            value: "",
-    }, {
+        },
+        {
             value: groupSearch,
-        name: `Create: '${groupSearch}'`
+            name: `Create: '${groupSearch}'`,
-    }, ...$groups.map(group => {
+        },
+        ...$groups
+            .map((group) => {
                 return {
                     name: group,
-            value: group
+                    value: group,
                 };
-    }).sort((a, b) => a.name.localeCompare(b.name))]);
+            })
+            .sort((a, b) => a.name.localeCompare(b.name)),
+    ]);
 </script>
 
 <div class="m-2">
@@ -115,13 +135,11 @@
 </div>
 <div class="m-2">
     <Label for="fight-gamemode">Gamemode</Label>
-    <Select items={customGamemode ? selectableCustomGamemode : selectableGamemodes} bind:value={gamemode}
+    <Select items={customGamemode ? selectableCustomGamemode : selectableGamemodes} bind:value={gamemode} id="fight-gamemode"></Select>
-            id="fight-gamemode"></Select>
 </div>
 <div class="m-2">
     <Label for="fight-maps">Map</Label>
-    <Select items={customMap ? selectableCustomMaps : selectableMaps} bind:value={map} id="fight-maps"
+    <Select items={customMap ? selectableCustomMaps : selectableMaps} bind:value={map} id="fight-maps" disabled={customGamemode} class={customGamemode ? "cursor-not-allowed" : ""}></Select>
-            disabled={customGamemode} class={customGamemode ? "cursor-not-allowed" : ""}></Select>
 </div>
 <div class="m-2">
     <Label for="fight-port">Spectate Port</Label>
@@ -133,6 +151,5 @@
 </div>
 <div class="m-2">
     <Label for="fight-kampf">Group</Label>
-    <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch}
+    <TypeAheadSearch items={selectableGroups} bind:selected={group} bind:searchValue={groupSearch} all></TypeAheadSearch>
-                     all></TypeAheadSearch>
 </div>

src/components/admin/pages/Perms.svelte

@@ -18,7 +18,7 @@
   -->
 
 <script lang="ts">
-  import { run, preventDefault } from 'svelte/legacy';
+    import { run, preventDefault } from "svelte/legacy";
 
     import { Button, Card, Checkbox, Input, Label, Navbar, NavBrand, Radio, Spinner } from "flowbite-svelte";
     import { ArrowLeftOutline } from "flowbite-svelte-icons";
@@ -62,7 +62,7 @@
         if (!id) {
             return;
         }
-        return $permsRepo.getPerms(id).then(value => {
+        return $permsRepo.getPerms(id).then((value) => {
             activePerms = value.perms;
             prefixEdit = value.prefix.name;
             return value;
@@ -72,7 +72,7 @@
     function togglePerm(perm: string) {
         return () => {
             if (activePerms.includes(perm)) {
-                activePerms = activePerms.filter(value => value !== perm);
+                activePerms = activePerms.filter((value) => value !== perm);
             } else {
                 activePerms = [...activePerms, perm];
             }
@@ -80,7 +80,7 @@
     }
 
     function save() {
-        playerPerms!.then(async perms => {
+        playerPerms!.then(async (perms) => {
             if (perms.prefix.name != prefixEdit) {
                 await $permsRepo.setPrefix(selectedPlayer!, prefixEdit);
             }
@@ -126,9 +126,7 @@
         {#snippet children({ hidden, toggle })}
             <NavBrand href="#">
                 <ArrowLeftOutline></ArrowLeftOutline>
-              <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+                <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Permissions </span>
-                  Permissions
-              </span>
             </NavBrand>
         {/snippet}
     </Navbar>
@@ -143,12 +141,14 @@
                 {#if playersList.length < 100}
                     <ul class="flex-1 overflow-scroll">
                         {#each playersList as player (player.uuid)}
-                            <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer"
+                            <li
+                                class="p-4 transition-colors hover:bg-gray-700 cursor-pointer"
                                 class:text-orange-500={player.uuid === selectedPlayer}
                                 onclick={preventDefault(() => {
                                     selectedPlayer = player.uuid;
                                     selectedPlayerName = player.name;
-                                })}>
+                                })}
+                            >
                                 {player.name}
                             </li>
                         {/each}
@@ -166,22 +166,16 @@
                         {:then player}
                             <h1>Prefix</h1>
                             {#each Object.entries(perms.prefixes) as [key, prefix]}
-                                <Radio name="prefix" bind:group={prefixEdit}
+                                <Radio name="prefix" bind:group={prefixEdit} value={prefix.name}>{capitalize(prefix.name.substring(7).toLowerCase())}</Radio>
-                                       value={prefix.name}>{capitalize(prefix.name.substring(7).toLowerCase())}</Radio>
                             {/each}
                             <h1>Permissions</h1>
                             {#each perms.perms as perm}
-                                <Checkbox checked={activePerms.includes(perm)}
+                                <Checkbox checked={activePerms.includes(perm)} onclick={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
-                                          onclick={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
                             {/each}
                             <div class="mt-4">
-                                <Button disabled={prefixEdit === (player?.prefix.name ?? "") && activePerms === (player?.perms ?? [])}
+                                <Button disabled={prefixEdit === (player?.prefix.name ?? "") && activePerms === (player?.perms ?? [])} onclick={save}>Save</Button>
-                                        onclick={save}>Save
-                                </Button>
                                 {#if $me != null && $me.perms.includes("ADMINISTRATION")}
-                                    <Button onclick={() => resetPasswordModal = true}>
+                                    <Button onclick={() => (resetPasswordModal = true)}>Reset Password</Button>
-                                        Reset Password
-                                    </Button>
 
                                     <SWModal bind:open={resetPasswordModal} title="Reset Password">
                                         <Label for="new_password">New Password</Label>
@@ -190,14 +184,8 @@
                                         <Input type="password" id="repeat_password" placeholder="Repeat Password" bind:value={resetPasswordRepeat} />
 
                                         {#snippet footer()}
-                                      
+                                            <Button class="ml-auto mr-4" onclick={resetResetPassword}>Cancel</Button>
-                                              <Button class="ml-auto mr-4" onclick={resetResetPassword}>
+                                            <Button disabled={resetPassword === "" || resetPassword !== resetPasswordRepeat} onclick={resetPW}>Reset Password</Button>
-                                                  Cancel
-                                              </Button>
-                                              <Button disabled={resetPassword === "" || resetPassword !== resetPasswordRepeat} onclick={resetPW}>
-                                                  Reset Password
-                                              </Button>
-                                          
                                         {/snippet}
                                     </SWModal>
                                 {/if}

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

@@ -41,7 +41,8 @@
 
     async function addReferee() {
         if (selectedPlayer) {
-            referees = (await $eventRepo.updateEvent(data.event.id.toString(), {
+            referees = (
+                await $eventRepo.updateEvent(data.event.id.toString(), {
                     deadline: null,
                     end: null,
                     maxTeamMembers: null,
@@ -50,8 +51,9 @@
                     removeReferee: null,
                     schemType: null,
                     start: null,
-                addReferee: [selectedPlayer]
+                    addReferee: [selectedPlayer],
-            })).referees;
+                })
+            ).referees;
         }
 
         reset();
@@ -59,7 +61,8 @@
 
     function removeReferee(id: string) {
         return async () => {
-            referees = (await $eventRepo.updateEvent(data.event.id.toString(), {
+            referees = (
+                await $eventRepo.updateEvent(data.event.id.toString(), {
                     deadline: null,
                     end: null,
                     maxTeamMembers: null,
@@ -69,8 +72,9 @@
                     schemType: null,
                     start: null,
                     removeReferee: [id],
-            })).referees;
+                })
-        }
+            ).referees;
+        };
     }
 
     function reset() {
@@ -83,9 +87,7 @@
     {#each referees as referee}
         <li class="flex flex-grow justify-between">
             {referee.name}
-            <SWButton onclick={removeReferee(referee.uuid)}>
+            <SWButton onclick={removeReferee(referee.uuid)}>Entfernen</SWButton>
-                Entfernen
-            </SWButton>
         </li>
     {/each}
 
@@ -94,7 +96,7 @@
     {/if}
 </ul>
 
-<Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" onclick={() => showAdd = true}>
+<Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" onclick={() => (showAdd = true)}>
     <PlusOutline />
 </Button>
 

src/components/moderator/pages/players/PermissionsDropdown.svelte

@@ -23,19 +23,17 @@
     import { SelectTrigger } from "@components/ui/select/index.js";
     import { permsRepo } from "@repo/perms.ts";
 
-    const {
+    const { perms, uuid }: { perms: string[]; uuid: string } = $props();
-        perms, uuid
-    }: { perms: string[], uuid: string } = $props();
 
     let value = $state(perms);
     let prevValue = $state(perms);
 
     function onChange(change: string[]) {
-        $permissions.perms.forEach(perm => {
+        $permissions.perms.forEach((perm) => {
             if (prevValue.includes(perm) && !change.includes(perm)) {
-                $permsRepo.removePerm(uuid, perm)
+                $permsRepo.removePerm(uuid, perm);
             } else if (!prevValue.includes(perm) && change.includes(perm)) {
-                $permsRepo.addPerm(uuid, perm)
+                $permsRepo.addPerm(uuid, perm);
             }
         });