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

add types and fix loading

Browse Source
This commit is contained in:
Fran Jurmanović
2025-02-12 00:48:43 +01:00
parent e9487ba38f
commit d29165261c
22 changed files with 410 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/apiService.ts
View File

@@ -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

7
src/api/authService.ts
View File

@@ -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;

12
src/api/lookupService.ts
View File

@@ -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');
};

72
src/api/serverService.ts
View File

@@ -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,
newConfig?: object,
file: ConfigFile,
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}`);
};

5
src/app.css
View File

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

105
src/components/ConfigEditor.svelte
View File

@@ -1,10 +1,21 @@
<script>
let { config, tracks, id } = $props();
let editedConfig = { ...config['event'] };
editedConfig.sessions = JSON.stringify(editedConfig.sessions);
<script lang="ts">
import { enhance } from '$app/forms';
import type { EventConfig } from '$models/config';
import type { Track } from '$models/lookups';
const { config, tracks, id }: { config: EventConfig; tracks: Track[]; id: string } = $props();
const editedConfig = $state({ ...config });
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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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
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"
>
<div class="input-block">
<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"
bind:value={editedConfig.sessions}
class="form form-textarea"
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
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
>
<button disabled={formLoading} type="submit" class="btn btn-blue">Save</button>
</div>
</div>
</form>

12
src/components/ServerCard.svelte
View File

@@ -1,5 +1,7 @@
<script>
let { server } = $props();
<script lang="ts">
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

30
src/components/Sidebar.svelte
View File

@@ -1,5 +1,4 @@
<script>
import { goto } from '$app/navigation';
<script lang="ts">
</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">
<button
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>
</button>
</form>
<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>

101
src/models/config.ts Normal file
View File

@@ -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;
}

25
src/models/lookups.ts Normal file
View File

@@ -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;
}

5
src/models/server.ts Normal file
View File

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

13
src/routes/+page.server.ts
View File

@@ -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;

14
src/routes/dashboard/+page.server.ts
View File

@@ -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;

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

@@ -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;
const refresh = async () => {
invalidateAll();
};
let servers: Server[] = data.servers;
</script>
<h1>Dashboard</h1>
<div class="server-grid">
{#each servers as server}
<ServerCard {refresh} {server} />
<ServerCard {server} />
{/each}
</div>

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

@@ -1,13 +1,16 @@
import { updateConfig, getConfigFiles } from '$api/serverService';
import type { Actions, RequestEvent } from './$types';
import { updateConfig, getConfigFiles, getEventFile } from '$api/serverService';
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;

5
src/routes/login/+page.server.ts
View File

@@ -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;

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

@@ -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 password = '';
let username = $state('');
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
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
>
<button type="submit" class="btn btn-login" disabled={formLoading}>Sign in</button>
</div>
</div>
</div>

8
src/routes/logout/+page.server.ts Normal file
View File

@@ -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');
};

15
src/styles/button.css Normal file
View File

@@ -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;
}

27
src/styles/inputs.css Normal file
View File

@@ -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;
}

43
src/styles/loader.css Normal file
View File

@@ -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;
}
}

4
svelte.config.js
View File

@@ -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/*'
}
}
};