init

.gitignore

@@ -1,132 +1,23 @@
-# ---> Node
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-.pnpm-debug.log*
+node_modules
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+# OS
+.DS_Store
+Thumbs.db
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
+# Env
 .env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
+.env.*
+!.env.example
+!.env.test
 
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,4 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:22-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+RUN npm prune --production
+
+FROM node:22-alpine
+WORKDIR /app
+COPY --from=builder /app/build build/
+COPY --from=builder /app/node_modules node_modules/
+COPY package.json .
+EXPOSE 3000
+ENV NODE_ENV=production
+CMD [ "node", "build" ]
+

README.md

@@ -1,2 +1,38 @@
-# acc-server-manager-web
+# sv
 
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

eslint.config.js

@@ -0,0 +1,26 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import { fileURLToPath } from 'node:url';
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default ts.config(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node
+			}
+		}
+	},
+	{
+		files: ['**/*.svelte']
+	}
+);

package.json

@@ -0,0 +1,39 @@
+{
+	"name": "acc-server-manager-web",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint ."
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.2.5",
+		"@eslint/js": "^9.18.0",
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/adapter-node": "^5.2.12",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@tailwindcss/postcss": "^4.0.4",
+		"@tailwindcss/vite": "^4.0.0",
+		"eslint": "^9.18.0",
+		"eslint-config-prettier": "^10.0.1",
+		"eslint-plugin-svelte": "^2.46.1",
+		"globals": "^15.14.0",
+		"prettier": "^3.4.2",
+		"prettier-plugin-svelte": "^3.3.3",
+		"prettier-plugin-tailwindcss": "^0.6.11",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^4.0.0",
+		"typescript": "^5.0.0",
+		"typescript-eslint": "^8.20.0",
+		"vite": "^6.0.0"
+	}
+}

postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+	plugins: {
+		"@tailwindcss/postcss": {}
+	}
+};

src/api/apiService.ts

@@ -0,0 +1,39 @@
+import { authStore } from '$stores/authStore';
+import { redirect } from '@sveltejs/kit';
+import { get } from 'svelte/store';
+
+const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://acc.jurmanovic.com/v1';
+
+async function fetchAPI(endpoint: string, method: string = 'GET', body?: object) {
+	const { token } = get(authStore);
+	const headers = {
+		'Content-Type': 'application/json',
+		Authorization: `Basic ${token}`
+	};
+
+	const response = await fetch(`${BASE_URL}${endpoint}`, {
+		method,
+		headers,
+		body: body ? JSON.stringify(body) : null
+	});
+
+	console.log(`${BASE_URL}${endpoint}`, body, method, token);
+
+	if (!response.ok) {
+		if (endpoint != '/api' && response.status == 401) {
+			authStore.set({
+				username: undefined,
+				password: undefined,
+				token: undefined,
+				error: 'Wrong authorization key!'
+			});
+			redirect(303, '/login');
+		}
+		throw new Error(`API Error: ${response.statusText}`);
+	}
+
+	if (response.headers.get('Content-Type') == 'application/json') return response.json();
+	return response.text();
+}
+
+export default fetchAPI;

src/api/authService.ts

@@ -0,0 +1,27 @@
+import fetchAPI from '$api/apiService';
+import { authStore } from '$stores/authStore';
+
+export const login = async (username: string, password: string) => {
+	const token = btoa(`${username}:${password}`);
+	authStore.set({ token });
+	if (!(await checkAuth())) {
+		{
+			authStore.set({ token: undefined, error: 'Invalid username or password.' });
+			return false;
+		}
+	}
+	return true;
+};
+
+export const logout = () => {
+	authStore.set({ token: undefined });
+};
+
+export const checkAuth = async () => {
+	try {
+		await fetchAPI('/api');
+		return true;
+	} catch (err) {
+		return false;
+	}
+};

src/api/lookupService.ts

@@ -0,0 +1,21 @@
+import fetchAPI from "$api/apiService";
+
+export const getCarModels = async () => {
+  return fetchAPI("/lookup/car-models");
+};
+
+export const getCupCategories = async () => {
+  return fetchAPI("/lookup/cup-categories");
+};
+
+export const getDriverCategories = async () => {
+  return fetchAPI("/lookup/driver-categories");
+};
+
+export const getSessionTypes = async () => {
+  return fetchAPI("/lookup/session-types");
+};
+
+export const getTracks = async () => {
+  return fetchAPI("/lookup/tracks");
+};

src/api/serverService.ts

