some improvements

This commit is contained in:
Fran Jurmanović
2025-06-25 22:38:01 +02:00
parent 77a41bf4ef
commit 47a72c82f4
7 changed files with 128 additions and 80 deletions

25
package-lock.json generated
View File

@@ -19,9 +19,7 @@
"@eslint/compat": "^1.2.5", "@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0", "@eslint/js": "^9.18.0",
"@ethercorps/sveltekit-redis-session": "^1.3.1", "@ethercorps/sveltekit-redis-session": "^1.3.1",
"@sveltejs/adapter-auto": "^4.0.0",
"@sveltejs/adapter-node": "^5.2.12", "@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/kit": "^2.16.0", "@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0", "@sveltejs/vite-plugin-svelte": "^5.0.0",
"@tailwindcss/postcss": "^4.0.4", "@tailwindcss/postcss": "^4.0.4",
@@ -1319,19 +1317,6 @@
"win32" "win32"
] ]
}, },
"node_modules/@sveltejs/adapter-auto": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-4.0.0.tgz",
"integrity": "sha512-kmuYSQdD2AwThymQF0haQhM8rE5rhutQXG4LNbnbShwhMO4qQGnKaaTy+88DuNSuoQDi58+thpq8XpHc1+oEKQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"import-meta-resolve": "^4.1.0"
},
"peerDependencies": {
"@sveltejs/kit": "^2.0.0"
}
},
"node_modules/@sveltejs/adapter-node": { "node_modules/@sveltejs/adapter-node": {
"version": "5.2.12", "version": "5.2.12",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.12.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.12.tgz",
@@ -1348,16 +1333,6 @@
"@sveltejs/kit": "^2.4.0" "@sveltejs/kit": "^2.4.0"
} }
}, },
"node_modules/@sveltejs/adapter-static": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.8.tgz",
"integrity": "sha512-YaDrquRpZwfcXbnlDsSrBQNCChVOT9MGuSg+dMAyfsAa1SmiAhrA5jUYUiIMC59G92kIbY/AaQOWcBdq+lh+zg==",
"dev": true,
"license": "MIT",
"peerDependencies": {
"@sveltejs/kit": "^2.0.0"
}
},
"node_modules/@sveltejs/kit": { "node_modules/@sveltejs/kit": {
"version": "2.17.1", "version": "2.17.1",
"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.17.1.tgz", "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.17.1.tgz",

View File

@@ -17,9 +17,7 @@
"@eslint/compat": "^1.2.5", "@eslint/compat": "^1.2.5",
"@eslint/js": "^9.18.0", "@eslint/js": "^9.18.0",
"@ethercorps/sveltekit-redis-session": "^1.3.1", "@ethercorps/sveltekit-redis-session": "^1.3.1",
"@sveltejs/adapter-auto": "^4.0.0",
"@sveltejs/adapter-node": "^5.2.12", "@sveltejs/adapter-node": "^5.2.12",
"@sveltejs/adapter-static": "^3.0.8",
"@sveltejs/kit": "^2.16.0", "@sveltejs/kit": "^2.16.0",
"@sveltejs/vite-plugin-svelte": "^5.0.0", "@sveltejs/vite-plugin-svelte": "^5.0.0",
"@tailwindcss/postcss": "^4.0.4", "@tailwindcss/postcss": "^4.0.4",

View File

@@ -0,0 +1,33 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
let { message = '', type = 'success', duration = 5000 } = $props();
let visible = $state(true);
let timer: number;
onMount(() => {
timer = window.setTimeout(() => {
visible = false;
}, duration);
});
onDestroy(() => {
clearTimeout(timer);
});
const baseClasses =
'fixed bottom-5 right-5 p-4 rounded-lg shadow-lg text-white transition-all duration-500 ease-in-out transform';
const typeClasses = {
success: 'bg-green-600',
error: 'bg-red-600'
};
const visibilityClasses = visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-5';
</script>
{#if visible}
<div class="{baseClasses} {typeClasses[type]} {visibilityClasses}" role="alert">
<p>{message}</p>
</div>
{/if}

View File

@@ -1,7 +1,6 @@
import { logout } from '$api/authService';
import { checkAuth } from '$api/authService'; import { checkAuth } from '$api/authService';
import { getServers, restartService, startService, stopService } from '$api/serverService'; import { getServers, restartService, startService, stopService } from '$api/serverService';
import { redirect, type Actions, type RequestEvent } from '@sveltejs/kit'; import { fail, redirect, type Actions, type RequestEvent } from '@sveltejs/kit';
export const load = async (event: RequestEvent) => { export const load = async (event: RequestEvent) => {
const isAuth = await checkAuth(event); const isAuth = await checkAuth(event);
@@ -10,17 +9,45 @@ export const load = async (event: RequestEvent) => {
return { servers }; return { servers };
}; };
export const actions = { // Helper function to create a server action with validation and error handling
start: async (event: RequestEvent) => { const createServerAction = (
const id = (await event.request.formData()).get('id') as string; action: (event: RequestEvent, id: number) => Promise<void>,
await startService(event, +id); { success, failure }: { success: string; failure: string }
}, ) => {
restart: async (event: RequestEvent) => { return async (event: RequestEvent) => {
const id = (await event.request.formData()).get('id') as string; const formData = await event.request.formData();
await restartService(event, +id); const id = formData.get('id');
},
stop: async (event: RequestEvent) => { if (!id || typeof id !== 'string') {
const id = (await event.request.formData()).get('id') as string; return fail(400, { message: 'Invalid server ID provided.' });
await stopService(event, +id);
} }
const serverId = Number(id);
if (isNaN(serverId)) {
return fail(400, { message: 'Server ID must be a number.' });
}
try {
await action(event, serverId);
return { success: true, message: success };
} catch (err) {
const message = err instanceof Error ? err.message : 'Unknown error';
return fail(500, { message: `${failure}: ${message}` });
}
};
};
export const actions = {
start: createServerAction(startService, {
success: 'Server started successfully.',
failure: 'Failed to start server'
}),
restart: createServerAction(restartService, {
success: 'Server restarted successfully.',
failure: 'Failed to restart server'
}),
stop: createServerAction(stopService, {
success: 'Server stopped successfully.',
failure: 'Failed to stop server'
})
} satisfies Actions; } satisfies Actions;

View File

@@ -1,11 +1,16 @@
<script lang="ts"> <script lang="ts">
import ServerCard from '$components/ServerCard.svelte'; import ServerCard from '$components/ServerCard.svelte';
import Toast from '$components/Toast.svelte';
import type { Server } from '$models/server'; import type { Server } from '$models/server';
const { data } = $props(); const { data, form } = $props();
let servers: Server[] = data.servers; let servers: Server[] = data.servers;
</script> </script>
{#if form?.message}
<Toast message={form.message} type={form.success ? 'success' : 'error'} />
{/if}
<div class="min-h-screen bg-gray-900 text-white"> <div class="min-h-screen bg-gray-900 text-white">
<header class="bg-gray-800 shadow-md"> <header class="bg-gray-800 shadow-md">
<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8"> <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">

View File

@@ -2,15 +2,14 @@ import {
updateConfig, updateConfig,
getConfigFiles, getConfigFiles,
getServerById, getServerById,
getStateHistory,
getStateHistoryStats getStateHistoryStats
} from '$api/serverService'; } from '$api/serverService';
import type { Actions } from './$types'; import type { Actions } from './$types';
import { checkAuth } from '$api/authService'; import { checkAuth } from '$api/authService';
import { getTracks } from '$api/lookupService'; import { getTracks } from '$api/lookupService';
import { redirect } from '@sveltejs/kit'; import { fail, redirect } from '@sveltejs/kit';
import type { RequestEvent } from '@sveltejs/kit'; import type { RequestEvent } from '@sveltejs/kit';
import { configFile, type Config, type Session } from '$models/config'; import { configFile, type Config } from '$models/config';
import { set } from 'lodash-es'; import { set } from 'lodash-es';
import { subDays, formatISO } from 'date-fns'; import { subDays, formatISO } from 'date-fns';
import { UTCDate } from '@date-fns/utc'; import { UTCDate } from '@date-fns/utc';
@@ -38,20 +37,16 @@ export const load = async (event: RequestEvent) => {
}; };
}; };
type SessionField =
| 'sessionDurationMinutes'
| 'sessionType'
| 'timeMultiplier'
| 'dayOfWeekend'
| 'hourOfDay';
export const actions = { export const actions = {
update: async (event: RequestEvent) => { update: async (event: RequestEvent) => {
try {
const { id, restart, file, data } = await destructureFormData(event); const { id, restart, file, data } = await destructureFormData(event);
const sessions: Array<Record<SessionField, string | number>> = [];
await updateConfig(event, id, file, data, true, restart); await updateConfig(event, id, file, data, true, restart);
return { success: true, message: `Configuration file '${file}' updated successfully.` };
} catch (err) {
const message = err instanceof Error ? err.message : 'An unknown error occurred';
return fail(500, { message: `Failed to update configuration: ${message}` });
}
} }
} satisfies Actions; } satisfies Actions;
@@ -59,36 +54,46 @@ async function destructureFormData(
event: RequestEvent event: RequestEvent
): Promise<{ id: string; restart: boolean; data: Config; file: configFile }> { ): Promise<{ id: string; restart: boolean; data: Config; file: configFile }> {
const formData = await event.request.formData(); const formData = await event.request.formData();
const id = formData.get('id') as string;
const restart = formData.get('restart'); const id = formData.get('id');
const file = formData.get('file') as configFile; if (!id || typeof id !== 'string') {
const object: any = {}; throw new Error('Server ID is missing or invalid.');
formData.forEach((value, key) => {
switch (key) {
case 'id':
case 'restart':
case 'file':
return;
default:
set(object, key, parseFormField(value));
} }
const file = formData.get('file');
if (!file || typeof file !== 'string') {
throw new Error('Config file name is missing or invalid.');
}
const restart = formData.get('restart');
const object: Record<string, unknown> = {};
formData.forEach((value, key) => {
// Exclude metadata fields from the dynamic object
if (key === 'id' || key === 'restart' || key === 'file') {
return;
}
set(object, key, parseFormField(value));
}); });
return { return {
id, id,
restart: restart == 'on' || restart == 'true', restart: restart === 'on' || restart === 'true',
data: object, data: object as unknown as Config,
file file: file as configFile
}; };
} }
/**
* Parses a form field value. If the value can be cleanly converted to a number,
* it returns a number; otherwise, it returns the original string.
*/
function parseFormField(value: FormDataEntryValue): string | number { function parseFormField(value: FormDataEntryValue): string | number {
return value !== '' && !Number.isNaN(+value) ? +value : (value as string); // Avoid converting empty strings to 0
} if (value === '' || typeof value !== 'string') {
return value as string;
function tryParse(str: string) {
try {
return JSON.parse(str);
} catch {
return str;
} }
// Check if string is a valid number without being too aggressive
const num = Number(value);
return !Number.isNaN(num) && value.trim() !== '' ? num : value;
} }

