Refactor code for consistency: standardize formatting and improve readability across multiple Svelte components
Some checks failed
SteamWarCI Build failed

This commit is contained in:
2025-12-02 22:24:09 +01:00
parent 5f5988e270
commit 3bde299ea5
4 changed files with 177 additions and 172 deletions

View File

@@ -18,18 +18,18 @@
-->
<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";
import {capitalize} from "../util.ts";
import {permsRepo} from "@repo/perms.ts";
import {me} from "@stores/me.ts";
import { Button, Card, Checkbox, Input, Label, Navbar, NavBrand, Radio, Spinner } from "flowbite-svelte";
import { ArrowLeftOutline } from "flowbite-svelte-icons";
import { capitalize } from "../util.ts";
import { permsRepo } from "@repo/perms.ts";
import { me } from "@stores/me.ts";
import SWButton from "@components/styled/SWButton.svelte";
import SWModal from "@components/styled/SWModal.svelte";
import {userRepo} from "@repo/user.ts";
import {dataRepo} from "@repo/data.ts";
import type {Player} from "@type/data";
import { userRepo } from "@repo/user.ts";
import { dataRepo } from "@repo/data.ts";
import type { Player } from "@type/data";
let search = $state("");
let playersList: Player[] = $state([]);
@@ -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);
}
@@ -115,22 +115,20 @@
resetPasswordRepeat = "";
resetPasswordModal = false;
}
run(() => {
playerPerms = loadPlayer(selectedPlayer);
});
playerPerms = loadPlayer(selectedPlayer);
});
</script>
<div class="flex flex-col h-screen overflow-hidden">
<Navbar >
<Navbar>
{#snippet children({ hidden, toggle })}
<NavBrand href="#">
<ArrowLeftOutline></ArrowLeftOutline>
<span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
Permissions
</span>
</NavBrand>
{/snippet}
<NavBrand href="#">
<ArrowLeftOutline></ArrowLeftOutline>
<span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white"> Permissions </span>
</NavBrand>
{/snippet}
</Navbar>
<div class="p-4 flex-1 overflow-hidden">
@@ -138,17 +136,19 @@
<Card class="h-full flex flex-col overflow-hidden !max-w-full">
<div class="border-b border-b-gray-600 pb-2">
<Label for="user_search" class="mb-2">Search Users...</Label>
<Input type="text" id="user_search" placeholder="Name..." bind:value={search}/>
<Input type="text" id="user_search" placeholder="Name..." bind:value={search} />
</div>
{#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,39 +166,27 @@
{:then player}
<h1>Prefix</h1>
{#each Object.entries(perms.prefixes) as [key, prefix]}
<Radio name="prefix" bind:group={prefixEdit}
value={prefix.name}>{capitalize(prefix.name.substring(7).toLowerCase())}</Radio>
<Radio name="prefix" bind:group={prefixEdit} value={prefix.name}>{capitalize(prefix.name.substring(7).toLowerCase())}</Radio>
{/each}
<h1>Permissions</h1>
{#each perms.perms as perm}
<Checkbox checked={activePerms.includes(perm)}
onclick={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
<Checkbox checked={activePerms.includes(perm)} onclick={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
{/each}
<div class="mt-4">
<Button disabled={prefixEdit === (player?.prefix.name ?? "") && activePerms === (player?.perms ?? [])}
onclick={save}>Save
</Button>
<Button disabled={prefixEdit === (player?.prefix.name ?? "") && activePerms === (player?.perms ?? [])} onclick={save}>Save</Button>
{#if $me != null && $me.perms.includes("ADMINISTRATION")}
<Button onclick={() => resetPasswordModal = true}>
Reset Password
</Button>
<Button onclick={() => (resetPasswordModal = true)}>Reset Password</Button>
<SWModal bind:open={resetPasswordModal} title="Reset Password">
<Label for="new_password">New Password</Label>
<Input type="password" id="new_password" placeholder="New Password" bind:value={resetPassword}/>
<Input type="password" id="new_password" placeholder="New Password" bind:value={resetPassword} />
<Label for="repeat_password">Repeat Password</Label>
<Input type="password" id="repeat_password" placeholder="Repeat Password" bind:value={resetPasswordRepeat}/>
<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 disabled={resetPassword === "" || resetPassword !== resetPasswordRepeat} onclick={resetPW}>
Reset Password
</Button>
{/snippet}
<Button class="ml-auto mr-4" onclick={resetResetPassword}>Cancel</Button>
<Button disabled={resetPassword === "" || resetPassword !== resetPasswordRepeat} onclick={resetPW}>Reset Password</Button>
{/snippet}
</SWModal>
{/if}
</div>