342 lines
16 KiB
Svelte
Executable File
342 lines
16 KiB
Svelte
Executable File
<!-- [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
|
|
@INVARIANT: Settings changes must be saved to the backend.
|
|
-->
|
|
<script>
|
|
// [SECTION: IMPORTS]
|
|
import { onMount } from 'svelte';
|
|
import { getSettings, updateGlobalSettings, getEnvironments, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection, updateEnvironmentSchedule } from '../lib/api';
|
|
import { addToast } from '../lib/toasts';
|
|
import { t } from '../lib/i18n';
|
|
// [/SECTION]
|
|
|
|
let settings = {
|
|
environments: [],
|
|
settings: {
|
|
default_environment_id: null,
|
|
logging: {
|
|
level: 'INFO',
|
|
file_path: 'logs/app.log',
|
|
max_bytes: 10485760,
|
|
backup_count: 5,
|
|
enable_belief_state: true
|
|
}
|
|
}
|
|
};
|
|
|
|
let newEnv = {
|
|
id: '',
|
|
name: '',
|
|
url: '',
|
|
username: '',
|
|
password: '',
|
|
is_default: false,
|
|
backup_schedule: {
|
|
enabled: false,
|
|
cron_expression: '0 0 * * *'
|
|
}
|
|
};
|
|
|
|
let editingEnvId = null;
|
|
|
|
// [DEF:loadSettings:Function]
|
|
/**
|
|
* @purpose Loads settings from the backend.
|
|
* @pre Component mounted or refresh requested.
|
|
* @post settings object is populated with backend data.
|
|
*/
|
|
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($t.settings?.load_failed, 'error');
|
|
}
|
|
}
|
|
// [/DEF:loadSettings:Function]
|
|
|
|
// [DEF:handleSaveGlobal:Function]
|
|
/**
|
|
* @purpose Saves global settings to the backend.
|
|
* @pre settings.settings contains valid configuration.
|
|
* @post Backend global settings are updated.
|
|
*/
|
|
async function handleSaveGlobal() {
|
|
try {
|
|
console.log("[Settings.handleSaveGlobal][Action] Saving global settings.");
|
|
await updateGlobalSettings(settings.settings);
|
|
addToast($t.settings?.save_success, '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($t.settings?.save_failed, 'error');
|
|
}
|
|
}
|
|
// [/DEF:handleSaveGlobal:Function]
|
|
|
|
// [DEF:handleAddOrUpdateEnv:Function]
|
|
/**
|
|
* @purpose Adds or updates an environment.
|
|
* @pre newEnv contains valid environment details.
|
|
* @post Environment list is updated on backend and reloaded locally.
|
|
*/
|
|
async function handleAddOrUpdateEnv() {
|
|
try {
|
|
console.log(`[Settings.handleAddOrUpdateEnv][Action] ${editingEnvId ? 'Updating' : 'Adding'} environment.`);
|
|
if (editingEnvId) {
|
|
await updateEnvironment(editingEnvId, newEnv);
|
|
addToast($t.settings?.env_updated, 'success');
|
|
} else {
|
|
await addEnvironment(newEnv);
|
|
addToast($t.settings?.env_added, 'success');
|
|
}
|
|
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($t.settings?.env_save_failed, 'error');
|
|
}
|
|
}
|
|
// [/DEF:handleAddOrUpdateEnv:Function]
|
|
|
|
// [DEF:handleDeleteEnv:Function]
|
|
/**
|
|
* @purpose Deletes an environment.
|
|
* @pre id of environment to delete is provided.
|
|
* @post Environment is removed from backend and list is reloaded.
|
|
* @param {string} id - The ID of the environment to delete.
|
|
*/
|
|
async function handleDeleteEnv(id) {
|
|
if (confirm($t.settings?.env_delete_confirm)) {
|
|
try {
|
|
console.log(`[Settings.handleDeleteEnv][Action] Deleting environment: ${id}`);
|
|
await deleteEnvironment(id);
|
|
addToast($t.settings?.env_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($t.settings?.env_delete_failed, 'error');
|
|
}
|
|
}
|
|
}
|
|
// [/DEF:handleDeleteEnv:Function]
|
|
|
|
// [DEF:handleTestEnv:Function]
|
|
/**
|
|
* @purpose Tests the connection to an environment.
|
|
* @pre Environment ID is valid.
|
|
* @post Connection test result is displayed via toast.
|
|
* @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($t.settings?.connection_success, 'success');
|
|
console.log("[Settings.handleTestEnv][Coherence:OK] Connection successful.");
|
|
} else {
|
|
addToast($t.settings?.connection_failed?.replace('{error}', result.message || ''), 'error');
|
|
console.log("[Settings.handleTestEnv][Coherence:Failed] Connection failed.");
|
|
}
|
|
} catch (error) {
|
|
console.error("[Settings.handleTestEnv][Coherence:Failed] Error testing connection:", error);
|
|
addToast($t.settings?.connection_test_failed, 'error');
|
|
}
|
|
}
|
|
// [/DEF:handleTestEnv:Function]
|
|
|
|
// [DEF:editEnv:Function]
|
|
/**
|
|
* @purpose Sets the form to edit an existing environment.
|
|
* @pre env object is provided.
|
|
* @post newEnv is populated with env data and editingEnvId is set.
|
|
* @param {Object} env - The environment object to edit.
|
|
*/
|
|
function editEnv(env) {
|
|
newEnv = { ...env };
|
|
editingEnvId = env.id;
|
|
}
|
|
// [/DEF:editEnv:Function]
|
|
|
|
// [DEF:resetEnvForm:Function]
|
|
/**
|
|
* @purpose Resets the environment form.
|
|
* @pre None.
|
|
* @post newEnv is reset to initial state and editingEnvId is cleared.
|
|
*/
|
|
function resetEnvForm() {
|
|
newEnv = {
|
|
id: '',
|
|
name: '',
|
|
url: '',
|
|
username: '',
|
|
password: '',
|
|
is_default: false,
|
|
backup_schedule: {
|
|
enabled: false,
|
|
cron_expression: '0 0 * * *'
|
|
}
|
|
};
|
|
editingEnvId = null;
|
|
}
|
|
// [/DEF:resetEnvForm:Function]
|
|
|
|
onMount(loadSettings);
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="container mx-auto p-4">
|
|
<h1 class="text-2xl font-bold mb-6">{$t.settings?.title}</h1>
|
|
|
|
<section class="mb-8 bg-white p-6 rounded shadow">
|
|
<h2 class="text-xl font-semibold mb-4">{$t.settings?.global_title}</h2>
|
|
|
|
<h3 class="text-lg font-medium mb-4 mt-6">{$t.settings?.logging}</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="log_level" class="block text-sm font-medium text-gray-700">{$t.settings?.log_level}</label>
|
|
<select id="log_level" bind:value={settings.settings.logging.level} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2">
|
|
<option value="DEBUG">DEBUG</option>
|
|
<option value="INFO">INFO</option>
|
|
<option value="WARNING">WARNING</option>
|
|
<option value="ERROR">ERROR</option>
|
|
<option value="CRITICAL">CRITICAL</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="log_file_path" class="block text-sm font-medium text-gray-700">{$t.settings?.log_file_path}</label>
|
|
<input type="text" id="log_file_path" bind:value={settings.settings.logging.file_path} placeholder={$t.settings?.log_file_path_placeholder} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
</div>
|
|
<div>
|
|
<label for="log_max_bytes" class="block text-sm font-medium text-gray-700">{$t.settings?.max_file_size_mb}</label>
|
|
<input type="number" id="log_max_bytes" bind:value={settings.settings.logging.max_bytes} min="1" step="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
</div>
|
|
<div>
|
|
<label for="log_backup_count" class="block text-sm font-medium text-gray-700">{$t.settings?.backup_count}</label>
|
|
<input type="number" id="log_backup_count" bind:value={settings.settings.logging.backup_count} min="1" step="1" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
</div>
|
|
<div class="md:col-span-2">
|
|
<label class="flex items-center">
|
|
<input type="checkbox" id="enable_belief_state" bind:checked={settings.settings.logging.enable_belief_state} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
|
|
<span class="ml-2 block text-sm text-gray-900">{$t.settings?.enable_belief_state}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<button on:click={handleSaveGlobal} class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-max mt-4">
|
|
{$t.settings?.save_global_settings}
|
|
</button>
|
|
</section>
|
|
|
|
<section class="mb-8 bg-white p-6 rounded shadow">
|
|
<h2 class="text-xl font-semibold mb-4">{$t.settings?.env_title}</h2>
|
|
|
|
{#if settings.environments.length === 0}
|
|
<div class="mb-4 p-4 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700">
|
|
<p class="font-bold">{$t.settings?.warning}</p>
|
|
<p>{$t.settings?.env_warning}</p>
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="mb-6 overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.name}</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.env_url}</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.username}</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.default}</th>
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.settings?.env_actions}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
{#each settings.environments as env}
|
|
<tr>
|
|
<td class="px-6 py-4 whitespace-nowrap">{env.name}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">{env.url}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">{env.username}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">{env.is_default ? $t.common?.yes : $t.common?.no}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<button on:click={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">{$t.settings?.env_test}</button>
|
|
<button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">{$t.common?.edit}</button>
|
|
<button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">{$t.common?.delete}</button>
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="bg-gray-50 p-4 rounded">
|
|
<h3 class="text-lg font-medium mb-4">{editingEnvId ? $t.settings?.env_edit : $t.settings?.env_add}</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label for="env_id" class="block text-sm font-medium text-gray-700">{$t.common?.id}</label>
|
|
<input type="text" id="env_id" bind:value={newEnv.id} disabled={!!editingEnvId} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
</div>
|
|
<div>
|
|
<label for="env_name" class="block text-sm font-medium text-gray-700">{$t.settings?.name}</label>
|
|
<input type="text" id="env_name" bind:value={newEnv.name} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
</div>
|
|
<div>
|
|
<label for="env_url" class="block text-sm font-medium text-gray-700">{$t.settings?.env_url}</label>
|
|
<input type="text" id="env_url" bind:value={newEnv.url} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
</div>
|
|
<div>
|
|
<label for="env_user" class="block text-sm font-medium text-gray-700">{$t.settings?.username}</label>
|
|
<input type="text" id="env_user" bind:value={newEnv.username} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
</div>
|
|
<div>
|
|
<label for="env_pass" class="block text-sm font-medium text-gray-700">{$t.settings?.password}</label>
|
|
<input type="password" id="env_pass" bind:value={newEnv.password} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
</div>
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
|
|
<label for="env_default" class="ml-2 block text-sm text-gray-900">{$t.settings?.env_default}</label>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 class="text-lg font-medium mb-4 mt-6">{$t.settings?.backup_schedule}</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="backup_enabled" bind:checked={newEnv.backup_schedule.enabled} class="h-4 w-4 text-blue-600 border-gray-300 rounded" />
|
|
<label for="backup_enabled" class="ml-2 block text-sm text-gray-900">{$t.settings?.enable_auto_backups}</label>
|
|
</div>
|
|
<div>
|
|
<label for="cron_expression" class="block text-sm font-medium text-gray-700">{$t.settings?.cron_expression}</label>
|
|
<input type="text" id="cron_expression" bind:value={newEnv.backup_schedule.cron_expression} placeholder={$t.settings?.cron_placeholder} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
|
<p class="text-xs text-gray-500 mt-1">{$t.settings?.cron_example}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex gap-2">
|
|
<button on:click={handleAddOrUpdateEnv} class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
|
|
{editingEnvId ? $t.settings?.env_update : $t.settings?.env_add}
|
|
</button>
|
|
{#if editingEnvId}
|
|
<button on:click={resetEnvForm} class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
|
|
{$t.common?.cancel}
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<!-- [/SECTION] -->
|
|
|
|
<!-- [/DEF:Settings:Component] -->
|