FJurmanovic/acc-server-manager-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update design

Browse Source
This commit is contained in:
Fran Jurmanović
2025-05-22 21:38:31 +02:00
parent 909c698816
commit 12a9e55f5a
12 changed files with 1278 additions and 1313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/components/EditorAssistRules.svelte
View File

@@ -18,19 +18,15 @@
formLoading = false; formLoading = false;
}; };
}} }}
class="space-y-6 max-w-3xl"
> >
<input type="hidden" name="id" value={id} /> <input type="hidden" name="id" value={id} />
<input type="hidden" name="file" value={configFile.assistRules} /> <input type="hidden" name="file" value={configFile.assistRules} />
<div class="sm:mx-auto sm:w-full sm:max-w-7xl"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border-b border-gray-900/10 pb-12">
<h2 class="text-base/7 font-semibold text-gray-900">Assist Rules</h2>
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<!-- Stability Control Level Max --> <!-- Stability Control Level Max -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Stability Control Level Max: Stability Control Level Max:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.stabilityControlLevelMax} bind:value={editedConfig.stabilityControlLevelMax}
disabled={formLoading} disabled={formLoading}
@@ -38,16 +34,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Disable Autosteer --> <!-- Disable Autosteer -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Disable Autosteer: Disable Autosteer:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.disableAutosteer} bind:value={editedConfig.disableAutosteer}
disabled={formLoading} disabled={formLoading}
@@ -57,15 +50,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Disable Auto Lights --> <!-- Disable Auto Lights -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Disable Auto Lights: Disable Auto Lights:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.disableAutoLights} bind:value={editedConfig.disableAutoLights}
disabled={formLoading} disabled={formLoading}
@@ -75,15 +66,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Disable Auto Wiper --> <!-- Disable Auto Wiper -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Disable Auto Wiper: Disable Auto Wiper:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.disableAutoWiper} bind:value={editedConfig.disableAutoWiper}
disabled={formLoading} disabled={formLoading}
@@ -93,15 +82,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Disable Auto Engine Start --> <!-- Disable Auto Engine Start -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Disable Auto Engine Start: Disable Auto Engine Start:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.disableAutoEngineStart} bind:value={editedConfig.disableAutoEngineStart}
disabled={formLoading} disabled={formLoading}
@@ -111,15 +98,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Disable Auto Pit Limiter --> <!-- Disable Auto Pit Limiter -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Disable Auto Pit Limiter: Disable Auto Pit Limiter:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.disableAutoPitLimiter} bind:value={editedConfig.disableAutoPitLimiter}
disabled={formLoading} disabled={formLoading}
@@ -129,15 +114,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Disable Auto Gear --> <!-- Disable Auto Gear -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Disable Auto Gear: Disable Auto Gear:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.disableAutoGear} bind:value={editedConfig.disableAutoGear}
disabled={formLoading} disabled={formLoading}
@@ -147,15 +130,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Disable Auto Clutch --> <!-- Disable Auto Clutch -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Disable Auto Clutch: Disable Auto Clutch:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.disableAutoClutch} bind:value={editedConfig.disableAutoClutch}
disabled={formLoading} disabled={formLoading}
@@ -165,15 +146,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Disable Ideal Line --> <!-- Disable Ideal Line -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Disable Ideal Line: Disable Ideal Line:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.disableIdealLine} bind:value={editedConfig.disableIdealLine}
disabled={formLoading} disabled={formLoading}
@@ -183,22 +162,28 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
</div> </div>
</div> <div class="pt-4 border-t border-gray-700">
<div class="mt-6 flex items-center justify-end gap-x-6"> <label class="flex items-center">
<label <input
><span class="mx-3">Restart server</span><input
type="checkbox" type="checkbox"
id="restart"
name="restart"
bind:checked={restart} bind:checked={restart}
/></label class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-600 rounded bg-gray-700"
> />
<button disabled={formLoading} type="submit" class="btn btn-blue">Save</button> <span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
</label>
</div> </div>
<div class="flex justify-end">
<button
type="submit"
disabled={formLoading}
class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md text-sm font-medium"
>
Save Changes
</button>
</div> </div>
</form> </form>

73
src/components/EditorConfiguration.svelte
View File

