Compare commits
19 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b543ce961c | |||
| 64acf24f27 | |||
| e8cb877497 | |||
| 1dad80e557 | |||
| bb8ed89a01 | |||
| 55ad6533f0 | |||
| ee7502269f | |||
| 79ba39076e | |||
| 38f20beaa6 | |||
| a028dc8242 | |||
| 53b35c13b4 | |||
| 8996cbbfa0 | |||
| 9999f843e5 | |||
| 0153085180 | |||
| 9c23a720d1 | |||
| cc4afd2294 | |||
| 2d85b63775 | |||
| 36c31fa790 | |||
| c7ef3e9d27 |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "acc-server-manager-web",
|
||||
"version": "0.23.0",
|
||||
"version": "0.24.4",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev --turbopack",
|
||||
|
||||
16
src/app/dashboard/activity-log/page.tsx
Normal file
16
src/app/dashboard/activity-log/page.tsx
Normal file
@@ -0,0 +1,16 @@
|
||||
import { requireAuth } from '@/lib/auth/server';
|
||||
import { getServers } from '@/lib/api/server/servers';
|
||||
import { ActivityLogTable } from '@/components/activityLog/ActivityLogTable';
|
||||
|
||||
export default async function ActivityLogPage() {
|
||||
const session = await requireAuth();
|
||||
const servers = await getServers(session.token!);
|
||||
const serverOptions = servers.map((s) => ({ id: s.id, name: s.name }));
|
||||
|
||||
return (
|
||||
<main className="p-5">
|
||||
<h1 className="mb-5 text-lg font-semibold text-primary">Activity Log</h1>
|
||||
<ActivityLogTable servers={serverOptions} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -35,6 +35,7 @@ export default async function ServerPage({ params }: ServerPageProps) {
|
||||
configurations={configurations}
|
||||
statistics={statistics}
|
||||
leaderboard={leaderboard}
|
||||
user={session.user!}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
261
src/components/activityLog/ActivityLogTable.tsx
Normal file
261
src/components/activityLog/ActivityLogTable.tsx
Normal file
@@ -0,0 +1,261 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { getActivityLogAction } from '@/lib/actions/activityLog';
|
||||
import type { ActivityLog, ActivityLogFilter, ActionType } from '@/lib/schemas/activityLog';
|
||||
import { ACTION_TYPE_LABELS, actionTypeSchema } from '@/lib/schemas/activityLog';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
interface ServerOption {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface ActivityLogTableProps {
|
||||
serverId?: string;
|
||||
servers?: ServerOption[];
|
||||
}
|
||||
|
||||
function formatDate(iso: string): string {
|
||||
return new Date(iso).toLocaleString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
}
|
||||
|
||||
function parseDetails(raw: string): string {
|
||||
try {
|
||||
const obj = JSON.parse(raw) as Record<string, unknown>;
|
||||
if (obj.file && Array.isArray(obj.changed_keys)) {
|
||||
return `Updated ${obj.file} — changed: ${(obj.changed_keys as string[]).join(', ')}`;
|
||||
}
|
||||
if (obj.service) {
|
||||
return `Service: ${obj.service}`;
|
||||
}
|
||||
if (obj.driver_count !== undefined && obj.race_count !== undefined) {
|
||||
return `${obj.driver_count} drivers, ${obj.race_count} races`;
|
||||
}
|
||||
if (obj.preset_id) {
|
||||
return `Preset: ${obj.preset_name} - Sections applied: ${obj.sections_applied}`;
|
||||
}
|
||||
return raw;
|
||||
} catch {
|
||||
return raw;
|
||||
}
|
||||
}
|
||||
|
||||
const ACTION_BADGE: Record<ActionType, string> = {
|
||||
config_update: 'bg-blue-bg text-blue',
|
||||
server_start: 'bg-green-bg text-green',
|
||||
server_stop: 'bg-red-bg text-red',
|
||||
server_restart: 'bg-yellow-bg text-yellow',
|
||||
leaderboard_update: 'bg-overlay text-muted',
|
||||
preset_create: 'bg-green-bg text-green',
|
||||
preset_apply: 'bg-blue-bg text-blue'
|
||||
};
|
||||
|
||||
export function ActivityLogTable({ serverId, servers }: ActivityLogTableProps) {
|
||||
const [logs, setLogs] = useState<ActivityLog[]>([]);
|
||||
const [page, setPage] = useState(1);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const [filterAction, setFilterAction] = useState<ActionType | ''>('');
|
||||
const [filterServerId, setFilterServerId] = useState('');
|
||||
const [filterStartDate, setFilterStartDate] = useState('');
|
||||
const [filterEndDate, setFilterEndDate] = useState('');
|
||||
|
||||
const [appliedFilter, setAppliedFilter] = useState<ActivityLogFilter>({});
|
||||
|
||||
const fetchLogs = useCallback(
|
||||
async (currentPage: number, filter: ActivityLogFilter, reset: boolean) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
const params = { ...filter, page: currentPage, page_size: PAGE_SIZE };
|
||||
if (serverId) params.server_id = serverId;
|
||||
const result = await getActivityLogAction(params);
|
||||
setIsLoading(false);
|
||||
if (!result.success) {
|
||||
setError(result.message);
|
||||
return;
|
||||
}
|
||||
setHasMore(result.data.length === PAGE_SIZE);
|
||||
setLogs((prev) => (reset ? result.data : [...prev, ...result.data]));
|
||||
},
|
||||
[serverId]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchLogs(1, {}, true);
|
||||
}, [fetchLogs]);
|
||||
|
||||
const applyFilters = () => {
|
||||
const filter: ActivityLogFilter = {};
|
||||
if (filterAction) filter.action = filterAction as ActionType;
|
||||
if (filterServerId) filter.server_id = filterServerId;
|
||||
if (filterStartDate) filter.start_date = new Date(filterStartDate).toISOString();
|
||||
if (filterEndDate) filter.end_date = new Date(filterEndDate).toISOString();
|
||||
setAppliedFilter(filter);
|
||||
setPage(1);
|
||||
setLogs([]);
|
||||
fetchLogs(1, filter, true);
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setFilterAction('');
|
||||
setFilterServerId('');
|
||||
setFilterStartDate('');
|
||||
setFilterEndDate('');
|
||||
setAppliedFilter({});
|
||||
setPage(1);
|
||||
setLogs([]);
|
||||
fetchLogs(1, {}, true);
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
const next = page + 1;
|
||||
setPage(next);
|
||||
fetchLogs(next, appliedFilter, false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="border-border bg-canvas flex flex-wrap items-end gap-3 rounded-lg border p-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-subtle text-xs">Action type</label>
|
||||
<select
|
||||
value={filterAction}
|
||||
onChange={(e) => setFilterAction(e.target.value as ActionType | '')}
|
||||
className="form-input w-44 text-sm"
|
||||
>
|
||||
<option value="">All actions</option>
|
||||
{actionTypeSchema.options.map((opt) => (
|
||||
<option key={opt} value={opt}>
|
||||
{ACTION_TYPE_LABELS[opt]}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{servers && servers.length > 0 && (
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-subtle text-xs">Server</label>
|
||||
<select
|
||||
value={filterServerId}
|
||||
onChange={(e) => setFilterServerId(e.target.value)}
|
||||
className="form-input w-48 text-sm"
|
||||
>
|
||||
<option value="">All servers</option>
|
||||
{servers.map((s) => (
|
||||
<option key={s.id} value={s.id}>
|
||||
{s.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-subtle text-xs">From</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filterStartDate}
|
||||
onChange={(e) => setFilterStartDate(e.target.value)}
|
||||
className="form-input w-36 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-subtle text-xs">To</label>
|
||||
<input
|
||||
type="date"
|
||||
value={filterEndDate}
|
||||
onChange={(e) => setFilterEndDate(e.target.value)}
|
||||
className="form-input w-36 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<Button variant="primary" size="sm" onClick={applyFilters}>
|
||||
Apply
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={clearFilters}>
|
||||
Clear
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-red text-sm">{error}</p>}
|
||||
|
||||
<div className="border-border bg-canvas overflow-hidden rounded-lg border">
|
||||
{logs.length === 0 && !isLoading ? (
|
||||
<div className="px-4 py-12 text-center">
|
||||
<div className="mb-3 text-4xl">📋</div>
|
||||
<p className="text-muted text-sm">No activity logged yet.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full">
|
||||
<thead>
|
||||
<tr className="border-border-muted bg-base border-b">
|
||||
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
|
||||
Time
|
||||
</th>
|
||||
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
|
||||
User
|
||||
</th>
|
||||
{!serverId && (
|
||||
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
|
||||
Server
|
||||
</th>
|
||||
)}
|
||||
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
|
||||
Action
|
||||
</th>
|
||||
<th className="text-subtle px-4 py-2 text-left text-xs font-medium tracking-wider uppercase">
|
||||
Details
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{logs.map((log) => (
|
||||
<tr
|
||||
key={log.id}
|
||||
className="border-border-muted hover:bg-hover border-b transition-colors last:border-0"
|
||||
>
|
||||
<td className="text-muted px-4 py-3 text-sm whitespace-nowrap">
|
||||
{formatDate(log.createdAt)}
|
||||
</td>
|
||||
<td className="text-secondary px-4 py-3 text-sm">{log.username}</td>
|
||||
{!serverId && (
|
||||
<td className="text-secondary px-4 py-3 text-sm">
|
||||
{log.server?.name ?? log.serverId}
|
||||
</td>
|
||||
)}
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${ACTION_BADGE[log.action] ?? 'bg-canvas text-muted'}`}
|
||||
>
|
||||
{ACTION_TYPE_LABELS[log.action] ?? log.action}
|
||||
</span>
|
||||
</td>
|
||||
<td className="text-muted px-4 py-3 text-sm">{parseDetails(log.details)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isLoading && <div className="text-muted px-4 py-4 text-center text-sm">Loading…</div>}
|
||||
|
||||
{hasMore && !isLoading && logs.length > 0 && (
|
||||
<div className="border-border-muted border-t px-4 py-3 text-center">
|
||||
<Button variant="ghost" size="sm" onClick={loadMore}>
|
||||
Load more
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import type { AssistRules } from '@/lib/schemas/config';
|
||||
import { FIELD_LABELS } from '@/lib/schemas/config';
|
||||
|
||||
interface AssistRulesEditorProps {
|
||||
formData: AssistRules;
|
||||
@@ -8,52 +9,16 @@ interface AssistRulesEditorProps {
|
||||
onFormDataChange: (data: AssistRules) => void;
|
||||
}
|
||||
|
||||
const assistFields = [
|
||||
{
|
||||
key: 'stabilityControlLevelMax' as keyof AssistRules,
|
||||
label: 'Stability Control Level Max',
|
||||
type: 'number'
|
||||
},
|
||||
{
|
||||
key: 'disableAutosteer' as keyof AssistRules,
|
||||
label: 'Disable Autosteer',
|
||||
type: 'select'
|
||||
},
|
||||
{
|
||||
key: 'disableAutoLights' as keyof AssistRules,
|
||||
label: 'Disable Auto Lights',
|
||||
type: 'select'
|
||||
},
|
||||
{
|
||||
key: 'disableAutoWiper' as keyof AssistRules,
|
||||
label: 'Disable Auto Wiper',
|
||||
type: 'select'
|
||||
},
|
||||
{
|
||||
key: 'disableAutoEngineStart' as keyof AssistRules,
|
||||
label: 'Disable Auto Engine Start',
|
||||
type: 'select'
|
||||
},
|
||||
{
|
||||
key: 'disableAutoPitLimiter' as keyof AssistRules,
|
||||
label: 'Disable Auto Pit Limiter',
|
||||
type: 'select'
|
||||
},
|
||||
{
|
||||
key: 'disableAutoGear' as keyof AssistRules,
|
||||
label: 'Disable Auto Gear',
|
||||
type: 'select'
|
||||
},
|
||||
{
|
||||
key: 'disableAutoClutch' as keyof AssistRules,
|
||||
label: 'Disable Auto Clutch',
|
||||
type: 'select'
|
||||
},
|
||||
{
|
||||
key: 'disableIdealLine' as keyof AssistRules,
|
||||
label: 'Disable Ideal Line',
|
||||
type: 'select'
|
||||
}
|
||||
const assistFields: { key: keyof AssistRules; type: 'number' | 'select' }[] = [
|
||||
{ key: 'stabilityControlLevelMax', type: 'number' },
|
||||
{ key: 'disableAutosteer', type: 'select' },
|
||||
{ key: 'disableAutoLights', type: 'select' },
|
||||
{ key: 'disableAutoWiper', type: 'select' },
|
||||
{ key: 'disableAutoEngineStart', type: 'select' },
|
||||
{ key: 'disableAutoPitLimiter', type: 'select' },
|
||||
{ key: 'disableAutoGear', type: 'select' },
|
||||
{ key: 'disableAutoClutch', type: 'select' },
|
||||
{ key: 'disableIdealLine', type: 'select' }
|
||||
];
|
||||
|
||||
export function AssistRulesEditor({ formData, disabled, onFormDataChange }: AssistRulesEditorProps) {
|
||||
@@ -67,9 +32,9 @@ export function AssistRulesEditor({ formData, disabled, onFormDataChange }: Assi
|
||||
return (
|
||||
<div className="max-w-3xl space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{assistFields.map(({ key, label, type }) => (
|
||||
{assistFields.map(({ key, type }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{label}</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS[key]}</label>
|
||||
{type === 'number' ? (
|
||||
<input
|
||||
type="number"
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import type { Configuration } from '@/lib/schemas/config';
|
||||
import { FIELD_LABELS } from '@/lib/schemas/config';
|
||||
|
||||
interface ConfigurationEditorProps {
|
||||
formData: Configuration;
|
||||
@@ -20,7 +21,7 @@ export function ConfigurationEditor({ formData, disabled, onFormDataChange }: Co
|
||||
<div className="max-w-3xl space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">UDP Port</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.udpPort}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -31,7 +32,7 @@ export function ConfigurationEditor({ formData, disabled, onFormDataChange }: Co
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">TCP Port</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.tcpPort}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -42,7 +43,7 @@ export function ConfigurationEditor({ formData, disabled, onFormDataChange }: Co
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">Max Connections</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.maxConnections}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -53,7 +54,7 @@ export function ConfigurationEditor({ formData, disabled, onFormDataChange }: Co
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">LAN Discovery</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.lanDiscovery}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData.lanDiscovery}
|
||||
@@ -66,7 +67,7 @@ export function ConfigurationEditor({ formData, disabled, onFormDataChange }: Co
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">Register To Lobby</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.registerToLobby}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData.registerToLobby}
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
'use client';
|
||||
|
||||
import type { EventConfig, Session } from '@/lib/schemas/config';
|
||||
import { FIELD_LABELS } from '@/lib/schemas/config';
|
||||
import { TRACKS } from '@/lib/constants/tracks';
|
||||
|
||||
interface EventConfigEditorProps {
|
||||
formData: EventConfig;
|
||||
@@ -62,59 +64,35 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">Track</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.track}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData.track}
|
||||
onChange={(e) => handleInputChange('track', e.target.value)}
|
||||
className="form-select w-full"
|
||||
>
|
||||
<option value="barcelona">Barcelona</option>
|
||||
<option value="brands_hatch">Brands Hatch</option>
|
||||
<option value="donington">Donington</option>
|
||||
<option value="cota">COTA</option>
|
||||
<option value="hungaroring">Hungaroring</option>
|
||||
<option value="imola">Imola</option>
|
||||
<option value="indianapolis">Indianapolis</option>
|
||||
<option value="kyalami">Kyalami</option>
|
||||
<option value="laguna_seca">Laguna Seca</option>
|
||||
<option value="misano">Misano</option>
|
||||
<option value="monza">Monza</option>
|
||||
<option value="mount_panorama">Mount Panorama</option>
|
||||
<option value="nurburgring">Nurburgring</option>
|
||||
<option value="nurburgring_24h">Nurburgring 24h</option>
|
||||
<option value="oulton_park">Oulton Park</option>
|
||||
<option value="paul_ricard">Paul Ricard</option>
|
||||
<option value="red_bull_ring">Red Bull Ring</option>
|
||||
<option value="silverstone">Silverstone</option>
|
||||
<option value="snetterton">Snetterton</option>
|
||||
<option value="spa">Spa-Francorchamps</option>
|
||||
<option value="suzuka">Suzuka</option>
|
||||
<option value="valencia">Valencia</option>
|
||||
<option value="zandvoort">Zandvoort</option>
|
||||
<option value="zolder">Zolder</option>
|
||||
<option value="watkins_glen">Watkins Glen</option>
|
||||
{Object.entries(TRACKS).map(([key, name]) => (
|
||||
<option key={key} value={key}>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Pre-Race Waiting Time (seconds)
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.preRaceWaitingTimeSeconds}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
value={formData.preRaceWaitingTimeSeconds}
|
||||
onChange={(e) => handleInputChange('preRaceWaitingTimeSeconds', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
min="30"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Session Over Time (seconds)
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.sessionOverTimeSeconds}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -126,9 +104,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Post Qualify Seconds
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.postQualySeconds}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -140,9 +116,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Post Race Seconds
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.postRaceSeconds}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -161,9 +135,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Ambient Temperature (°C)
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.ambientTemp}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -176,9 +148,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Cloud Level (0.0-1.0)
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.cloudLevel}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -192,7 +162,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">Rain (0.0-1.0)</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.rain}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -206,9 +176,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Weather Randomness
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.weatherRandomness}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -221,9 +189,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Simracer Weather Conditions
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.simracerWeatherConditions}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData.simracerWeatherConditions}
|
||||
@@ -236,9 +202,7 @@ export function EventConfigEditor({ formData, disabled, onFormDataChange }: Even
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Fixed Condition Qualification
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.isFixedConditionQualification}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData.isFixedConditionQualification}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import type { EventRules } from '@/lib/schemas/config';
|
||||
import { FIELD_LABELS } from '@/lib/schemas/config';
|
||||
|
||||
interface EventRulesEditorProps {
|
||||
formData: EventRules;
|
||||
@@ -8,63 +9,21 @@ interface EventRulesEditorProps {
|
||||
onFormDataChange: (data: EventRules) => void;
|
||||
}
|
||||
|
||||
const numberFields = [
|
||||
{
|
||||
key: 'qualifyStandingType' as keyof EventRules,
|
||||
label: 'Qualify Standing Type',
|
||||
min: -1,
|
||||
max: 1
|
||||
},
|
||||
{
|
||||
key: 'pitWindowLengthSec' as keyof EventRules,
|
||||
label: 'Pit Window Length (seconds)',
|
||||
min: -1
|
||||
},
|
||||
{
|
||||
key: 'driverStintTimeSec' as keyof EventRules,
|
||||
label: 'Driver Stint Time (seconds)',
|
||||
min: -1
|
||||
},
|
||||
{
|
||||
key: 'mandatoryPitstopCount' as keyof EventRules,
|
||||
label: 'Mandatory Pitstop Count',
|
||||
min: -1,
|
||||
max: 5
|
||||
},
|
||||
{
|
||||
key: 'maxTotalDrivingTime' as keyof EventRules,
|
||||
label: 'Max Total Driving Time (seconds)',
|
||||
min: -1
|
||||
},
|
||||
{
|
||||
key: 'tyreSetCount' as keyof EventRules,
|
||||
label: 'Tyre Set Count',
|
||||
min: 0,
|
||||
max: 50
|
||||
}
|
||||
const numberFields: { key: keyof EventRules; min: number; max?: number }[] = [
|
||||
{ key: 'pitWindowLengthSec', min: -1 },
|
||||
{ key: 'driverStintTimeSec', min: -1 },
|
||||
{ key: 'mandatoryPitstopCount', min: 0, max: 5 },
|
||||
{ key: 'maxTotalDrivingTime', min: -1 },
|
||||
{ key: 'maxDriversCount', min: 1, max: 10 },
|
||||
{ key: 'tyreSetCount', min: 0, max: 50 }
|
||||
];
|
||||
|
||||
const booleanFields = [
|
||||
{
|
||||
key: 'isRefuellingAllowedInRace' as keyof EventRules,
|
||||
label: 'Refuelling Allowed in Race'
|
||||
},
|
||||
{
|
||||
key: 'isRefuellingTimeFixed' as keyof EventRules,
|
||||
label: 'Refuelling Time Fixed'
|
||||
},
|
||||
{
|
||||
key: 'isMandatoryPitstopRefuellingRequired' as keyof EventRules,
|
||||
label: 'Mandatory Pitstop Refuelling Required'
|
||||
},
|
||||
{
|
||||
key: 'isMandatoryPitstopTyreChangeRequired' as keyof EventRules,
|
||||
label: 'Mandatory Pitstop Tyre Change Required'
|
||||
},
|
||||
{
|
||||
key: 'isMandatoryPitstopSwapDriverRequired' as keyof EventRules,
|
||||
label: 'Mandatory Pitstop Swap Driver Required'
|
||||
}
|
||||
const booleanFields: { key: keyof EventRules }[] = [
|
||||
{ key: 'isRefuellingAllowedInRace' },
|
||||
{ key: 'isRefuellingTimeFixed' },
|
||||
{ key: 'isMandatoryPitstopRefuellingRequired' },
|
||||
{ key: 'isMandatoryPitstopTyreChangeRequired' },
|
||||
{ key: 'isMandatoryPitstopSwapDriverRequired' }
|
||||
];
|
||||
|
||||
export function EventRulesEditor({ formData, disabled, onFormDataChange }: EventRulesEditorProps) {
|
||||
@@ -77,9 +36,21 @@ export function EventRulesEditor({ formData, disabled, onFormDataChange }: Event
|
||||
<div className="space-y-6">
|
||||
<h3 className="border-b border-border-muted pb-2 text-sm font-semibold text-primary">Race Rules</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{numberFields.map(({ key, label, min, max }) => (
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.qualifyStandingType}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData.qualifyStandingType}
|
||||
onChange={(e) => handleInputChange('qualifyStandingType', parseInt(e.target.value))}
|
||||
className="form-select w-full"
|
||||
>
|
||||
<option value={1}>Fastest Lap</option>
|
||||
<option value={2}>Average Lap</option>
|
||||
</select>
|
||||
</div>
|
||||
{numberFields.map(({ key, min, max }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{label}</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS[key]}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -99,9 +70,9 @@ export function EventRulesEditor({ formData, disabled, onFormDataChange }: Event
|
||||
Pitstop & Refuelling Rules
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{booleanFields.map(({ key, label }) => (
|
||||
{booleanFields.map(({ key }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{label}</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS[key]}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData[key] ? 'true' : 'false'}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import type { ServerSettings } from '@/lib/schemas/config';
|
||||
import { FIELD_LABELS } from '@/lib/schemas/config';
|
||||
|
||||
interface ServerSettingsEditorProps {
|
||||
formData: ServerSettings;
|
||||
@@ -8,82 +9,31 @@ interface ServerSettingsEditorProps {
|
||||
onFormDataChange: (data: ServerSettings) => void;
|
||||
}
|
||||
|
||||
const textFields = [
|
||||
{
|
||||
key: 'serverName' as keyof ServerSettings,
|
||||
label: 'Server Name',
|
||||
type: 'text'
|
||||
},
|
||||
{
|
||||
key: 'adminPassword' as keyof ServerSettings,
|
||||
label: 'Admin Password',
|
||||
type: 'password'
|
||||
},
|
||||
{
|
||||
key: 'password' as keyof ServerSettings,
|
||||
label: 'Password',
|
||||
type: 'password'
|
||||
},
|
||||
{
|
||||
key: 'spectatorPassword' as keyof ServerSettings,
|
||||
label: 'Spectator Password',
|
||||
type: 'password'
|
||||
},
|
||||
{
|
||||
key: 'centralEntryListPath' as keyof ServerSettings,
|
||||
label: 'Central Entry List Path',
|
||||
type: 'text'
|
||||
}
|
||||
const textFields: { key: keyof ServerSettings; type: 'text' | 'password' }[] = [
|
||||
{ key: 'serverName', type: 'text' },
|
||||
{ key: 'adminPassword', type: 'password' },
|
||||
{ key: 'password', type: 'password' },
|
||||
{ key: 'spectatorPassword', type: 'password' },
|
||||
{ key: 'centralEntryListPath', type: 'text' }
|
||||
];
|
||||
|
||||
const carGroups = ['FreeForAll', 'GT3', 'GT4', 'GT2', 'GTC', 'TCX'];
|
||||
|
||||
const numberFields = [
|
||||
{
|
||||
key: 'trackMedalsRequirement' as keyof ServerSettings,
|
||||
label: 'Track Medals Requirement',
|
||||
min: -1,
|
||||
max: 3
|
||||
},
|
||||
{
|
||||
key: 'safetyRatingRequirement' as keyof ServerSettings,
|
||||
label: 'Safety Rating Requirement',
|
||||
min: -1,
|
||||
max: 99
|
||||
},
|
||||
{
|
||||
key: 'racecraftRatingRequirement' as keyof ServerSettings,
|
||||
label: 'Racecraft Rating Requirement',
|
||||
min: -1,
|
||||
max: 99
|
||||
},
|
||||
{
|
||||
key: 'maxCarSlots' as keyof ServerSettings,
|
||||
label: 'Max Car Slots',
|
||||
min: 1,
|
||||
max: 30
|
||||
}
|
||||
const numberFields: { key: keyof ServerSettings; min: number; max: number }[] = [
|
||||
{ key: 'trackMedalsRequirement', min: 0, max: 3 },
|
||||
{ key: 'safetyRatingRequirement', min: -1, max: 99 },
|
||||
{ key: 'racecraftRatingRequirement', min: -1, max: 99 },
|
||||
{ key: 'maxCarSlots', min: 1, max: 30 }
|
||||
];
|
||||
|
||||
const selectFields = [
|
||||
{
|
||||
key: 'dumpLeaderboards' as keyof ServerSettings,
|
||||
label: 'Dump Leaderboards'
|
||||
},
|
||||
{ key: 'isRaceLocked' as keyof ServerSettings, label: 'Race Locked' },
|
||||
{
|
||||
key: 'randomizeTrackWhenEmpty' as keyof ServerSettings,
|
||||
label: 'Randomize Track When Empty'
|
||||
},
|
||||
{ key: 'allowAutoDQ' as keyof ServerSettings, label: 'Allow Auto DQ' },
|
||||
{
|
||||
key: 'shortFormationLap' as keyof ServerSettings,
|
||||
label: 'Short Formation Lap'
|
||||
},
|
||||
{
|
||||
key: 'ignorePrematureDisconnects' as keyof ServerSettings,
|
||||
label: 'Ignore Premature Disconnects'
|
||||
}
|
||||
const selectFields: { key: keyof ServerSettings }[] = [
|
||||
{ key: 'dumpLeaderboards' },
|
||||
{ key: 'isRaceLocked' },
|
||||
{ key: 'randomizeTrackWhenEmpty' },
|
||||
{ key: 'allowAutoDQ' },
|
||||
{ key: 'shortFormationLap' },
|
||||
{ key: 'dumpEntryList' },
|
||||
{ key: 'ignorePrematureDisconnects' }
|
||||
];
|
||||
|
||||
export function ServerSettingsEditor({ formData, disabled, onFormDataChange }: ServerSettingsEditorProps) {
|
||||
@@ -98,9 +48,9 @@ export function ServerSettingsEditor({ formData, disabled, onFormDataChange }: S
|
||||
Basic Settings
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{textFields.map(({ key, label, type }) => (
|
||||
{textFields.map(({ key, type }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{label}</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS[key]}</label>
|
||||
<input
|
||||
type={type}
|
||||
disabled={disabled}
|
||||
@@ -112,7 +62,7 @@ export function ServerSettingsEditor({ formData, disabled, onFormDataChange }: S
|
||||
))}
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">Car Group</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.carGroup}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData.carGroup}
|
||||
@@ -134,9 +84,9 @@ export function ServerSettingsEditor({ formData, disabled, onFormDataChange }: S
|
||||
Requirements & Limits
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{numberFields.map(({ key, label, min, max }) => (
|
||||
{numberFields.map(({ key, min, max }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{label}</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS[key]}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={disabled}
|
||||
@@ -156,9 +106,9 @@ export function ServerSettingsEditor({ formData, disabled, onFormDataChange }: S
|
||||
Race Options
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{selectFields.map(({ key, label }) => (
|
||||
{selectFields.map(({ key }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{label}</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS[key]}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData[key] as number}
|
||||
@@ -172,9 +122,7 @@ export function ServerSettingsEditor({ formData, disabled, onFormDataChange }: S
|
||||
))}
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">
|
||||
Formation Lap Type
|
||||
</label>
|
||||
<label className="mb-1.5 block text-sm font-medium text-secondary">{FIELD_LABELS.formationLapType}</label>
|
||||
<select
|
||||
disabled={disabled}
|
||||
value={formData.formationLapType}
|
||||
|
||||
187
src/components/server/PresetPickerModal.tsx
Normal file
187
src/components/server/PresetPickerModal.tsx
Normal file
@@ -0,0 +1,187 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||
import { listPresetsAction, applyPresetAction } from '@/lib/actions/presets';
|
||||
import type { ConfigPreset } from '@/lib/schemas/preset';
|
||||
import { PRESET_SECTION_LABELS, getPresetSections } from '@/lib/schemas/preset';
|
||||
|
||||
interface PresetPickerModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
serverId: string;
|
||||
onApplied: () => void;
|
||||
}
|
||||
|
||||
export function PresetPickerModal({ isOpen, onClose, serverId, onApplied }: PresetPickerModalProps) {
|
||||
const [presets, setPresets] = useState<ConfigPreset[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [loadError, setLoadError] = useState<string | null>(null);
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [restart, setRestart] = useState(false);
|
||||
const [isApplying, setIsApplying] = useState(false);
|
||||
const [applyError, setApplyError] = useState<string | null>(null);
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const loadPresets = useCallback(async () => {
|
||||
setIsLoading(true);
|
||||
setLoadError(null);
|
||||
const result = await listPresetsAction();
|
||||
setIsLoading(false);
|
||||
if (!result.success) {
|
||||
setLoadError(result.message);
|
||||
return;
|
||||
}
|
||||
setPresets(result.data);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
setSelected(null);
|
||||
setApplyError(null);
|
||||
setSearch('');
|
||||
loadPresets();
|
||||
}
|
||||
}, [isOpen, loadPresets]);
|
||||
|
||||
const filtered = presets.filter((p) =>
|
||||
p.name.toLowerCase().includes(search.toLowerCase()) ||
|
||||
p.description.toLowerCase().includes(search.toLowerCase())
|
||||
);
|
||||
|
||||
const handleApply = async () => {
|
||||
if (!selected) return;
|
||||
setIsApplying(true);
|
||||
setApplyError(null);
|
||||
const result = await applyPresetAction(serverId, selected, restart);
|
||||
setIsApplying(false);
|
||||
if (!result.success) {
|
||||
setApplyError(result.message);
|
||||
return;
|
||||
}
|
||||
onApplied();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const selectedPreset = presets.find((p) => p.id === selected);
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={onClose} title="Load Config Preset" className="max-w-lg">
|
||||
<div className="flex flex-col gap-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search presets..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="form-input text-sm"
|
||||
/>
|
||||
|
||||
{loadError && <p className="text-sm text-red">{loadError}</p>}
|
||||
|
||||
<div className="max-h-64 overflow-y-auto rounded-md border border-border">
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<LoadingSpinner size="sm" />
|
||||
</div>
|
||||
) : filtered.length === 0 ? (
|
||||
<div className="py-8 text-center text-sm text-muted">
|
||||
{presets.length === 0 ? 'No presets saved yet.' : 'No presets match your search.'}
|
||||
</div>
|
||||
) : (
|
||||
<ul>
|
||||
{filtered.map((preset) => {
|
||||
const sections = getPresetSections(preset);
|
||||
const isSelected = selected === preset.id;
|
||||
return (
|
||||
<li
|
||||
key={preset.id}
|
||||
onClick={() => setSelected(preset.id)}
|
||||
className={`cursor-pointer border-b border-border-muted px-4 py-3 transition-colors last:border-0 ${
|
||||
isSelected
|
||||
? 'bg-orange/10'
|
||||
: 'hover:bg-hover'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="min-w-0">
|
||||
<p className={`truncate text-sm font-medium ${isSelected ? 'text-orange' : 'text-primary'}`}>
|
||||
{preset.name}
|
||||
</p>
|
||||
{preset.description && (
|
||||
<p className="mt-0.5 truncate text-xs text-muted">{preset.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="shrink-0 text-right">
|
||||
{sections.length > 0 ? (
|
||||
<p className="text-xs text-muted">{sections.length} section{sections.length !== 1 ? 's' : ''}</p>
|
||||
) : (
|
||||
<p className="text-xs text-muted/50">Empty</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedPreset && (
|
||||
<div className="rounded-md border border-border-muted bg-overlay px-4 py-3">
|
||||
<p className="mb-2 text-xs font-medium text-secondary">Sections in this preset:</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{getPresetSections(selectedPreset).map((key) => (
|
||||
<span
|
||||
key={key}
|
||||
className="rounded-full bg-blue-bg px-2 py-0.5 text-xs text-blue"
|
||||
>
|
||||
{PRESET_SECTION_LABELS[key] ?? key}
|
||||
</span>
|
||||
))}
|
||||
{getPresetSections(selectedPreset).length === 0 && (
|
||||
<span className="text-xs text-muted">No sections — nothing will be applied.</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{applyError && <p className="text-sm text-red">{applyError}</p>}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="flex items-center gap-2 text-sm text-muted">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={restart}
|
||||
onChange={(e) => setRestart(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-border bg-overlay accent-green focus:ring-1 focus:ring-blue"
|
||||
/>
|
||||
Restart after applying
|
||||
</label>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" size="md" onClick={onClose} disabled={isApplying}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={handleApply}
|
||||
disabled={!selected || isApplying}
|
||||
>
|
||||
{isApplying ? (
|
||||
<>
|
||||
<LoadingSpinner size="sm" />
|
||||
Applying…
|
||||
</>
|
||||
) : (
|
||||
'Apply Preset'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
149
src/components/server/SavePresetModal.tsx
Normal file
149
src/components/server/SavePresetModal.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Modal } from '@/components/ui/Modal';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||
import { createPresetAction } from '@/lib/actions/presets';
|
||||
import type { Configurations } from '@/lib/schemas/config';
|
||||
import { PRESET_SECTION_LABELS } from '@/lib/schemas/preset';
|
||||
|
||||
type SectionKey = keyof Configurations;
|
||||
|
||||
const ALL_SECTIONS: SectionKey[] = ['configuration', 'assistRules', 'event', 'eventRules', 'settings'];
|
||||
|
||||
interface SavePresetModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
configurations: Configurations;
|
||||
}
|
||||
|
||||
export function SavePresetModal({ isOpen, onClose, configurations }: SavePresetModalProps) {
|
||||
const [name, setName] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [selectedSections, setSelectedSections] = useState<Set<SectionKey>>(
|
||||
new Set(ALL_SECTIONS)
|
||||
);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [saved, setSaved] = useState(false);
|
||||
|
||||
const toggleSection = (key: SectionKey) =>
|
||||
setSelectedSections((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(key)) {
|
||||
next.delete(key);
|
||||
} else {
|
||||
next.add(key);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
|
||||
const handleClose = () => {
|
||||
if (isSaving) return;
|
||||
setName('');
|
||||
setDescription('');
|
||||
setSelectedSections(new Set(ALL_SECTIONS));
|
||||
setError(null);
|
||||
setSaved(false);
|
||||
onClose();
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!name.trim() || selectedSections.size === 0) return;
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
|
||||
const result = await createPresetAction({
|
||||
name: name.trim(),
|
||||
description: description.trim() || undefined,
|
||||
configuration: selectedSections.has('configuration') ? (configurations.configuration as Record<string, unknown>) : null,
|
||||
assistRules: selectedSections.has('assistRules') ? (configurations.assistRules as Record<string, unknown>) : null,
|
||||
event: selectedSections.has('event') ? (configurations.event as Record<string, unknown>) : null,
|
||||
eventRules: selectedSections.has('eventRules') ? (configurations.eventRules as Record<string, unknown>) : null,
|
||||
settings: selectedSections.has('settings') ? (configurations.settings as Record<string, unknown>) : null
|
||||
});
|
||||
|
||||
setIsSaving(false);
|
||||
|
||||
if (!result.success) {
|
||||
setError(result.message);
|
||||
return;
|
||||
}
|
||||
|
||||
setSaved(true);
|
||||
setTimeout(() => handleClose(), 1200);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal isOpen={isOpen} onClose={handleClose} title="Save as Preset">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-secondary">Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={(e) => setName(e.target.value)}
|
||||
placeholder="e.g. Sprint Race — Spa"
|
||||
className="form-input text-sm"
|
||||
disabled={isSaving || saved}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<label className="text-xs font-medium text-secondary">Description</label>
|
||||
<input
|
||||
type="text"
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
placeholder="Optional description..."
|
||||
className="form-input text-sm"
|
||||
disabled={isSaving || saved}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<label className="text-xs font-medium text-secondary">Include sections</label>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
{ALL_SECTIONS.map((key) => (
|
||||
<label key={key} className="flex cursor-pointer items-center gap-2.5 text-sm text-secondary">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedSections.has(key)}
|
||||
onChange={() => toggleSection(key)}
|
||||
disabled={isSaving || saved}
|
||||
className="h-4 w-4 rounded border-border bg-overlay accent-orange"
|
||||
/>
|
||||
{PRESET_SECTION_LABELS[key]}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red">{error}</p>}
|
||||
{saved && <p className="text-sm text-green">Preset saved!</p>}
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="ghost" size="md" onClick={handleClose} disabled={isSaving}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
onClick={handleSave}
|
||||
disabled={!name.trim() || selectedSections.size === 0 || isSaving || saved}
|
||||
>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<LoadingSpinner size="sm" />
|
||||
Saving…
|
||||
</>
|
||||
) : (
|
||||
'Save Preset'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
import Link from 'next/link';
|
||||
import { useTransition } from 'react';
|
||||
import { Server, ServiceStatus, serviceStatusToString } from '@/lib/schemas';
|
||||
import { getTrackDisplayName } from '@/lib/constants/tracks';
|
||||
import {
|
||||
startServerEventAction,
|
||||
restartServerEventAction,
|
||||
@@ -55,8 +56,8 @@ export function ServerCard({ server }: ServerCardProps) {
|
||||
const isRunning = server.status === ServiceStatus.Running;
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border border-border bg-canvas transition-colors hover:border-blue/40">
|
||||
<Link href={`/dashboard/server/${server.id}`} className="block p-4">
|
||||
<div className="flex flex-col overflow-hidden rounded-lg border border-border bg-canvas transition-colors hover:border-blue/40">
|
||||
<Link href={`/dashboard/server/${server.id}`} className="flex flex-1 flex-col p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<span className="text-sm font-semibold text-primary">{server.name}</span>
|
||||
<StatusDot status={server.status} />
|
||||
@@ -72,15 +73,20 @@ export function ServerCard({ server }: ServerCardProps) {
|
||||
<div>
|
||||
<div className="text-xs text-subtle">Track</div>
|
||||
<div className="truncate text-sm font-semibold text-primary">
|
||||
{server.state?.track || 'N/A'}
|
||||
{server.state?.track ? getTrackDisplayName(server.state.track) : 'N/A'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3">
|
||||
<div className="mt-auto pt-3 flex items-center justify-between gap-2">
|
||||
<Badge variant={statusBadgeVariant(server.status)}>
|
||||
{serviceStatusToString(server.status)}
|
||||
</Badge>
|
||||
{server.lastActivity && (
|
||||
<span className="truncate text-xs text-subtle">
|
||||
by {server.lastActivity.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { Configurations, ServerTab } from '@/lib/schemas/config';
|
||||
import { type Configurations, ServerTab } from '@/lib/schemas/config';
|
||||
import { ConfigurationEditor } from '@/components/configuration/ConfigurationEditor';
|
||||
import { AssistRulesEditor } from '@/components/configuration/AssistRulesEditor';
|
||||
import { EventConfigEditor } from '@/components/configuration/EventConfigEditor';
|
||||
@@ -8,16 +8,24 @@ import { EventRulesEditor } from '@/components/configuration/EventRulesEditor';
|
||||
import { ServerSettingsEditor } from '@/components/configuration/ServerSettingsEditor';
|
||||
import { StatisticsDashboard } from '@/components/statistics/StatisticsDashboard';
|
||||
import { LeaderboardManager } from '@/components/leaderboard/LeaderboardManager';
|
||||
import { ActivityLogTable } from '@/components/activityLog/ActivityLogTable';
|
||||
import { ServerLogViewer } from '@/components/server/ServerLogViewer';
|
||||
import { PresetPickerModal } from '@/components/server/PresetPickerModal';
|
||||
import { SavePresetModal } from '@/components/server/SavePresetModal';
|
||||
import { useState } from 'react';
|
||||
import { StateHistoryStats } from '@/lib/schemas';
|
||||
import { StateHistoryStats, hasPermission, type User } from '@/lib/schemas';
|
||||
import { Leaderboard } from '@/lib/schemas/leaderboard';
|
||||
import { bulkUpdateConfigurationsAction } from '@/lib/actions/configuration';
|
||||
import {
|
||||
bulkUpdateConfigurationsAction,
|
||||
getConfigurationsAction
|
||||
} from '@/lib/actions/configuration';
|
||||
|
||||
interface ServerConfigurationTabsProps {
|
||||
serverId: string;
|
||||
configurations: Configurations;
|
||||
statistics: StateHistoryStats;
|
||||
leaderboard: Leaderboard;
|
||||
user: User;
|
||||
}
|
||||
const tabs = [
|
||||
{ id: ServerTab.statistics, name: 'Statistics', icon: '📊' },
|
||||
@@ -26,7 +34,9 @@ const tabs = [
|
||||
{ id: ServerTab.event, name: 'Event Config', icon: '🏁' },
|
||||
{ id: ServerTab.eventRules, name: 'Event Rules', icon: '📋' },
|
||||
{ id: ServerTab.settings, name: 'Server Settings', icon: '🔧' },
|
||||
{ id: ServerTab.leaderboard, name: 'Leaderboard', icon: '🏆' }
|
||||
{ id: ServerTab.leaderboard, name: 'Leaderboard', icon: '🏆' },
|
||||
{ id: ServerTab.activityLog, name: 'History', icon: '📋' },
|
||||
{ id: ServerTab.logs, name: 'Logs', icon: '📄' }
|
||||
];
|
||||
|
||||
const configTabs = new Set([
|
||||
@@ -41,8 +51,11 @@ export function ServerConfigurationTabs({
|
||||
serverId,
|
||||
configurations,
|
||||
statistics,
|
||||
leaderboard
|
||||
leaderboard,
|
||||
user
|
||||
}: ServerConfigurationTabsProps) {
|
||||
const canViewPresets = hasPermission(user, 'preset.view');
|
||||
const canCreatePresets = hasPermission(user, 'preset.create');
|
||||
const [currentTab, setCurrentTab] = useState(ServerTab.statistics);
|
||||
|
||||
const [configData, setConfigData] = useState(configurations.configuration);
|
||||
@@ -50,30 +63,47 @@ export function ServerConfigurationTabs({
|
||||
const [eventData, setEventData] = useState(configurations.event);
|
||||
const [eventRulesData, setEventRulesData] = useState(configurations.eventRules);
|
||||
const [settingsData, setSettingsData] = useState(configurations.settings);
|
||||
const [dirtyConfigs, setDirtyConfigs] = useState<Set<keyof Configurations>>(new Set());
|
||||
|
||||
const [restart, setRestart] = useState(true);
|
||||
const [restart, setRestart] = useState(false);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [saveSuccess, setSaveSuccess] = useState(false);
|
||||
const [isPresetModalOpen, setIsPresetModalOpen] = useState(false);
|
||||
const [isSavePresetModalOpen, setIsSavePresetModalOpen] = useState(false);
|
||||
|
||||
const reloadConfigs = async () => {
|
||||
const result = await getConfigurationsAction(serverId);
|
||||
if (!result.success) return;
|
||||
setConfigData(result.data.configuration);
|
||||
setAssistData(result.data.assistRules);
|
||||
setEventData(result.data.event);
|
||||
setEventRulesData(result.data.eventRules);
|
||||
setSettingsData(result.data.settings);
|
||||
setDirtyConfigs(new Set());
|
||||
};
|
||||
|
||||
const markDirty = (key: keyof Configurations) =>
|
||||
setDirtyConfigs((prev) => new Set(prev).add(key));
|
||||
|
||||
const handleSaveAll = async () => {
|
||||
if (dirtyConfigs.size === 0) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
setSaveError(null);
|
||||
setSaveSuccess(false);
|
||||
|
||||
const result = await bulkUpdateConfigurationsAction(
|
||||
serverId,
|
||||
{
|
||||
configuration: configData,
|
||||
assistRules: assistData,
|
||||
event: eventData,
|
||||
eventRules: eventRulesData,
|
||||
settings: settingsData
|
||||
},
|
||||
restart
|
||||
);
|
||||
const payload: Partial<Configurations> = {};
|
||||
if (dirtyConfigs.has('configuration')) payload.configuration = configData;
|
||||
if (dirtyConfigs.has('assistRules')) payload.assistRules = assistData;
|
||||
if (dirtyConfigs.has('event')) payload.event = eventData;
|
||||
if (dirtyConfigs.has('eventRules')) payload.eventRules = eventRulesData;
|
||||
if (dirtyConfigs.has('settings')) payload.settings = settingsData;
|
||||
|
||||
const result = await bulkUpdateConfigurationsAction(serverId, payload, restart);
|
||||
|
||||
if (result.success) {
|
||||
setDirtyConfigs(new Set());
|
||||
setSaveSuccess(true);
|
||||
setTimeout(() => setSaveSuccess(false), 3000);
|
||||
} else {
|
||||
@@ -95,7 +125,10 @@ export function ServerConfigurationTabs({
|
||||
<ConfigurationEditor
|
||||
formData={configData}
|
||||
disabled={isSubmitting}
|
||||
onFormDataChange={setConfigData}
|
||||
onFormDataChange={(data) => {
|
||||
setConfigData(data);
|
||||
markDirty('configuration');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -104,7 +137,10 @@ export function ServerConfigurationTabs({
|
||||
<AssistRulesEditor
|
||||
formData={assistData}
|
||||
disabled={isSubmitting}
|
||||
onFormDataChange={setAssistData}
|
||||
onFormDataChange={(data) => {
|
||||
setAssistData(data);
|
||||
markDirty('assistRules');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -113,7 +149,10 @@ export function ServerConfigurationTabs({
|
||||
<EventConfigEditor
|
||||
formData={eventData}
|
||||
disabled={isSubmitting}
|
||||
onFormDataChange={setEventData}
|
||||
onFormDataChange={(data) => {
|
||||
setEventData(data);
|
||||
markDirty('event');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -122,7 +161,10 @@ export function ServerConfigurationTabs({
|
||||
<EventRulesEditor
|
||||
formData={eventRulesData}
|
||||
disabled={isSubmitting}
|
||||
onFormDataChange={setEventRulesData}
|
||||
onFormDataChange={(data) => {
|
||||
setEventRulesData(data);
|
||||
markDirty('eventRules');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -131,13 +173,22 @@ export function ServerConfigurationTabs({
|
||||
<ServerSettingsEditor
|
||||
formData={settingsData}
|
||||
disabled={isSubmitting}
|
||||
onFormDataChange={setSettingsData}
|
||||
onFormDataChange={(data) => {
|
||||
setSettingsData(data);
|
||||
markDirty('settings');
|
||||
}}
|
||||
/>
|
||||
);
|
||||
|
||||
case ServerTab.leaderboard:
|
||||
return <LeaderboardManager serverId={serverId} initialData={leaderboard} />;
|
||||
|
||||
case ServerTab.activityLog:
|
||||
return <ActivityLogTable serverId={serverId} />;
|
||||
|
||||
case ServerTab.logs:
|
||||
return <ServerLogViewer serverId={serverId} />;
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="py-12 text-center">
|
||||
@@ -151,7 +202,10 @@ export function ServerConfigurationTabs({
|
||||
|
||||
return (
|
||||
<div className="flex flex-1 flex-col overflow-hidden">
|
||||
<nav className="flex overflow-x-auto border-b border-border-muted px-5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" aria-label="Tabs">
|
||||
<nav
|
||||
className="border-border-muted flex overflow-x-auto border-b px-5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||||
aria-label="Tabs"
|
||||
>
|
||||
{tabs.map((tab) => {
|
||||
const isActive = currentTab === tab.id;
|
||||
return (
|
||||
@@ -161,7 +215,7 @@ export function ServerConfigurationTabs({
|
||||
className={`flex shrink-0 items-center gap-1.5 border-b-2 px-3 py-3 text-sm font-medium whitespace-nowrap transition-colors ${
|
||||
isActive
|
||||
? 'border-orange text-primary'
|
||||
: 'border-transparent text-muted hover:text-primary'
|
||||
: 'text-muted hover:text-primary border-transparent'
|
||||
}`}
|
||||
>
|
||||
<span className="text-sm">{tab.icon}</span>
|
||||
@@ -172,29 +226,49 @@ export function ServerConfigurationTabs({
|
||||
</nav>
|
||||
|
||||
{isConfigTab && (
|
||||
<div className="flex items-center justify-between border-b border-border-muted bg-overlay px-5 py-3">
|
||||
<div className="border-border-muted bg-overlay flex items-center justify-between border-b px-5 py-3">
|
||||
<div className="flex items-center gap-3">
|
||||
{saveError && (
|
||||
<p className="text-sm text-red">{saveError}</p>
|
||||
)}
|
||||
{saveSuccess && (
|
||||
<p className="text-sm text-green">All configurations saved.</p>
|
||||
)}
|
||||
<ul className="flex flex-col gap-0.5">
|
||||
{saveError.split('\n').map((line, i) => (
|
||||
<li key={i} className="text-red text-sm">• {line}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{saveSuccess && <p className="text-green text-sm">All configurations saved.</p>}
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="flex items-center gap-2 text-sm text-muted">
|
||||
<label className="text-muted flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={restart}
|
||||
onChange={(e) => setRestart(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-border bg-overlay accent-green focus:ring-1 focus:ring-blue"
|
||||
className="border-border bg-overlay accent-green focus:ring-blue h-4 w-4 rounded focus:ring-1"
|
||||
/>
|
||||
Restart after saving
|
||||
</label>
|
||||
{canCreatePresets && (
|
||||
<button
|
||||
onClick={() => setIsSavePresetModalOpen(true)}
|
||||
disabled={isSubmitting}
|
||||
className="border-border text-secondary hover:bg-hover rounded-md border px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
Save as Preset
|
||||
</button>
|
||||
)}
|
||||
{canViewPresets && (
|
||||
<button
|
||||
onClick={() => setIsPresetModalOpen(true)}
|
||||
disabled={isSubmitting}
|
||||
className="border-border text-secondary hover:bg-hover rounded-md border px-4 py-2 text-sm font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
Load Preset
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={handleSaveAll}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-btn-green border border-btn-green px-5 py-2 text-sm font-medium text-white transition-colors hover:bg-btn-green-hover disabled:cursor-not-allowed disabled:opacity-40"
|
||||
disabled={isSubmitting || dirtyConfigs.size === 0}
|
||||
className="bg-btn-green border-btn-green hover:bg-btn-green-hover rounded-md border px-5 py-2 text-sm font-medium text-white transition-colors disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
{isSubmitting ? 'Saving…' : 'Save All'}
|
||||
</button>
|
||||
@@ -203,6 +277,29 @@ export function ServerConfigurationTabs({
|
||||
)}
|
||||
|
||||
<div className="flex-1 overflow-y-auto p-5">{renderTabContent()}</div>
|
||||
|
||||
<SavePresetModal
|
||||
isOpen={isSavePresetModalOpen}
|
||||
onClose={() => setIsSavePresetModalOpen(false)}
|
||||
configurations={{
|
||||
configuration: configData,
|
||||
assistRules: assistData,
|
||||
event: eventData,
|
||||
eventRules: eventRulesData,
|
||||
settings: settingsData
|
||||
}}
|
||||
/>
|
||||
|
||||
<PresetPickerModal
|
||||
isOpen={isPresetModalOpen}
|
||||
onClose={() => setIsPresetModalOpen(false)}
|
||||
serverId={serverId}
|
||||
onApplied={async () => {
|
||||
await reloadConfigs();
|
||||
setSaveSuccess(true);
|
||||
setTimeout(() => setSaveSuccess(false), 3000);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
'use client';
|
||||
import Link from 'next/link';
|
||||
import { Server, serviceStatusToString, ServiceStatus } from '@/lib/schemas/server';
|
||||
import { getTrackDisplayName } from '@/lib/constants/tracks';
|
||||
import {
|
||||
startServerEventAction,
|
||||
restartServerEventAction,
|
||||
@@ -48,18 +49,18 @@ export function ServerHeader({ server, user }: ServerHeaderProps) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="flex h-12 items-center justify-between border-b border-border-muted px-5">
|
||||
<header className="flex flex-col gap-2 border-b border-border-muted px-5 py-2 sm:h-12 sm:flex-row sm:items-center sm:justify-between sm:gap-0 sm:py-0">
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Link href="/dashboard" className="text-blue hover:underline">Servers</Link>
|
||||
<span className="text-subtle">/</span>
|
||||
<span className="font-semibold text-primary">{server.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge variant={
|
||||
server.status === ServiceStatus.Running ? 'green' :
|
||||
server.status === ServiceStatus.Stopped ? 'gray' : 'yellow'
|
||||
}>
|
||||
● {serviceStatusToString(server.status)}
|
||||
● <span className="hidden sm:inline">{serviceStatusToString(server.status)}</span>
|
||||
</Badge>
|
||||
<Button variant="ghost" size="sm" onClick={startServer} disabled={server.status === ServiceStatus.Running || disabled || isPending}>Start</Button>
|
||||
<Button variant="ghost" size="sm" onClick={restartServer} disabled={server.status === ServiceStatus.Stopped || disabled || isPending}>Restart</Button>
|
||||
@@ -72,7 +73,7 @@ export function ServerHeader({ server, user }: ServerHeaderProps) {
|
||||
|
||||
<div className="flex flex-wrap gap-6 border-b border-border-muted px-5 py-3">
|
||||
{[
|
||||
{ label: 'Track', value: server.state?.track ?? 'N/A' },
|
||||
{ label: 'Track', value: server.state?.track ? getTrackDisplayName(server.state.track) : 'N/A' },
|
||||
{ label: 'Players', value: `${server.state?.playerCount ?? 0} / ${server.state?.maxConnections ?? 0}` },
|
||||
{ label: 'Session', value: server.state?.session ?? 'N/A' },
|
||||
].map(({ label, value }) => (
|
||||
|
||||
@@ -60,7 +60,7 @@ export function ServerListWithActions({ servers, user }: ServerListWithActionsPr
|
||||
{/* Card grid — desktop only */}
|
||||
<div
|
||||
className="hidden gap-3 md:grid"
|
||||
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(360px, 1fr))' }}
|
||||
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(420px, 1fr))' }}
|
||||
>
|
||||
{servers.map((server) => (
|
||||
<ServerCard key={server.id} server={server} />
|
||||
|
||||
153
src/components/server/ServerLogViewer.tsx
Normal file
153
src/components/server/ServerLogViewer.tsx
Normal file
@@ -0,0 +1,153 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef, useState, useCallback } from 'react';
|
||||
import { useWebSocket } from '@/lib/websocket/context';
|
||||
import type { WebSocketMessage } from '@/lib/schemas/websocket';
|
||||
import { getServerLogAction } from '@/lib/actions/serverLog';
|
||||
|
||||
const MAX_BUFFER = 5000;
|
||||
const LINE_OPTIONS = [100, 500, 1000, 5000] as const;
|
||||
|
||||
interface ServerLogViewerProps {
|
||||
serverId: string;
|
||||
}
|
||||
|
||||
export function ServerLogViewer({ serverId }: ServerLogViewerProps) {
|
||||
const [lines, setLines] = useState<string[]>([]);
|
||||
const [initialLines, setInitialLines] = useState<number>(100);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
|
||||
const { associateWithServer, addMessageHandler, removeMessageHandler } = useWebSocket();
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
const isPausedRef = useRef(false);
|
||||
|
||||
const appendLines = useCallback((newLines: string[]) => {
|
||||
setLines((prev) => {
|
||||
const combined = [...prev, ...newLines];
|
||||
return combined.length > MAX_BUFFER ? combined.slice(combined.length - MAX_BUFFER) : combined;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const fetchInitial = useCallback(
|
||||
async (count: number) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
const result = await getServerLogAction(serverId, count);
|
||||
setIsLoading(false);
|
||||
if (!result.success) {
|
||||
setError(result.message);
|
||||
return;
|
||||
}
|
||||
setLines(result.lines);
|
||||
},
|
||||
[serverId]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
associateWithServer(serverId);
|
||||
fetchInitial(initialLines);
|
||||
}, [serverId, associateWithServer, fetchInitial, initialLines]);
|
||||
|
||||
const handleMessage = useCallback(
|
||||
(message: WebSocketMessage) => {
|
||||
if (message.type !== 'log_line') return;
|
||||
if (message.server_id !== serverId) return;
|
||||
appendLines([message.data.line]);
|
||||
},
|
||||
[serverId, appendLines]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
addMessageHandler(handleMessage);
|
||||
return () => {
|
||||
removeMessageHandler(handleMessage);
|
||||
};
|
||||
}, [addMessageHandler, removeMessageHandler, handleMessage]);
|
||||
|
||||
// Auto-scroll to bottom when new lines arrive, unless paused
|
||||
useEffect(() => {
|
||||
if (!isPausedRef.current && scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
}, [lines]);
|
||||
|
||||
const handleScroll = () => {
|
||||
if (!scrollRef.current) return;
|
||||
const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
|
||||
const isAtBottom = scrollHeight - scrollTop - clientHeight < 40;
|
||||
const shouldPause = !isAtBottom;
|
||||
isPausedRef.current = shouldPause;
|
||||
setIsPaused(shouldPause);
|
||||
};
|
||||
|
||||
const jumpToBottom = () => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
isPausedRef.current = false;
|
||||
setIsPaused(false);
|
||||
};
|
||||
|
||||
const handleLineLimitChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const count = Number(e.target.value);
|
||||
setInitialLines(count);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-xs text-subtle">Initial lines</label>
|
||||
<select
|
||||
value={initialLines}
|
||||
onChange={handleLineLimitChange}
|
||||
className="form-input w-28 text-sm"
|
||||
>
|
||||
{LINE_OPTIONS.map((n) => (
|
||||
<option key={n} value={n}>
|
||||
{n}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="ml-auto text-xs text-subtle">{lines.length} lines buffered</span>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red">{error}</p>}
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
ref={scrollRef}
|
||||
onScroll={handleScroll}
|
||||
className="h-[calc(100vh-280px)] min-h-64 overflow-y-auto rounded-lg border border-border bg-base p-3 font-mono text-xs text-secondary"
|
||||
>
|
||||
{isLoading ? (
|
||||
<span className="text-muted">Loading…</span>
|
||||
) : lines.length === 0 ? (
|
||||
<span className="text-muted">No log output yet.</span>
|
||||
) : (
|
||||
lines.map((line, i) => (
|
||||
<div key={i} className="leading-5 whitespace-pre-wrap break-all">
|
||||
{line}
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isPaused && (
|
||||
<div className="absolute bottom-3 left-1/2 flex -translate-x-1/2 items-center gap-2">
|
||||
<div className="flex items-center gap-2 rounded-full border border-border bg-overlay px-3 py-1.5 shadow-lg">
|
||||
<span className="text-xs text-muted">Paused</span>
|
||||
<button
|
||||
onClick={jumpToBottom}
|
||||
className="text-xs font-medium text-blue hover:underline"
|
||||
>
|
||||
Jump to bottom
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { useTransition } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import { Server, ServiceStatus } from '@/lib/schemas';
|
||||
import { getTrackDisplayName } from '@/lib/constants/tracks';
|
||||
import {
|
||||
startServerEventAction,
|
||||
restartServerEventAction,
|
||||
@@ -51,7 +52,7 @@ export function ServerRow({ server }: ServerRowProps) {
|
||||
<div className="min-w-0">
|
||||
<div className="truncate text-sm font-semibold text-primary">{server.name}</div>
|
||||
<div className="truncate text-xs text-muted">
|
||||
{server.state?.track ?? 'No track'} · {server.state?.playerCount ?? 0} players
|
||||
{server.state?.track ? getTrackDisplayName(server.state.track) : 'No track'} · {server.state?.playerCount ?? 0} players
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -45,7 +45,8 @@ export function PlayerCountChart({ data }: PlayerCountChartProps) {
|
||||
})),
|
||||
borderColor: '#58a6ff',
|
||||
backgroundColor: '#58a6ff1a',
|
||||
tension: 0.4
|
||||
tension: 0.4,
|
||||
cubicInterpolationMode: 'monotone' as const
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { getTrackDisplayName } from '@/lib/constants/tracks';
|
||||
|
||||
interface RecentSession {
|
||||
id: string;
|
||||
date: string;
|
||||
@@ -70,7 +72,7 @@ export function RecentSessions({ sessions }: RecentSessionsProps) {
|
||||
{session.type === 'R' ? 'Race' : session.type === 'Q' ? 'Qualify' : 'Practice'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-secondary">{session.track}</td>
|
||||
<td className="px-4 py-3 text-sm text-secondary">{getTrackDisplayName(session.track)}</td>
|
||||
<td className="px-4 py-3 text-sm text-muted">
|
||||
{formatDuration(session.duration)}
|
||||
</td>
|
||||
|
||||
@@ -44,10 +44,25 @@ function UsersIcon({ active }: { active: boolean }) {
|
||||
);
|
||||
}
|
||||
|
||||
function ActivityLogIcon({ active }: { active: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
className={cn('h-5 w-5', active ? 'text-blue' : 'text-subtle')}
|
||||
>
|
||||
<path d="M9 12h6M9 16h6M9 8h6M5 4h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5a1 1 0 011-1z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function Sidebar({ showUsers }: SidebarProps) {
|
||||
const pathname = usePathname();
|
||||
const isServers = pathname === '/dashboard' || pathname.startsWith('/dashboard/server');
|
||||
const isUsers = pathname.startsWith('/dashboard/membership');
|
||||
const isActivityLog = pathname.startsWith('/dashboard/activity-log');
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
@@ -56,6 +71,12 @@ export function Sidebar({ showUsers }: SidebarProps) {
|
||||
active: isServers,
|
||||
icon: <ServerIcon active={isServers} />
|
||||
},
|
||||
{
|
||||
href: '/dashboard/activity-log',
|
||||
label: 'Activity Log',
|
||||
active: isActivityLog,
|
||||
icon: <ActivityLogIcon active={isActivityLog} />
|
||||
},
|
||||
...(showUsers
|
||||
? [
|
||||
{
|
||||
|
||||
20
src/lib/actions/activityLog.ts
Normal file
20
src/lib/actions/activityLog.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
'use server';
|
||||
|
||||
import { requireAuth } from '@/lib/auth/server';
|
||||
import { getActivityLog } from '@/lib/api/server/activityLog';
|
||||
import type { ActivityLog, ActivityLogFilter } from '@/lib/schemas/activityLog';
|
||||
|
||||
export async function getActivityLogAction(
|
||||
filter?: ActivityLogFilter
|
||||
): Promise<{ success: true; data: ActivityLog[] } | { success: false; message: string }> {
|
||||
try {
|
||||
const session = await requireAuth();
|
||||
const data = await getActivityLog(session.token!, filter);
|
||||
return { success: true, data };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
message: error instanceof Error ? error.message : 'Failed to fetch activity log'
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,7 @@
|
||||
import { redirect } from 'next/navigation';
|
||||
import { loginUser, getOpenToken } from '@/lib/api/server/auth';
|
||||
import { login, logout } from '@/lib/auth/server';
|
||||
import { formatZodIssues } from '@/lib/utils';
|
||||
import { loginSchema, loginResponseSchema } from '../schemas';
|
||||
|
||||
export type LoginResult = {
|
||||
@@ -19,7 +20,7 @@ export async function loginAction(prevState: LoginResult, formData: FormData) {
|
||||
if (!loginData.success) {
|
||||
return {
|
||||
success: false,
|
||||
message: loginData.error.message
|
||||
message: formatZodIssues(loginData.error.issues)
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { requireAuth } from '@/lib/auth/server';
|
||||
import { updateServerConfiguration, bulkUpdateServerConfigurations } from '@/lib/api/server/configuration';
|
||||
import { getServerConfigurations, updateServerConfiguration, bulkUpdateServerConfigurations } from '@/lib/api/server/configuration';
|
||||
import { boolToInt, formatZodIssues } from '@/lib/utils';
|
||||
import {
|
||||
assistRulesSchema,
|
||||
ConfigFile,
|
||||
@@ -19,7 +20,21 @@ import type {
|
||||
EventRules,
|
||||
ServerSettings
|
||||
} from '@/lib/schemas/config';
|
||||
import { boolToInt } from '@/lib/utils';
|
||||
|
||||
export async function getConfigurationsAction(
|
||||
serverId: string
|
||||
): Promise<{ success: true; data: Configurations } | { success: false; message: string }> {
|
||||
try {
|
||||
const session = await requireAuth();
|
||||
const data = await getServerConfigurations(session.token!, serverId);
|
||||
return { success: true, data };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
message: error instanceof Error ? error.message : 'Failed to fetch configurations'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateConfigurationAction(serverId: string, formData: FormData) {
|
||||
try {
|
||||
@@ -72,7 +87,7 @@ export async function updateAssistRulesAction(serverId: string, formData: FormDa
|
||||
|
||||
const config = assistRulesSchema.safeParse(rawConfig);
|
||||
if (!config.success) {
|
||||
return { success: false, message: config.error.message };
|
||||
return { success: false, message: formatZodIssues(config.error.issues) };
|
||||
}
|
||||
|
||||
await updateServerConfiguration(
|
||||
@@ -114,12 +129,13 @@ export async function updateServerSettingsAction(serverId: string, formData: For
|
||||
centralEntryListPath: formData.get('centralEntryListPath') as string,
|
||||
allowAutoDQ: parseInt(formData.get('allowAutoDQ') as string),
|
||||
shortFormationLap: parseInt(formData.get('shortFormationLap') as string),
|
||||
dumpEntryList: parseInt(formData.get('dumpEntryList') as string),
|
||||
formationLapType: parseInt(formData.get('formationLapType') as string),
|
||||
ignorePrematureDisconnects: parseInt(formData.get('ignorePrematureDisconnects') as string)
|
||||
};
|
||||
const config = serverSettingsSchema.safeParse(rawConfig);
|
||||
if (!config.success) {
|
||||
return { success: false, message: config.error.message };
|
||||
return { success: false, message: formatZodIssues(config.error.issues) };
|
||||
}
|
||||
|
||||
await updateServerConfiguration(
|
||||
@@ -166,7 +182,7 @@ export async function updateEventConfigAction(serverId: string, formData: FormDa
|
||||
};
|
||||
const config = eventConfigSchema.safeParse(rawConfig);
|
||||
if (!config.success) {
|
||||
return { success: false, message: config.error.message };
|
||||
return { success: false, message: formatZodIssues(config.error.issues) };
|
||||
}
|
||||
|
||||
await updateServerConfiguration(
|
||||
@@ -201,6 +217,7 @@ export async function updateEventRulesAction(serverId: string, formData: FormDat
|
||||
driverStintTimeSec: parseInt(formData.get('driverStintTimeSec') as string),
|
||||
mandatoryPitstopCount: parseInt(formData.get('mandatoryPitstopCount') as string),
|
||||
maxTotalDrivingTime: parseInt(formData.get('maxTotalDrivingTime') as string),
|
||||
maxDriversCount: parseInt(formData.get('maxDriversCount') as string),
|
||||
isRefuellingAllowedInRace: boolToInt(formData.get('isRefuellingAllowedInRace') === 'true'),
|
||||
isRefuellingTimeFixed: boolToInt(formData.get('isRefuellingTimeFixed') === 'true'),
|
||||
isMandatoryPitstopRefuellingRequired:
|
||||
@@ -214,7 +231,7 @@ export async function updateEventRulesAction(serverId: string, formData: FormDat
|
||||
|
||||
const config = eventRulesSchema.safeParse(rawConfig);
|
||||
if (!config.success) {
|
||||
return { success: false, message: config.error.message };
|
||||
return { success: false, message: formatZodIssues(config.error.issues) };
|
||||
}
|
||||
|
||||
await updateServerConfiguration(
|
||||
@@ -237,15 +254,15 @@ export async function updateEventRulesAction(serverId: string, formData: FormDat
|
||||
|
||||
export async function bulkUpdateConfigurationsAction(
|
||||
serverId: string,
|
||||
configs: Configurations,
|
||||
configs: Partial<Configurations>,
|
||||
restart: boolean
|
||||
) {
|
||||
try {
|
||||
const session = await requireAuth();
|
||||
|
||||
const validated = configurationsSchema.safeParse(configs);
|
||||
const validated = configurationsSchema.partial().safeParse(configs);
|
||||
if (!validated.success) {
|
||||
return { success: false, message: validated.error.message };
|
||||
return { success: false, message: formatZodIssues(validated.error.issues) };
|
||||
}
|
||||
|
||||
await bulkUpdateServerConfigurations(session.token!, serverId, validated.data, restart);
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { requireAuth } from '@/lib/auth/server';
|
||||
import { fetchServerAPI } from '@/lib/api/server/base';
|
||||
import { formatZodIssues } from '@/lib/utils';
|
||||
import { leaderboardSchema, type Leaderboard } from '@/lib/schemas/leaderboard';
|
||||
|
||||
export async function saveLeaderboardAction(serverId: string, data: Leaderboard) {
|
||||
@@ -10,7 +11,7 @@ export async function saveLeaderboardAction(serverId: string, data: Leaderboard)
|
||||
const session = await requireAuth();
|
||||
const validated = leaderboardSchema.safeParse(data);
|
||||
if (!validated.success) {
|
||||
return { success: false, message: validated.error.message };
|
||||
return { success: false, message: formatZodIssues(validated.error.issues) };
|
||||
}
|
||||
await fetchServerAPI(`/server/${serverId}/leaderboard`, session.token!, 'PUT', validated.data);
|
||||
revalidatePath(`/dashboard/server/${serverId}`);
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { requireAuth } from '@/lib/auth/server';
|
||||
import { createUser, deleteUser } from '@/lib/api/server/membership';
|
||||
import { formatZodIssues } from '@/lib/utils';
|
||||
import { userCreateSchema } from '../schemas';
|
||||
|
||||
export async function createUserAction(formData: FormData) {
|
||||
@@ -15,7 +16,7 @@ export async function createUserAction(formData: FormData) {
|
||||
const rawData = { username, password, role };
|
||||
const data = userCreateSchema.safeParse(rawData);
|
||||
if (!data.success) {
|
||||
return { success: false, message: data.error.message };
|
||||
return { success: false, message: formatZodIssues(data.error.issues) };
|
||||
}
|
||||
|
||||
await createUser(session.token!, data.data);
|
||||
|
||||
54
src/lib/actions/presets.ts
Normal file
54
src/lib/actions/presets.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
'use server';
|
||||
|
||||
import { revalidatePath } from 'next/cache';
|
||||
import { requireAuth } from '@/lib/auth/server';
|
||||
import { listPresets, createPreset, applyPreset, type ConfigPresetCreateRequest } from '@/lib/api/server/presets';
|
||||
import type { ConfigPreset } from '@/lib/schemas/preset';
|
||||
|
||||
export async function listPresetsAction(
|
||||
name?: string
|
||||
): Promise<{ success: true; data: ConfigPreset[] } | { success: false; message: string }> {
|
||||
try {
|
||||
const session = await requireAuth();
|
||||
const data = await listPresets(session.token!, name);
|
||||
return { success: true, data };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
message: error instanceof Error ? error.message : 'Failed to fetch presets'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function createPresetAction(
|
||||
data: ConfigPresetCreateRequest
|
||||
): Promise<{ success: true; data: ConfigPreset } | { success: false; message: string }> {
|
||||
try {
|
||||
const session = await requireAuth();
|
||||
const preset = await createPreset(session.token!, data);
|
||||
return { success: true, data: preset };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
message: error instanceof Error ? error.message : 'Failed to save preset'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export async function applyPresetAction(
|
||||
serverId: string,
|
||||
presetId: string,
|
||||
restart = false
|
||||
): Promise<{ success: true; message: string } | { success: false; message: string }> {
|
||||
try {
|
||||
const session = await requireAuth();
|
||||
await applyPreset(session.token!, serverId, presetId, restart);
|
||||
revalidatePath(`/dashboard/server/${serverId}`);
|
||||
return { success: true, message: 'Preset applied successfully' };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
message: error instanceof Error ? error.message : 'Failed to apply preset'
|
||||
};
|
||||
}
|
||||
}
|
||||
20
src/lib/actions/serverLog.ts
Normal file
20
src/lib/actions/serverLog.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
'use server';
|
||||
|
||||
import { requireAuth } from '@/lib/auth/server';
|
||||
import { getServerLog } from '@/lib/api/server/serverLog';
|
||||
|
||||
export async function getServerLogAction(
|
||||
serverId: string,
|
||||
lines: number = 100
|
||||
): Promise<{ success: true; lines: string[] } | { success: false; message: string }> {
|
||||
try {
|
||||
const session = await requireAuth();
|
||||
const data = await getServerLog(session.token!, serverId, lines);
|
||||
return { success: true, lines: data };
|
||||
} catch (error) {
|
||||
return {
|
||||
success: false,
|
||||
message: error instanceof Error ? error.message : 'Failed to fetch server log'
|
||||
};
|
||||
}
|
||||
}
|
||||
31
src/lib/api/server/activityLog.ts
Normal file
31
src/lib/api/server/activityLog.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import { fetchServerAPI } from './base';
|
||||
import {
|
||||
activityLogSchema,
|
||||
type ActivityLog,
|
||||
type ActivityLogFilter
|
||||
} from '@/lib/schemas/activityLog';
|
||||
|
||||
function buildQuery(filter?: ActivityLogFilter): string {
|
||||
if (!filter) return '';
|
||||
const params = new URLSearchParams();
|
||||
if (filter.page !== undefined) params.set('page', String(filter.page));
|
||||
if (filter.page_size !== undefined) params.set('page_size', String(filter.page_size));
|
||||
if (filter.sort_by) params.set('sort_by', filter.sort_by);
|
||||
if (filter.sort_desc !== undefined) params.set('sort_desc', String(filter.sort_desc));
|
||||
if (filter.user_id) params.set('user_id', filter.user_id);
|
||||
if (filter.server_id) params.set('server_id', filter.server_id);
|
||||
if (filter.action) params.set('action', filter.action);
|
||||
if (filter.start_date) params.set('start_date', filter.start_date);
|
||||
if (filter.end_date) params.set('end_date', filter.end_date);
|
||||
const str = params.toString();
|
||||
return str ? `?${str}` : '';
|
||||
}
|
||||
|
||||
export async function getActivityLog(
|
||||
token: string,
|
||||
filter?: ActivityLogFilter
|
||||
): Promise<ActivityLog[]> {
|
||||
const query = buildQuery(filter);
|
||||
const response = await fetchServerAPI<ActivityLog[]>(`/activity-log${query}`, token);
|
||||
return activityLogSchema.array().parse(response.data);
|
||||
}
|
||||
@@ -30,7 +30,14 @@ export async function fetchServerAPI<T>(
|
||||
if (response.status == 401) {
|
||||
redirect('/login?expired=true');
|
||||
}
|
||||
throw new Error(`API Error: ${response.statusText} - ${method} - ${BASE_URL}${endpoint}`);
|
||||
let message = response.statusText;
|
||||
try {
|
||||
const body = await response.json();
|
||||
message = body?.error ?? body?.message ?? message;
|
||||
} catch {
|
||||
// non-JSON error body, keep statusText
|
||||
}
|
||||
throw new Error(message);
|
||||
}
|
||||
|
||||
if (response.headers.get('Content-Type')?.includes('application/json')) {
|
||||
|
||||
@@ -67,7 +67,7 @@ export async function updateServerConfiguration(
|
||||
export async function bulkUpdateServerConfigurations(
|
||||
token: string,
|
||||
serverId: string,
|
||||
configs: Configurations,
|
||||
configs: Partial<Configurations>,
|
||||
restart = false
|
||||
): Promise<void> {
|
||||
await fetchServerAPI<ConfigAuditRecord[]>(
|
||||
|
||||
43
src/lib/api/server/presets.ts
Normal file
43
src/lib/api/server/presets.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { fetchServerAPI } from './base';
|
||||
import { configPresetSchema, type ConfigPreset } from '@/lib/schemas/preset';
|
||||
import type { ConfigAuditRecord } from './configuration';
|
||||
|
||||
const route = '/presets';
|
||||
|
||||
export type ConfigPresetCreateRequest = {
|
||||
name: string;
|
||||
description?: string;
|
||||
configuration?: Record<string, unknown> | null;
|
||||
assistRules?: Record<string, unknown> | null;
|
||||
event?: Record<string, unknown> | null;
|
||||
eventRules?: Record<string, unknown> | null;
|
||||
settings?: Record<string, unknown> | null;
|
||||
};
|
||||
|
||||
export async function createPreset(
|
||||
token: string,
|
||||
data: ConfigPresetCreateRequest
|
||||
): Promise<ConfigPreset> {
|
||||
const response = await fetchServerAPI<ConfigPreset>(route, token, 'POST', data);
|
||||
return configPresetSchema.parse(response.data);
|
||||
}
|
||||
|
||||
export async function listPresets(token: string, name?: string): Promise<ConfigPreset[]> {
|
||||
const query = name ? `?name=${encodeURIComponent(name)}` : '';
|
||||
const response = await fetchServerAPI<ConfigPreset[]>(`${route}${query}`, token);
|
||||
return configPresetSchema.array().parse(response.data);
|
||||
}
|
||||
|
||||
export async function applyPreset(
|
||||
token: string,
|
||||
serverId: string,
|
||||
presetId: string,
|
||||
restart = false
|
||||
): Promise<ConfigAuditRecord[]> {
|
||||
const response = await fetchServerAPI<ConfigAuditRecord[]>(
|
||||
`/server/${serverId}/config/presets/${presetId}/apply?restart=${restart}`,
|
||||
token,
|
||||
'POST'
|
||||
);
|
||||
return response.data ?? [];
|
||||
}
|
||||
13
src/lib/api/server/serverLog.ts
Normal file
13
src/lib/api/server/serverLog.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
import { fetchServerAPI } from './base';
|
||||
|
||||
export async function getServerLog(
|
||||
token: string,
|
||||
serverId: string,
|
||||
lines: number = 100
|
||||
): Promise<string[]> {
|
||||
const response = await fetchServerAPI<{ lines: string[] }>(
|
||||
`/server/${serverId}/log?lines=${lines}`,
|
||||
token
|
||||
);
|
||||
return response.data?.lines ?? [];
|
||||
}
|
||||
31
src/lib/constants/tracks.ts
Normal file
31
src/lib/constants/tracks.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
export const TRACKS: Record<string, string> = {
|
||||
barcelona: 'Barcelona',
|
||||
brands_hatch: 'Brands Hatch',
|
||||
cota: 'COTA',
|
||||
donington: 'Donington',
|
||||
hungaroring: 'Hungaroring',
|
||||
imola: 'Imola',
|
||||
indianapolis: 'Indianapolis',
|
||||
kyalami: 'Kyalami',
|
||||
laguna_seca: 'Laguna Seca',
|
||||
misano: 'Misano',
|
||||
monza: 'Monza',
|
||||
mount_panorama: 'Mount Panorama',
|
||||
nurburgring: 'Nürburgring',
|
||||
nurburgring_24h: 'Nürburgring 24h',
|
||||
oulton_park: 'Oulton Park',
|
||||
paul_ricard: 'Paul Ricard',
|
||||
red_bull_ring: 'Red Bull Ring',
|
||||
silverstone: 'Silverstone',
|
||||
snetterton: 'Snetterton',
|
||||
spa: 'Spa-Francorchamps',
|
||||
suzuka: 'Suzuka',
|
||||
valencia: 'Valencia',
|
||||
watkins_glen: 'Watkins Glen',
|
||||
zandvoort: 'Zandvoort',
|
||||
zolder: 'Zolder'
|
||||
};
|
||||
|
||||
export function getTrackDisplayName(key: string): string {
|
||||
return TRACKS[key] ?? key.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
}
|
||||
68
src/lib/schemas/activityLog.ts
Normal file
68
src/lib/schemas/activityLog.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import * as z from 'zod';
|
||||
|
||||
export const actionTypeSchema = z.enum([
|
||||
'config_update',
|
||||
'server_start',
|
||||
'server_stop',
|
||||
'server_restart',
|
||||
'leaderboard_update',
|
||||
'preset_create',
|
||||
'preset_apply'
|
||||
]);
|
||||
|
||||
export type ActionType = z.infer<typeof actionTypeSchema>;
|
||||
|
||||
// Minimal server shape embedded in activity log responses (avoids circular import with server.ts)
|
||||
const embeddedServerSchema = z
|
||||
.object({
|
||||
id: z.string(),
|
||||
name: z.string()
|
||||
})
|
||||
.passthrough();
|
||||
|
||||
export type EmbeddedServer = z.infer<typeof embeddedServerSchema>;
|
||||
|
||||
export const activityLogSchema = z.object({
|
||||
id: z.string(),
|
||||
serverId: z.string().nullable(),
|
||||
server: embeddedServerSchema.optional(),
|
||||
userId: z.string(),
|
||||
username: z.string(),
|
||||
action: actionTypeSchema,
|
||||
details: z.string(),
|
||||
createdAt: z.string()
|
||||
});
|
||||
|
||||
export type ActivityLog = z.infer<typeof activityLogSchema>;
|
||||
|
||||
export const lastActivityInfoSchema = z.object({
|
||||
updatedAt: z.string(),
|
||||
username: z.string(),
|
||||
action: actionTypeSchema
|
||||
});
|
||||
|
||||
export type LastActivityInfo = z.infer<typeof lastActivityInfoSchema>;
|
||||
|
||||
export const activityLogFilterSchema = z.object({
|
||||
page: z.number().optional(),
|
||||
page_size: z.number().optional(),
|
||||
sort_by: z.string().optional(),
|
||||
sort_desc: z.boolean().optional(),
|
||||
user_id: z.string().optional(),
|
||||
server_id: z.string().optional(),
|
||||
action: actionTypeSchema.optional(),
|
||||
start_date: z.string().optional(),
|
||||
end_date: z.string().optional()
|
||||
});
|
||||
|
||||
export type ActivityLogFilter = z.infer<typeof activityLogFilterSchema>;
|
||||
|
||||
export const ACTION_TYPE_LABELS: Record<ActionType, string> = {
|
||||
config_update: 'Config Update',
|
||||
server_start: 'Server Start',
|
||||
server_stop: 'Server Stop',
|
||||
server_restart: 'Server Restart',
|
||||
leaderboard_update: 'Leaderboard Update',
|
||||
preset_create: 'Preset Create',
|
||||
preset_apply: 'Preset Apply'
|
||||
};
|
||||
@@ -16,7 +16,9 @@ export enum ServerTab {
|
||||
event = 'event',
|
||||
eventRules = 'eventRules',
|
||||
settings = 'settings',
|
||||
leaderboard = 'leaderboard'
|
||||
leaderboard = 'leaderboard',
|
||||
activityLog = 'activityLog',
|
||||
logs = 'logs'
|
||||
}
|
||||
export const serverTabSchema = z.enum(ServerTab);
|
||||
|
||||
@@ -61,16 +63,17 @@ export const serverSettingsSchema = z.object({
|
||||
centralEntryListPath: z.string().max(255).optional().or(z.literal('')),
|
||||
allowAutoDQ: z.number().min(0).max(1).default(0),
|
||||
shortFormationLap: z.number().min(0).max(1).default(0),
|
||||
formationLapType: z.number().min(0).max(3).default(0),
|
||||
ignorePrematureDisconnects: z.number().min(0).max(1).default(0)
|
||||
dumpEntryList: z.number().min(0).max(1).default(0),
|
||||
formationLapType: z.number().min(0).max(3).default(3),
|
||||
ignorePrematureDisconnects: z.number().min(0).max(1).default(1)
|
||||
});
|
||||
|
||||
export type ServerSettings = z.infer<typeof serverSettingsSchema>;
|
||||
|
||||
export const sessionSchema = z.object({
|
||||
hourOfDay: z.number().min(1).max(24).default(14),
|
||||
hourOfDay: z.number().min(0).max(23).default(14),
|
||||
dayOfWeekend: z.number().min(1).max(3).default(1),
|
||||
timeMultiplier: z.number().min(1).max(120).default(1),
|
||||
timeMultiplier: z.number().min(0).max(24).default(1),
|
||||
sessionType: z.string().min(1).max(20),
|
||||
sessionDurationMinutes: z.number().min(1).max(180).default(20)
|
||||
});
|
||||
@@ -79,7 +82,7 @@ export type Session = z.infer<typeof sessionSchema>;
|
||||
|
||||
export const eventConfigSchema = z.object({
|
||||
track: z.string().min(1).max(100),
|
||||
preRaceWaitingTimeSeconds: z.number().min(0).max(600).default(30),
|
||||
preRaceWaitingTimeSeconds: z.number().min(30).max(600).default(30),
|
||||
sessionOverTimeSeconds: z.number().min(0).max(300).default(30),
|
||||
ambientTemp: z.number().min(0).max(50).default(24),
|
||||
cloudLevel: z.number().min(0).max(1).default(0),
|
||||
@@ -95,17 +98,23 @@ export const eventConfigSchema = z.object({
|
||||
export type EventConfig = z.infer<typeof eventConfigSchema>;
|
||||
|
||||
export const eventRulesSchema = z.object({
|
||||
qualifyStandingType: z.number().min(-1).max(1).default(0),
|
||||
pitWindowLengthSec: z.number().min(-1).max(3600).default(30),
|
||||
driverStintTimeSec: z.number().min(-1).max(7200).default(30),
|
||||
mandatoryPitstopCount: z.number().min(-1).max(5).default(0),
|
||||
maxTotalDrivingTime: z.number().min(-1).max(14400).default(60),
|
||||
isRefuellingAllowedInRace: z.number().min(0).max(1).default(0),
|
||||
qualifyStandingType: z.preprocess((val) => {
|
||||
if (val == '') {
|
||||
return 1;
|
||||
}
|
||||
return val;
|
||||
}, z.number().min(1).max(2).default(1)),
|
||||
pitWindowLengthSec: z.number().min(-1).max(3600).default(-1),
|
||||
driverStintTimeSec: z.number().min(-1).max(7200).default(-1),
|
||||
mandatoryPitstopCount: z.number().min(0).max(5).default(0),
|
||||
maxTotalDrivingTime: z.number().min(-1).max(14400).default(-1),
|
||||
maxDriversCount: z.number().min(1).max(10).default(1),
|
||||
isRefuellingAllowedInRace: z.number().min(0).max(1).default(1),
|
||||
isRefuellingTimeFixed: z.number().min(0).max(1).default(0),
|
||||
isMandatoryPitstopRefuellingRequired: z.number().min(0).max(1).default(0),
|
||||
isMandatoryPitstopTyreChangeRequired: z.number().min(0).max(1).default(0),
|
||||
isMandatoryPitstopSwapDriverRequired: z.number().min(0).max(1).default(0),
|
||||
tyreSetCount: z.number().min(0).max(50).default(0)
|
||||
tyreSetCount: z.number().min(0).max(50).default(50)
|
||||
});
|
||||
|
||||
export type EventRules = z.infer<typeof eventRulesSchema>;
|
||||
@@ -129,3 +138,76 @@ export const configSchemaMap = {
|
||||
};
|
||||
|
||||
export type Config = Configuration | AssistRules | EventConfig | EventRules | ServerSettings;
|
||||
|
||||
export const SECTION_LABELS: Record<string, string> = {
|
||||
configuration: 'Configuration',
|
||||
assistRules: 'Assist Rules',
|
||||
event: 'Event Config',
|
||||
eventRules: 'Event Rules',
|
||||
settings: 'Server Settings'
|
||||
};
|
||||
|
||||
export const FIELD_LABELS: Record<string, string> = {
|
||||
// configuration.json
|
||||
udpPort: 'UDP Port',
|
||||
tcpPort: 'TCP Port',
|
||||
maxConnections: 'Max Connections',
|
||||
lanDiscovery: 'LAN Discovery',
|
||||
registerToLobby: 'Register To Lobby',
|
||||
configVersion: 'Config Version',
|
||||
// assistRules.json
|
||||
stabilityControlLevelMax: 'Stability Control Level Max',
|
||||
disableAutosteer: 'Disable Autosteer',
|
||||
disableAutoLights: 'Disable Auto Lights',
|
||||
disableAutoWiper: 'Disable Auto Wiper',
|
||||
disableAutoEngineStart: 'Disable Auto Engine Start',
|
||||
disableAutoPitLimiter: 'Disable Auto Pit Limiter',
|
||||
disableAutoGear: 'Disable Auto Gear',
|
||||
disableAutoClutch: 'Disable Auto Clutch',
|
||||
disableIdealLine: 'Disable Ideal Line',
|
||||
// event.json
|
||||
track: 'Track',
|
||||
preRaceWaitingTimeSeconds: 'Pre-Race Waiting Time (seconds)',
|
||||
sessionOverTimeSeconds: 'Session Over Time (seconds)',
|
||||
ambientTemp: 'Ambient Temperature (°C)',
|
||||
cloudLevel: 'Cloud Level (0.0-1.0)',
|
||||
rain: 'Rain (0.0-1.0)',
|
||||
weatherRandomness: 'Weather Randomness',
|
||||
postQualySeconds: 'Post Qualify Seconds',
|
||||
postRaceSeconds: 'Post Race Seconds',
|
||||
simracerWeatherConditions: 'Simracer Weather Conditions',
|
||||
isFixedConditionQualification: 'Fixed Condition Qualification',
|
||||
sessions: 'Sessions',
|
||||
// eventRules.json
|
||||
qualifyStandingType: 'Qualify Standing Type',
|
||||
pitWindowLengthSec: 'Pit Window Length (seconds)',
|
||||
driverStintTimeSec: 'Driver Stint Time (seconds)',
|
||||
mandatoryPitstopCount: 'Mandatory Pitstop Count',
|
||||
maxTotalDrivingTime: 'Max Total Driving Time (seconds)',
|
||||
maxDriversCount: 'Max Drivers Count',
|
||||
isRefuellingAllowedInRace: 'Refuelling Allowed in Race',
|
||||
isRefuellingTimeFixed: 'Refuelling Time Fixed',
|
||||
isMandatoryPitstopRefuellingRequired: 'Mandatory Pitstop Refuelling Required',
|
||||
isMandatoryPitstopTyreChangeRequired: 'Mandatory Pitstop Tyre Change Required',
|
||||
isMandatoryPitstopSwapDriverRequired: 'Mandatory Pitstop Swap Driver Required',
|
||||
tyreSetCount: 'Tyre Set Count',
|
||||
// settings.json
|
||||
serverName: 'Server Name',
|
||||
adminPassword: 'Admin Password',
|
||||
carGroup: 'Car Group',
|
||||
trackMedalsRequirement: 'Track Medals Requirement',
|
||||
safetyRatingRequirement: 'Safety Rating Requirement',
|
||||
racecraftRatingRequirement: 'Racecraft Rating Requirement',
|
||||
password: 'Password',
|
||||
spectatorPassword: 'Spectator Password',
|
||||
maxCarSlots: 'Max Car Slots',
|
||||
dumpLeaderboards: 'Dump Leaderboards',
|
||||
isRaceLocked: 'Race Locked',
|
||||
randomizeTrackWhenEmpty: 'Randomize Track When Empty',
|
||||
centralEntryListPath: 'Central Entry List Path',
|
||||
allowAutoDQ: 'Allow Auto DQ',
|
||||
shortFormationLap: 'Short Formation Lap',
|
||||
dumpEntryList: 'Dump Entry List',
|
||||
formationLapType: 'Formation Lap Type',
|
||||
ignorePrematureDisconnects: 'Ignore Premature Disconnects'
|
||||
};
|
||||
|
||||
@@ -4,3 +4,4 @@ export * from './config';
|
||||
export * from './statistics';
|
||||
export * from './lookups';
|
||||
export * from './leaderboard';
|
||||
export * from './activityLog';
|
||||
|
||||
34
src/lib/schemas/preset.ts
Normal file
34
src/lib/schemas/preset.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import * as z from 'zod';
|
||||
|
||||
export const configPresetSchema = z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
description: z.string(),
|
||||
configuration: z.string().nullable(),
|
||||
assistRules: z.string().nullable(),
|
||||
event: z.string().nullable(),
|
||||
eventRules: z.string().nullable(),
|
||||
settings: z.string().nullable(),
|
||||
createdAt: z.string(),
|
||||
updatedAt: z.string()
|
||||
});
|
||||
|
||||
export type ConfigPreset = z.infer<typeof configPresetSchema>;
|
||||
|
||||
export const PRESET_SECTION_LABELS: Record<string, string> = {
|
||||
configuration: 'Configuration',
|
||||
assistRules: 'Assist Rules',
|
||||
event: 'Event Config',
|
||||
eventRules: 'Event Rules',
|
||||
settings: 'Server Settings'
|
||||
};
|
||||
|
||||
export function getPresetSections(preset: ConfigPreset): string[] {
|
||||
const sections: string[] = [];
|
||||
if (preset.configuration) sections.push('configuration');
|
||||
if (preset.assistRules) sections.push('assistRules');
|
||||
if (preset.event) sections.push('event');
|
||||
if (preset.eventRules) sections.push('eventRules');
|
||||
if (preset.settings) sections.push('settings');
|
||||
return sections;
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import * as z from 'zod';
|
||||
import { lastActivityInfoSchema } from './activityLog';
|
||||
|
||||
export enum ServiceStatus {
|
||||
Unknown,
|
||||
@@ -57,7 +58,8 @@ export const serverSchema = z.object({
|
||||
id: z.uuid(),
|
||||
name: z.string().min(1),
|
||||
status: z.enum(ServiceStatus),
|
||||
state: stateSchema.optional().nullable()
|
||||
state: stateSchema.optional().nullable(),
|
||||
lastActivity: lastActivityInfoSchema.optional().nullable()
|
||||
});
|
||||
|
||||
export type Server = z.infer<typeof serverSchema>;
|
||||
|
||||
@@ -44,6 +44,13 @@ export const completeDataSchema = z.object({
|
||||
|
||||
export type CompleteData = z.infer<typeof completeDataSchema>;
|
||||
|
||||
// Log line data schema
|
||||
export const logLineDataSchema = z.object({
|
||||
line: z.string()
|
||||
});
|
||||
|
||||
export type LogLineData = z.infer<typeof logLineDataSchema>;
|
||||
|
||||
// WebSocket message schema using discriminated union
|
||||
export const webSocketMessageSchema = z.discriminatedUnion('type', [
|
||||
z.object({
|
||||
@@ -69,6 +76,12 @@ export const webSocketMessageSchema = z.discriminatedUnion('type', [
|
||||
server_id: z.string(),
|
||||
timestamp: z.number(),
|
||||
data: completeDataSchema
|
||||
}),
|
||||
z.object({
|
||||
type: z.literal('log_line'),
|
||||
server_id: z.string(),
|
||||
timestamp: z.number(),
|
||||
data: logLineDataSchema
|
||||
})
|
||||
]);
|
||||
|
||||
|
||||
@@ -1,14 +1,28 @@
|
||||
import { clsx, type ClassValue } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { FIELD_LABELS, SECTION_LABELS } from '@/lib/schemas/config';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
export function boolToInt(val: boolean) {
|
||||
return val ? 1 : 0;
|
||||
return val ? 1 : 0;
|
||||
}
|
||||
|
||||
export function intToBool(val: number) {
|
||||
return !!val
|
||||
return !!val;
|
||||
}
|
||||
|
||||
export function formatZodIssues(issues: Array<{ path: PropertyKey[]; message: string }>): string {
|
||||
return issues
|
||||
.map((issue) => {
|
||||
const path = issue.path.map(String);
|
||||
const sectionKey = path.length > 1 ? path[0] : null;
|
||||
const fieldKey = path.at(-1) ?? '';
|
||||
const section = sectionKey && SECTION_LABELS[sectionKey] ? `[${SECTION_LABELS[sectionKey]}] ` : '';
|
||||
const label = FIELD_LABELS[fieldKey] ?? fieldKey;
|
||||
return `${section}${label}: ${issue.message}`;
|
||||
})
|
||||
.join('\n');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user