@@ -0,0 +1,43 @@
+import fetchAPI from '$api/apiService';
+
+export const getServers = async () => {
+	return fetchAPI('/server');
+};
+
+export const getConfigFiles = async (serverId = '') => {
+	return fetchAPI(`/server/${serverId}/config`);
+};
+
+export const getConfigFile = async (serverId = '', file = '') => {
+	return fetchAPI(`/server/${serverId}/config/${file}`);
+};
+
+export const updateConfig = async (
+	serverId: string,
+	file: string,
+	newConfig?: object,
+	override = false,
+	restart = true
+) => {
+	return fetchAPI(
+		`/server/${serverId}/config/${file}?override=${override}&restart=${restart}`,
+		'PUT',
+		newConfig
+	);
+};
+
+export const restartService = async (serverId: number) => {
+	return fetchAPI('/api/restart', 'POST', { serverId });
+};
+
+export const startService = async (serverId: number) => {
+	return fetchAPI('/api/start', 'POST', { serverId });
+};
+
+export const stopService = async (serverId: number) => {
+	return fetchAPI('/api/stop', 'POST', { serverId });
+};
+
+export const getServiceStatus = async (serviceName: number) => {
+	return fetchAPI(`/api/${serviceName}`);
+};

src/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/components/ConfigEditor.svelte

@@ -0,0 +1,227 @@
+<script>
+	let { config, tracks, id } = $props();
+	let editedConfig = { ...config['event'] };
+	editedConfig.sessions = JSON.stringify(editedConfig.sessions);
+	console.log(editedConfig);
+</script>
+
+<form method="POST" action="?/event">
+	<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">
+			<h2 class="text-base/7 font-semibold text-gray-900">Event</h2>
+			<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:
+						<div class="mt-2 grid grid-cols-1">
+							<select
+								bind:value={editedConfig.track}
+								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"
+							>
+								{#each tracks as track}
+									<option value={track.track}>{track.track}</option>
+								{/each}
+							</select>
+						</div>
+					</label>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Pre-Race waiting time seconds:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.preRaceWaitingTimeSeconds}
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Session over time seconds:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.sessionOverTimeSeconds}
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Ambient temp:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.ambientTemp}
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Cloud level:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.cloudLevel}
+									step=".01"
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Rain:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.rain}
+									step=".01"
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Weather randomness:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.weatherRandomness}
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Post-Qualy seconds:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.postQualySeconds}
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Post-Race seconds:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.postRaceSeconds}
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Simracer weather conditions:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.simracerWeatherConditions}
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-2">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Is fixed condition qualification:
+						<div class="mt-2">
+							<div
+								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
+									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"
+									bind:value={editedConfig.isFixedConditionQualification}
+								/>
+							</div>
+						</div></label
+					>
+				</div>
+				<div class="sm:col-span-6">
+					<label class="block text-sm/6 font-medium text-gray-900">
+						Sessions:
+						<div class="mt-2">
+							<textarea
+								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"
+								bind:value={editedConfig.sessions}
+							></textarea>
+						</div>
+					</label>
+				</div>
+			</div>
+		</div>
+		<div class="mt-6 flex items-center justify-end gap-x-6">
+			<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>
+
+<style></style>

src/components/ServerCard.svelte

@@ -0,0 +1,39 @@
+<script>
+	let { server } = $props();
+</script>
+
+<a
+	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="flex flex-col items-center pb-4">
+		<h2 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">{server.name}</h2>
+		<p class="text-sm text-gray-500 dark:text-gray-400">Status: {server.status}</p>
+		<div class="mt-12 flex">
+			<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"
+					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"
+					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"
+					disabled={server.status.startsWith('SERVICE_STOPPED')}
+					onclick={(e) => e.stopPropagation()}
+					formaction="?/restart">Restart</button
+				>
+			</form>
+		</div>
+	</div>
+</a>
+
+<style>
+</style>

src/components/Sidebar.svelte

@@ -0,0 +1,52 @@
+<script>
+	import { logout } from '$api/authService';
+	import { goto } from '$app/navigation';
+
+	function handleLogout() {
+		logout();
+		goto('/login');
+	}
+</script>
+
+<aside
+	class="fixed top-0 left-0 z-40 h-screen w-64 -translate-x-full transition-transform sm:translate-x-0"
+>
+	<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"
+				>
+					<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>
+				<a
+					href="#"
+					onclick={handleLogout}
+					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>

src/hooks.server.ts

@@ -0,0 +1,8 @@
+import { authStore } from '$stores/authStore';
+import type { Handle } from '@sveltejs/kit';
+
+export const init = () => {
+	// const token = sessionStorage.getItem('token') ?? undefined;
+	// console.log(token);
+	// authStore.set({ token });
+};

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/routes/+layout.svelte

@@ -0,0 +1,10 @@
+<script>
+	import '../app.css';
+	let { children } = $props();
+</script>
+
+<div class="layout">
+	{@render children()}
+</div>
+
+<style></style>

src/routes/+page.server.ts

@@ -0,0 +1,8 @@
+import { checkAuth } from '$api/authService';
+import { redirect } from '@sveltejs/kit';
+
+export const load = async () => {
+	const isAuth = await checkAuth();
+	if (isAuth) redirect(308, '/dashboard');
+	redirect(308, '/login');
+};

src/routes/dashboard/+layout.svelte

@@ -0,0 +1,14 @@
+<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>

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

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