@@ -18,18 +18,14 @@
formLoading = false; formLoading = false;
}; };
}} }}
class="space-y-6 max-w-3xl"
> >
<input type="hidden" name="id" value={id} /> <input type="hidden" name="id" value={id} />
<input type="hidden" name="file" value={configFile.configuration} /> <input type="hidden" name="file" value={configFile.configuration} />
<div class="sm:mx-auto sm:w-full sm:max-w-7xl"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border-b border-gray-900/10 pb-12"> <div>
<h2 class="text-base/7 font-semibold text-gray-900">Configuration</h2> <label class="block text-sm font-medium text-gray-300 mb-1">
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
UDP Port: UDP Port:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="udpPort" name="udpPort"
@@ -37,15 +33,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.udpPort} bind:value={editedConfig.udpPort}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
TCP Port: TCP Port:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="tcpPort" name="tcpPort"
@@ -53,15 +45,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.tcpPort} bind:value={editedConfig.tcpPort}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Max Connections: Max Connections:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="maxConnections" name="maxConnections"
@@ -69,14 +57,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.maxConnections} bind:value={editedConfig.maxConnections}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Lan Discovery: Lan Discovery:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.lanDiscovery} bind:value={editedConfig.lanDiscovery}
disabled={formLoading} disabled={formLoading}
@@ -86,13 +71,11 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<div class="sm:col-span-2"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Register To Lobby: Register To Lobby:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.registerToLobby} bind:value={editedConfig.registerToLobby}
disabled={formLoading} disabled={formLoading}
@@ -102,23 +85,29 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<input type="hidden" name="configVersion" value={1} /> <input type="hidden" name="configVersion" value={1} />
</div> </div>
</div> <div class="pt-4 border-t border-gray-700">
<div class="mt-6 flex items-center justify-end gap-x-6"> <label class="flex items-center">
<label <input
><span class="mx-3">Restart server</span><input
type="checkbox" type="checkbox"
id="restart"
name="restart"
bind:checked={restart} bind:checked={restart}
/></label class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-600 rounded bg-gray-700"
> />
<button disabled={formLoading} type="submit" class="btn btn-blue">Save</button> <span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
</label>
</div> </div>
<div class="flex justify-end">
<button
type="submit"
disabled={formLoading}
class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md text-sm font-medium"
>
Save Changes
</button>
</div> </div>
</form> </form>

196
src/components/EditorEvent.svelte
View File

