add types and fix loading

src/api/apiService.ts

@@ -1,5 +1,5 @@
 import { authStore } from '$stores/authStore';
-import { redirect } from '@sveltejs/kit';
+import { redirect, type RequestEvent } from '@sveltejs/kit';
 import { redisSessionManager } from '$stores/redisSessionManager';
 import { env } from '$env/dynamic/private';
 
@@ -35,7 +35,7 @@ async function fetchAPI(endpoint: string, method: string = 'GET', body?: object,
 }
 
 export async function fetchAPIEvent(
-	event: object,
+	event: RequestEvent,
 	endpoint: string,
 	method: string = 'GET',
 	body?: object

src/api/authService.ts

@@ -1,9 +1,10 @@
 import fetchAPI, { fetchAPIEvent } from '$api/apiService';
 import { authStore } from '$stores/authStore';
 import { redisSessionManager } from '$stores/redisSessionManager';
+import type { RequestEvent } from '@sveltejs/kit';
 import { v4 as uuidv4 } from 'uuid';
 
-export const login = async (event: object, username: string, password: string) => {
+export const login = async (event: RequestEvent, username: string, password: string) => {
 	const token = btoa(`${username}:${password}`);
 	await redisSessionManager.createSession(event.cookies, { token }, uuidv4());
 	if (!(await checkAuth(event))) {
@@ -15,11 +16,11 @@ export const login = async (event: object, username: string, password: string) =
 	return true;
 };
 
-export const logout = (event) => {
+export const logout = (event: RequestEvent) => {
 	return redisSessionManager.deleteCookie(event.cookies);
 };
 
-export const checkAuth = async (event: object) => {
+export const checkAuth = async (event: RequestEvent) => {
 	try {
 		await fetchAPIEvent(event, '/api');
 		return true;

src/api/lookupService.ts

@@ -1,21 +1,23 @@
 import { fetchAPIEvent } from '$api/apiService';
+import type { CarModel, CupCategory, DriverCategory, SessionType, Track } from '$models/lookups';
+import type { RequestEvent } from '@sveltejs/kit';
 
-export const getCarModels = async (event: object) => {
+export const getCarModels = async (event: RequestEvent): Promise<CarModel[]> => {
 	return fetchAPIEvent(event, '/lookup/car-models');
 };
 
-export const getCupCategories = async (event: object) => {
+export const getCupCategories = async (event: RequestEvent): Promise<CupCategory[]> => {
 	return fetchAPIEvent(event, '/lookup/cup-categories');
 };
 
-export const getDriverCategories = async (event: object) => {
+export const getDriverCategories = async (event: RequestEvent): Promise<DriverCategory[]> => {
 	return fetchAPIEvent(event, '/lookup/driver-categories');
 };
 
-export const getSessionTypes = async (event: object) => {
+export const getSessionTypes = async (event: RequestEvent): Promise<SessionType[]> => {
 	return fetchAPIEvent(event, '/lookup/session-types');
 };
 
-export const getTracks = async (event: object) => {
+export const getTracks = async (event: RequestEvent): Promise<Track[]> => {
 	return fetchAPIEvent(event, '/lookup/tracks');
 };

src/api/serverService.ts

@@ -1,22 +1,74 @@
 import { fetchAPIEvent } from '$api/apiService';
+import {
+	configFile,
+	type AssistRules,
+	type Config,
+	type ConfigFile,
+	type Configuration,
+	type Configurations,
+	type EventConfig,
+	type EventRules,
+	type ServerSettings
+} from '$models/config';
+import type { Server } from '$models/server';
+import type { RequestEvent } from '@sveltejs/kit';
 
-export const getServers = async (event: object) => {
+export const getServers = async (event: RequestEvent): Promise<Server[]> => {
 	return fetchAPIEvent(event, '/server');
 };
 
-export const getConfigFiles = async (event: object, serverId = '') => {
+export const getConfigFiles = async (
+	event: RequestEvent,
+	serverId: string
+): Promise<Configurations> => {
 	return fetchAPIEvent(event, `/server/${serverId}/config`);
 };
 
-export const getConfigFile = async (event: object, serverId = '', file = '') => {
+export const getConfigFile = async (
+	event: RequestEvent,
+	serverId: string,
+	file: ConfigFile
+): Promise<Config> => {
 	return fetchAPIEvent(event, `/server/${serverId}/config/${file}`);
 };
 
+export const getEventFile = async (event: RequestEvent, serverId: string): Promise<EventConfig> => {
+	return fetchAPIEvent(event, `/server/${serverId}/config/${configFile.event}`);
+};
+
+export const getConfigurationFile = async (
+	event: RequestEvent,
+	serverId: string
+): Promise<Configuration> => {
+	return fetchAPIEvent(event, `/server/${serverId}/config/${configFile.configuration}`);
+};
+
+export const getAssistRulesFile = async (
+	event: RequestEvent,
+	serverId: string
+): Promise<AssistRules> => {
+	return fetchAPIEvent(event, `/server/${serverId}/config/${configFile.assistRules}`);
+};
+
+export const getEventRulesFile = async (
+	event: RequestEvent,
+	serverId: string
+): Promise<EventRules> => {
+	return fetchAPIEvent(event, `/server/${serverId}/config/${configFile.eventRules}`);
+};
+
+export const getSettingsFile = async (
+	event: RequestEvent,
+	serverId: string
+): Promise<ServerSettings> => {
+	return fetchAPIEvent(event, `/server/${serverId}/config/${configFile.settings}`);
+};
+
 export const updateConfig = async (
-	event: object,
+	event: RequestEvent,
 	serverId: string,
-	file: string,
+	file: ConfigFile,
-	newConfig?: object,
+	newConfig?: Config,
 	override = false,
 	restart = true
 ) => {
@@ -28,18 +80,18 @@ export const updateConfig = async (
 	);
 };
 
-export const restartService = async (event: object, serverId: number) => {
+export const restartService = async (event: RequestEvent, serverId: number) => {
 	return fetchAPIEvent(event, '/api/restart', 'POST', { serverId });
 };
 
-export const startService = async (event: object, serverId: number) => {
+export const startService = async (event: RequestEvent, serverId: number) => {
 	return fetchAPIEvent(event, '/api/start', 'POST', { serverId });
 };
 
-export const stopService = async (event: object, serverId: number) => {
+export const stopService = async (event: RequestEvent, serverId: number) => {
 	return fetchAPIEvent(event, '/api/stop', 'POST', { serverId });
 };
 
-export const getServiceStatus = async (event: object, serviceName: number) => {
+export const getServiceStatus = async (event: RequestEvent, serviceName: string) => {
 	return fetchAPIEvent(event, `/api/${serviceName}`);
 };

src/app.css

@@ -1 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
+@import './styles/button.css';
+@import './styles/loader.css';
+@import './styles/inputs.css';

src/components/ConfigEditor.svelte

@@ -1,10 +1,21 @@
-<script>
+<script lang="ts">
-	let { config, tracks, id } = $props();
+	import { enhance } from '$app/forms';
-	let editedConfig = { ...config['event'] };
+	import type { EventConfig } from '$models/config';
-	editedConfig.sessions = JSON.stringify(editedConfig.sessions);
+	import type { Track } from '$models/lookups';
+
+	const { config, tracks, id }: { config: EventConfig; tracks: Track[]; id: string } = $props();
+	const editedConfig = $state({ ...config });
+	let sessions = $state(JSON.stringify(editedConfig.sessions));
+	let formLoading = $state(false);
 </script>
 
-<form method="POST" action="?/event">
+<form
+	method="POST"
+	action="?/event"
+	use:enhance={() => {
+		formLoading = true;
+	}}
+>
 	<input type="hidden" name="id" value={id} />
 	<div class="sm:mx-auto sm:w-full sm:max-w-7xl">
 		<div class="border-b border-gray-900/10 pb-12">
@@ -16,8 +27,9 @@
 						<div class="mt-2 grid grid-cols-1">
 							<select
 								bind:value={editedConfig.track}
+								disabled={formLoading}
 								name="track"
-								class="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"
+								class="form form-select"
 							>
 								{#each tracks as track}
 									<option value={track.track}>{track.track}</option>
@@ -30,13 +42,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Pre-Race waiting time seconds:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="preRaceWaitingTimeSeconds"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.preRaceWaitingTimeSeconds}
 								/>
 							</div>
@@ -47,13 +58,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Session over time seconds:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="sessionOverTimeSeconds"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.sessionOverTimeSeconds}
 								/>
 							</div>
@@ -64,13 +74,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Ambient temp:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="ambientTemp"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.ambientTemp}
 								/>
 							</div>
@@ -81,13 +90,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Cloud level:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="cloudLevel"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.cloudLevel}
 									step=".01"
 								/>
@@ -99,13 +107,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Rain:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="rain"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.rain}
 									step=".01"
 								/>
@@ -117,13 +124,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Weather randomness:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="weatherRandomness"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.weatherRandomness}
 								/>
 							</div>
@@ -134,13 +140,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Post-Qualy seconds:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="postQualySeconds"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.postQualySeconds}
 								/>
 							</div>
@@ -151,13 +156,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Post-Race seconds:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="postRaceSeconds"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.postRaceSeconds}
 								/>
 							</div>
@@ -168,13 +172,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Simracer weather conditions:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="simracerWeatherConditions"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.simracerWeatherConditions}
 								/>
 							</div>
@@ -185,13 +188,12 @@
 					<label class="block text-sm/6 font-medium text-gray-900">
 						Is fixed condition qualification:
 						<div class="mt-2">
-							<div
+							<div class="input-block">
-								class="flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600"
-							>
 								<input
+									disabled={formLoading}
 									name="isFixedConditionQualification"
 									type="number"
-									class="block 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"
+									class="form form-input"
 									bind:value={editedConfig.isFixedConditionQualification}
 								/>
 							</div>
@@ -203,10 +205,11 @@
 						Sessions:
 						<div class="mt-2">
 							<textarea
+								disabled={formLoading}
 								name="sessions"
 								rows="3"
-								class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+								class="form form-textarea"
-								bind:value={editedConfig.sessions}
+								bind:value={sessions}
 							></textarea>
 						</div>
 					</label>
@@ -214,11 +217,7 @@
 			</div>
 		</div>
 		<div class="mt-6 flex items-center justify-end gap-x-6">
-			<button
+			<button disabled={formLoading} type="submit" class="btn btn-blue">Save</button>
-				type="submit"
-				class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-				>Save</button
-			>
 		</div>
 	</div>
 </form>

src/components/ServerCard.svelte

@@ -1,5 +1,7 @@
-<script>
+<script lang="ts">
-	let { server } = $props();
+	import type { Server } from '$models/server';
+
+	let { server }: { server: Server } = $props();
 </script>
 
 <a
@@ -13,19 +15,19 @@
 			<form method="POST" action="?/start">
 				<input type="hidden" name="id" value={server.id} />
 				<button
-					class="mx-2 inline-flex items-center rounded-lg bg-blue-700 px-4 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+					class="btn btn-blue"
 					disabled={server.status.startsWith('SERVICE_RUNNING')}
 					onclick={(e) => e.stopPropagation()}
 					type="submit">Start</button
 				>
 				<button
-					class="mx-2 inline-flex items-center rounded-lg bg-blue-700 px-4 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+					class="btn btn-blue"
 					disabled={server.status.startsWith('SERVICE_STOPPED')}
 					onclick={(e) => e.stopPropagation()}
 					formaction="?/stop">Stop</button
 				>
 				<button
-					class="mx-2 inline-flex items-center rounded-lg bg-blue-700 px-4 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 focus:outline-none dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+					class="btn btn-blue"
 					disabled={server.status.startsWith('SERVICE_STOPPED')}
 					onclick={(e) => e.stopPropagation()}
 					formaction="?/restart">Restart</button

src/components/Sidebar.svelte

@@ -1,5 +1,4 @@
-<script>
+<script lang="ts">
-	import { goto } from '$app/navigation';
 </script>
 
 <aside
@@ -12,31 +11,16 @@
 					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"
 				>
-					<svg
-						class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-						aria-hidden="true"
-						xmlns="http://www.w3.org/2000/svg"
-						fill="currentColor"
-						viewBox="0 0 22 21"
-					>
-						<path
-							d="M16.975 11H10V4.025a1 1 0 0 0-1.066-.998 8.5 8.5 0 1 0 9.039 9.039.999.999 0 0 0-1-1.066h.002Z"
-						/>
-						<path
-							d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z"
-						/>
-					</svg>
 					<span class="ms-3">Dashboard</span>
 				</a>
 			</li>
 			<li>
-				<form method="POST" action="?/logout">
+				<a
-					<button
+					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"
+					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>
+					<span class="ms-3">Logout</span>
-					</button>
+				</a>
-				</form>
 			</li>
 		</ul>
 	</div>

src/models/config.ts

@@ -0,0 +1,101 @@
+export interface Configurations {
+	configuration: Configuration;
+	assistRules: AssistRules;
+	event: EventConfig;
+	eventRules: EventRules;
+	settings: ServerSettings;
+}
+
+export enum configFile {
+	configuration = 'configuration.json',
+	assistRules = 'assistRules.json',
+	event = 'event.json',
+	eventRules = 'eventRules.json',
+	settings = 'settings.json'
+}
+
+export type Config = Configuration | AssistRules | EventConfig | EventRules | ServerSettings;
+export type ConfigFile =
+	| configFile.configuration
+	| configFile.assistRules
+	| configFile.event
+	| configFile.eventRules
+	| configFile.settings;
+
+export interface AssistRules {
+	stabilityControlLevelMax: number;
+	disableAutosteer: number;
+	disableAutoLights: number;
+	disableAutoWiper: number;
+	disableAutoEngineStart: number;
+	disableAutoPitLimiter: number;
+	disableAutoGear: number;
+	disableAutoClutch: number;
+	disableIdealLine: number;
+}
+
+export interface ServerSettings {
+	serverName: string;
+	adminPassword: string;
+	carGroup: string;
+	trackMedalsRequirement: number;
+	safetyRatingRequirement: number;
+	racecraftRatingRequirement: number;
+	password: string;
+	spectatorPassword: string;
+	maxCarSlots: number;
+	dumpLeaderboards: number;
+	isRaceLocked: number;
+	randomizeTrackWhenEmpty: number;
+	centralEntryListPath: string;
+	allowAutoDQ: number;
+	shortFormationLap: number;
+	formationLapType: number;
+	ignorePrematureDisconnects: number;
+}
+
+export interface Configuration {
+	udpPort: number;
+	tcpPort: number;
+	maxConnections: number;
+	lanDiscovery: number;
+	registerToLobby: number;
+	configVersion: number;
+}
+
+export interface EventConfig {
+	track: string;
+	preRaceWaitingTimeSeconds: number;
+	sessionOverTimeSeconds: number;
+	ambientTemp: number;
+	cloudLevel: number;
+	rain: number;
+	weatherRandomness: number;
+	postQualySeconds: number;
+	postRaceSeconds: number;
+	simracerWeatherConditions: number;
+	isFixedConditionQualification: number;
+	sessions: Session[];
+}
+
+export interface Session {
+	hourOfDay: number;
+	dayOfWeekend: number;
+	timeMultiplier: number;
+	sessionType: string;
+	sessionDurationMinutes: number;
+}
+
+export interface EventRules {
+	qualifyStandingType: number;
+	pitWindowLengthSec: number;
+	driverStintTimeSec: number;
+	mandatoryPitstopCount: number;
+	maxTotalDrivingTime: number;
+	isRefuellingAllowedInRace: boolean;
+	isRefuellingTimeFixed: boolean;
+	isMandatoryPitstopRefuellingRequired: boolean;
+	isMandatoryPitstopTyreChangeRequired: boolean;
+	isMandatoryPitstopSwapDriverRequired: boolean;
+	tyreSetCount: number;
+}

src/models/lookups.ts

@@ -0,0 +1,25 @@
+export interface Track {
+	track: string;
+	uniquePitBoxes: number;
+	privateServerSlots: number;
+}
+
+export interface CarModel {
+	value: number;
+	carModel: string;
+}
+
+export interface DriverCategory {
+	value: number;
+	category: string;
+}
+
+export interface CupCategory {
+	value: number;
+	category: string;
+}
+
+export interface SessionType {
+	value: number;
+	sessionType: string;
+}

src/models/server.ts

@@ -0,0 +1,5 @@
+export interface Server {
+    id: number;
+    name: string;
+    status: string;
+}

src/routes/+page.server.ts

@@ -1,16 +1,9 @@
-import { checkAuth, logout } from '$api/authService';
+import { checkAuth } from '$api/authService';
+import type { RequestEvent } from '@sveltejs/kit';
 import { redirect } from '@sveltejs/kit';
-import type { Actions } from './$types';
 
-export const load = async (event) => {
+export const load = async (event: RequestEvent) => {
 	const isAuth = await checkAuth(event);
 	if (isAuth) redirect(308, '/dashboard');
 	redirect(308, '/login');
 };
-
-export const actions = {
-	logout: async (event) => {
-		await logout(event);
-		redirect(303, '/login');
-	}
-} satisfies Actions;

src/routes/dashboard/+page.server.ts

@@ -1,9 +1,9 @@
 import { logout } from '$api/authService';
 import { checkAuth } from '$api/authService';
 import { getServers, restartService, startService, stopService } from '$api/serverService';
-import { redirect, type Actions } from '@sveltejs/kit';
+import { redirect, type Actions, type RequestEvent } from '@sveltejs/kit';
 
-export const load = async (event) => {
+export const load = async (event: RequestEvent) => {
 	const isAuth = await checkAuth(event);
 	if (!isAuth) return redirect(308, '/login');
 	const servers = await getServers(event);
@@ -11,20 +11,16 @@ export const load = async (event) => {
 };
 
 export const actions = {
-	start: async (event) => {
+	start: async (event: RequestEvent) => {
 		const id = (await event.request.formData()).get('id') as string;
 		await startService(event, +id);
 	},
-	restart: async (event) => {
+	restart: async (event: RequestEvent) => {
 		const id = (await event.request.formData()).get('id') as string;
 		await restartService(event, +id);
 	},
-	stop: async (event) => {
+	stop: async (event: RequestEvent) => {
 		const id = (await event.request.formData()).get('id') as string;
 		await stopService(event, +id);
-	},
-	logout: async (event) => {
-		await logout(event);
-		redirect(303, '/login');
 	}
 } satisfies Actions;

src/routes/dashboard/+page.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
 	import ServerCard from '$components/ServerCard.svelte';
-	import { invalidateAll } from '$app/navigation';
+	import type { Server } from '$models/server';
 
 	const { data } = $props();
-	let servers: Array<Object> = data.servers;
+	let servers: Server[] = data.servers;
-
-	const refresh = async () => {
-		invalidateAll();
-	};
 </script>
 
 <h1>Dashboard</h1>
 <div class="server-grid">
 	{#each servers as server}
-		<ServerCard {refresh} {server} />
+		<ServerCard {server} />
 	{/each}
 </div>
 

src/routes/dashboard/server/[id]/+page.server.ts

@@ -1,13 +1,16 @@
-import { updateConfig, getConfigFiles } from '$api/serverService';
+import { updateConfig, getConfigFiles, getEventFile } from '$api/serverService';
-import type { Actions, RequestEvent } from './$types';
+import type { Actions } from './$types';
 import { checkAuth } from '$api/authService';
 import { getTracks } from '$api/lookupService';
 import { redirect } from '@sveltejs/kit';
+import type { RequestEvent } from '@sveltejs/kit';
+import { configFile } from '$models/config';
 
-export const load = async (event) => {
+export const load = async (event: RequestEvent) => {
 	const isAuth = await checkAuth(event);
 	if (!isAuth) return redirect(308, '/login');
-	const config = await getConfigFiles(event, event.params.id);
+	if (!event.params.id) return redirect(308, '/dashboard');
+	const config = await getEventFile(event, event.params.id);
 	const tracks = await getTracks(event);
 	return {
 		id: event.params.id,
@@ -32,7 +35,7 @@ export const actions = {
 					object[key] = value != '' && !Number.isNaN(+value) ? +value : value;
 			}
 		});
-		await updateConfig(event, id, 'event.json', object, true, true);
+		await updateConfig(event, id, configFile.event, object, true, true);
 		redirect(303, '/dashboard');
 	}
 } satisfies Actions;

src/routes/login/+page.server.ts

@@ -1,10 +1,11 @@
-import { checkAuth, login } from '$api/authService';
+import { login } from '$api/authService';
 import { authStore } from '$stores/authStore';
+import type { RequestEvent } from '@sveltejs/kit';
 import type { Actions } from './$types';
 import { redirect } from '@sveltejs/kit';
 
 export const actions = {
-	login: async (event) => {
+	login: async (event: RequestEvent) => {
 		const formData = await event.request.formData();
 		const username = formData.get('username') as string;
 		const password = formData.get('password') as string;

src/routes/login/+page.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+	import { enhance } from '$app/forms';
 	import { authStore } from '$stores/authStore';
 	import { get } from 'svelte/store';
 
-	let username = '';
+	let username = $state('');
-	let password = '';
+	let password = $state('');
+	let formLoading = $state(false);
 	let { error } = get(authStore);
 </script>
 
@@ -19,7 +21,13 @@
 		</div>
 	{/if}
 
-	<form method="POST" action="?/login">
+	<form
+		method="POST"
+		action="?/login"
+		use:enhance={() => {
+			formLoading = true;
+		}}
+	>
 		<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
 			<div class="space-y-6">
 				<div>
@@ -31,8 +39,9 @@
 							id="username"
 							autocomplete="username"
 							required
-							class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+							class="form form-login"
 							bind:value={username}
+							disabled={formLoading}
 						/>
 					</div>
 				</div>
@@ -48,18 +57,15 @@
 							id="password"
 							autocomplete="current-password"
 							required
-							class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
+							class="form form-login"
 							bind:value={password}
+							disabled={formLoading}
 						/>
 					</div>
 				</div>
 
 				<div>
-					<button
+					<button type="submit" class="btn btn-login" disabled={formLoading}>Sign in</button>
-						type="submit"
-						class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-						>Sign in</button
-					>
 				</div>
 			</div>
 		</div>

src/routes/logout/+page.server.ts

@@ -0,0 +1,8 @@
+import { logout } from '$api/authService';
+import type { RequestEvent } from '@sveltejs/kit';
+import { redirect } from '@sveltejs/kit';
+
+export const load = async (event: RequestEvent) => {
+	await logout(event);
+	redirect(303, '/login');
+};

src/styles/button.css

@@ -0,0 +1,15 @@
+.btn {
+	@apply mx-1 rounded px-4 py-1 font-bold;
+}
+.btn-blue {
+	@apply bg-blue-500 text-white;
+}
+.btn-login {
+	@apply flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600;
+}
+.btn:hover {
+	@apply cursor-pointer bg-blue-700;
+}
+.btn:disabled {
+	@apply cursor-default bg-blue-500 opacity-60;
+}

src/styles/inputs.css

@@ -0,0 +1,27 @@
+.form-textarea {
+	@apply block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6;
+}
+
+.form {
+	@apply block;
+}
+
+.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;
+}
+
+.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;
+}
+
+.form:disabled {
+	@apply opacity-60;
+}
+
+.input-block {
+	@apply flex items-center rounded-md bg-white pl-3 outline-1 -outline-offset-1 outline-gray-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600;
+}
+
+.form-login {
+	@apply block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6;
+}

src/styles/loader.css

@@ -0,0 +1,43 @@
+/* HTML: <div class="loader"></div> */
+.loader {
+	width: 40px;
+	height: 40px;
+	--c: no-repeat linear-gradient(orange 0 0);
+	background: var(--c), var(--c), var(--c), var(--c);
+	background-size: 21px 21px;
+	animation: l5 1.5s infinite cubic-bezier(0.3, 1, 0, 1);
+}
+@keyframes l5 {
+	0% {
+		background-position:
+			0 0,
+			100% 0,
+			100% 100%,
+			0 100%;
+	}
+	33% {
+		background-position:
+			0 0,
+			100% 0,
+			100% 100%,
+			0 100%;
+		width: 60px;
+		height: 60px;
+	}
+	66% {
+		background-position:
+			100% 0,
+			100% 100%,
+			0 100%,
+			0 0;
+		width: 60px;
+		height: 60px;
+	}
+	100% {
+		background-position:
+			100% 0,
+			100% 100%,
+			0 100%,
+			0 0;
+	}
+}

svelte.config.js

@@ -17,7 +17,9 @@ const config = {
 			'$lib/*': './src/lib/*',
 			'$routes/*': './src/routes/*',
 			'$stores/*': './src/stores/*',
-			'$api/*': './src/api/*'
+			'$api/*': './src/api/*',
+			'$models/*': './src/models/*',
+			'$styles/*': './src/styles/*'
 		}
 	}
 };