src/routes/dashboard/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import ServerCard from '$components/ServerCard.svelte';
+	import { invalidateAll } from '$app/navigation';
+
+	const { data } = $props();
+	let servers: Array<Object> = data.servers;
+
+	const refresh = async () => {
+		invalidateAll();
+	};
+</script>
+
+<h1>Dashboard</h1>
+<div class="server-grid">
+	{#each servers as server}
+		<ServerCard {refresh} {server} />
+	{/each}
+</div>
+
+<style>
+	.server-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+		gap: 20px;
+	}
+</style>

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

@@ -0,0 +1,46 @@
+import { updateConfig, getConfigFiles } from '$api/serverService';
+import type { Actions } from './$types';
+import { checkAuth } from '$api/authService';
+import { getTracks } from '$api/lookupService';
+import { redirect } from '@sveltejs/kit';
+
+export const load = async ({ params }) => {
+	const isAuth = await checkAuth();
+	if (!isAuth) return redirect(308, '/login');
+	const config = await getConfigFiles(params.id);
+	const tracks = await getTracks();
+	return {
+		id: params.id,
+		config,
+		tracks
+	};
+};
+
+export const actions = {
+	event: async ({ request }) => {
+		const formData = await request.formData();
+		const id = formData.get('id') as string;
+		const object: any = {};
+		formData.forEach((value, key) => {
+			switch (key) {
+				case 'id':
+					return;
+				case 'sessions':
+					object[key] = tryParse(value as string);
+					break;
+				default:
+					object[key] = !Number.isNaN(+value) ? +value : value;
+			}
+		});
+		await updateConfig(id, 'event.json', object, false, true);
+		redirect(303, '/dashboard');
+	}
+} satisfies Actions;
+
+function tryParse(str: string) {
+	try {
+		return JSON.parse(str);
+	} catch {
+		return str;
+	}
+}

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import ConfigEditor from '$components/ConfigEditor.svelte';
+
+	let { data } = $props();
+	const config = data.config;
+	const tracks = data.tracks;
+	const id = data.id;
+</script>
+
+<h1>Edit</h1>
+<ConfigEditor {config} {tracks} {id} />

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

@@ -0,0 +1,18 @@
+import { checkAuth, login } from '$api/authService';
+import { authStore } from '$stores/authStore';
+import type { Actions } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const actions = {
+	login: async ({ request }) => {
+		const formData = await request.formData();
+		const username = formData.get('username') as string;
+		const password = formData.get('password') as string;
+		if (!username || !password) {
+			authStore.set({ error: 'Invalid username or password' });
+			return;
+		}
+		const isAuth = await login(username, password);
+		if (isAuth) redirect(303, '/dashboard');
+	}
+} satisfies Actions;

src/routes/login/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { authStore } from '$stores/authStore';
+	import { get } from 'svelte/store';
+
+	let username = '';
+	let password = '';
+	let { error } = get(authStore);
+</script>
+
+<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+	<div class="sm:mx-auto sm:w-full sm:max-w-sm">
+		<h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">
+			Sign in to your account
+		</h2>
+	</div>
+	{#if error}
+		<div class="sm:mx-auto sm:w-full sm:max-w-sm">
+			<p class="error">{error}</p>
+		</div>
+	{/if}
+
+	<form method="POST" action="?/login">
+		<div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+			<div class="space-y-6">
+				<div>
+					<label for="text" class="block text-sm/6 font-medium text-gray-900">Username</label>
+					<div class="mt-2">
+						<input
+							type="text"
+							name="username"
+							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"
+							bind:value={username}
+						/>
+					</div>
+				</div>
+
+				<div>
+					<div class="flex items-center justify-between">
+						<label for="password" class="block text-sm/6 font-medium text-gray-900">Password</label>
+					</div>
+					<div class="mt-2">
+						<input
+							type="password"
+							name="password"
+							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"
+							bind:value={password}
+						/>
+					</div>
+				</div>
+
+				<div>
+					<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>
+	</form>
+</div>
+
+<style>
+	.error {
+		color: red;
+	}
+</style>

src/stores/authStore.ts

@@ -0,0 +1,13 @@
+import { writable } from 'svelte/store';
+
+export const authStore = writable<{
+	username?: string;
+	password?: string;
+	token?: string;
+	error?: string;
+}>({
+	username: undefined,
+	password: undefined,
+	token: undefined,
+	error: undefined
+});

svelte.config.js

@@ -0,0 +1,25 @@
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://svelte.dev/docs/kit/integrations
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
+		adapter: adapter(),
+		alias: {
+			'$components/*': './src/components/*',
+			'$lib/*': './src/lib/*',
+			'$routes/*': './src/routes/*',
+			'$stores/*': './src/stores/*',
+			'$api/*': './src/api/*'
+		}
+	}
+};
+
+export default config;

tailwind.config.ts

@@ -0,0 +1,12 @@
+import forms from '@tailwindcss/forms';
+import type { Config } from 'tailwindcss';
+
+export default {
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+
+	theme: {
+		extend: {}
+	},
+
+	plugins: [forms]
+} satisfies Config;

tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler",
+	}
+	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import tailwindcss from '@tailwindcss/vite';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit(), tailwindcss()]
+});