@@ -20,17 +20,14 @@
formLoading = false; formLoading = false;
}; };
}} }}
class="space-y-6 max-w-3xl"
> >
<input type="hidden" name="id" value={id} /> <input type="hidden" name="id" value={id} />
<input type="hidden" name="file" value={configFile.event} /> <input type="hidden" name="file" value={configFile.event} />
<div class="sm:mx-auto sm:w-full sm:max-w-7xl"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border-b border-gray-900/10 pb-12"> <div>
<h2 class="text-base/7 font-semibold text-gray-900">Event</h2> <label class="block text-sm font-medium text-gray-300 mb-1">
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-6">
<label class="block text-sm/6 font-medium text-gray-900">
Track: Track:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.track} bind:value={editedConfig.track}
disabled={formLoading} disabled={formLoading}
@@ -41,14 +38,11 @@
<option value={track.track}>{track.track}</option> <option value={track.track}>{track.track}</option>
{/each} {/each}
</select> </select>
</div>
</label> </label>
</div> </div>
<div class="sm:col-span-2"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Pre-Race waiting time seconds: Pre-Race waiting time seconds:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="preRaceWaitingTimeSeconds" name="preRaceWaitingTimeSeconds"
@@ -56,15 +50,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.preRaceWaitingTimeSeconds} bind:value={editedConfig.preRaceWaitingTimeSeconds}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Session over time seconds: Session over time seconds:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="sessionOverTimeSeconds" name="sessionOverTimeSeconds"
@@ -72,15 +62,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.sessionOverTimeSeconds} bind:value={editedConfig.sessionOverTimeSeconds}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Ambient temp: Ambient temp:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="ambientTemp" name="ambientTemp"
@@ -88,15 +74,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.ambientTemp} bind:value={editedConfig.ambientTemp}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Cloud level: Cloud level:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="cloudLevel" name="cloudLevel"
@@ -105,15 +87,11 @@
bind:value={editedConfig.cloudLevel} bind:value={editedConfig.cloudLevel}
step=".01" step=".01"
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Rain: Rain:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="rain" name="rain"
@@ -122,15 +100,11 @@
bind:value={editedConfig.rain} bind:value={editedConfig.rain}
step=".01" step=".01"
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Weather randomness: Weather randomness:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="weatherRandomness" name="weatherRandomness"
@@ -138,15 +112,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.weatherRandomness} bind:value={editedConfig.weatherRandomness}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Post-Qualy seconds: Post-Qualy seconds:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="postQualySeconds" name="postQualySeconds"
@@ -154,15 +124,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.postQualySeconds} bind:value={editedConfig.postQualySeconds}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Post-Race seconds: Post-Race seconds:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="postRaceSeconds" name="postRaceSeconds"
@@ -170,15 +136,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.postRaceSeconds} bind:value={editedConfig.postRaceSeconds}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Simracer weather conditions: Simracer weather conditions:
<div class="mt-2">
<div class="input-block">
<input <input
disabled={formLoading} disabled={formLoading}
name="simracerWeatherConditions" name="simracerWeatherConditions"
@@ -186,14 +148,11 @@
class="form form-input" class="form form-input"
bind:value={editedConfig.simracerWeatherConditions} bind:value={editedConfig.simracerWeatherConditions}
/> />
</label>
</div> </div>
</div></label <div>
> <label class="block text-sm font-medium text-gray-300 mb-1">
</div>
<div class="sm:col-span-2">
<label class="block text-sm/6 font-medium text-gray-900">
Is fixed condition qualification: Is fixed condition qualification:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.isFixedConditionQualification} bind:value={editedConfig.isFixedConditionQualification}
disabled={formLoading} disabled={formLoading}
@@ -203,22 +162,20 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<div class="sm:col-span-6"> <div />
<label class="block text-sm/6 font-medium text-gray-900"> <div>
<label class="block text-sm font-medium text-gray-300 mb-1">
Sessions: Sessions:
<div class="mt-2"> <div class="mt-2 space-y-4">
{#each editedConfig.sessions as session, index} {#each editedConfig.sessions as session, index}
<div class="mb-4 rounded-lg border p-4"> <div class="mb-4 rounded-lg border border-gray-700 bg-gray-800 p-4">
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Hour of Day --> <!-- Hour of Day -->
<div> <div>
<label class="block text-sm font-medium text-gray-700" <label class="block text-sm font-medium text-gray-300 mb-1"
>Hour of Day: >Hour of Day:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={session.hourOfDay} bind:value={session.hourOfDay}
name={`sessions[${index}].hourOfDay`} name={`sessions[${index}].hourOfDay`}
@@ -226,16 +183,12 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div> </label>
</div></label
>
</div> </div>
<!-- Day of Weekend --> <!-- Day of Weekend -->
<div> <div>
<label class="block text-sm font-medium text-gray-700" <label class="block text-sm font-medium text-gray-300 mb-1">
>Day of Weekend: Day of Weekend:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={session.dayOfWeekend} bind:value={session.dayOfWeekend}
name={`sessions[${index}].dayOfWeekend`} name={`sessions[${index}].dayOfWeekend`}
@@ -243,16 +196,12 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Time Multiplier --> <!-- Time Multiplier -->
<div> <div>
<label class="block text-sm font-medium text-gray-700" <label class="block text-sm font-medium text-gray-300 mb-1">
>Time Multiplier: Time Multiplier:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={session.timeMultiplier} bind:value={session.timeMultiplier}
name={`sessions[${index}].timeMultiplier`} name={`sessions[${index}].timeMultiplier`}
@@ -260,15 +209,12 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div> </label>
</div></label
>
</div> </div>
<!-- Session Type --> <!-- Session Type -->
<div> <div>
<label class="block text-sm font-medium text-gray-700" <label class="block text-sm font-medium text-gray-300 mb-1">
>Session Type: Session Type:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={session.sessionType} bind:value={session.sessionType}
name={`sessions[${index}].sessionType`} name={`sessions[${index}].sessionType`}
@@ -279,15 +225,12 @@
<option value="Q">Qualifying</option> <option value="Q">Qualifying</option>
<option value="R">Race</option> <option value="R">Race</option>
</select> </select>
</div></label </label>
>
</div> </div>
<!-- Session Duration Minutes --> <!-- Session Duration Minutes -->
<div> <div>
<label class="block text-sm font-medium text-gray-700" <label class="block text-sm font-medium text-gray-300 mb-1">
>Session Duration (Minutes): Session Duration (Minutes):
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={session.sessionDurationMinutes} bind:value={session.sessionDurationMinutes}
name={`sessions[${index}].sessionDurationMinutes`} name={`sessions[${index}].sessionDurationMinutes`}
@@ -295,8 +238,6 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
</div> </div>
@@ -305,8 +246,11 @@
onclick={() => { onclick={() => {
editedConfig.sessions = editedConfig.sessions.filter((_, i) => i !== index); editedConfig.sessions = editedConfig.sessions.filter((_, i) => i !== index);
}} }}
class="mt-2 text-sm text-red-600 hover:text-red-800" class="mt-4 px-3 py-1 bg-red-600 hover:bg-red-700 rounded-md text-xs font-medium text-white flex items-center"
> >
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" 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 Remove Session
</button> </button>
</div> </div>
@@ -325,26 +269,36 @@
} }
]; ];
}} }}
class="btn btn-blue mt-2" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md text-sm font-medium text-white flex items-center"
> >
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" 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 Add Session
</button> </button>
</div> </div>
</label> </label>
</div> </div>
</div> </div>
</div> <div class="pt-4 border-t border-gray-700">
<div class="mt-6 flex items-center justify-end gap-x-6"> <label class="flex items-center">
<label <input
><span class="mx-3">Restart server</span><input
type="checkbox" type="checkbox"
id="restart"
name="restart"
bind:checked={restart} bind:checked={restart}
/></label class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-600 rounded bg-gray-700"
> />
<button disabled={formLoading} type="submit" class="btn btn-blue">Save</button> <span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
</label>
</div> </div>
<div class="flex justify-end">
<button
type="submit"
disabled={formLoading}
class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md text-sm font-medium"
>
Save Changes
</button>
</div> </div>
</form> </form>

109
src/components/EditorEventRules.svelte
View File

