style: format code biome
This commit is contained in:
openhands
@@ -1,7 +1,15 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { Loader2, Lock, LogOut, RefreshCw, Save, Trash2, Unlock } from "lucide-react";
|
||||
import {
|
||||
Loader2,
|
||||
Lock,
|
||||
LogOut,
|
||||
RefreshCw,
|
||||
Save,
|
||||
Trash2,
|
||||
Unlock,
|
||||
} from "lucide-react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { deleteRoom, roomRconAction, updateRoom } from "@/actions/rooms";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
@@ -9,194 +17,229 @@ import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { useServerAction } from "@/hooks/use-server-action";
|
||||
import { type UpdateRoomInput, updateRoomSchema } from "@/lib/validators/room";
|
||||
|
||||
interface RoomEditFormProps {
|
||||
room: {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
state: string;
|
||||
usersMax: number;
|
||||
users: number;
|
||||
ownerName: string;
|
||||
};
|
||||
room: {
|
||||
id: number;
|
||||
name: string;
|
||||
description: string;
|
||||
state: string;
|
||||
usersMax: number;
|
||||
users: number;
|
||||
ownerName: string;
|
||||
};
|
||||
}
|
||||
|
||||
export function RoomEditForm({ room }: RoomEditFormProps) {
|
||||
const { run, isPending } = useServerAction();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<UpdateRoomInput>({
|
||||
resolver: zodResolver(updateRoomSchema),
|
||||
defaultValues: {
|
||||
name: room.name,
|
||||
description: room.description,
|
||||
state: room.state as "open" | "locked" | "password" | "invisible",
|
||||
usersMax: room.usersMax,
|
||||
},
|
||||
});
|
||||
const { run, isPending } = useServerAction();
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { errors },
|
||||
} = useForm<UpdateRoomInput>({
|
||||
resolver: zodResolver(updateRoomSchema),
|
||||
defaultValues: {
|
||||
name: room.name,
|
||||
description: room.description,
|
||||
state: room.state as "open" | "locked" | "password" | "invisible",
|
||||
usersMax: room.usersMax,
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(data: UpdateRoomInput) {
|
||||
run(() => updateRoom({ id: room.id, ...data }), {
|
||||
successMessage: "Room updated successfully.",
|
||||
});
|
||||
}
|
||||
function onSubmit(data: UpdateRoomInput) {
|
||||
run(() => updateRoom({ id: room.id, ...data }), {
|
||||
successMessage: "Room updated successfully.",
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (!confirm("Are you sure you want to delete this room? This cannot be undone.")) return;
|
||||
run(() => deleteRoom({ id: room.id }), { redirectTo: "/admin/rooms" });
|
||||
}
|
||||
function handleDelete() {
|
||||
if (
|
||||
!confirm(
|
||||
"Are you sure you want to delete this room? This cannot be undone.",
|
||||
)
|
||||
)
|
||||
return;
|
||||
run(() => deleteRoom({ id: room.id }), { redirectTo: "/admin/rooms" });
|
||||
}
|
||||
|
||||
function handleRconAction(action: "kick" | "lock" | "unlock" | "reload") {
|
||||
run(() => roomRconAction({ roomId: room.id, action }), {
|
||||
successMessage: `Action "${action}" executed successfully.`,
|
||||
errorMessage: `Action "${action}" failed. Is the emulator running?`,
|
||||
});
|
||||
}
|
||||
function handleRconAction(action: "kick" | "lock" | "unlock" | "reload") {
|
||||
run(() => roomRconAction({ roomId: room.id, action }), {
|
||||
successMessage: `Action "${action}" executed successfully.`,
|
||||
errorMessage: `Action "${action}" failed. Is the emulator running?`,
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* Edit Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Room Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" {...register("name")} />
|
||||
{errors.name && <p className="text-sm text-destructive">{errors.name.message}</p>}
|
||||
</div>
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* Edit Form */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Room Details</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" {...register("name")} />
|
||||
{errors.name && (
|
||||
<p className="text-sm text-destructive">
|
||||
{errors.name.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea id="description" rows={3} {...register("description")} />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Textarea
|
||||
id="description"
|
||||
rows={3}
|
||||
{...register("description")}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>State</Label>
|
||||
<Select
|
||||
defaultValue={room.state}
|
||||
onValueChange={(v) =>
|
||||
setValue("state", v as "open" | "locked" | "password" | "invisible")
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="open">Open</SelectItem>
|
||||
<SelectItem value="locked">Locked</SelectItem>
|
||||
<SelectItem value="password">Password</SelectItem>
|
||||
<SelectItem value="invisible">Invisible</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="usersMax">Max Users</Label>
|
||||
<Input id="usersMax" type="number" {...register("usersMax", { valueAsNumber: true })} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label>State</Label>
|
||||
<Select
|
||||
defaultValue={room.state}
|
||||
onValueChange={(v) =>
|
||||
setValue(
|
||||
"state",
|
||||
v as "open" | "locked" | "password" | "invisible",
|
||||
)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="open">Open</SelectItem>
|
||||
<SelectItem value="locked">Locked</SelectItem>
|
||||
<SelectItem value="password">Password</SelectItem>
|
||||
<SelectItem value="invisible">Invisible</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="usersMax">Max Users</Label>
|
||||
<Input
|
||||
id="usersMax"
|
||||
type="number"
|
||||
{...register("usersMax", { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Button type="submit" disabled={isPending}>
|
||||
{isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button type="button" variant="destructive" onClick={handleDelete} disabled={isPending}>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete Room
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button type="submit" disabled={isPending}>
|
||||
{isPending ? (
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
)}
|
||||
Save Changes
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={isPending}
|
||||
>
|
||||
<Trash2 className="mr-2 h-4 w-4" />
|
||||
Delete Room
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* RCON Actions */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Owner</span>
|
||||
<span className="font-medium">{room.ownerName}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Current Users</span>
|
||||
<Badge>
|
||||
{room.users} / {room.usersMax}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">State</span>
|
||||
<Badge
|
||||
variant={
|
||||
room.state === "open" ? "default" : room.state === "locked" ? "secondary" : "destructive"
|
||||
}
|
||||
>
|
||||
{room.state}
|
||||
</Badge>
|
||||
</div>
|
||||
{/* RCON Actions */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Quick Actions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Owner</span>
|
||||
<span className="font-medium">{room.ownerName}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Current Users</span>
|
||||
<Badge>
|
||||
{room.users} / {room.usersMax}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">State</span>
|
||||
<Badge
|
||||
variant={
|
||||
room.state === "open"
|
||||
? "default"
|
||||
: room.state === "locked"
|
||||
? "secondary"
|
||||
: "destructive"
|
||||
}
|
||||
>
|
||||
{room.state}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-4 space-y-2">
|
||||
<p className="text-sm font-medium">RCON Commands</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRconAction("kick")}
|
||||
disabled={isPending}
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
Kick All
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRconAction("lock")}
|
||||
disabled={isPending}
|
||||
>
|
||||
<Lock className="mr-2 h-4 w-4" />
|
||||
Lock
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRconAction("unlock")}
|
||||
disabled={isPending}
|
||||
>
|
||||
<Unlock className="mr-2 h-4 w-4" />
|
||||
Unlock
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRconAction("reload")}
|
||||
disabled={isPending}
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Reload
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="border-t pt-4 space-y-2">
|
||||
<p className="text-sm font-medium">RCON Commands</p>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRconAction("kick")}
|
||||
disabled={isPending}
|
||||
>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
Kick All
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRconAction("lock")}
|
||||
disabled={isPending}
|
||||
>
|
||||
<Lock className="mr-2 h-4 w-4" />
|
||||
Lock
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRconAction("unlock")}
|
||||
disabled={isPending}
|
||||
>
|
||||
<Unlock className="mr-2 h-4 w-4" />
|
||||
Unlock
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleRconAction("reload")}
|
||||
disabled={isPending}
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Reload
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user