View File

@@ -5,10 +5,11 @@
import EditorEventRules from '$components/EditorEventRules.svelte'; import EditorEventRules from '$components/EditorEventRules.svelte';
import EditorSettings from '$components/EditorSettings.svelte'; import EditorSettings from '$components/EditorSettings.svelte';
import Statistics from '$components/Statistics.svelte'; import Statistics from '$components/Statistics.svelte';
import Toast from '$components/Toast.svelte';
import { getStatusColor, serviceStatusToString } from '$lib/types/serviceStatus.js'; import { getStatusColor, serviceStatusToString } from '$lib/types/serviceStatus.js';
import { serverTab } from '$models/config.js'; import { serverTab } from '$models/config.js';
let { data } = $props(); let { data, form } = $props();
const configs = data.configs; const configs = data.configs;
const tracks = data.tracks; const tracks = data.tracks;
const id = data.id; const id = data.id;
@@ -17,6 +18,10 @@
let tab = $state(serverTab.statistics); let tab = $state(serverTab.statistics);
</script> </script>
{#if form?.message}
<Toast message={form.message} type={form.success ? 'success' : 'error'} />
{/if}
<svelte:head> <svelte:head>
<title>{server.name}</title> <title>{server.name}</title>
</svelte:head> </svelte:head>
@@ -30,7 +35,7 @@
<h2 class="truncate text-lg font-semibold">{server.name}</h2> <h2 class="truncate text-lg font-semibold">{server.name}</h2>
</a> </a>
<div class="mt-1 flex items-center"> <div class="mt-1 flex items-center">
<span class={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`} /> <span class={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}></span>
<span class="text-sm capitalize">{serviceStatusToString(server.status)}</span> <span class="text-sm capitalize">{serviceStatusToString(server.status)}</span>
</div> </div>
</div> </div>