@@ -18,19 +18,15 @@
formLoading = false; formLoading = false;
}; };
}} }}
class="space-y-6 max-w-3xl"
> >
<input type="hidden" name="id" value={id} /> <input type="hidden" name="id" value={id} />
<input type="hidden" name="file" value={configFile.eventRules} /> <input type="hidden" name="file" value={configFile.eventRules} />
<div class="sm:mx-auto sm:w-full sm:max-w-7xl"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border-b border-gray-900/10 pb-12">
<h2 class="text-base/7 font-semibold text-gray-900">Event Rules</h2>
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<!-- Qualify Standing Type --> <!-- Qualify Standing Type -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Qualify Standing Type: Qualify Standing Type:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.qualifyStandingType} bind:value={editedConfig.qualifyStandingType}
disabled={formLoading} disabled={formLoading}
@@ -38,17 +34,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Pit Window Length Sec --> <!-- Pit Window Length Sec -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Pit Window Length (Sec): Pit Window Length (Sec):
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.pitWindowLengthSec} bind:value={editedConfig.pitWindowLengthSec}
disabled={formLoading} disabled={formLoading}
@@ -56,17 +48,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Driver Stint Time Sec --> <!-- Driver Stint Time Sec -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Driver Stint Time (Sec): Driver Stint Time (Sec):
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.driverStintTimeSec} bind:value={editedConfig.driverStintTimeSec}
disabled={formLoading} disabled={formLoading}
@@ -74,17 +62,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Mandatory Pitstop Count --> <!-- Mandatory Pitstop Count -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Mandatory Pitstop Count: Mandatory Pitstop Count:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.mandatoryPitstopCount} bind:value={editedConfig.mandatoryPitstopCount}
disabled={formLoading} disabled={formLoading}
@@ -92,17 +76,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Max Total Driving Time --> <!-- Max Total Driving Time -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Max Total Driving Time: Max Total Driving Time:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.maxTotalDrivingTime} bind:value={editedConfig.maxTotalDrivingTime}
disabled={formLoading} disabled={formLoading}
@@ -110,16 +90,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Is Refuelling Allowed In Race --> <!-- Is Refuelling Allowed In Race -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Is Refuelling Allowed In Race: Is Refuelling Allowed In Race:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.isRefuellingAllowedInRace} bind:value={editedConfig.isRefuellingAllowedInRace}
disabled={formLoading} disabled={formLoading}
@@ -129,15 +106,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Is Refuelling Time Fixed --> <!-- Is Refuelling Time Fixed -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Is Refuelling Time Fixed: Is Refuelling Time Fixed:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.isRefuellingTimeFixed} bind:value={editedConfig.isRefuellingTimeFixed}
disabled={formLoading} disabled={formLoading}
@@ -147,15 +122,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Is Mandatory Pitstop Refuelling Required --> <!-- Is Mandatory Pitstop Refuelling Required -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Is Mandatory Pitstop Refuelling Required: Is Mandatory Pitstop Refuelling Required:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.isMandatoryPitstopRefuellingRequired} bind:value={editedConfig.isMandatoryPitstopRefuellingRequired}
disabled={formLoading} disabled={formLoading}
@@ -165,15 +138,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Is Mandatory Pitstop Tyre Change Required --> <!-- Is Mandatory Pitstop Tyre Change Required -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Is Mandatory Pitstop Tyre Change Required: Is Mandatory Pitstop Tyre Change Required:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.isMandatoryPitstopTyreChangeRequired} bind:value={editedConfig.isMandatoryPitstopTyreChangeRequired}
disabled={formLoading} disabled={formLoading}
@@ -183,15 +154,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Is Mandatory Pitstop Swap Driver Required --> <!-- Is Mandatory Pitstop Swap Driver Required -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Is Mandatory Pitstop Swap Driver Required: Is Mandatory Pitstop Swap Driver Required:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.isMandatoryPitstopSwapDriverRequired} bind:value={editedConfig.isMandatoryPitstopSwapDriverRequired}
disabled={formLoading} disabled={formLoading}
@@ -201,16 +170,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Tyre Set Count --> <!-- Tyre Set Count -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Tyre Set Count: Tyre Set Count:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.tyreSetCount} bind:value={editedConfig.tyreSetCount}
disabled={formLoading} disabled={formLoading}
@@ -218,23 +184,28 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
</div> </div>
</div> <div class="pt-4 border-t border-gray-700">
<div class="mt-6 flex items-center justify-end gap-x-6"> <label class="flex items-center">
<label <input
><span class="mx-3">Restart server</span><input
type="checkbox" type="checkbox"
id="restart"
name="restart"
bind:checked={restart} bind:checked={restart}
/></label class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-600 rounded bg-gray-700"
> />
<button disabled={formLoading} type="submit" class="btn btn-blue">Save</button> <span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
</label>
</div> </div>
<div class="flex justify-end">
<button
type="submit"
disabled={formLoading}
class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md text-sm font-medium"
>
Save Changes
</button>
</div> </div>
</form> </form>

151
src/components/EditorSettings.svelte
View File

