busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: integrate SvelteKit for seamless navigation and improved data loading

Browse Source
This commit is contained in:
busya
2025-12-20 22:41:23 +03:00
parent 58831c536a
commit 9b7b743319
106 changed files with 16217 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/pages/Dashboard.svelte
View File

@@ -1,5 +1,5 @@
<!-- [DEF:Dashboard:Component] -->
<!--
[DEF:Dashboard:Component]
@SEMANTICS: dashboard, plugins, tools, list
@PURPOSE: Displays the list of available plugins and allows selecting one.
@LAYER: UI
@@ -9,11 +9,15 @@
@EVENTS: None
-->
<script>
// [SECTION: IMPORTS]
import { onMount } from 'svelte';
import { plugins, fetchPlugins, selectedPlugin } from '../lib/stores.js';
// [/SECTION]
// [DEF:onMount:Function]
// @PURPOSE: Fetch plugins when the component mounts.
/**
* @purpose Fetch plugins when the component mounts.
*/
onMount(async () => {
console.log("[Dashboard][Entry] Component mounted, fetching plugins.");
await fetchPlugins();
@@ -21,8 +25,10 @@
// [/DEF:onMount]
// [DEF:selectPlugin:Function]
// @PURPOSE: Selects a plugin to display its form.
// @PARAM: plugin (Object) - The plugin object to select.
/**
* @purpose Selects a plugin to display its form.
* @param {Object} plugin - The plugin object to select.
*/
function selectPlugin(plugin) {
console.log(`[Dashboard][Action] Selecting plugin: ${plugin.id}`);
selectedPlugin.set(plugin);
@@ -30,6 +36,7 @@
// [/DEF:selectPlugin]
</script>
<!-- [SECTION: TEMPLATE] -->
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">Available Tools</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@@ -37,6 +44,9 @@
<div
class="border rounded-lg p-4 cursor-pointer hover:bg-gray-100"
on:click={() => selectPlugin(plugin)}
role="button"
tabindex="0"
on:keydown={(e) => e.key === 'Enter' && selectPlugin(plugin)}
>
<h2 class="text-xl font-semibold">{plugin.name}</h2>
<p class="text-gray-600">{plugin.description}</p>
@@ -45,4 +55,6 @@
{/each}
</div>
</div>
<!-- [/DEF:Dashboard] -->
<!-- [/SECTION] -->
<!-- [/DEF:Dashboard] -->

67
frontend/src/pages/Settings.svelte
View File

@@ -1,21 +1,21 @@
<!-- [DEF:Settings:Component] -->
<!--
[DEF:Settings:Component]
@SEMANTICS: settings, ui, configuration
@PURPOSE: The main settings page for the application, allowing management of environments and global settings.
@LAYER: UI
@RELATION: CALLS -> api.js
@RELATION: USES -> stores.js
@PROPS:
None
@EVENTS:
None
@PROPS: None
@EVENTS: None
@INVARIANT: Settings changes must be saved to the backend.
-->
<script>
// [SECTION: IMPORTS]
import { onMount } from 'svelte';
import { getSettings, updateGlobalSettings, getEnvironments, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection } from '../lib/api';
import { addToast } from '../lib/toasts';
// [/SECTION]
let settings = {
environments: [],
@@ -36,26 +36,47 @@ None
let editingEnvId = null;
// [DEF:loadSettings:Function]
/**
* @purpose Loads settings from the backend.
*/
async function loadSettings() {
try {
console.log("[Settings.loadSettings][Action] Loading settings.");
const data = await getSettings();
settings = data;
console.log("[Settings.loadSettings][Coherence:OK] Settings loaded.");
} catch (error) {
console.error("[Settings.loadSettings][Coherence:Failed] Failed to load settings:", error);
addToast('Failed to load settings', 'error');
}
}
// [/DEF:loadSettings]
// [DEF:handleSaveGlobal:Function]
/**
* @purpose Saves global settings to the backend.
*/
async function handleSaveGlobal() {
try {
console.log("[Settings.handleSaveGlobal][Action] Saving global settings.");
await updateGlobalSettings(settings.settings);
addToast('Global settings saved', 'success');
console.log("[Settings.handleSaveGlobal][Coherence:OK] Global settings saved.");
} catch (error) {
console.error("[Settings.handleSaveGlobal][Coherence:Failed] Failed to save global settings:", error);
addToast('Failed to save global settings', 'error');
}
}
// [/DEF:handleSaveGlobal]
// [DEF:handleAddOrUpdateEnv:Function]
/**
* @purpose Adds or updates an environment.
*/
async function handleAddOrUpdateEnv() {
try {
console.log(`[Settings.handleAddOrUpdateEnv][Action] ${editingEnvId ? 'Updating' : 'Adding'} environment.`);
if (editingEnvId) {
await updateEnvironment(editingEnvId, newEnv);
addToast('Environment updated', 'success');
@@ -65,41 +86,73 @@ None
}
resetEnvForm();
await loadSettings();
console.log("[Settings.handleAddOrUpdateEnv][Coherence:OK] Environment saved.");
} catch (error) {
console.error("[Settings.handleAddOrUpdateEnv][Coherence:Failed] Failed to save environment:", error);
addToast('Failed to save environment', 'error');
}
}
// [/DEF:handleAddOrUpdateEnv]
// [DEF:handleDeleteEnv:Function]
/**
* @purpose Deletes an environment.
* @param {string} id - The ID of the environment to delete.
*/
async function handleDeleteEnv(id) {
if (confirm('Are you sure you want to delete this environment?')) {
try {
console.log(`[Settings.handleDeleteEnv][Action] Deleting environment: ${id}`);
await deleteEnvironment(id);
addToast('Environment deleted', 'success');
await loadSettings();
console.log("[Settings.handleDeleteEnv][Coherence:OK] Environment deleted.");
} catch (error) {
console.error("[Settings.handleDeleteEnv][Coherence:Failed] Failed to delete environment:", error);
addToast('Failed to delete environment', 'error');
}
}
}
// [/DEF:handleDeleteEnv]
// [DEF:handleTestEnv:Function]
/**
* @purpose Tests the connection to an environment.
* @param {string} id - The ID of the environment to test.
*/
async function handleTestEnv(id) {
try {
console.log(`[Settings.handleTestEnv][Action] Testing environment: ${id}`);
const result = await testEnvironmentConnection(id);
if (result.status === 'success') {
addToast('Connection successful', 'success');
console.log("[Settings.handleTestEnv][Coherence:OK] Connection successful.");
} else {
addToast(`Connection failed: ${result.message}`, 'error');
console.log("[Settings.handleTestEnv][Coherence:Failed] Connection failed.");
}
} catch (error) {
console.error("[Settings.handleTestEnv][Coherence:Failed] Error testing connection:", error);
addToast('Failed to test connection', 'error');
}
}
// [/DEF:handleTestEnv]
// [DEF:editEnv:Function]
/**
* @purpose Sets the form to edit an existing environment.
* @param {Object} env - The environment object to edit.
*/
function editEnv(env) {
newEnv = { ...env };
editingEnvId = env.id;
}
// [/DEF:editEnv]
// [DEF:resetEnvForm:Function]
/**
* @purpose Resets the environment form.
*/
function resetEnvForm() {
newEnv = {
id: '',
@@ -111,10 +164,12 @@ None
};
editingEnvId = null;
}
// [/DEF:resetEnvForm]
onMount(loadSettings);
</script>
<!-- [SECTION: TEMPLATE] -->
<div class="container mx-auto p-4">
<h1 class="text-2xl font-bold mb-6">Settings</h1>
@@ -211,4 +266,6 @@ None
</div>
</section>
</div>
<!-- [/SECTION] -->
<!-- [/DEF:Settings] -->