Мультиязночность + причесывание css
This commit is contained in:
@@ -2,6 +2,8 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { updateGlobalSettings, addEnvironment, updateEnvironment, deleteEnvironment, testEnvironmentConnection } from '../../lib/api';
|
||||
import { addToast } from '../../lib/toasts';
|
||||
import { t } from '$lib/i18n';
|
||||
import { Button, Input, Card, PageHeader } from '$lib/ui';
|
||||
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data;
|
||||
@@ -142,7 +144,7 @@
|
||||
</script>
|
||||
|
||||
<div class="container mx-auto p-4">
|
||||
<h1 class="text-2xl font-bold mb-6">Settings</h1>
|
||||
<PageHeader title={$t.settings.title} />
|
||||
|
||||
{#if data.error}
|
||||
<div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
|
||||
@@ -150,38 +152,39 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<section class="mb-8 bg-white p-6 rounded shadow">
|
||||
<h2 class="text-xl font-semibold mb-4">Global Settings</h2>
|
||||
<div class="grid grid-cols-1 gap-4">
|
||||
<div>
|
||||
<label for="backup_path" class="block text-sm font-medium text-gray-700">Backup Storage Path</label>
|
||||
<input type="text" id="backup_path" bind:value={settings.settings.backup_path} class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm p-2" />
|
||||
<div class="mb-8">
|
||||
<Card title={$t.settings?.global_title || "Global Settings"}>
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<Input
|
||||
label={$t.settings?.backup_path || "Backup Storage Path"}
|
||||
bind:value={settings.settings.backup_path}
|
||||
/>
|
||||
<Button on:click={handleSaveGlobal}>
|
||||
{$t.common.save}
|
||||
</Button>
|
||||
</div>
|
||||
<button on:click={handleSaveGlobal} class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 w-max">
|
||||
Save Global Settings
|
||||
</button>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<section class="mb-8">
|
||||
<Card title={$t.settings?.env_title || "Superset Environments"}>
|
||||
|
||||
{#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">Warning</p>
|
||||
<p>{$t.settings?.env_warning || "No Superset environments configured."}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mb-8 bg-white p-6 rounded shadow">
|
||||
<h2 class="text-xl font-semibold mb-4">Superset Environments</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">Warning</p>
|
||||
<p>No Superset environments configured. You must add at least one environment to perform backups or migrations.</p>
|
||||
</div>
|
||||
{/if}
|
||||
{/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">Name</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.connections?.name || "Name"}</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">URL</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Username</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.connections?.user || "Username"}</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Default</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">{$t.git?.actions || "Actions"}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@@ -192,9 +195,9 @@
|
||||
<td class="px-6 py-4 whitespace-nowrap">{env.username}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap">{env.is_default ? 'Yes' : '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">Test</button>
|
||||
<button on:click={() => editEnv(env)} class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</button>
|
||||
<button on:click={() => handleDeleteEnv(env.id)} class="text-red-600 hover:text-red-900">Delete</button>
|
||||
<button on:click={() => handleTestEnv(env.id)} class="text-green-600 hover:text-green-900 mr-4">{$t.settings?.env_test || "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.settings?.env_delete || "Delete"}</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
@@ -202,44 +205,30 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 p-4 rounded">
|
||||
<h3 class="text-lg font-medium mb-4">{editingEnvId ? 'Edit' : 'Add'} Environment</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">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">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">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">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">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">Default Environment</label>
|
||||
<div class="mt-8 bg-gray-50 p-6 rounded-lg border border-gray-100">
|
||||
<h3 class="text-lg font-medium mb-6">{editingEnvId ? ($t.settings?.env_edit || "Edit Environment") : ($t.settings?.env_add || "Add Environment")}</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Input label="ID" bind:value={newEnv.id} disabled={!!editingEnvId} />
|
||||
<Input label={$t.connections?.name || "Name"} bind:value={newEnv.name} />
|
||||
<Input label="URL" bind:value={newEnv.url} />
|
||||
<Input label={$t.connections?.user || "Username"} bind:value={newEnv.username} />
|
||||
<Input label={$t.connections?.pass || "Password"} type="password" bind:value={newEnv.password} />
|
||||
<div class="flex items-center gap-2 h-10 mt-auto">
|
||||
<input type="checkbox" id="env_default" bind:checked={newEnv.is_default} class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500" />
|
||||
<label for="env_default" class="text-sm font-medium text-gray-700">{$t.settings?.env_default || "Default Environment"}</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-2">
|
||||
<button on:click={handleAddOrUpdateEnv} class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
|
||||
{editingEnvId ? 'Update' : 'Add'} Environment
|
||||
</button>
|
||||
<div class="mt-8 flex gap-3">
|
||||
<Button on:click={handleAddOrUpdateEnv}>
|
||||
{editingEnvId ? $t.common.save : ($t.settings?.env_add || "Add Environment")}
|
||||
</Button>
|
||||
{#if editingEnvId}
|
||||
<button on:click={resetEnvForm} class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600">
|
||||
Cancel
|
||||
</button>
|
||||
<Button variant="secondary" on:click={resetEnvForm}>
|
||||
{$t.common.cancel}
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,24 @@
|
||||
<script>
|
||||
<!-- [DEF:GitSettingsPage:Component] -->
|
||||
<!--
|
||||
@SEMANTICS: git, settings, configuration, integration
|
||||
@PURPOSE: Manage Git server configurations for dashboard versioning.
|
||||
@LAYER: Page
|
||||
@RELATION: USES -> gitService
|
||||
@RELATION: USES -> Button, Input, Card, PageHeader, Select
|
||||
|
||||
@INVARIANT: All configurations must be validated via connection test.
|
||||
-->
|
||||
|
||||
<script lang="ts">
|
||||
// [SECTION: IMPORTS]
|
||||
import { onMount } from 'svelte';
|
||||
import { gitService } from '../../../services/gitService';
|
||||
import { addToast as toast } from '../../../lib/toasts.js';
|
||||
import { t } from '$lib/i18n';
|
||||
import { Button, Input, Card, PageHeader, Select } from '$lib/ui';
|
||||
// [/SECTION: IMPORTS]
|
||||
|
||||
// [SECTION: STATE]
|
||||
let configs = [];
|
||||
let newConfig = {
|
||||
name: '',
|
||||
@@ -12,15 +28,27 @@
|
||||
default_repository: ''
|
||||
};
|
||||
let testing = false;
|
||||
// [/SECTION: STATE]
|
||||
|
||||
onMount(async () => {
|
||||
// [DEF:loadConfigs:Function]
|
||||
/**
|
||||
* @purpose Fetches existing git configurations.
|
||||
*/
|
||||
async function loadConfigs() {
|
||||
try {
|
||||
configs = await gitService.getConfigs();
|
||||
} catch (e) {
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
});
|
||||
}
|
||||
// [/DEF:loadConfigs:Function]
|
||||
|
||||
onMount(loadConfigs);
|
||||
|
||||
// [DEF:handleTest:Function]
|
||||
/**
|
||||
* @purpose Tests connection to a git server with current form data.
|
||||
*/
|
||||
async function handleTest() {
|
||||
testing = true;
|
||||
try {
|
||||
@@ -36,7 +64,12 @@
|
||||
testing = false;
|
||||
}
|
||||
}
|
||||
// [/DEF:handleTest:Function]
|
||||
|
||||
// [DEF:handleSave:Function]
|
||||
/**
|
||||
* @purpose Saves a new git configuration.
|
||||
*/
|
||||
async function handleSave() {
|
||||
try {
|
||||
const saved = await gitService.createConfig(newConfig);
|
||||
@@ -47,7 +80,13 @@
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
}
|
||||
// [/DEF:handleSave:Function]
|
||||
|
||||
// [DEF:handleDelete:Function]
|
||||
/**
|
||||
* @purpose Deletes a git configuration by ID.
|
||||
* @param {string} id - Configuration ID.
|
||||
*/
|
||||
async function handleDelete(id) {
|
||||
if (!confirm('Are you sure you want to delete this Git configuration?')) return;
|
||||
try {
|
||||
@@ -58,31 +97,34 @@
|
||||
toast(e.message, 'error');
|
||||
}
|
||||
}
|
||||
// [/DEF:handleDelete:Function]
|
||||
</script>
|
||||
|
||||
<div class="p-6">
|
||||
<h1 class="text-2xl font-bold mb-6">Git Integration Settings</h1>
|
||||
<!-- [SECTION: TEMPLATE] -->
|
||||
<div class="p-6 max-w-6xl mx-auto">
|
||||
<PageHeader title="Git Integration Settings" />
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<!-- List of Configs -->
|
||||
<div class="bg-white p-6 rounded shadow">
|
||||
<h2 class="text-xl font-semibold mb-4">Configured Servers</h2>
|
||||
<Card title="Configured Servers">
|
||||
{#if configs.length === 0}
|
||||
<p class="text-gray-500">No Git servers configured.</p>
|
||||
{:else}
|
||||
<ul class="divide-y">
|
||||
<ul class="divide-y divide-gray-100">
|
||||
{#each configs as config}
|
||||
<li class="py-3 flex justify-between items-center">
|
||||
<li class="py-4 flex justify-between items-center">
|
||||
<div>
|
||||
<span class="font-medium">{config.name}</span>
|
||||
<span class="text-sm text-gray-500 ml-2">({config.provider})</span>
|
||||
<div class="text-xs text-gray-400">{config.url}</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium text-gray-900">{config.name}</span>
|
||||
<span class="text-xs font-mono bg-gray-50 text-gray-500 px-1.5 py-0.5 rounded">{config.provider}</span>
|
||||
</div>
|
||||
<div class="text-xs text-gray-400 mt-1">{config.url}</div>
|
||||
</div>
|
||||
<div class="flex items-center space-x-4">
|
||||
<span class="px-2 py-1 text-xs rounded {config.status === 'CONNECTED' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}">
|
||||
<span class="px-2 py-1 text-xs font-medium rounded {config.status === 'CONNECTED' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'}">
|
||||
{config.status}
|
||||
</span>
|
||||
<button on:click={() => handleDelete(config.id)} class="text-red-600 hover:text-red-800 p-1" title="Delete">
|
||||
<button on:click={() => handleDelete(config.id)} class="text-gray-400 hover:text-red-600 transition-colors" title="Delete">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
@@ -92,45 +134,41 @@
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<!-- Add New Config -->
|
||||
<div class="bg-white p-6 rounded shadow">
|
||||
<h2 class="text-xl font-semibold mb-4">Add Git Server</h2>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Display Name</label>
|
||||
<input type="text" bind:value={newConfig.name} class="mt-1 block w-full border rounded p-2" placeholder="e.g. My GitHub" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Provider</label>
|
||||
<select bind:value={newConfig.provider} class="mt-1 block w-full border rounded p-2">
|
||||
<option value="GITHUB">GitHub</option>
|
||||
<option value="GITLAB">GitLab</option>
|
||||
<option value="GITEA">Gitea</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Server URL</label>
|
||||
<input type="text" bind:value={newConfig.url} class="mt-1 block w-full border rounded p-2" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Personal Access Token (PAT)</label>
|
||||
<input type="password" bind:value={newConfig.pat} class="mt-1 block w-full border rounded p-2" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700">Default Repository (Optional)</label>
|
||||
<input type="text" bind:value={newConfig.default_repository} class="mt-1 block w-full border rounded p-2" placeholder="org/repo" />
|
||||
</div>
|
||||
<div class="flex space-x-4 pt-4">
|
||||
<button on:click={handleTest} disabled={testing} class="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300 disabled:opacity-50">
|
||||
{testing ? 'Testing...' : 'Test Connection'}
|
||||
</button>
|
||||
<button on:click={handleSave} class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
|
||||
<Card title="Add Git Server">
|
||||
<div class="space-y-6">
|
||||
<Input label="Display Name" bind:value={newConfig.name} placeholder="e.g. My GitHub" />
|
||||
<Select
|
||||
label="Provider"
|
||||
bind:value={newConfig.provider}
|
||||
options={[
|
||||
{ value: 'GITHUB', label: 'GitHub' },
|
||||
{ value: 'GITLAB', label: 'GitLab' },
|
||||
{ value: 'GITEA', label: 'Gitea' }
|
||||
]}
|
||||
/>
|
||||
<Input label="Server URL" bind:value={newConfig.url} />
|
||||
<Input label="Personal Access Token (PAT)" type="password" bind:value={newConfig.pat} />
|
||||
<Input label="Default Repository (Optional)" bind:value={newConfig.default_repository} placeholder="org/repo" />
|
||||
|
||||
<div class="flex gap-3 pt-2">
|
||||
<Button variant="secondary" on:click={handleTest} isLoading={testing}>
|
||||
Test Connection
|
||||
</Button>
|
||||
<Button variant="primary" on:click={handleSave}>
|
||||
Save Configuration
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- [/SECTION: TEMPLATE] -->
|
||||
|
||||
<style>
|
||||
/* Styles are handled by Tailwind */
|
||||
</style>
|
||||
|
||||
<!-- [/DEF:GitSettingsPage:Component] -->
|
||||
Reference in New Issue
Block a user