@@ -19,19 +19,15 @@
formLoading = false; formLoading = false;
}; };
}} }}
class="space-y-6 max-w-3xl"
> >
<input type="hidden" name="id" value={id} /> <input type="hidden" name="id" value={id} />
<input type="hidden" name="file" value={configFile.settings} /> <input type="hidden" name="file" value={configFile.settings} />
<div class="sm:mx-auto sm:w-full sm:max-w-7xl"> <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="border-b border-gray-900/10 pb-12">
<h2 class="text-base/7 font-semibold text-gray-900">Settings</h2>
<div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<!-- Server Name --> <!-- Server Name -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Server Name: Server Name:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.serverName} bind:value={editedConfig.serverName}
disabled={formLoading} disabled={formLoading}
@@ -39,17 +35,13 @@
type="text" type="text"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Admin Password --> <!-- Admin Password -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Admin Password: Admin Password:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.adminPassword} bind:value={editedConfig.adminPassword}
disabled={formLoading} disabled={formLoading}
@@ -57,16 +49,13 @@
type="password" type="password"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Car Group --> <!-- Car Group -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Car Group: Car Group:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.carGroup} bind:value={editedConfig.carGroup}
disabled={formLoading} disabled={formLoading}
@@ -77,16 +66,13 @@
<option value={group}>{group}</option> <option value={group}>{group}</option>
{/each} {/each}
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Track Medals Requirement --> <!-- Track Medals Requirement -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Track Medals Requirement: Track Medals Requirement:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.trackMedalsRequirement} bind:value={editedConfig.trackMedalsRequirement}
disabled={formLoading} disabled={formLoading}
@@ -94,17 +80,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Safety Rating Requirement --> <!-- Safety Rating Requirement -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Safety Rating Requirement: Safety Rating Requirement:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.safetyRatingRequirement} bind:value={editedConfig.safetyRatingRequirement}
disabled={formLoading} disabled={formLoading}
@@ -112,17 +94,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Racecraft Rating Requirement --> <!-- Racecraft Rating Requirement -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Racecraft Rating Requirement: Racecraft Rating Requirement:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.racecraftRatingRequirement} bind:value={editedConfig.racecraftRatingRequirement}
disabled={formLoading} disabled={formLoading}
@@ -130,17 +108,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Password --> <!-- Password -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Password: Password:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.password} bind:value={editedConfig.password}
disabled={formLoading} disabled={formLoading}
@@ -148,17 +122,13 @@
type="password" type="password"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Spectator Password --> <!-- Spectator Password -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Spectator Password: Spectator Password:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.spectatorPassword} bind:value={editedConfig.spectatorPassword}
disabled={formLoading} disabled={formLoading}
@@ -166,17 +136,13 @@
type="password" type="password"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Max Car Slots --> <!-- Max Car Slots -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Max Car Slots: Max Car Slots:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.maxCarSlots} bind:value={editedConfig.maxCarSlots}
disabled={formLoading} disabled={formLoading}
@@ -184,16 +150,13 @@
type="number" type="number"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Dump Leaderboards --> <!-- Dump Leaderboards -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Dump Leaderboards: Dump Leaderboards:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.dumpLeaderboards} bind:value={editedConfig.dumpLeaderboards}
disabled={formLoading} disabled={formLoading}
@@ -203,15 +166,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Is Race Locked --> <!-- Is Race Locked -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Is Race Locked: Is Race Locked:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.isRaceLocked} bind:value={editedConfig.isRaceLocked}
disabled={formLoading} disabled={formLoading}
@@ -221,15 +182,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Randomize Track When Empty --> <!-- Randomize Track When Empty -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Randomize Track When Empty: Randomize Track When Empty:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.randomizeTrackWhenEmpty} bind:value={editedConfig.randomizeTrackWhenEmpty}
disabled={formLoading} disabled={formLoading}
@@ -239,16 +198,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Central Entry List Path --> <!-- Central Entry List Path -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Central Entry List Path: Central Entry List Path:
<div class="mt-2">
<div class="input-block">
<input <input
bind:value={editedConfig.centralEntryListPath} bind:value={editedConfig.centralEntryListPath}
disabled={formLoading} disabled={formLoading}
@@ -256,16 +212,13 @@
type="text" type="text"
class="form form-input" class="form form-input"
/> />
</div>
</div>
</label> </label>
</div> </div>
<!-- Allow Auto DQ --> <!-- Allow Auto DQ -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Allow Auto DQ: Allow Auto DQ:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.allowAutoDQ} bind:value={editedConfig.allowAutoDQ}
disabled={formLoading} disabled={formLoading}
@@ -275,15 +228,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Short Formation Lap --> <!-- Short Formation Lap -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Short Formation Lap: Short Formation Lap:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.shortFormationLap} bind:value={editedConfig.shortFormationLap}
disabled={formLoading} disabled={formLoading}
@@ -293,15 +244,13 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Formation Lap Type --> <!-- Formation Lap Type -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Formation Lap Type: Formation Lap Type:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.formationLapType} bind:value={editedConfig.formationLapType}
disabled={formLoading} disabled={formLoading}
@@ -314,15 +263,13 @@
> >
<option value={3}>Default formation lap with position control and UI</option> <option value={3}>Default formation lap with position control and UI</option>
</select> </select>
</div>
</label> </label>
</div> </div>
<!-- Ignore Premature Disconnects --> <!-- Ignore Premature Disconnects -->
<div class="sm:col-span-6"> <div>
<label class="block text-sm/6 font-medium text-gray-900"> <label class="block text-sm font-medium text-gray-300 mb-1">
Ignore Premature Disconnects: Ignore Premature Disconnects:
<div class="mt-2 grid grid-cols-1">
<select <select
bind:value={editedConfig.ignorePrematureDisconnects} bind:value={editedConfig.ignorePrematureDisconnects}
disabled={formLoading} disabled={formLoading}
@@ -332,22 +279,28 @@
<option value={0}>No</option> <option value={0}>No</option>
<option value={1}>Yes</option> <option value={1}>Yes</option>
</select> </select>
</div>
</label> </label>
</div> </div>
</div> </div>
</div> <div class="pt-4 border-t border-gray-700">
<div class="mt-6 flex items-center justify-end gap-x-6"> <label class="flex items-center">
<label <input
><span class="mx-3">Restart server</span><input
type="checkbox" type="checkbox"
id="restart"
name="restart"
bind:checked={restart} bind:checked={restart}
/></label class="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-600 rounded bg-gray-700"
> />
<button disabled={formLoading} type="submit" class="btn btn-blue">Save</button> <span class="ml-2 text-sm text-gray-300">Restart server after saving</span>
</label>
</div> </div>
<div class="flex justify-end">
<button
type="submit"
disabled={formLoading}
class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md text-sm font-medium"
>
Save Changes
</button>
</div> </div>
</form> </form>

