Changes

src/components/admin/pages/Perms.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+    import {Button, Card, Checkbox, Input, Label, Navbar, NavBrand, Radio, Spinner} from "flowbite-svelte";
+    import {ArrowLeftSolid} from "flowbite-svelte-icons";
+    import {players} from "../stores/stores.ts";
+    import {permsRepo} from "../repo/repo.ts";
+    import {capitalize} from "../util.ts";
+
+    let search = "";
+    $: lowerCaseSearch = search.toLowerCase();
+    $: filteredPlayers = $players.filter(value => value.name.toLowerCase().includes(lowerCaseSearch));
+
+    let selectedPlayer = null;
+    $: player = $players.find(value => value.id === selectedPlayer);
+    let playerPerms = loadPlayer(selectedPlayer);
+    $: playerPerms = loadPlayer(selectedPlayer);
+
+    let prefixEdit = "PREFIX_NONE";
+    let activePerms = [];
+
+    function loadPlayer(id: number) {
+        if (!id) {
+            return;
+        }
+        return $permsRepo.getPerms(id).then(value => {
+            activePerms = value.perms;
+            prefixEdit = value.prefix.name;
+            return value;
+        })
+    }
+
+    function togglePerm(perm: string) {
+        return () => {
+            if (activePerms.includes(perm)) {
+                activePerms = activePerms.filter(value => value !== perm);
+            } else {
+                activePerms = [...activePerms, perm];
+            }
+        }
+    }
+
+    function save() {
+        playerPerms.then(async perms => {
+            if (perms.prefix.name != prefixEdit) {
+                await $permsRepo.setPrefix(selectedPlayer, prefixEdit);
+            }
+
+            for (let value of activePerms) {
+                if (!perms.perms.includes(value)) {
+                    await $permsRepo.addPerm(selectedPlayer, value);
+                }
+            }
+
+            for (let value of perms.perms) {
+                if (!activePerms.includes(value)) {
+                    await $permsRepo.removePerm(selectedPlayer, value);
+                }
+            }
+
+            playerPerms = loadPlayer(selectedPlayer);
+        })
+    }
+
+    let permsFuture = $permsRepo.listPerms();
+</script>
+
+<div class="flex flex-col h-screen overflow-hidden">
+    <Navbar let:hidden let:toggle>
+        <NavBrand href="#">
+            <ArrowLeftSolid></ArrowLeftSolid>
+            <span class="ml-4 self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+                Permissions
+            </span>
+        </NavBrand>
+    </Navbar>
+
+    <div class="p-4 flex-1 overflow-hidden">
+        <div class="grid md:grid-cols-3 grid-cols-1 h-full gap-8">
+            <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}/>
+                </div>
+                {#if filteredPlayers.length < 100}
+                    <ul class="flex-1 overflow-scroll">
+                        {#each filteredPlayers as player}
+                            <li class="p-4 transition-colors hover:bg-gray-700 cursor-pointer" class:text-orange-500={player.id === selectedPlayer} on:click|preventDefault={() => selectedPlayer = player.id}>
+                                {player.name}
+                            </li>
+                        {/each}
+                    </ul>
+                {/if}
+            </Card>
+            <Card class="!max-w-full" style="grid-column: 2/4">
+                {#if selectedPlayer}
+                    <h1 class="text-3xl">{player.name}</h1>
+                    {#await permsFuture}
+                        <Spinner></Spinner>
+                    {:then perms}
+                        {#await playerPerms}
+                            <Spinner></Spinner>
+                        {: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>
+                            {/each}
+                            <h1>Permissions</h1>
+                            {#each perms.perms as perm}
+                                <Checkbox checked={activePerms.includes(perm)} on:click={togglePerm(perm)}>{capitalize(perm.toLowerCase())}</Checkbox>
+                            {/each}
+                            <div class="mt-4">
+                                <Button disabled={prefixEdit === player.prefix.name && activePerms === player.perms} on:click={save}>Save</Button>
+                            </div>
+                        {:catch  error}
+                            <p>{error.toString()}</p>
+                        {/await}
+                    {:catch error}
+                        <p>{error.toString()}</p>
+                    {/await}
+                {/if}
+            </Card>
+        </div>
+    </div>
+</div>