lukas.pupkalipinski/BanGUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finish Task 13: extract remaining page subcomponents and clean page files

Browse Source
This commit is contained in:
Lukas
2026-04-19 09:38:23 +02:00
parent 38b9d35255
commit 47f9c602d4
4 changed files with 375 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
frontend/src/pages/map/MapBansTable.tsx Normal file
View File

@@ -0,0 +1,157 @@
import {
Badge,
Button,
Table,
TableBody,
TableCell,
TableCellLayout,
TableHeader,
TableHeaderCell,
TableRow,
Text,
Tooltip,
tokens,
} from "@fluentui/react-components";
import { ChevronLeftRegular, ChevronRightRegular } from "@fluentui/react-icons";
import type { MapBanItem } from "../../types/map";
interface MapBansTableProps {
pageBans: MapBanItem[];
visibleCount: number;
page: number;
pageSize: number;
totalPages: number;
hasPrev: boolean;
hasNext: boolean;
onPageChange: (nextPage: number) => void;
onPageSizeChange: (pageSize: number) => void;
}
export function MapBansTable({
pageBans,
visibleCount,
page,
pageSize,
totalPages,
hasPrev,
hasNext,
onPageChange,
onPageSizeChange,
}: MapBansTableProps): React.JSX.Element {
return (
<>
<Table size="small" aria-label="Bans list">
<TableHeader>
<TableRow>
<TableHeaderCell>IP Address</TableHeaderCell>
<TableHeaderCell>Jail</TableHeaderCell>
<TableHeaderCell>Banned At</TableHeaderCell>
<TableHeaderCell>Country</TableHeaderCell>
<TableHeaderCell>Origin</TableHeaderCell>
<TableHeaderCell>Times Banned</TableHeaderCell>
</TableRow>
</TableHeader>
<TableBody>
{visibleCount === 0 ? (
<TableRow>
<TableCell colSpan={6}>
<TableCellLayout>
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
No bans found.
</Text>
</TableCellLayout>
</TableCell>
</TableRow>
) : (
pageBans.map((ban) => (
<TableRow key={`${ban.ip}-${ban.banned_at}`}>
<TableCell>
<TableCellLayout>{ban.ip}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{ban.jail}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{new Date(ban.banned_at).toLocaleString()}</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
{ban.country_name ?? ban.country_code ? (
ban.country_name ?? ban.country_code
) : (
<Tooltip
content="Country could not be resolved — will retry automatically."
relationship="description"
>
<Text style={{ color: tokens.colorNeutralForeground3 }}>—</Text>
</Tooltip>
)}
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>
<Badge
appearance="tint"
color={ban.origin === "blocklist" ? "brand" : "informative"}
>
{ban.origin === "blocklist" ? "Blocklist" : "Selfblock"}
</Badge>
</TableCellLayout>
</TableCell>
<TableCell>
<TableCellLayout>{String(ban.ban_count)}</TableCellLayout>
</TableCell>
</TableRow>
))
)}
</TableBody>
</Table>
{visibleCount > 0 && (
<div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: tokens.spacingHorizontalS, marginTop: tokens.spacingVerticalS }}>
<div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
Showing {pageBans.length} of {visibleCount} filtered ban{visibleCount !== 1 ? "s" : ""}
{" · "}Page {page} of {totalPages}
</Text>
<div style={{ display: "flex", alignItems: "center", gap: tokens.spacingHorizontalS }}>
<Text size={200} style={{ color: tokens.colorNeutralForeground3 }}>
Page size
</Text>
<select
aria-label="Page size"
value={pageSize}
onChange={(event): void => {
onPageSizeChange(Number(event.target.value));
}}
>
{[25, 50, 100].map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
</div>
</div>
<div style={{ display: "flex", gap: tokens.spacingHorizontalXS }}>
<Button
icon={<ChevronLeftRegular />}
appearance="subtle"
disabled={!hasPrev}
onClick={(): void => onPageChange(page - 1)}
aria-label="Previous page"
/>
<Button
icon={<ChevronRightRegular />}
appearance="subtle"
disabled={!hasNext}
onClick={(): void => onPageChange(page + 1)}
aria-label="Next page"
/>
</div>
</div>
)}
</>
);
}