63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { Card } from "@/components/ui/card";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableCell,
|
|
TableFooter,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import type { MinimalServers } from "@/models/minimal_servers";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { createFileRoute } from "@tanstack/react-router";
|
|
|
|
export const Route = createFileRoute("/server_list")({
|
|
component: RouteComponent,
|
|
});
|
|
|
|
function RouteComponent() {
|
|
const { data: servers } = useQuery({
|
|
queryKey: ["servers"],
|
|
queryFn: async () => {
|
|
let res = await fetch("/api/servers");
|
|
return (await res.json()) as MinimalServers;
|
|
},
|
|
});
|
|
return (
|
|
<div className="p-2 flex justify-center items-center w-full">
|
|
<Card className="w-full max-w-225 p-2">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead className="w-[100px]">Name</TableHead>
|
|
<TableHead>Hostname</TableHead>
|
|
<TableHead>Nickame</TableHead>
|
|
<TableHead className="text-right">Type/Template</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{servers?.map((server) => (
|
|
<TableRow key={server.id}>
|
|
<TableCell className="font-medium">{server.name}</TableCell>
|
|
<TableCell>{server.hostname}</TableCell>
|
|
<TableCell>{server.nickname}</TableCell>
|
|
<TableCell className="text-right">
|
|
{server.template.name}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
<TableFooter>
|
|
<TableRow>
|
|
<TableCell colSpan={3}>Total Servers</TableCell>
|
|
<TableCell className="text-right">{servers?.length}</TableCell>
|
|
</TableRow>
|
|
</TableFooter>
|
|
</Table>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|