78
src/components/ServerCard.svelte
View File

@@ -2,40 +2,86 @@
import type { Server } from '$models/server'; import type { Server } from '$models/server';
let { server }: { server: Server } = $props(); let { server }: { server: Server } = $props();
function getStatusColor(status: string) {
switch (status) {
case 'SERVICE_RUNNING\r\n': return 'bg-green-500';
case 'SERVICE_STOPPED\r\n': return 'bg-red-500';
case 'SERVICE_RESTARTING\r\n': return 'bg-yellow-500';
default: return 'bg-gray-500';
}
}
</script> </script>
<a <div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-700">
<a
href={`dashboard/server/${server.id}`} href={`dashboard/server/${server.id}`}
class="w-full max-w-sm rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800" >
> <div class="p-4">
<div class="flex flex-col items-center pb-4"> <div class="flex justify-between items-start">
<h2 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{server.name}</h2> <div>
<p class="text-sm text-gray-500 dark:text-gray-400">Status: {server.status}</p> <h3 class="text-lg font-medium">{server.name}</h3>
<div class="mt-12 flex"> <div class="flex items-center mt-1">
<span class={`inline-block w-2 h-2 rounded-full ${getStatusColor(server.status)} mr-2`}></span>
<span class="text-sm capitalize">{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.track}
</div>
<div>
<span class="text-gray-500">Class:</span> {server.carClass}
</div>
<div>
<span class="text-gray-500">Players:</span> {server.players}
</div>
<div>
<span class="text-gray-500">Uptime:</span> {server.uptime}
</div>
</div>
</div>
</a>
<form method="POST" action="?/start"> <form method="POST" action="?/start">
<div class="bg-gray-900 px-4 py-3 flex justify-between">
<input type="hidden" name="id" value={server.id} /> <input type="hidden" name="id" value={server.id} />
<button <button
class="btn btn-blue" type="submit"
disabled={server.status.startsWith('SERVICE_RUNNING')} disabled={server.status.startsWith('SERVICE_RUNNING')}
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
type="submit">Start</button class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded-md text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed"
> >
Start
</button>
<button <button
class="btn btn-blue"
disabled={server.status.startsWith('SERVICE_STOPPED')} disabled={server.status.startsWith('SERVICE_STOPPED')}
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
formaction="?/stop">Stop</button class="px-3 py-1 bg-yellow-600 hover:bg-yellow-700 rounded-md text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed"
formaction="?/restart"
> >
Restart
</button>
<button <button
class="btn btn-blue"
disabled={server.status.startsWith('SERVICE_STOPPED')} disabled={server.status.startsWith('SERVICE_STOPPED')}
onclick={(e) => e.stopPropagation()} onclick={(e) => e.stopPropagation()}
formaction="?/restart">Restart</button class="px-3 py-1 bg-red-600 hover:bg-red-700 rounded-md text-xs font-medium disabled:opacity-50 disabled:cursor-not-allowed"
formaction="?/stop"
> >
Stop
</button>
</div>
</form> </form>
</div> </div>
</div>
</a>
<style> <style>
</style> </style>

28
src/components/Sidebar.svelte
View File

@@ -1,28 +0,0 @@
<script lang="ts">
</script>
<aside class="fixed top-0 left-0 z-40 h-screen w-64">
<div class="h-full overflow-y-auto bg-gray-50 px-3 py-4 dark:bg-gray-800">
<ul class="space-y-2 font-medium">
<li>
<a
href="/dashboard"
class="group flex items-center rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>
<span class="ms-3">Dashboard</span>
</a>
</li>
<li>
<a
href="/logout"
class="group flex items-center rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>
<span class="ms-3">Logout</span>
</a>
</li>
</ul>
</div>
</aside>
<style>
</style>

14
src/routes/dashboard/+layout.svelte
View File

