New Dashboard
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
<!--
|
||||
- This file is a part of the SteamWar software.
|
||||
-
|
||||
- Copyright (C) 2025 SteamWar.de-Serverteam
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as published by
|
||||
- the Free Software Foundation, either version 3 of the License, or
|
||||
- (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import {permissions, players} from "@stores/stores.ts";
|
||||
import {Select, SelectContent, SelectItem} from "@components/ui/select";
|
||||
import {SelectTrigger} from "@components/ui/select/index.js";
|
||||
import {permsRepo} from "@repo/perms.ts";
|
||||
|
||||
const {
|
||||
perms, uuid
|
||||
}: { perms: string[], uuid: string } = $props();
|
||||
|
||||
let value = $state(perms);
|
||||
let prevValue = $state(perms);
|
||||
|
||||
function onChange(change: string[]) {
|
||||
$permissions.perms.forEach(perm => {
|
||||
if (prevValue.includes(perm) && !change.includes(perm)) {
|
||||
$permsRepo.removePerm(uuid, perm)
|
||||
} else if (!prevValue.includes(perm) && change.includes(perm)) {
|
||||
$permsRepo.addPerm(uuid, perm)
|
||||
}
|
||||
});
|
||||
|
||||
prevValue = change;
|
||||
value = change;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Select type="multiple" bind:value onValueChange={onChange}>
|
||||
<SelectTrigger>
|
||||
{value.length} Permissions
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each $permissions.perms as permission (permission)}
|
||||
<SelectItem value={permission}>{permission}</SelectItem>
|
||||
{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
32
src/components/moderator/pages/players/Players.svelte
Normal file
32
src/components/moderator/pages/players/Players.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<!--
|
||||
- This file is a part of the SteamWar software.
|
||||
-
|
||||
- Copyright (C) 2025 SteamWar.de-Serverteam
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as published by
|
||||
- the Free Software Foundation, either version 3 of the License, or
|
||||
- (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script>
|
||||
import Table from "@components/moderator/pages/players/Table.svelte";
|
||||
|
||||
import {dataRepo} from "@repo/data";
|
||||
|
||||
let playersFuture = $state($dataRepo.getPlayers())
|
||||
</script>
|
||||
|
||||
{#await playersFuture}
|
||||
<p>Loading...</p>
|
||||
{:then players}
|
||||
<Table data={players} />
|
||||
{/await}
|
||||
47
src/components/moderator/pages/players/PrefixDropdown.svelte
Normal file
47
src/components/moderator/pages/players/PrefixDropdown.svelte
Normal file
@@ -0,0 +1,47 @@
|
||||
<!--
|
||||
- This file is a part of the SteamWar software.
|
||||
-
|
||||
- Copyright (C) 2025 SteamWar.de-Serverteam
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as published by
|
||||
- the Free Software Foundation, either version 3 of the License, or
|
||||
- (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import {Select, SelectContent, SelectItem, SelectTrigger} from "@components/ui/select";
|
||||
import {permissions} from "@stores/stores.ts";
|
||||
import {permsRepo} from "@repo/perms.ts";
|
||||
|
||||
const {
|
||||
prefix, uuid
|
||||
}: { prefix: string, uuid: string } = $props();
|
||||
|
||||
let value = $state(prefix);
|
||||
|
||||
function onChange(change: string) {
|
||||
$permsRepo.setPrefix(uuid, change);
|
||||
|
||||
value = $permissions.prefixes[change].chatPrefix;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Select type="single" bind:value onValueChange={onChange}>
|
||||
<SelectTrigger>
|
||||
{value === "" ? "None" : value}
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{#each Object.entries($permissions.prefixes) as prefix (prefix[1].name)}
|
||||
<SelectItem value={prefix[0]}>{prefix[1].chatPrefix === "" ? "None" : prefix[1].chatPrefix}</SelectItem>
|
||||
{/each}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
174
src/components/moderator/pages/players/Table.svelte
Normal file
174
src/components/moderator/pages/players/Table.svelte
Normal file
@@ -0,0 +1,174 @@
|
||||
<!--
|
||||
- This file is a part of the SteamWar software.
|
||||
-
|
||||
- Copyright (C) 2025 SteamWar.de-Serverteam
|
||||
-
|
||||
- This program is free software: you can redistribute it and/or modify
|
||||
- it under the terms of the GNU Affero General Public License as published by
|
||||
- the Free Software Foundation, either version 3 of the License, or
|
||||
- (at your option) any later version.
|
||||
-
|
||||
- This program is distributed in the hope that it will be useful,
|
||||
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
- GNU Affero General Public License for more details.
|
||||
-
|
||||
- You should have received a copy of the GNU Affero General Public License
|
||||
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
type ColumnFiltersState,
|
||||
getCoreRowModel, getFilteredRowModel,
|
||||
getPaginationRowModel, getSortedRowModel,
|
||||
type PaginationState,
|
||||
type SortingState,
|
||||
} from "@tanstack/table-core";
|
||||
import {
|
||||
createSvelteTable,
|
||||
FlexRender,
|
||||
} from "@components/ui/data-table/index";
|
||||
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@components/ui/table";
|
||||
import {Button} from "@components/ui/button";
|
||||
import {Input} from "@components/ui/input";
|
||||
import {Select} from "@components/ui/select";
|
||||
import {SelectContent, SelectItem, SelectTrigger} from "@components/ui/select/index.js";
|
||||
import type {Player} from "@type/data";
|
||||
import { columns } from "./columns";
|
||||
|
||||
let { data }: { data: Player[] } = $props();
|
||||
|
||||
let pagination = $state<PaginationState>({ pageIndex: 0, pageSize: 25 });
|
||||
let sorting = $state<SortingState>([]);
|
||||
let columnFilters = $state<ColumnFiltersState>([]);
|
||||
|
||||
const table = createSvelteTable({
|
||||
get data() {
|
||||
return data;
|
||||
},
|
||||
state: {
|
||||
get pagination() {
|
||||
return pagination;
|
||||
},
|
||||
get sorting() {
|
||||
return sorting;
|
||||
},
|
||||
get columnFilters() {
|
||||
return columnFilters;
|
||||
},
|
||||
},
|
||||
onPaginationChange: (updater) => {
|
||||
if (typeof updater === "function") {
|
||||
pagination = updater(pagination);
|
||||
} else {
|
||||
pagination = updater;
|
||||
}
|
||||
},
|
||||
onSortingChange: (updater) => {
|
||||
if (typeof updater === "function") {
|
||||
sorting = updater(sorting);
|
||||
} else {
|
||||
sorting = updater;
|
||||
}
|
||||
},
|
||||
onColumnFiltersChange: (updater) => {
|
||||
if (typeof updater === "function") {
|
||||
columnFilters = updater(columnFilters);
|
||||
} else {
|
||||
columnFilters = updater;
|
||||
}
|
||||
},
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getPaginationRowModel: getPaginationRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="rounded-md border m-4">
|
||||
<div class="flex items-center p-4 border-b">
|
||||
<Input
|
||||
placeholder="Filter Players..."
|
||||
value={(table.getColumn("name")?.getFilterValue() as string) ?? ""}
|
||||
onchange={(e) => {
|
||||
table.getColumn("name")?.setFilterValue(e.currentTarget.value);
|
||||
}}
|
||||
oninput={(e) => {
|
||||
table.getColumn("name")?.setFilterValue(e.currentTarget.value);
|
||||
}}
|
||||
class="max-w-sm"
|
||||
/>
|
||||
<div class="flex items-center px-4">
|
||||
<Select type="single" value={pagination.pageSize.toString()} onValueChange={(e) => pagination = { pageSize: +e, pageIndex: 0 }}>
|
||||
<SelectTrigger>{pagination.pageSize}</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="5">5</SelectItem>
|
||||
<SelectItem value="10">10</SelectItem>
|
||||
<SelectItem value="25">25</SelectItem>
|
||||
<SelectItem value="50">50</SelectItem>
|
||||
<SelectItem value="100">100</SelectItem>
|
||||
<SelectItem value="200">200</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
|
||||
<TableRow>
|
||||
{#each headerGroup.headers as header (header.id)}
|
||||
<TableHead>
|
||||
{#if !header.isPlaceholder}
|
||||
<FlexRender
|
||||
content={header.column.columnDef.header}
|
||||
context={header.getContext()}
|
||||
/>
|
||||
{/if}
|
||||
</TableHead>
|
||||
{/each}
|
||||
</TableRow>
|
||||
{/each}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{#each table.getRowModel().rows as row (row.id)}
|
||||
<TableRow data-state={row.getIsSelected() && "selected"}>
|
||||
{#each row.getVisibleCells() as cell (cell.id)}
|
||||
<TableCell>
|
||||
<FlexRender
|
||||
content={cell.column.columnDef.cell}
|
||||
context={cell.getContext()}
|
||||
/>
|
||||
</TableCell>
|
||||
{/each}
|
||||
</TableRow>
|
||||
{:else}
|
||||
<TableRow>
|
||||
<TableCell colspan={columns.length} class="h-24 text-center">
|
||||
No results.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{/each}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<div class="flex items-center justify-end space-x-2 p-4 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => table.previousPage()}
|
||||
disabled={!table.getCanPreviousPage()}
|
||||
>
|
||||
Previous
|
||||
</Button>
|
||||
<span>{pagination.pageIndex + 1}/{table.getPageCount()}</span>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onclick={() => table.nextPage()}
|
||||
disabled={!table.getCanNextPage()}
|
||||
>
|
||||
Next
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
60
src/components/moderator/pages/players/columns.ts
Normal file
60
src/components/moderator/pages/players/columns.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
* This file is a part of the SteamWar software.
|
||||
*
|
||||
* Copyright (C) 2025 SteamWar.de-Serverteam
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
import type {ColumnDef} from "@tanstack/table-core";
|
||||
import type {Player} from "@type/data.ts";
|
||||
import { renderComponent } from "@components/ui/data-table";
|
||||
import PermissionsDropdown from "@components/moderator/pages/players/PermissionsDropdown.svelte";
|
||||
import PrefixDropdown from "@components/moderator/pages/players/PrefixDropdown.svelte";
|
||||
|
||||
export const columns: ColumnDef<Player[]> = [
|
||||
{
|
||||
accessorKey: "uuid",
|
||||
header: "UUID",
|
||||
},
|
||||
{
|
||||
accessorKey: "name",
|
||||
header: "Name",
|
||||
},
|
||||
{
|
||||
accessorKey: "prefix",
|
||||
header: "Prefix",
|
||||
cell: ({ row }) => {
|
||||
return renderComponent(
|
||||
PrefixDropdown, {
|
||||
prefix: row.getValue("prefix"),
|
||||
uuid: row.getValue("uuid"),
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "perms",
|
||||
header: "Permissions",
|
||||
cell: ({ row }) => {
|
||||
return renderComponent(
|
||||
PermissionsDropdown,
|
||||
{
|
||||
perms: row.getValue("perms"),
|
||||
uuid: row.getValue("uuid"),
|
||||
},
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user