migrate to nextjs
This commit is contained in:
Fran Jurmanović
@@ -1,191 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { configFile, type AssistRules } from '$models/config';
|
||||
|
||||
const { config, id }: { config: AssistRules; id: string } = $props();
|
||||
const editedConfig = $state({ ...config });
|
||||
let formLoading = $state(false);
|
||||
let restart = $state(true);
|
||||
</script>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/update"
|
||||
use:enhance={() => {
|
||||
formLoading = true;
|
||||
return async ({ update }) => {
|
||||
await update({ invalidateAll: true, reset: false });
|
||||
formLoading = false;
|
||||
};
|
||||
}}
|
||||
class="max-w-3xl space-y-6"
|
||||
>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
<input type="hidden" name="file" value={configFile.assistRules} />
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<!-- Stability Control Level Max -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Stability Control Level Max:
|
||||
<input
|
||||
bind:value={editedConfig.stabilityControlLevelMax}
|
||||
disabled={formLoading}
|
||||
name="stabilityControlLevelMax"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Disable Autosteer -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Disable Autosteer:
|
||||
<select
|
||||
bind:value={editedConfig.disableAutosteer}
|
||||
disabled={formLoading}
|
||||
name="disableAutosteer"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Disable Auto Lights -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Disable Auto Lights:
|
||||
<select
|
||||
bind:value={editedConfig.disableAutoLights}
|
||||
disabled={formLoading}
|
||||
name="disableAutoLights"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Disable Auto Wiper -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Disable Auto Wiper:
|
||||
<select
|
||||
bind:value={editedConfig.disableAutoWiper}
|
||||
disabled={formLoading}
|
||||
name="disableAutoWiper"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Disable Auto Engine Start -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Disable Auto Engine Start:
|
||||
<select
|
||||
bind:value={editedConfig.disableAutoEngineStart}
|
||||
disabled={formLoading}
|
||||
name="disableAutoEngineStart"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Disable Auto Pit Limiter -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Disable Auto Pit Limiter:
|
||||
<select
|
||||
bind:value={editedConfig.disableAutoPitLimiter}
|
||||
disabled={formLoading}
|
||||
name="disableAutoPitLimiter"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Disable Auto Gear -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Disable Auto Gear:
|
||||
<select
|
||||
bind:value={editedConfig.disableAutoGear}
|
||||
disabled={formLoading}
|
||||
name="disableAutoGear"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Disable Auto Clutch -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Disable Auto Clutch:
|
||||
<select
|
||||
bind:value={editedConfig.disableAutoClutch}
|
||||
disabled={formLoading}
|
||||
name="disableAutoClutch"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Disable Ideal Line -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Disable Ideal Line:
|
||||
<select
|
||||
bind:value={editedConfig.disableIdealLine}
|
||||
disabled={formLoading}
|
||||
name="disableIdealLine"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={restart}
|
||||
name="restart"
|
||||
class="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={formLoading}
|
||||
class="rounded-md bg-green-600 px-4 py-2 text-sm font-medium hover:bg-green-700"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style></style>
|
||||
@@ -1,115 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { configFile, type Configuration } from '$models/config';
|
||||
|
||||
const { config, id }: { config: Configuration; id: string } = $props();
|
||||
const editedConfig = $state({ ...config });
|
||||
let formLoading = $state(false);
|
||||
let restart = $state(true);
|
||||
</script>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/update"
|
||||
use:enhance={() => {
|
||||
formLoading = true;
|
||||
return async ({ update }) => {
|
||||
await update({ invalidateAll: true, reset: false });
|
||||
formLoading = false;
|
||||
};
|
||||
}}
|
||||
class="max-w-3xl space-y-6"
|
||||
>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
<input type="hidden" name="file" value={configFile.configuration} />
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
UDP Port:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="udpPort"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.udpPort}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
TCP Port:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="tcpPort"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.tcpPort}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Max Connections:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="maxConnections"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.maxConnections}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Lan Discovery:
|
||||
<select
|
||||
bind:value={editedConfig.lanDiscovery}
|
||||
disabled={formLoading}
|
||||
name="lanDiscovery"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Register To Lobby:
|
||||
<select
|
||||
bind:value={editedConfig.registerToLobby}
|
||||
disabled={formLoading}
|
||||
name="registerToLobby"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<input type="hidden" name="configVersion" value={1} />
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="restart"
|
||||
bind:checked={restart}
|
||||
class="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={formLoading}
|
||||
class="rounded-md bg-green-600 px-4 py-2 text-sm font-medium hover:bg-green-700"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style></style>
|
||||
@@ -1,328 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { configFile, type EventConfig } from '$models/config';
|
||||
import type { Track } from '$models/lookups';
|
||||
|
||||
const { config, tracks, id }: { config: EventConfig; tracks: Track[]; id: string } = $props();
|
||||
const editedConfig = $state({ ...config });
|
||||
if (!editedConfig.sessions) editedConfig.sessions = [];
|
||||
let formLoading = $state(false);
|
||||
let restart = $state(true);
|
||||
</script>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/update"
|
||||
use:enhance={() => {
|
||||
formLoading = true;
|
||||
return async ({ update }) => {
|
||||
await update({ invalidateAll: true, reset: false });
|
||||
formLoading = false;
|
||||
};
|
||||
}}
|
||||
class="max-w-3xl space-y-6"
|
||||
>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
<input type="hidden" name="file" value={configFile.event} />
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Track:
|
||||
<select
|
||||
bind:value={editedConfig.track}
|
||||
disabled={formLoading}
|
||||
name="track"
|
||||
class="form form-select"
|
||||
>
|
||||
{#each tracks as track}
|
||||
<option value={track.track}>{track.track}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Pre-Race waiting time seconds:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="preRaceWaitingTimeSeconds"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.preRaceWaitingTimeSeconds}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Session over time seconds:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="sessionOverTimeSeconds"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.sessionOverTimeSeconds}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Ambient temp:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="ambientTemp"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.ambientTemp}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Cloud level:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="cloudLevel"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.cloudLevel}
|
||||
step=".01"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Rain:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="rain"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.rain}
|
||||
step=".01"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Weather randomness:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="weatherRandomness"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.weatherRandomness}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Post-Qualy seconds:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="postQualySeconds"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.postQualySeconds}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Post-Race seconds:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="postRaceSeconds"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.postRaceSeconds}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Simracer weather conditions:
|
||||
<input
|
||||
disabled={formLoading}
|
||||
name="simracerWeatherConditions"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
bind:value={editedConfig.simracerWeatherConditions}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Is fixed condition qualification:
|
||||
<select
|
||||
bind:value={editedConfig.isFixedConditionQualification}
|
||||
disabled={formLoading}
|
||||
name="isFixedConditionQualification"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<div />
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Sessions:
|
||||
<div class="mt-2 space-y-4">
|
||||
{#each editedConfig.sessions as session, index}
|
||||
<div class="mb-4 rounded-lg border border-gray-700 bg-gray-800 p-4">
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<!-- Hour of Day -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300"
|
||||
>Hour of Day:
|
||||
<input
|
||||
bind:value={session.hourOfDay}
|
||||
name={`sessions[${index}].hourOfDay`}
|
||||
disabled={formLoading}
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Day of Weekend -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Day of Weekend:
|
||||
<input
|
||||
bind:value={session.dayOfWeekend}
|
||||
name={`sessions[${index}].dayOfWeekend`}
|
||||
disabled={formLoading}
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Time Multiplier -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Time Multiplier:
|
||||
<input
|
||||
bind:value={session.timeMultiplier}
|
||||
name={`sessions[${index}].timeMultiplier`}
|
||||
disabled={formLoading}
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Session Type -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Session Type:
|
||||
<select
|
||||
bind:value={session.sessionType}
|
||||
name={`sessions[${index}].sessionType`}
|
||||
disabled={formLoading}
|
||||
class="form form-select"
|
||||
>
|
||||
<option value="P">Practice</option>
|
||||
<option value="Q">Qualifying</option>
|
||||
<option value="R">Race</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
<!-- Session Duration Minutes -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Session Duration (Minutes):
|
||||
<input
|
||||
bind:value={session.sessionDurationMinutes}
|
||||
name={`sessions[${index}].sessionDurationMinutes`}
|
||||
disabled={formLoading}
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
editedConfig.sessions = editedConfig.sessions.filter((_, i) => i !== index);
|
||||
}}
|
||||
class="mt-4 flex items-center rounded-md bg-red-600 px-3 py-1 text-xs font-medium text-white hover:bg-red-700"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-1 h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||||
/>
|
||||
</svg>
|
||||
Remove Session
|
||||
</button>
|
||||
</div>
|
||||
{/each}
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
editedConfig.sessions = [
|
||||
...editedConfig.sessions,
|
||||
{
|
||||
hourOfDay: 14,
|
||||
dayOfWeekend: 1,
|
||||
timeMultiplier: 1,
|
||||
sessionType: 'Practice',
|
||||
sessionDurationMinutes: 60
|
||||
}
|
||||
];
|
||||
}}
|
||||
class="flex items-center rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="mr-1 h-4 w-4"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
Add Session
|
||||
</button>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="restart"
|
||||
bind:checked={restart}
|
||||
class="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={formLoading}
|
||||
class="rounded-md bg-green-600 px-4 py-2 text-sm font-medium hover:bg-green-700"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style></style>
|
||||
@@ -1,213 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { configFile, type EventRules } from '$models/config';
|
||||
|
||||
const { config, id }: { config: EventRules; id: string } = $props();
|
||||
const editedConfig = $state({ ...config });
|
||||
let formLoading = $state(false);
|
||||
let restart = $state(true);
|
||||
</script>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/update"
|
||||
use:enhance={() => {
|
||||
formLoading = true;
|
||||
return async ({ update }) => {
|
||||
await update({ invalidateAll: true, reset: false });
|
||||
formLoading = false;
|
||||
};
|
||||
}}
|
||||
class="max-w-3xl space-y-6"
|
||||
>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
<input type="hidden" name="file" value={configFile.eventRules} />
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<!-- Qualify Standing Type -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Qualify Standing Type:
|
||||
<input
|
||||
bind:value={editedConfig.qualifyStandingType}
|
||||
disabled={formLoading}
|
||||
name="qualifyStandingType"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Pit Window Length Sec -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Pit Window Length (Sec):
|
||||
<input
|
||||
bind:value={editedConfig.pitWindowLengthSec}
|
||||
disabled={formLoading}
|
||||
name="pitWindowLengthSec"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Driver Stint Time Sec -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Driver Stint Time (Sec):
|
||||
<input
|
||||
bind:value={editedConfig.driverStintTimeSec}
|
||||
disabled={formLoading}
|
||||
name="driverStintTimeSec"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Mandatory Pitstop Count -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Mandatory Pitstop Count:
|
||||
<input
|
||||
bind:value={editedConfig.mandatoryPitstopCount}
|
||||
disabled={formLoading}
|
||||
name="mandatoryPitstopCount"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Max Total Driving Time -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Max Total Driving Time:
|
||||
<input
|
||||
bind:value={editedConfig.maxTotalDrivingTime}
|
||||
disabled={formLoading}
|
||||
name="maxTotalDrivingTime"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Is Refuelling Allowed In Race -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Is Refuelling Allowed In Race:
|
||||
<select
|
||||
bind:value={editedConfig.isRefuellingAllowedInRace}
|
||||
disabled={formLoading}
|
||||
name="isRefuellingAllowedInRace"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Is Refuelling Time Fixed -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Is Refuelling Time Fixed:
|
||||
<select
|
||||
bind:value={editedConfig.isRefuellingTimeFixed}
|
||||
disabled={formLoading}
|
||||
name="isRefuellingTimeFixed"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Is Mandatory Pitstop Refuelling Required -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Is Mandatory Pitstop Refuelling Required:
|
||||
<select
|
||||
bind:value={editedConfig.isMandatoryPitstopRefuellingRequired}
|
||||
disabled={formLoading}
|
||||
name="isMandatoryPitstopRefuellingRequired"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Is Mandatory Pitstop Tyre Change Required -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Is Mandatory Pitstop Tyre Change Required:
|
||||
<select
|
||||
bind:value={editedConfig.isMandatoryPitstopTyreChangeRequired}
|
||||
disabled={formLoading}
|
||||
name="isMandatoryPitstopTyreChangeRequired"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Is Mandatory Pitstop Swap Driver Required -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Is Mandatory Pitstop Swap Driver Required:
|
||||
<select
|
||||
bind:value={editedConfig.isMandatoryPitstopSwapDriverRequired}
|
||||
disabled={formLoading}
|
||||
name="isMandatoryPitstopSwapDriverRequired"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Tyre Set Count -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Tyre Set Count:
|
||||
<input
|
||||
bind:value={editedConfig.tyreSetCount}
|
||||
disabled={formLoading}
|
||||
name="tyreSetCount"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="restart"
|
||||
bind:checked={restart}
|
||||
class="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={formLoading}
|
||||
class="rounded-md bg-green-600 px-4 py-2 text-sm font-medium hover:bg-green-700"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style></style>
|
||||
@@ -1,306 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { enhance } from '$app/forms';
|
||||
import { configFile, type ServerSettings } from '$models/config';
|
||||
|
||||
const { config, id }: { config: ServerSettings; id: string } = $props();
|
||||
const editedConfig = $state({ ...config });
|
||||
let formLoading = $state(false);
|
||||
let restart = $state(true);
|
||||
const carGroups = ['FreeForAll', 'GT3', 'GT4', 'GT2', 'GTC', 'TCX'];
|
||||
</script>
|
||||
|
||||
<form
|
||||
method="POST"
|
||||
action="?/update"
|
||||
use:enhance={() => {
|
||||
formLoading = true;
|
||||
return async ({ update }) => {
|
||||
await update({ invalidateAll: true, reset: false });
|
||||
formLoading = false;
|
||||
};
|
||||
}}
|
||||
class="max-w-3xl space-y-6"
|
||||
>
|
||||
<input type="hidden" name="id" value={id} />
|
||||
<input type="hidden" name="file" value={configFile.settings} />
|
||||
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<!-- Server Name -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Server Name:
|
||||
<input
|
||||
bind:value={editedConfig.serverName}
|
||||
disabled={formLoading}
|
||||
name="serverName"
|
||||
type="text"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Admin Password -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Admin Password:
|
||||
<input
|
||||
bind:value={editedConfig.adminPassword}
|
||||
disabled={formLoading}
|
||||
name="adminPassword"
|
||||
type="password"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Car Group -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Car Group:
|
||||
<select
|
||||
bind:value={editedConfig.carGroup}
|
||||
disabled={formLoading}
|
||||
name="carGroup"
|
||||
class="form form-select"
|
||||
>
|
||||
{#each carGroups as group}
|
||||
<option value={group}>{group}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Track Medals Requirement -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Track Medals Requirement:
|
||||
<input
|
||||
bind:value={editedConfig.trackMedalsRequirement}
|
||||
disabled={formLoading}
|
||||
name="trackMedalsRequirement"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Safety Rating Requirement -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Safety Rating Requirement:
|
||||
<input
|
||||
bind:value={editedConfig.safetyRatingRequirement}
|
||||
disabled={formLoading}
|
||||
name="safetyRatingRequirement"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Racecraft Rating Requirement -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Racecraft Rating Requirement:
|
||||
<input
|
||||
bind:value={editedConfig.racecraftRatingRequirement}
|
||||
disabled={formLoading}
|
||||
name="racecraftRatingRequirement"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Password:
|
||||
<input
|
||||
bind:value={editedConfig.password}
|
||||
disabled={formLoading}
|
||||
name="password"
|
||||
type="password"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Spectator Password -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Spectator Password:
|
||||
<input
|
||||
bind:value={editedConfig.spectatorPassword}
|
||||
disabled={formLoading}
|
||||
name="spectatorPassword"
|
||||
type="password"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Max Car Slots -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Max Car Slots:
|
||||
<input
|
||||
bind:value={editedConfig.maxCarSlots}
|
||||
disabled={formLoading}
|
||||
name="maxCarSlots"
|
||||
type="number"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Dump Leaderboards -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Dump Leaderboards:
|
||||
<select
|
||||
bind:value={editedConfig.dumpLeaderboards}
|
||||
disabled={formLoading}
|
||||
name="dumpLeaderboards"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Is Race Locked -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Is Race Locked:
|
||||
<select
|
||||
bind:value={editedConfig.isRaceLocked}
|
||||
disabled={formLoading}
|
||||
name="isRaceLocked"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Randomize Track When Empty -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Randomize Track When Empty:
|
||||
<select
|
||||
bind:value={editedConfig.randomizeTrackWhenEmpty}
|
||||
disabled={formLoading}
|
||||
name="randomizeTrackWhenEmpty"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Central Entry List Path -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Central Entry List Path:
|
||||
<input
|
||||
bind:value={editedConfig.centralEntryListPath}
|
||||
disabled={formLoading}
|
||||
name="centralEntryListPath"
|
||||
type="text"
|
||||
class="form form-input"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Allow Auto DQ -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Allow Auto DQ:
|
||||
<select
|
||||
bind:value={editedConfig.allowAutoDQ}
|
||||
disabled={formLoading}
|
||||
name="allowAutoDQ"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Short Formation Lap -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Short Formation Lap:
|
||||
<select
|
||||
bind:value={editedConfig.shortFormationLap}
|
||||
disabled={formLoading}
|
||||
name="shortFormationLap"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Formation Lap Type -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Formation Lap Type:
|
||||
<select
|
||||
bind:value={editedConfig.formationLapType}
|
||||
disabled={formLoading}
|
||||
name="formationLapType"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>Old Limiter Lap</option>
|
||||
<option value={1}>Free (replaces /manual start), only usable for private servers</option>
|
||||
<option value={3}>Default formation lap with position control and UI</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Ignore Premature Disconnects -->
|
||||
<div>
|
||||
<label class="mb-1 block text-sm font-medium text-gray-300">
|
||||
Ignore Premature Disconnects:
|
||||
<select
|
||||
bind:value={editedConfig.ignorePrematureDisconnects}
|
||||
disabled={formLoading}
|
||||
name="ignorePrematureDisconnects"
|
||||
class="form form-select"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-700 pt-4">
|
||||
<label class="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
bind:checked={restart}
|
||||
name="restart"
|
||||
class="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={formLoading}
|
||||
class="rounded-md bg-green-600 px-4 py-2 text-sm font-medium hover:bg-green-700"
|
||||
>
|
||||
Save Changes
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style></style>
|
||||
@@ -1,95 +0,0 @@
|
||||
<script lang="ts">
|
||||
export let currentPage: number = 1;
|
||||
export let totalPages: number = 1;
|
||||
export let onPageChange: (page: number) => void = () => {};
|
||||
|
||||
$: pages = generatePageNumbers(currentPage, totalPages);
|
||||
|
||||
function generatePageNumbers(current: number, total: number): (number | string)[] {
|
||||
if (total <= 7) {
|
||||
return Array.from({ length: total }, (_, i) => i + 1);
|
||||
}
|
||||
|
||||
const pages: (number | string)[] = [];
|
||||
|
||||
if (current <= 4) {
|
||||
// Show first 5 pages, then ellipsis, then last page
|
||||
pages.push(...[1, 2, 3, 4, 5]);
|
||||
if (total > 6) pages.push('...');
|
||||
pages.push(total);
|
||||
} else if (current >= total - 3) {
|
||||
// Show first page, ellipsis, then last 5 pages
|
||||
pages.push(1);
|
||||
if (total > 6) pages.push('...');
|
||||
pages.push(...[total - 4, total - 3, total - 2, total - 1, total]);
|
||||
} else {
|
||||
// Show first page, ellipsis, current and neighbors, ellipsis, last page
|
||||
pages.push(1, '...', current - 1, current, current + 1, '...', total);
|
||||
}
|
||||
|
||||
return pages;
|
||||
}
|
||||
|
||||
function handlePageClick(page: number | string) {
|
||||
if (typeof page === 'number' && page !== currentPage) {
|
||||
onPageChange(page);
|
||||
}
|
||||
}
|
||||
|
||||
function handlePrevious() {
|
||||
if (currentPage > 1) {
|
||||
onPageChange(currentPage - 1);
|
||||
}
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
if (currentPage < totalPages) {
|
||||
onPageChange(currentPage + 1);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex items-center justify-center space-x-1">
|
||||
<!-- Previous button -->
|
||||
<button
|
||||
class="rounded-md px-3 py-2 text-sm font-medium transition-colors {currentPage === 1
|
||||
? 'cursor-not-allowed bg-gray-700 text-gray-500'
|
||||
: 'border border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'}"
|
||||
disabled={currentPage === 1}
|
||||
onclick={handlePrevious}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<!-- Page numbers -->
|
||||
{#each pages as page}
|
||||
{#if page === '...'}
|
||||
<span class="px-3 py-2 text-sm text-gray-500">...</span>
|
||||
{:else}
|
||||
<button
|
||||
class="rounded-md px-3 py-2 text-sm font-medium transition-colors {page === currentPage
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'border border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'}"
|
||||
onclick={() => handlePageClick(page)}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
|
||||
<!-- Next button -->
|
||||
<button
|
||||
class="rounded-md px-3 py-2 text-sm font-medium transition-colors {currentPage === totalPages
|
||||
? 'cursor-not-allowed bg-gray-700 text-gray-500'
|
||||
: 'border border-gray-600 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white'}"
|
||||
disabled={currentPage === totalPages}
|
||||
onclick={handleNext}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Page info -->
|
||||
<div class="mt-2 text-center text-sm text-gray-400">
|
||||
Page {currentPage} of {totalPages}
|
||||
</div>
|
||||
@@ -1,79 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { Server } from '$models/server';
|
||||
import { getStatusColor, ServiceStatus, serviceStatusToString } from '$lib/types/serviceStatus';
|
||||
|
||||
let { server }: { server: Server } = $props();
|
||||
</script>
|
||||
|
||||
<div class="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
|
||||
<a href={`dashboard/server/${server.id}`}>
|
||||
<div class="p-4">
|
||||
<div class="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium">{server.name}</h3>
|
||||
<div class="mt-1 flex items-center">
|
||||
<span class={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
|
||||
></span>
|
||||
<span class="text-sm capitalize">{serviceStatusToString(server.status)}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="text-gray-400 hover:text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-2 gap-2 text-sm text-gray-300">
|
||||
<div>
|
||||
<span class="text-gray-500">Track:</span>
|
||||
{server.state?.track}
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-gray-500">Players:</span>
|
||||
{server.state?.playerCount}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<form method="POST" action="?/start">
|
||||
<div class="flex justify-between bg-gray-900 px-4 py-3">
|
||||
<input type="hidden" name="id" value={server.id} />
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Running}
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="rounded-md bg-green-600 px-3 py-1 text-xs font-medium hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Start
|
||||
</button>
|
||||
<button
|
||||
disabled={server.status === ServiceStatus.Stopped}
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="rounded-md bg-yellow-600 px-3 py-1 text-xs font-medium hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
formaction="?/restart"
|
||||
>
|
||||
Restart
|
||||
</button>
|
||||
<button
|
||||
disabled={server.status === ServiceStatus.Stopped}
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
class="rounded-md bg-red-600 px-3 py-1 text-xs font-medium hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
formaction="?/stop"
|
||||
>
|
||||
Stop
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -1,346 +0,0 @@
|
||||
<script lang="ts">
|
||||
import Chart from 'chart.js/auto';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { compareAsc, isSameDay } from 'date-fns';
|
||||
import { formatInTimeZone } from 'date-fns-tz';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
import type { StateHistoryStats } from '$models/config';
|
||||
import { flatMap } from 'lodash-es';
|
||||
|
||||
const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
|
||||
interface Props {
|
||||
// Props
|
||||
statistics: StateHistoryStats;
|
||||
}
|
||||
|
||||
let { statistics }: Props = $props();
|
||||
|
||||
// Chart instances
|
||||
let playerCountChart: Chart | null = null;
|
||||
let sessionTypeChart: Chart | null = null;
|
||||
let dailyActivityChart: Chart | null = null;
|
||||
|
||||
// Chart canvas elements
|
||||
let playerCountCanvas: HTMLCanvasElement | undefined = $state();
|
||||
let sessionTypeCanvas: HTMLCanvasElement | undefined = $state();
|
||||
let dailyActivityCanvas: HTMLCanvasElement | undefined = $state();
|
||||
|
||||
// Initialize date range (last 30 days by default)
|
||||
onMount(() => {
|
||||
createCharts();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
// Cleanup charts
|
||||
if (playerCountChart) playerCountChart.destroy();
|
||||
if (sessionTypeChart) sessionTypeChart.destroy();
|
||||
if (dailyActivityChart) dailyActivityChart.destroy();
|
||||
});
|
||||
|
||||
function createCharts() {
|
||||
if (!statistics || !playerCountCanvas || !sessionTypeCanvas || !dailyActivityCanvas) return;
|
||||
|
||||
playerCountChart = new Chart(playerCountCanvas, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: statistics.playerCountOverTime.map(({ timestamp }) =>
|
||||
formatDate(timestamp, 'MMM dd kk:mm')
|
||||
),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Player Count',
|
||||
data: statistics.playerCountOverTime.map(({ count }) => count),
|
||||
borderColor: '#10b981',
|
||||
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
sessionTypeChart = new Chart(sessionTypeCanvas, {
|
||||
type: 'doughnut',
|
||||
data: {
|
||||
labels: statistics.sessionTypes.map(({ name }) => name),
|
||||
datasets: [
|
||||
{
|
||||
data: statistics.sessionTypes.map(({ count }) => count),
|
||||
backgroundColor: ['#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#06b6d4']
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
labels: {
|
||||
color: '#ffffff',
|
||||
padding: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
dailyActivityChart = new Chart(dailyActivityCanvas, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: statistics.dailyActivity.map(({ date }) => date),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sessions',
|
||||
data: statistics.dailyActivity.map(({ sessionsCount }) => sessionsCount),
|
||||
backgroundColor: '#10b981',
|
||||
borderColor: '#059669',
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#ffffff'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#9ca3af'
|
||||
},
|
||||
grid: {
|
||||
color: '#374151'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
color: '#9ca3af'
|
||||
},
|
||||
grid: {
|
||||
color: '#374151'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function formatDate(dateString: string, formatString: string) {
|
||||
return formatInTimeZone(dateString, localTimeZone, formatString, {
|
||||
timeZone: 'utc'
|
||||
});
|
||||
}
|
||||
|
||||
function formatDuration(minutes: number) {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="mb-8 grid grid-cols-1 gap-6 md:grid-cols-4">
|
||||
<div class="rounded-lg bg-gray-800 p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="rounded-lg bg-green-600 p-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-400">Average Players</p>
|
||||
<p class="text-2xl font-bold text-white">{Math.round(statistics.averagePlayers)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-gray-800 p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="rounded-lg bg-yellow-600 p-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-400">Peak Players</p>
|
||||
<p class="text-2xl font-bold text-white">{statistics.peakPlayers}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-gray-800 p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="rounded-lg bg-blue-600 p-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-400">Total Sessions</p>
|
||||
<p class="text-2xl font-bold text-white">{statistics.totalSessions}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg bg-gray-800 p-6">
|
||||
<div class="flex items-center">
|
||||
<div class="rounded-lg bg-purple-600 p-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="h-6 w-6 text-white"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="ml-4">
|
||||
<p class="text-sm font-medium text-gray-400">Total Playtime</p>
|
||||
<p class="text-2xl font-bold text-white">{formatDuration(statistics.totalPlaytime)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts -->
|
||||
<div class="mb-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<!-- Player Count Over Time -->
|
||||
<div class="rounded-lg bg-gray-800 p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold">Player Count Over Time</h3>
|
||||
<div class="h-64">
|
||||
<canvas bind:this={playerCountCanvas}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session Types Pie Chart -->
|
||||
<div class="rounded-lg bg-gray-800 p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold">Session Types</h3>
|
||||
<div class="h-64">
|
||||
<canvas bind:this={sessionTypeCanvas}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Daily Activity Bar Chart -->
|
||||
<div class="mb-8 rounded-lg bg-gray-800 p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold">Daily Activity</h3>
|
||||
<div class="h-64">
|
||||
<canvas bind:this={dailyActivityCanvas}></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session History Table -->
|
||||
<div class="rounded-lg bg-gray-800 p-6">
|
||||
<h3 class="mb-4 text-lg font-semibold">Recent Sessions</h3>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-700">
|
||||
<thead class="bg-gray-700">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-300 uppercase"
|
||||
>Date</th
|
||||
>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-300 uppercase"
|
||||
>Type</th
|
||||
>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-300 uppercase"
|
||||
>Track</th
|
||||
>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-300 uppercase"
|
||||
>Duration</th
|
||||
>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-300 uppercase"
|
||||
>Players</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-700 bg-gray-800">
|
||||
{#each statistics.recentSessions as session}
|
||||
<tr>
|
||||
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
|
||||
{formatDate(session.date, 'MMM dd kk:mm')}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">
|
||||
<span
|
||||
class={`inline-flex rounded-full px-2 py-1 text-xs font-semibold ${
|
||||
session.type === 'Race'
|
||||
? 'bg-red-100 text-red-800'
|
||||
: session.type === 'Qualifying'
|
||||
? 'bg-yellow-100 text-yellow-800'
|
||||
: 'bg-green-100 text-green-800'
|
||||
}`}
|
||||
>
|
||||
{session.type}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
|
||||
{session.track}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
|
||||
{formatDuration(session.duration)}
|
||||
</td>
|
||||
<td class="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
|
||||
{session.players}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,33 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
|
||||
let { message = '', type = 'success', duration = 5000 } = $props();
|
||||
|
||||
let visible = $state(true);
|
||||
|
||||
let timer: number;
|
||||
|
||||
onMount(() => {
|
||||
timer = window.setTimeout(() => {
|
||||
visible = false;
|
||||
}, duration);
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
clearTimeout(timer);
|
||||
});
|
||||
|
||||
const baseClasses =
|
||||
'fixed bottom-5 right-5 p-4 rounded-lg shadow-lg text-white transition-all duration-500 ease-in-out transform';
|
||||
const typeClasses = {
|
||||
success: 'bg-green-600',
|
||||
error: 'bg-red-600'
|
||||
};
|
||||
const visibilityClasses = visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5';
|
||||
</script>
|
||||
|
||||
{#if visible}
|
||||
<div class="{baseClasses} {typeClasses[type]} {visibilityClasses}" role="alert">
|
||||
<p>{message}</p>
|
||||
</div>
|
||||
{/if}
|
||||
148
src/components/configuration/AssistRulesEditor.tsx
Normal file
148
src/components/configuration/AssistRulesEditor.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { AssistRules } from '@/lib/types/config';
|
||||
import { updateAssistRulesAction } from '@/lib/actions/configuration';
|
||||
|
||||
interface AssistRulesEditorProps {
|
||||
serverId: string;
|
||||
config: AssistRules;
|
||||
}
|
||||
|
||||
export function AssistRulesEditor({ serverId, config }: AssistRulesEditorProps) {
|
||||
const [formData, setFormData] = useState<AssistRules>(config);
|
||||
const [restart, setRestart] = useState(true);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
const formDataObj = new FormData();
|
||||
Object.entries(formData).forEach(([key, value]) => {
|
||||
formDataObj.append(key, value.toString());
|
||||
});
|
||||
if (restart) {
|
||||
formDataObj.append('restart', 'on');
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await updateAssistRulesAction(serverId, formDataObj);
|
||||
if (!result.success) {
|
||||
console.error('Failed to update assist rules:', result.message);
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (key: keyof AssistRules, value: string | number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[key]: typeof value === 'string' ? parseInt(value) : value
|
||||
}));
|
||||
};
|
||||
|
||||
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'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{assistFields.map(({ key, label, type }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
|
||||
{type === 'number' ? (
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData[key]}
|
||||
onChange={(e) => handleInputChange(key, e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
max="5"
|
||||
/>
|
||||
) : (
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData[key]}
|
||||
onChange={(e) => handleInputChange(key, e.target.value)}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value={0}>Allowed</option>
|
||||
<option value={1}>Disabled</option>
|
||||
</select>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 pt-6">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={restart}
|
||||
onChange={(e) => setRestart(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
132
src/components/configuration/ConfigurationEditor.tsx
Normal file
132
src/components/configuration/ConfigurationEditor.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { Configuration } from '@/lib/types/config';
|
||||
import { updateConfigurationAction } from '@/lib/actions/configuration';
|
||||
|
||||
interface ConfigurationEditorProps {
|
||||
serverId: string;
|
||||
config: Configuration;
|
||||
}
|
||||
|
||||
export function ConfigurationEditor({ serverId, config }: ConfigurationEditorProps) {
|
||||
const [formData, setFormData] = useState<Configuration>(config);
|
||||
const [restart, setRestart] = useState(true);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
const formDataObj = new FormData();
|
||||
Object.entries(formData).forEach(([key, value]) => {
|
||||
formDataObj.append(key, value.toString());
|
||||
});
|
||||
if (restart) {
|
||||
formDataObj.append('restart', 'on');
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await updateConfigurationAction(serverId, formDataObj);
|
||||
if (!result.success) {
|
||||
console.error('Failed to update configuration:', result.message);
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (key: keyof Configuration, value: string | number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[key]: typeof value === 'string' ? parseInt(value) : value
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="max-w-3xl space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">UDP Port</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.udpPort}
|
||||
onChange={(e) => handleInputChange('udpPort', e.target.value)}
|
||||
className="form-input w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">TCP Port</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.tcpPort}
|
||||
onChange={(e) => handleInputChange('tcpPort', e.target.value)}
|
||||
className="form-input w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">Max Connections</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.maxConnections}
|
||||
onChange={(e) => handleInputChange('maxConnections', e.target.value)}
|
||||
className="form-input w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">LAN Discovery</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData.lanDiscovery}
|
||||
onChange={(e) => handleInputChange('lanDiscovery', e.target.value)}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">Register To Lobby</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData.registerToLobby}
|
||||
onChange={(e) => handleInputChange('registerToLobby', e.target.value)}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 pt-6">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={restart}
|
||||
onChange={(e) => setRestart(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
426
src/components/configuration/EventConfigEditor.tsx
Normal file
426
src/components/configuration/EventConfigEditor.tsx
Normal file
@@ -0,0 +1,426 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { EventConfig, Session } from '@/lib/types/config';
|
||||
import { updateEventConfigAction } from '@/lib/actions/configuration';
|
||||
|
||||
interface EventConfigEditorProps {
|
||||
serverId: string;
|
||||
config: EventConfig;
|
||||
}
|
||||
|
||||
export function EventConfigEditor({ serverId, config }: EventConfigEditorProps) {
|
||||
const [formData, setFormData] = useState<EventConfig>(config);
|
||||
const [restart, setRestart] = useState(true);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
const formDataObj = new FormData();
|
||||
Object.entries(formData).forEach(([key, value]) => {
|
||||
if (key === 'sessions') {
|
||||
formDataObj.append(key, JSON.stringify(value));
|
||||
} else {
|
||||
formDataObj.append(key, value.toString());
|
||||
}
|
||||
});
|
||||
if (restart) {
|
||||
formDataObj.append('restart', 'on');
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await updateEventConfigAction(serverId, formDataObj);
|
||||
if (!result.success) {
|
||||
console.error('Failed to update event config:', result.message);
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (key: keyof EventConfig, value: string | number) => {
|
||||
if (key === 'sessions') return;
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[key]:
|
||||
typeof formData[key] === 'number'
|
||||
? typeof value === 'string'
|
||||
? parseFloat(value) || 0
|
||||
: value
|
||||
: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSessionChange = (index: number, field: keyof Session, value: string | number) => {
|
||||
const newSessions = [...formData.sessions];
|
||||
newSessions[index] = {
|
||||
...newSessions[index],
|
||||
[field]:
|
||||
field === 'sessionType' ? value : typeof value === 'string' ? parseFloat(value) || 0 : value
|
||||
};
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
sessions: newSessions
|
||||
}));
|
||||
};
|
||||
|
||||
const addSession = () => {
|
||||
const newSession: Session = {
|
||||
hourOfDay: 12,
|
||||
dayOfWeekend: 1,
|
||||
timeMultiplier: 1,
|
||||
sessionType: 'P',
|
||||
sessionDurationMinutes: 20
|
||||
};
|
||||
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
sessions: [...prev.sessions, newSession]
|
||||
}));
|
||||
};
|
||||
|
||||
const removeSession = (index: number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
sessions: prev.sessions.filter((_, i) => i !== index)
|
||||
}));
|
||||
};
|
||||
|
||||
const sessionTypes = [
|
||||
{ value: 'P', label: 'Practice' },
|
||||
{ value: 'Q', label: 'Qualifying' },
|
||||
{ value: 'R', label: 'Race' }
|
||||
];
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
|
||||
Basic Event Settings
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">Track</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData.track}
|
||||
onChange={(e) => handleInputChange('track', e.target.value)}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value="barcelona">Barcelona</option>
|
||||
<option value="brands_hatch">Brands Hatch</option>
|
||||
<option value="hungaroring">Hungaroring</option>
|
||||
<option value="imola">Imola</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="oulton_park">Oulton Park</option>
|
||||
<option value="paul_ricard">Paul Ricard</option>
|
||||
<option value="silverstone">Silverstone</option>
|
||||
<option value="snetterton">Snetterton</option>
|
||||
<option value="spa">Spa-Francorchamps</option>
|
||||
<option value="suzuka">Suzuka</option>
|
||||
<option value="zandvoort">Zandvoort</option>
|
||||
<option value="zolder">Zolder</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Pre-Race Waiting Time (seconds)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.preRaceWaitingTimeSeconds}
|
||||
onChange={(e) => handleInputChange('preRaceWaitingTimeSeconds', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Session Over Time (seconds)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.sessionOverTimeSeconds}
|
||||
onChange={(e) => handleInputChange('sessionOverTimeSeconds', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Post Qualify Seconds
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.postQualySeconds}
|
||||
onChange={(e) => handleInputChange('postQualySeconds', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Post Race Seconds
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.postRaceSeconds}
|
||||
onChange={(e) => handleInputChange('postRaceSeconds', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
|
||||
Weather Settings
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Ambient Temperature (°C)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.ambientTemp}
|
||||
onChange={(e) => handleInputChange('ambientTemp', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
max="50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Cloud Level (0.0-1.0)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.cloudLevel}
|
||||
onChange={(e) => handleInputChange('cloudLevel', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">Rain (0.0-1.0)</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.rain}
|
||||
onChange={(e) => handleInputChange('rain', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Weather Randomness
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData.weatherRandomness}
|
||||
onChange={(e) => handleInputChange('weatherRandomness', e.target.value)}
|
||||
className="form-input w-full"
|
||||
min="0"
|
||||
max="7"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Simracer Weather Conditions
|
||||
</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData.simracerWeatherConditions}
|
||||
onChange={(e) => handleInputChange('simracerWeatherConditions', e.target.value)}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Fixed Condition Qualification
|
||||
</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData.isFixedConditionQualification}
|
||||
onChange={(e) => handleInputChange('isFixedConditionQualification', e.target.value)}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between border-b border-gray-700 pb-2">
|
||||
<h3 className="text-lg font-medium text-white">Sessions</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={addSession}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-blue-600 px-3 py-1 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-50"
|
||||
>
|
||||
Add Session
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{formData.sessions.map((session, index) => (
|
||||
<div key={index} className="rounded-lg bg-gray-800 p-4">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h4 className="text-sm font-medium text-white">Session {index + 1}</h4>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeSession(index)}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-red-600 px-2 py-1 text-xs font-medium text-white hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-5">
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-gray-400">
|
||||
Session Type
|
||||
</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={session.sessionType}
|
||||
onChange={(e) => handleSessionChange(index, 'sessionType', e.target.value)}
|
||||
className="form-input w-full text-sm"
|
||||
>
|
||||
{sessionTypes.map((type) => (
|
||||
<option key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-gray-400">
|
||||
Hour of Day
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={session.hourOfDay}
|
||||
onChange={(e) => handleSessionChange(index, 'hourOfDay', e.target.value)}
|
||||
className="form-input w-full text-sm"
|
||||
min="0"
|
||||
max="23"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-gray-400">
|
||||
Day of Weekend
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={session.dayOfWeekend}
|
||||
onChange={(e) => handleSessionChange(index, 'dayOfWeekend', e.target.value)}
|
||||
className="form-input w-full text-sm"
|
||||
min="1"
|
||||
max="3"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-gray-400">
|
||||
Time Multiplier
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={session.timeMultiplier}
|
||||
onChange={(e) => handleSessionChange(index, 'timeMultiplier', e.target.value)}
|
||||
className="form-input w-full text-sm"
|
||||
min="1"
|
||||
max="24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1 block text-xs font-medium text-gray-400">
|
||||
Duration (minutes)
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={session.sessionDurationMinutes}
|
||||
onChange={(e) =>
|
||||
handleSessionChange(index, 'sessionDurationMinutes', e.target.value)
|
||||
}
|
||||
className="form-input w-full text-sm"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 pt-6">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={restart}
|
||||
onChange={(e) => setRestart(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
172
src/components/configuration/EventRulesEditor.tsx
Normal file
172
src/components/configuration/EventRulesEditor.tsx
Normal file
@@ -0,0 +1,172 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { EventRules } from '@/lib/types/config';
|
||||
import { updateEventRulesAction } from '@/lib/actions/configuration';
|
||||
|
||||
interface EventRulesEditorProps {
|
||||
serverId: string;
|
||||
config: EventRules;
|
||||
}
|
||||
|
||||
export function EventRulesEditor({ serverId, config }: EventRulesEditorProps) {
|
||||
const [formData, setFormData] = useState<EventRules>(config);
|
||||
const [restart, setRestart] = useState(true);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
const formDataObj = new FormData();
|
||||
Object.entries(formData).forEach(([key, value]) => {
|
||||
formDataObj.append(key, value.toString());
|
||||
});
|
||||
if (restart) {
|
||||
formDataObj.append('restart', 'on');
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await updateEventRulesAction(serverId, formDataObj);
|
||||
if (!result.success) {
|
||||
console.error('Failed to update event rules:', result.message);
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (key: keyof EventRules, value: string | number | boolean) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[key]: value
|
||||
}));
|
||||
};
|
||||
|
||||
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 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'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">Race Rules</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{numberFields.map(({ key, label, min, max }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData[key] as number}
|
||||
onChange={(e) => handleInputChange(key, parseInt(e.target.value) || 0)}
|
||||
className="form-input w-full"
|
||||
min={min}
|
||||
max={max}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
|
||||
Pitstop & Refuelling Rules
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{booleanFields.map(({ key, label }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData[key] ? 'true' : 'false'}
|
||||
onChange={(e) => handleInputChange(key, e.target.value === 'true')}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value="false">No</option>
|
||||
<option value="true">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 pt-6">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={restart}
|
||||
onChange={(e) => setRestart(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
247
src/components/configuration/ServerSettingsEditor.tsx
Normal file
247
src/components/configuration/ServerSettingsEditor.tsx
Normal file
@@ -0,0 +1,247 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { ServerSettings } from '@/lib/types/config';
|
||||
import { updateServerSettingsAction } from '@/lib/actions/configuration';
|
||||
|
||||
interface ServerSettingsEditorProps {
|
||||
serverId: string;
|
||||
config: ServerSettings;
|
||||
}
|
||||
|
||||
export function ServerSettingsEditor({ serverId, config }: ServerSettingsEditorProps) {
|
||||
const [formData, setFormData] = useState<ServerSettings>(config);
|
||||
const [restart, setRestart] = useState(true);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
|
||||
const formDataObj = new FormData();
|
||||
Object.entries(formData).forEach(([key, value]) => {
|
||||
formDataObj.append(key, value.toString());
|
||||
});
|
||||
if (restart) {
|
||||
formDataObj.append('restart', 'on');
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await updateServerSettingsAction(serverId, formDataObj);
|
||||
if (!result.success) {
|
||||
console.error('Failed to update server settings:', result.message);
|
||||
}
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (key: keyof ServerSettings, value: string | number) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[key]: value
|
||||
}));
|
||||
};
|
||||
|
||||
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 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 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'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="max-w-4xl space-y-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
|
||||
Basic Settings
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{textFields.map(({ key, label, type }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
|
||||
<input
|
||||
type={type}
|
||||
disabled={isSubmitting}
|
||||
value={formData[key] as string}
|
||||
onChange={(e) => handleInputChange(key, e.target.value)}
|
||||
className="form-input w-full"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">Car Group</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData.carGroup}
|
||||
onChange={(e) => handleInputChange('carGroup', e.target.value)}
|
||||
className="form-input w-full"
|
||||
>
|
||||
{carGroups.map((group) => (
|
||||
<option key={group} value={group}>
|
||||
{group}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
|
||||
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 }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
|
||||
<input
|
||||
type="number"
|
||||
disabled={isSubmitting}
|
||||
value={formData[key] as number}
|
||||
onChange={(e) => handleInputChange(key, parseInt(e.target.value) || 0)}
|
||||
className="form-input w-full"
|
||||
min={min}
|
||||
max={max}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h3 className="border-b border-gray-700 pb-2 text-lg font-medium text-white">
|
||||
Race Options
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{selectFields.map(({ key, label }) => (
|
||||
<div key={key}>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">{label}</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData[key] as number}
|
||||
onChange={(e) => handleInputChange(key, parseInt(e.target.value))}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value={0}>No</option>
|
||||
<option value={1}>Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div>
|
||||
<label className="mb-2 block text-sm font-medium text-gray-300">
|
||||
Formation Lap Type
|
||||
</label>
|
||||
<select
|
||||
disabled={isSubmitting}
|
||||
value={formData.formationLapType}
|
||||
onChange={(e) => handleInputChange('formationLapType', parseInt(e.target.value))}
|
||||
className="form-input w-full"
|
||||
>
|
||||
<option value={0}>Old Limiter Lap</option>
|
||||
<option value={1}>
|
||||
Free (replaces /manual start), only usable for private servers
|
||||
</option>
|
||||
<option value={3}>Default formation lap with position control and UI</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-700 pt-6">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={restart}
|
||||
onChange={(e) => setRestart(e.target.checked)}
|
||||
className="h-4 w-4 rounded border-gray-600 bg-gray-700 text-green-600 focus:ring-green-500"
|
||||
/>
|
||||
<span className="ml-2 text-sm text-gray-300">Restart server after saving</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-green-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
128
src/components/membership/CreateUserModal.tsx
Normal file
128
src/components/membership/CreateUserModal.tsx
Normal file
@@ -0,0 +1,128 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { Role } from '@/lib/types';
|
||||
import { createUserAction } from '@/lib/actions/membership';
|
||||
|
||||
interface CreateUserModalProps {
|
||||
roles: Role[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function CreateUserModal({ roles, onClose }: CreateUserModalProps) {
|
||||
const [formData, setFormData] = useState({
|
||||
username: '',
|
||||
password: '',
|
||||
role: ''
|
||||
});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
const formDataObj = new FormData();
|
||||
formDataObj.append('username', formData.username);
|
||||
formDataObj.append('password', formData.password);
|
||||
formDataObj.append('role', formData.role);
|
||||
|
||||
try {
|
||||
const result = await createUserAction(formDataObj);
|
||||
if (result.success) {
|
||||
onClose();
|
||||
window.location.reload(); // Refresh to show new user
|
||||
} else {
|
||||
setError(result.message);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
|
||||
<div className="w-full max-w-md rounded-lg bg-gray-800 p-6">
|
||||
<h3 className="mb-4 text-lg font-semibold text-white">Create New User</h3>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{error}</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="mb-4">
|
||||
<label htmlFor="create-username" className="block text-sm font-medium text-gray-300">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="create-username"
|
||||
type="text"
|
||||
value={formData.username}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, username: e.target.value }))}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<label htmlFor="create-password" className="block text-sm font-medium text-gray-300">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="create-password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, password: e.target.value }))}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:opacity-50"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<label htmlFor="create-role" className="block text-sm font-medium text-gray-300">
|
||||
Role
|
||||
</label>
|
||||
<select
|
||||
id="create-role"
|
||||
value={formData.role}
|
||||
onChange={(e) => setFormData((prev) => ({ ...prev, role: e.target.value }))}
|
||||
required
|
||||
disabled={isSubmitting}
|
||||
className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none disabled:opacity-50"
|
||||
>
|
||||
<option value="">Select a role...</option>
|
||||
{roles.map((role) => (
|
||||
<option key={role.id} value={role.name}>
|
||||
{role.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-green-700 disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Creating...' : 'Create User'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
75
src/components/membership/DeleteUserModal.tsx
Normal file
75
src/components/membership/DeleteUserModal.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import type { User } from '@/lib/types';
|
||||
import { deleteUserAction } from '@/lib/actions/membership';
|
||||
|
||||
interface DeleteUserModalProps {
|
||||
user: User;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function DeleteUserModal({ user, onClose }: DeleteUserModalProps) {
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
setIsSubmitting(true);
|
||||
setError(null);
|
||||
|
||||
const formDataObj = new FormData();
|
||||
formDataObj.append('id', user.id);
|
||||
|
||||
try {
|
||||
const result = await deleteUserAction(formDataObj);
|
||||
if (result.success) {
|
||||
onClose();
|
||||
window.location.reload(); // Refresh to remove deleted user
|
||||
} else {
|
||||
setError(result.message);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'An error occurred');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-opacity-50 fixed inset-0 z-50 flex items-center justify-center bg-black">
|
||||
<div className="w-full max-w-md rounded-lg bg-gray-800 p-6">
|
||||
<h3 className="mb-4 text-lg font-semibold text-white">Delete User</h3>
|
||||
|
||||
{error && (
|
||||
<div className="mb-4 rounded-md bg-red-900 p-3 text-sm text-red-300">{error}</div>
|
||||
)}
|
||||
|
||||
<p className="mb-6 text-gray-300">
|
||||
Are you sure you want to delete the user "{user.username}"? This action cannot
|
||||
be undone.
|
||||
</p>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="flex justify-end space-x-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700 disabled:opacity-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="rounded-md bg-red-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-red-700 disabled:opacity-50"
|
||||
>
|
||||
{isSubmitting ? 'Deleting...' : 'Delete User'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
246
src/components/membership/UserManagementTable.tsx
Normal file
246
src/components/membership/UserManagementTable.tsx
Normal file
@@ -0,0 +1,246 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import type { Role, User } from '@/lib/types';
|
||||
import { hasPermission } from '@/lib/types/user';
|
||||
import { CreateUserModal } from './CreateUserModal';
|
||||
import { DeleteUserModal } from './DeleteUserModal';
|
||||
|
||||
interface UserManagementTableProps {
|
||||
initialData: User[];
|
||||
roles: Role[];
|
||||
currentUser: User;
|
||||
}
|
||||
|
||||
export function UserManagementTable({ initialData, roles, currentUser }: UserManagementTableProps) {
|
||||
const router = useRouter();
|
||||
const [usernameFilter, setUsernameFilter] = useState('');
|
||||
const [roleNameFilter, setRoleNameFilter] = useState('');
|
||||
const [sortBy, setSortBy] = useState('username');
|
||||
const [sortDesc, setSortDesc] = useState(false);
|
||||
const [showCreateModal, setShowCreateModal] = useState(false);
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState<User | null>(null);
|
||||
|
||||
const applyFilters = () => {
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (usernameFilter) params.set('username', usernameFilter);
|
||||
if (roleNameFilter) params.set('role_name', roleNameFilter);
|
||||
params.set('sort_by', sortBy);
|
||||
params.set('sort_desc', sortDesc.toString());
|
||||
params.set('page', '1');
|
||||
|
||||
router.push(`/dashboard/membership?${params.toString()}`);
|
||||
};
|
||||
|
||||
const resetFilters = () => {
|
||||
setUsernameFilter('');
|
||||
setRoleNameFilter('');
|
||||
setSortBy('username');
|
||||
setSortDesc(false);
|
||||
router.push('/dashboard/membership');
|
||||
};
|
||||
|
||||
const handleSort = (field: string) => {
|
||||
if (sortBy === field) {
|
||||
setSortDesc(!sortDesc);
|
||||
} else {
|
||||
setSortBy(field);
|
||||
setSortDesc(false);
|
||||
}
|
||||
applyFilters();
|
||||
};
|
||||
|
||||
const getSortIcon = (field: string) => {
|
||||
if (sortBy !== field) return '↕️';
|
||||
return sortDesc ? '↓' : '↑';
|
||||
};
|
||||
|
||||
const openCreateModal = () => {
|
||||
setShowCreateModal(true);
|
||||
};
|
||||
|
||||
const closeCreateModal = () => {
|
||||
setShowCreateModal(false);
|
||||
};
|
||||
|
||||
const openDeleteModal = (user: User) => {
|
||||
setSelectedUser(user);
|
||||
setShowDeleteModal(true);
|
||||
};
|
||||
|
||||
const closeDeleteModal = () => {
|
||||
setSelectedUser(null);
|
||||
setShowDeleteModal(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="bg-gray-800 shadow-md">
|
||||
<div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/dashboard" className="text-gray-300 hover:text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
d="M10 19l-7-7m0 0l7-7m-7 7h18"
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
<h1 className="text-2xl font-bold">User Management</h1>
|
||||
</div>
|
||||
{hasPermission(currentUser, 'membership.create') && (
|
||||
<button
|
||||
onClick={openCreateModal}
|
||||
className="rounded-md bg-green-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-green-700"
|
||||
>
|
||||
Create User
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
{/* Filters */}
|
||||
<div className="mb-6 rounded-lg border border-gray-700 bg-gray-800 p-4">
|
||||
<h2 className="mb-3 text-lg font-semibold">Filters</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
|
||||
<div>
|
||||
<label htmlFor="username" className="block text-sm font-medium text-gray-300">
|
||||
Username
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
value={usernameFilter}
|
||||
onChange={(e) => setUsernameFilter(e.target.value)}
|
||||
placeholder="Search by username..."
|
||||
className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="role" className="block text-sm font-medium text-gray-300">
|
||||
Role
|
||||
</label>
|
||||
<input
|
||||
id="role"
|
||||
type="text"
|
||||
value={roleNameFilter}
|
||||
onChange={(e) => setRoleNameFilter(e.target.value)}
|
||||
placeholder="Filter by role..."
|
||||
className="mt-1 block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex space-x-2">
|
||||
<button
|
||||
onClick={applyFilters}
|
||||
className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-blue-700"
|
||||
>
|
||||
Apply Filters
|
||||
</button>
|
||||
<button
|
||||
onClick={resetFilters}
|
||||
className="rounded-md bg-gray-600 px-4 py-2 text-sm font-medium transition-colors hover:bg-gray-700"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results Summary */}
|
||||
<div className="mb-4 text-sm text-gray-400">Showing {initialData.length} users</div>
|
||||
|
||||
{/* Users Table */}
|
||||
<div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800">
|
||||
<table className="min-w-full divide-y divide-gray-700">
|
||||
<thead className="bg-gray-900">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left">
|
||||
<button
|
||||
className="flex items-center space-x-1 text-xs font-medium tracking-wider text-gray-400 uppercase transition-colors hover:text-white"
|
||||
onClick={() => handleSort('username')}
|
||||
>
|
||||
<span>Username</span>
|
||||
<span>{getSortIcon('username')}</span>
|
||||
</button>
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left">
|
||||
<button
|
||||
className="flex items-center space-x-1 text-xs font-medium tracking-wider text-gray-400 uppercase transition-colors hover:text-white"
|
||||
onClick={() => handleSort('role')}
|
||||
>
|
||||
<span>Role</span>
|
||||
<span>{getSortIcon('role')}</span>
|
||||
</button>
|
||||
</th>
|
||||
{hasPermission(currentUser, 'membership.edit') && (
|
||||
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
|
||||
Actions
|
||||
</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-700 bg-gray-800">
|
||||
{initialData.length > 0 ? (
|
||||
initialData.map((user) => (
|
||||
<tr key={user.id} className="transition-colors hover:bg-gray-700">
|
||||
<td className="px-6 py-4 text-sm font-medium whitespace-nowrap text-white">
|
||||
{user.username}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm whitespace-nowrap">
|
||||
<span className="inline-flex rounded-full bg-blue-900 px-2 py-1 text-xs font-semibold text-blue-300">
|
||||
{user.role.name}
|
||||
</span>
|
||||
</td>
|
||||
{hasPermission(currentUser, 'membership.edit') && (
|
||||
<td className="px-6 py-4 text-sm font-medium whitespace-nowrap">
|
||||
<div className="flex space-x-2">
|
||||
<button className="text-blue-400 transition-colors hover:text-blue-300">
|
||||
Edit
|
||||
</button>
|
||||
{hasPermission(currentUser, 'membership.delete') && (
|
||||
<button
|
||||
onClick={() => openDeleteModal(user)}
|
||||
className="text-red-400 transition-colors hover:text-red-300"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<tr>
|
||||
<td colSpan={3} className="px-6 py-4 text-center text-sm text-gray-400">
|
||||
No users found
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{/* Modals */}
|
||||
{showCreateModal && <CreateUserModal roles={roles} onClose={closeCreateModal} />}
|
||||
|
||||
{showDeleteModal && selectedUser && (
|
||||
<DeleteUserModal user={selectedUser} onClose={closeDeleteModal} />
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
13
src/components/providers/QueryProvider.tsx
Normal file
13
src/components/providers/QueryProvider.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode } from 'react';
|
||||
import { QueryClientProvider } from '@tanstack/react-query';
|
||||
import { queryClient } from '@/lib/api/client/query-client';
|
||||
|
||||
interface QueryProviderProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
export function QueryProvider({ children }: QueryProviderProps) {
|
||||
return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
|
||||
}
|
||||
84
src/components/server/ServerCard.tsx
Normal file
84
src/components/server/ServerCard.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import Link from 'next/link';
|
||||
import { Server, ServiceStatus, getStatusColor, serviceStatusToString } from '@/lib/types';
|
||||
import { startServerAction, stopServerAction, restartServerAction } from '@/lib/actions/servers';
|
||||
|
||||
interface ServerCardProps {
|
||||
server: Server;
|
||||
}
|
||||
|
||||
export function ServerCard({ server }: ServerCardProps) {
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-lg">
|
||||
<Link href={`/dashboard/server/${server.id}`} className="block">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-medium text-white">{server.name}</h3>
|
||||
<div className="mt-2 flex items-center">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
|
||||
/>
|
||||
<span className="text-sm text-gray-300 capitalize">
|
||||
{serviceStatusToString(server.status)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-gray-400 hover:text-white">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-5 w-5"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 grid grid-cols-2 gap-4 text-sm text-gray-300">
|
||||
<div>
|
||||
<span className="text-gray-500">Track:</span>
|
||||
<span className="ml-2">{server.state?.track || 'N/A'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-gray-500">Players:</span>
|
||||
<span className="ml-2">{server.state?.playerCount || 0}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="flex justify-between gap-2 bg-gray-900 px-4 py-3">
|
||||
<form action={startServerAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Running}
|
||||
className="rounded bg-green-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Start
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={restartServerAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Stopped}
|
||||
className="rounded bg-yellow-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Restart
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={stopServerAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Stopped}
|
||||
className="rounded bg-red-600 px-3 py-2 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Stop
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
92
src/components/server/ServerConfigurationTabs.tsx
Normal file
92
src/components/server/ServerConfigurationTabs.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
'use client';
|
||||
|
||||
import { Configurations, ServerTab } from '@/lib/types/config';
|
||||
import { ConfigurationEditor } from '@/components/configuration/ConfigurationEditor';
|
||||
import { AssistRulesEditor } from '@/components/configuration/AssistRulesEditor';
|
||||
import { EventConfigEditor } from '@/components/configuration/EventConfigEditor';
|
||||
import { EventRulesEditor } from '@/components/configuration/EventRulesEditor';
|
||||
import { ServerSettingsEditor } from '@/components/configuration/ServerSettingsEditor';
|
||||
import { StatisticsDashboard } from '@/components/statistics/StatisticsDashboard';
|
||||
import { useState } from 'react';
|
||||
import { StateHistoryStats } from '@/lib/types';
|
||||
|
||||
interface ServerConfigurationTabsProps {
|
||||
serverId: string;
|
||||
configurations: Configurations;
|
||||
statistics: StateHistoryStats;
|
||||
}
|
||||
|
||||
export function ServerConfigurationTabs({
|
||||
serverId,
|
||||
configurations,
|
||||
statistics
|
||||
}: ServerConfigurationTabsProps) {
|
||||
const [currentTab, setCurrentTab] = useState(ServerTab.statistics);
|
||||
const tabs = [
|
||||
{ id: ServerTab.statistics, name: 'Statistics', icon: '📊' },
|
||||
{ id: ServerTab.configuration, name: 'Configuration', icon: '⚙️' },
|
||||
{ id: ServerTab.assistRules, name: 'Assist Rules', icon: '🚗' },
|
||||
{ id: ServerTab.event, name: 'Event Config', icon: '🏁' },
|
||||
{ id: ServerTab.eventRules, name: 'Event Rules', icon: '📋' },
|
||||
{ id: ServerTab.settings, name: 'Server Settings', icon: '🔧' }
|
||||
];
|
||||
|
||||
const renderTabContent = () => {
|
||||
switch (currentTab) {
|
||||
case ServerTab.statistics:
|
||||
return <StatisticsDashboard stats={statistics} />;
|
||||
|
||||
case ServerTab.configuration:
|
||||
return <ConfigurationEditor serverId={serverId} config={configurations.configuration} />;
|
||||
|
||||
case ServerTab.assistRules:
|
||||
return <AssistRulesEditor serverId={serverId} config={configurations.assistRules} />;
|
||||
|
||||
case ServerTab.event:
|
||||
return <EventConfigEditor serverId={serverId} config={configurations.event} />;
|
||||
|
||||
case ServerTab.eventRules:
|
||||
return <EventRulesEditor serverId={serverId} config={configurations.eventRules} />;
|
||||
|
||||
case ServerTab.settings:
|
||||
return <ServerSettingsEditor serverId={serverId} config={configurations.settings} />;
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="py-12 text-center">
|
||||
<div className="mb-4 text-6xl">🚧</div>
|
||||
<h3 className="mb-2 text-xl font-semibold text-white">Tab Not Found</h3>
|
||||
<p className="text-gray-400">The requested tab could not be found.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-lg bg-gray-800">
|
||||
<div className="border-b border-gray-700">
|
||||
<nav className="flex space-x-8 overflow-x-auto" aria-label="Tabs">
|
||||
{tabs.map((tab) => {
|
||||
const isActive = currentTab === tab.id;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setCurrentTab(tab.id)}
|
||||
className={`flex items-center space-x-2 border-b-2 px-1 py-4 text-sm font-medium whitespace-nowrap transition-colors ${
|
||||
isActive
|
||||
? 'border-blue-500 text-blue-400'
|
||||
: 'border-transparent text-gray-400 hover:border-gray-300 hover:text-gray-300'
|
||||
} `}
|
||||
>
|
||||
<span className="text-base">{tab.icon}</span>
|
||||
<span>{tab.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="p-6">{renderTabContent()}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
109
src/components/server/ServerHeader.tsx
Normal file
109
src/components/server/ServerHeader.tsx
Normal file
@@ -0,0 +1,109 @@
|
||||
import Link from 'next/link';
|
||||
import { Server, getStatusColor, serviceStatusToString, ServiceStatus } from '@/lib/types/server';
|
||||
import { startServerAction, stopServerAction, restartServerAction } from '@/lib/actions/servers';
|
||||
|
||||
interface ServerHeaderProps {
|
||||
server: Server;
|
||||
}
|
||||
|
||||
export function ServerHeader({ server }: ServerHeaderProps) {
|
||||
return (
|
||||
<div className="rounded-lg bg-gray-800 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="flex items-center text-gray-400 transition-colors hover:text-white"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-2 h-5 w-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M15 19l-7-7 7-7"
|
||||
/>
|
||||
</svg>
|
||||
Back to Dashboard
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-white">{server.name}</h1>
|
||||
<div className="mt-2 flex items-center">
|
||||
<span
|
||||
className={`inline-block h-3 w-3 rounded-full ${getStatusColor(server.status)} mr-3`}
|
||||
/>
|
||||
<span className="text-lg text-gray-300 capitalize">
|
||||
{serviceStatusToString(server.status)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-3">
|
||||
<form action={startServerAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Running}
|
||||
className="rounded bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Start
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={restartServerAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Stopped}
|
||||
className="rounded bg-yellow-600 px-4 py-2 font-medium text-white transition-colors hover:bg-yellow-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Restart
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action={stopServerAction.bind(null, server.id)}>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={server.status === ServiceStatus.Stopped}
|
||||
className="rounded bg-red-600 px-4 py-2 font-medium text-white transition-colors hover:bg-red-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Stop
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 grid grid-cols-2 gap-6 md:grid-cols-4">
|
||||
<div>
|
||||
<div className="text-sm text-gray-500">Current Track</div>
|
||||
<div className="text-lg font-medium text-white">{server.state?.track || 'N/A'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-500">Players</div>
|
||||
<div className="text-lg font-medium text-white">
|
||||
{server.state?.playerCount || 0} / {server.state?.maxConnections || 0}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-500">Session</div>
|
||||
<div className="text-lg font-medium text-white">{server.state?.session || 'N/A'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm text-gray-500">Max Connections</div>
|
||||
<div className="text-lg font-medium text-white">
|
||||
{server.state?.maxConnections || 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
77
src/components/statistics/DailyActivityChart.tsx
Normal file
77
src/components/statistics/DailyActivityChart.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
'use client';
|
||||
|
||||
import { Bar } from 'react-chartjs-2';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
BarElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend
|
||||
} from 'chart.js';
|
||||
|
||||
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
|
||||
|
||||
interface DailyActivity {
|
||||
date: string;
|
||||
sessionsCount: number;
|
||||
}
|
||||
|
||||
interface DailyActivityChartProps {
|
||||
data: DailyActivity[];
|
||||
}
|
||||
|
||||
export function DailyActivityChart({ data }: DailyActivityChartProps) {
|
||||
const chartData = {
|
||||
labels: data.map((item) => new Date(item.date).toLocaleDateString()),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Sessions',
|
||||
data: data.map((item) => item.sessionsCount),
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.8)',
|
||||
borderColor: 'rgb(59, 130, 246)',
|
||||
borderWidth: 1
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top' as const,
|
||||
labels: {
|
||||
color: '#e5e7eb'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#9ca3af'
|
||||
},
|
||||
grid: {
|
||||
color: '#374151'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
color: '#9ca3af',
|
||||
stepSize: 1
|
||||
},
|
||||
grid: {
|
||||
color: '#374151'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-64">
|
||||
<Bar data={chartData} options={options} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
95
src/components/statistics/PlayerCountChart.tsx
Normal file
95
src/components/statistics/PlayerCountChart.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
'use client';
|
||||
|
||||
import { Line } from 'react-chartjs-2';
|
||||
import {
|
||||
Chart as ChartJS,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
TimeScale
|
||||
} from 'chart.js';
|
||||
import 'chartjs-adapter-date-fns';
|
||||
|
||||
ChartJS.register(
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
Title,
|
||||
Tooltip,
|
||||
Legend,
|
||||
TimeScale
|
||||
);
|
||||
|
||||
interface PlayerCountPoint {
|
||||
timestamp: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface PlayerCountChartProps {
|
||||
data: PlayerCountPoint[];
|
||||
}
|
||||
|
||||
export function PlayerCountChart({ data }: PlayerCountChartProps) {
|
||||
const chartData = {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Player Count',
|
||||
data: data.map((point) => ({
|
||||
x: new Date(point.timestamp),
|
||||
y: point.count
|
||||
})),
|
||||
borderColor: 'rgb(59, 130, 246)',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top' as const,
|
||||
labels: {
|
||||
color: '#e5e7eb'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'time' as const,
|
||||
time: {
|
||||
unit: 'hour' as const
|
||||
},
|
||||
ticks: {
|
||||
color: '#9ca3af'
|
||||
},
|
||||
grid: {
|
||||
color: '#374151'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
color: '#9ca3af',
|
||||
stepSize: 1
|
||||
},
|
||||
grid: {
|
||||
color: '#374151'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-64">
|
||||
<Line data={chartData} options={options} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
85
src/components/statistics/RecentSessions.tsx
Normal file
85
src/components/statistics/RecentSessions.tsx
Normal file
@@ -0,0 +1,85 @@
|
||||
interface RecentSession {
|
||||
id: number;
|
||||
date: string;
|
||||
type: string;
|
||||
track: string;
|
||||
duration: number;
|
||||
players: number;
|
||||
}
|
||||
|
||||
interface RecentSessionsProps {
|
||||
sessions: RecentSession[];
|
||||
}
|
||||
|
||||
export function RecentSessions({ sessions }: RecentSessionsProps) {
|
||||
const formatDuration = (minutes: number) => {
|
||||
const hours = Math.floor(minutes / 60);
|
||||
const mins = minutes % 60;
|
||||
return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
};
|
||||
|
||||
if (sessions.length === 0) {
|
||||
return (
|
||||
<div className="py-8 text-center">
|
||||
<div className="mb-2 text-4xl">📊</div>
|
||||
<p className="text-gray-400">No recent sessions found</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-700">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
|
||||
Date
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
|
||||
Type
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
|
||||
Track
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
|
||||
Duration
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium tracking-wider text-gray-400 uppercase">
|
||||
Players
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-700">
|
||||
{sessions.map((session) => (
|
||||
<tr key={session.id} className="transition-colors hover:bg-gray-700">
|
||||
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
|
||||
{formatDate(session.date)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
|
||||
<span className="inline-flex items-center rounded-full bg-blue-900 px-2.5 py-0.5 text-xs font-medium text-blue-300">
|
||||
{session.type}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">{session.track}</td>
|
||||
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
|
||||
{formatDuration(session.duration)}
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm whitespace-nowrap text-gray-300">
|
||||
{session.players}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
67
src/components/statistics/SessionTypesChart.tsx
Normal file
67
src/components/statistics/SessionTypesChart.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import { Doughnut } from 'react-chartjs-2';
|
||||
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
|
||||
|
||||
ChartJS.register(ArcElement, Tooltip, Legend);
|
||||
|
||||
interface SessionCount {
|
||||
name: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface SessionTypesChartProps {
|
||||
data: SessionCount[];
|
||||
}
|
||||
|
||||
export function SessionTypesChart({ data }: SessionTypesChartProps) {
|
||||
const colors = [
|
||||
'#3b82f6', // blue
|
||||
'#10b981', // emerald
|
||||
'#f59e0b', // amber
|
||||
'#ef4444', // red
|
||||
'#8b5cf6', // violet
|
||||
'#06b6d4' // cyan
|
||||
];
|
||||
|
||||
const chartData = {
|
||||
labels: data.map((item) => item.name),
|
||||
datasets: [
|
||||
{
|
||||
data: data.map((item) => item.count),
|
||||
backgroundColor: colors.slice(0, data.length),
|
||||
borderColor: colors.slice(0, data.length).map((color) => color + '20'),
|
||||
borderWidth: 2
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom' as const,
|
||||
labels: {
|
||||
color: '#e5e7eb',
|
||||
padding: 20
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (context: { label: string; parsed: number }) {
|
||||
const total = data.reduce((sum, item) => sum + item.count, 0);
|
||||
const percentage = ((context.parsed / total) * 100).toFixed(1);
|
||||
return `${context.label}: ${context.parsed} (${percentage}%)`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="h-64">
|
||||
<Doughnut data={chartData} options={options} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/components/statistics/StatCard.tsx
Normal file
21
src/components/statistics/StatCard.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
interface StatCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
export function StatCard({ title, value, icon }: StatCardProps) {
|
||||
return (
|
||||
<div className="rounded-lg bg-gray-800 p-6">
|
||||
<div className="flex items-center">
|
||||
<div className="flex-shrink-0">
|
||||
<span className="text-3xl">{icon}</span>
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<div className="text-2xl font-semibold text-white">{value}</div>
|
||||
<div className="text-sm text-gray-400">{title}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
67
src/components/statistics/StatisticsDashboard.tsx
Normal file
67
src/components/statistics/StatisticsDashboard.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client';
|
||||
|
||||
import type { StateHistoryStats } from '@/lib/types/statistics';
|
||||
import { PlayerCountChart } from './PlayerCountChart';
|
||||
import { SessionTypesChart } from './SessionTypesChart';
|
||||
import { DailyActivityChart } from './DailyActivityChart';
|
||||
import { StatCard } from './StatCard';
|
||||
import { RecentSessions } from './RecentSessions';
|
||||
|
||||
interface StatisticsDashboardProps {
|
||||
stats: StateHistoryStats;
|
||||
}
|
||||
|
||||
export function StatisticsDashboard({ stats }: StatisticsDashboardProps) {
|
||||
if (!stats) {
|
||||
return (
|
||||
<div className="py-12 text-center">
|
||||
<div className="mb-4 text-6xl">📊</div>
|
||||
<h3 className="mb-2 text-xl font-semibold text-white">No Statistics Available</h3>
|
||||
<p className="text-gray-400">No data found for the selected date range.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard title="Total Sessions" value={stats.totalSessions ?? 0} icon="🏁" />
|
||||
<StatCard
|
||||
title="Total Playtime"
|
||||
value={`${Math.round(stats.totalPlaytime ?? 0 / 60)}h`}
|
||||
icon="⏱️"
|
||||
/>
|
||||
<StatCard
|
||||
title="Average Players"
|
||||
value={(stats.averagePlayers ?? 0).toFixed(1)}
|
||||
icon="👥"
|
||||
/>
|
||||
<StatCard title="Peak Players" value={stats.peakPlayers ?? 0} icon="🔥" />
|
||||
</div>
|
||||
|
||||
{/* Charts */}
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||||
<div className="rounded-lg bg-gray-800 p-6">
|
||||
<h3 className="mb-4 text-lg font-medium text-white">Player Count Over Time</h3>
|
||||
<PlayerCountChart data={stats.playerCountOverTime ?? []} />
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-gray-800 p-6">
|
||||
<h3 className="mb-4 text-lg font-medium text-white">Session Types</h3>
|
||||
<SessionTypesChart data={stats.sessionTypes ?? []} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-gray-800 p-6">
|
||||
<h3 className="mb-4 text-lg font-medium text-white">Daily Activity</h3>
|
||||
<DailyActivityChart data={stats.dailyActivity ?? []} />
|
||||
</div>
|
||||
|
||||
{/* Recent Sessions */}
|
||||
<div className="rounded-lg bg-gray-800 p-6">
|
||||
<h3 className="mb-4 text-lg font-medium text-white">Recent Sessions</h3>
|
||||
<RecentSessions sessions={stats.recentSessions ?? []} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
46
src/components/ui/Button.tsx
Normal file
46
src/components/ui/Button.tsx
Normal file
@@ -0,0 +1,46 @@
|
||||
import { forwardRef, ButtonHTMLAttributes } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { LoadingSpinner } from './LoadingSpinner';
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{ className, variant = 'primary', size = 'md', isLoading, children, disabled, ...props },
|
||||
ref
|
||||
) => {
|
||||
const baseClasses =
|
||||
'inline-flex items-center justify-center font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed';
|
||||
|
||||
const variants = {
|
||||
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
|
||||
secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500',
|
||||
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
|
||||
ghost: 'text-gray-300 hover:text-white hover:bg-gray-700 focus:ring-gray-500'
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: 'px-3 py-1 text-sm',
|
||||
md: 'px-4 py-2 text-sm',
|
||||
lg: 'px-6 py-3 text-base'
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
className={cn(baseClasses, variants[variant], sizes[size], className)}
|
||||
disabled={disabled || isLoading}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{isLoading && <LoadingSpinner size="sm" className="mr-2" />}
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Button.displayName = 'Button';
|
||||
29
src/components/ui/Input.tsx
Normal file
29
src/components/ui/Input.tsx
Normal file
@@ -0,0 +1,29 @@
|
||||
import { forwardRef, InputHTMLAttributes } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
({ className, label, error, ...props }, ref) => {
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
{label && <label className="block text-sm font-medium text-gray-300">{label}</label>}
|
||||
<input
|
||||
className={cn(
|
||||
'block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white placeholder-gray-400 focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none',
|
||||
error && 'border-red-500 focus:ring-red-500',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
{error && <p className="text-sm text-red-400">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Input.displayName = 'Input';
|
||||
24
src/components/ui/LoadingSpinner.tsx
Normal file
24
src/components/ui/LoadingSpinner.tsx
Normal file
@@ -0,0 +1,24 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface LoadingSpinnerProps {
|
||||
className?: string;
|
||||
size?: 'sm' | 'md' | 'lg';
|
||||
}
|
||||
|
||||
export function LoadingSpinner({ className, size = 'md' }: LoadingSpinnerProps) {
|
||||
const sizeClasses = {
|
||||
sm: 'h-4 w-4',
|
||||
md: 'h-6 w-6',
|
||||
lg: 'h-8 w-8'
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'animate-spin rounded-full border-2 border-gray-300 border-t-transparent',
|
||||
sizeClasses[size],
|
||||
className
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
54
src/components/ui/Modal.tsx
Normal file
54
src/components/ui/Modal.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
'use client';
|
||||
|
||||
import { ReactNode, useEffect } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
title: string;
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, title, children, className }: ModalProps) {
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener('keydown', handleEscape);
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscape);
|
||||
document.body.style.overflow = 'unset';
|
||||
};
|
||||
}, [isOpen, onClose]);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="bg-opacity-50 absolute inset-0 bg-black" onClick={onClose} />
|
||||
<div
|
||||
className={cn(
|
||||
'relative mx-4 w-full max-w-md rounded-lg bg-gray-800 p-6 shadow-lg',
|
||||
className
|
||||
)}
|
||||
>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-white">{title}</h3>
|
||||
<button onClick={onClose} className="text-gray-400 hover:text-white">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
73
src/components/ui/Pagination.tsx
Normal file
73
src/components/ui/Pagination.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
interface PaginationProps {
|
||||
currentPage: number;
|
||||
totalPages: number;
|
||||
onPageChange: (page: number) => void;
|
||||
}
|
||||
|
||||
export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
|
||||
const getVisiblePages = () => {
|
||||
const delta = 2;
|
||||
const range = [];
|
||||
|
||||
for (
|
||||
let i = Math.max(2, currentPage - delta);
|
||||
i <= Math.min(totalPages - 1, currentPage + delta);
|
||||
i++
|
||||
) {
|
||||
range.push(i);
|
||||
}
|
||||
|
||||
if (currentPage - delta > 2) {
|
||||
range.unshift('...');
|
||||
}
|
||||
if (currentPage + delta < totalPages - 1) {
|
||||
range.push('...');
|
||||
}
|
||||
|
||||
range.unshift(1);
|
||||
if (totalPages !== 1) {
|
||||
range.push(totalPages);
|
||||
}
|
||||
|
||||
return range;
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="flex items-center justify-center space-x-2">
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage - 1)}
|
||||
disabled={currentPage === 1}
|
||||
className="rounded-md bg-gray-700 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-600 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<div className="flex space-x-1">
|
||||
{getVisiblePages().map((page, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => (typeof page === 'number' ? onPageChange(page) : undefined)}
|
||||
disabled={typeof page === 'string'}
|
||||
className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
|
||||
page === currentPage
|
||||
? 'bg-blue-600 text-white'
|
||||
: page === '...'
|
||||
? 'cursor-default text-gray-400'
|
||||
: 'bg-gray-700 text-white hover:bg-gray-600'
|
||||
} `}
|
||||
>
|
||||
{page}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => onPageChange(currentPage + 1)}
|
||||
disabled={currentPage === totalPages}
|
||||
className="rounded-md bg-gray-700 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-gray-600 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
12
src/components/ui/RefreshButton.tsx
Normal file
12
src/components/ui/RefreshButton.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
'use client';
|
||||
|
||||
export default function RefreshButton() {
|
||||
return (
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="rounded-md bg-gray-700 px-3 py-1 text-sm hover:bg-gray-600"
|
||||
>
|
||||
Refresh
|
||||
</button>
|
||||
);
|
||||
}
|
||||
36
src/components/ui/Select.tsx
Normal file
36
src/components/ui/Select.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
import { forwardRef, SelectHTMLAttributes } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
options: { value: string | number; label: string }[];
|
||||
}
|
||||
|
||||
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
({ className, label, error, options, ...props }, ref) => {
|
||||
return (
|
||||
<div className="space-y-1">
|
||||
{label && <label className="block text-sm font-medium text-gray-300">{label}</label>}
|
||||
<select
|
||||
className={cn(
|
||||
'block w-full rounded-md border border-gray-600 bg-gray-700 px-3 py-2 text-white focus:border-transparent focus:ring-2 focus:ring-blue-500 focus:outline-none',
|
||||
error && 'border-red-500 focus:ring-red-500',
|
||||
className
|
||||
)}
|
||||
ref={ref}
|
||||
{...props}
|
||||
>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{error && <p className="text-sm text-red-400">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Select.displayName = 'Select';
|
||||
49
src/components/ui/Toast.tsx
Normal file
49
src/components/ui/Toast.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface ToastProps {
|
||||
message: string;
|
||||
type: 'success' | 'error' | 'info';
|
||||
duration?: number;
|
||||
onClose?: () => void;
|
||||
}
|
||||
|
||||
export function Toast({ message, type, duration = 5000, onClose }: ToastProps) {
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
setIsVisible(false);
|
||||
onClose?.();
|
||||
}, duration);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [duration, onClose]);
|
||||
|
||||
if (!isVisible) return null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('fixed top-4 right-4 z-50 max-w-md rounded-md p-4 shadow-lg', {
|
||||
'bg-green-600 text-white': type === 'success',
|
||||
'bg-red-600 text-white': type === 'error',
|
||||
'bg-blue-600 text-white': type === 'info'
|
||||
})}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm">{message}</p>
|
||||
<button
|
||||
onClick={() => {
|
||||
setIsVisible(false);
|
||||
onClose?.();
|
||||
}}
|
||||
className="ml-4 text-white hover:opacity-80"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user