@@ -1,14 +0,0 @@
<script>
import Sidebar from '$components/Sidebar.svelte';
import '../../app.css';
let { children } = $props();
</script>
<div class="layout">
<Sidebar />
<div class="p-4 sm:ml-64">
{@render children()}
</div>
</div>
<style></style>

33
src/routes/dashboard/+page.svelte
View File

@@ -6,10 +6,41 @@
let servers: Server[] = data.servers; let servers: Server[] = data.servers;
</script> </script>
<div class="server-grid"> <div class="min-h-screen bg-gray-900 text-white">
<header class="bg-gray-800 shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<h1 class="text-2xl font-bold">ACC Server Manager</h1>
<div class="flex items-center space-x-4">
<a href="/logout">
<button
class="text-gray-300 hover:text-white flex items-center"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
<span class="ml-1 hidden sm:inline">Logout</span>
</button>
</a>
</div>
</div>
</header>
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div class="flex justify-between items-center mb-6">
<h2 class="text-xl font-semibold">Your Servers</h2>
<div class="flex space-x-2">
<a href="/dashboard" class="px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded-md text-sm">
Refresh
</a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{#each servers as server} {#each servers as server}
<ServerCard {server} /> <ServerCard {server} />
{/each} {/each}
</div>
</main>
</div> </div>
<svelte:head> <svelte:head>

112
src/routes/dashboard/server/[id]/+page.svelte
View File

@@ -12,63 +12,129 @@
const id = data.id; const id = data.id;
const server = data.server; const server = data.server;
let tab = $state(configFile.event); let tab = $state(configFile.event);
function getStatusColor(status: string) {
console.log({status})
switch (status) {
case 'SERVICE_RUNNING\r\n': return 'bg-green-500';
case 'SERVICE_STOPPED\r\n': return 'bg-red-500';
case 'SERVICE_RESTARTING\r\n': return 'bg-yellow-500';
default: return 'bg-gray-500';
}
}
</script> </script>
<svelte:head> <svelte:head>
<title>{server.name}</title> <title>{server.name}</title>
</svelte:head> </svelte:head>
<aside class="fixed top-0 left-64 z-40 h-screen w-48"> <div class="min-h-screen bg-gray-900 text-white flex">
<div class="h-full overflow-y-auto bg-gray-50 px-1 py-4 dark:bg-gray-700"> <!-- Sidebar -->
<div class="flex items-center justify-center"> <aside class="w-64 bg-gray-800 border-r border-gray-700 flex-shrink-0">
<h2 class="bold mb-5 text-gray-300">{server.name}</h2> <!-- Update the sidebar header to make the server name clickable -->
<div class="p-4 border-b border-gray-700">
<a href="/dashboard" class="hover:text-green-400 transition-colors">
<h2 class="text-lg font-semibold truncate">{server.name}</h2>
</a>
<div class="flex items-center mt-1">
<span class={`inline-block w-2 h-2 rounded-full ${getStatusColor(server.status)} mr-2`}></span>
<span class="text-sm capitalize">{server.status}</span>
</div> </div>
<ul class="space-y-2 font-medium"> </div>
<nav class="p-2">
<ul class="space-y-1">
<li> <li>
<button <button
class="btn btn-sidebar" class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.event ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
disabled={tab === configFile.event || !configs.event} disabled={tab === configFile.event || !configs.event}
onclick={() => (tab = configFile.event)} onclick={() => (tab = configFile.event)}
> >
<span class="ms-3">Event</span> Event
</button> </button>
</li>
<li>
<button <button
class="btn btn-sidebar" class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.configuration ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
disabled={tab === configFile.configuration || !configs.configuration} disabled={tab === configFile.configuration || !configs.configuration}
onclick={() => (tab = configFile.configuration)} onclick={() => (tab = configFile.configuration)}
> >
<span class="ms-3">Configuration</span> Configuration
</button> </button>
</li>
<li>
<button <button
class="btn btn-sidebar" class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.settings ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
disabled={tab === configFile.settings || !configs.settings} disabled={tab === configFile.settings || !configs.settings}
onclick={() => (tab = configFile.settings)} onclick={() => (tab = configFile.settings)}
> >
<span class="ms-3">Settings</span> Settings
</button> </button>
</li>
{#if configs.assistRules} {#if configs.assistRules}
<li>
<button <button
class="btn btn-sidebar" class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.assistRules ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
disabled={tab === configFile.assistRules} disabled={tab === configFile.assistRules || !configs.assistRules}
onclick={() => (tab = configFile.assistRules)} onclick={() => (tab = configFile.assistRules)}
> >
<span class="ms-3">Assist Rules</span> Assist Rules
</button> </button>
</li>
{/if} {/if}
{#if configs.eventRules} {#if configs.eventRules}
<li>
<button <button
class="btn btn-sidebar" class={`w-full text-left px-3 py-2 rounded-md ${tab === configFile.eventRules ? 'bg-green-600 text-white' : 'text-gray-300 hover:bg-gray-700'}`}
disabled={tab === configFile.eventRules} disabled={tab === configFile.eventRules || !configs.eventRules}
onclick={() => (tab = configFile.eventRules)} onclick={() => (tab = configFile.eventRules)}
> >
<span class="ms-3">Event Rules</span> Event Rules
</button> </button>
{/if}
</li> </li>
{/if}
</ul> </ul>
</nav>
</aside>
<main class="flex-1 overflow-auto">
<header class="bg-gray-800 shadow-md p-4 flex justify-between items-center">
<h1 class="text-xl font-semibold">
{#if tab === configFile.event}
Event
{:else if tab === configFile.configuration}
Configuration
{:else if tab === configFile.settings}
Settings
{:else if tab === configFile.assistRules}
Assist Rules
{:else if tab === configFile.eventRules}
Event Rules
{/if}
</h1>
<div class="flex space-x-3">
<a
href="/dashboard"
class="px-3 py-1.5 bg-gray-700 hover:bg-gray-600 rounded-md text-sm flex items-center"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Back to Dashboard
</a>
<a
href="/logout"
class="px-3 py-1.5 bg-red-700 hover:bg-red-800 rounded-md text-sm flex items-center"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
Logout
</a>
</div> </div>
</aside> </header>
<div class="sm:ml-48"> <div class="p-6">
{#if tab === configFile.event} {#if tab === configFile.event}
<EditorEvent config={configs.event} {tracks} {id} /> <EditorEvent config={configs.event} {tracks} {id} />
{:else if tab === configFile.configuration} {:else if tab === configFile.configuration}
@@ -79,5 +145,11 @@
<EditorAssistRules config={configs.assistRules} {id} /> <EditorAssistRules config={configs.assistRules} {id} />
{:else if tab === configFile.eventRules} {:else if tab === configFile.eventRules}
<EditorEventRules config={configs.eventRules} {id} /> <EditorEventRules config={configs.eventRules} {id} />
{:else}
<div class="bg-gray-800 rounded-lg p-6 text-center">
<p class="text-gray-400">Select a section from the sidebar to edit settings</p>
</div>
{/if} {/if}
</div>
</main>
</div> </div>

50
src/routes/login/+page.svelte
View File

@@ -13,18 +13,17 @@
<title>ACC Server Manager - Login</title> <title>ACC Server Manager - Login</title>
</svelte:head> </svelte:head>
<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8"> <div class="min-h-screen flex items-center justify-center bg-gray-900">
<div class="sm:mx-auto sm:w-full sm:max-w-sm"> <div class="w-full max-w-md p-8 space-y-8 bg-gray-800 rounded-lg shadow-lg">
<h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900"> <div class="text-center">
Sign in to your account <h1 class="text-3xl font-bold text-white">ACC Server Manager</h1>
</h2> <p class="mt-2 text-gray-400">Sign in to manage your servers</p>
</div> </div>
{#if error} {#if error}
<div class="sm:mx-auto sm:w-full sm:max-w-sm"> <div class="p-3 bg-red-900/50 border border-red-700 rounded-md text-red-200 text-sm">
<p class="error">{error}</p> {error}
</div> </div>
{/if} {/if}
<form <form
method="POST" method="POST"
action="?/login" action="?/login"
@@ -32,48 +31,55 @@
formLoading = true; formLoading = true;
}} }}
> >
<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm"> <div class="space-y-4">
<div class="space-y-6">
<div> <div>
<label for="text" class="block text-sm/6 font-medium text-gray-900">Username</label> <label for="username" class="block text-sm font-medium text-gray-300">Username</label>
<div class="mt-2">
<input <input
type="text" type="text"
name="username" name="username"
id="username" id="username"
autocomplete="username" autocomplete="username"
required required
class="form form-login"
bind:value={username} bind:value={username}
disabled={formLoading} disabled={formLoading}
class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
/> />
</div> </div>
</div>
<div> <div>
<div class="flex items-center justify-between"> <label for="password" class="block text-sm font-medium text-gray-300">Password</label>
<label for="password" class="block text-sm/6 font-medium text-gray-900">Password</label>
</div>
<div class="mt-2">
<input <input
type="password" type="password"
name="password" name="password"
id="password" id="password"
autocomplete="current-password" autocomplete="current-password"
required required
class="form form-login"
bind:value={password} bind:value={password}
disabled={formLoading} disabled={formLoading}
class="mt-1 block w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent"
/> />
</div> </div>
</div> </div>
<div> <div>
<button type="submit" class="btn btn-login" disabled={formLoading}>Sign in</button> <button
</div> type="submit"
</div> disabled={formLoading}
class="w-full flex justify-center mt-4 py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
>
{#if formLoading}
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Signing in...
{:else}
Sign in
{/if}
</button>
</div> </div>
</form> </form>
</div>
</div> </div>
<style> <style>

4
src/styles/inputs.css
View File

@@ -7,11 +7,11 @@
} }
.form-input { .form-input {
@apply min-w-0 grow py-1.5 pr-3 pl-1 text-base text-gray-900 placeholder:text-gray-400 focus:outline-none sm:text-sm/6; @apply w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent;
} }
.form-select { .form-select {
@apply col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pr-8 pl-3 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6; @apply w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent;
} }
.form:disabled { .form:disabled {