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

Мультиязночность + причесывание css

Browse Source
This commit is contained in:
busya
2026-01-23 17:53:46 +03:00
parent eacb88a0e3
commit 598dd50d1d
22 changed files with 79628 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
frontend/src/components/tools/ConnectionForm.svelte
View File

@@ -10,6 +10,8 @@
import { createEventDispatcher } from 'svelte';
import { createConnection } from '../../services/connectionService.js';
import { addToast } from '../../lib/toasts.js';
import { t } from '../../lib/i18n';
import { Button, Input, Card } from '../../lib/ui';
// [/SECTION]
const dispatch = createEventDispatcher();
@@ -17,7 +19,7 @@
let name = '';
let type = 'postgres';
let host = '';
let port = 5432;
let port = "5432";
let database = '';
let username = '';
let password = '';
@@ -36,7 +38,7 @@
isSubmitting = true;
try {
const newConnection = await createConnection({
name, type, host, port, database, username, password
name, type, host, port: Number(port), database, username, password
});
addToast('Connection created successfully', 'success');
dispatch('success', newConnection);
@@ -57,7 +59,7 @@
function resetForm() {
name = '';
host = '';
port = 5432;
port = "5432";
database = '';
username = '';
password = '';
@@ -66,43 +68,28 @@
</script>
<!-- [SECTION: TEMPLATE] -->
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<h3 class="text-lg font-medium text-gray-900 mb-4">Add New Connection</h3>
<form on:submit|preventDefault={handleSubmit} class="space-y-4">
<div>
<label for="conn-name" class="block text-sm font-medium text-gray-700">Connection Name</label>
<input type="text" id="conn-name" bind:value={name} placeholder="e.g. Production DWH" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
<Card title={$t.connections?.add_new || "Add New Connection"}>
<form on:submit|preventDefault={handleSubmit} class="space-y-6">
<Input label={$t.connections?.name || "Connection Name"} bind:value={name} placeholder="e.g. Production DWH" />
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<Input label={$t.connections?.host || "Host"} bind:value={host} placeholder="10.0.0.1" />
<Input label={$t.connections?.port || "Port"} type="number" bind:value={port} />
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="conn-host" class="block text-sm font-medium text-gray-700">Host</label>
<input type="text" id="conn-host" bind:value={host} placeholder="10.0.0.1" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div>
<label for="conn-port" class="block text-sm font-medium text-gray-700">Port</label>
<input type="number" id="conn-port" bind:value={port} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
</div>
<div>
<label for="conn-db" class="block text-sm font-medium text-gray-700">Database Name</label>
<input type="text" id="conn-db" bind:value={database} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="conn-user" class="block text-sm font-medium text-gray-700">Username</label>
<input type="text" id="conn-user" bind:value={username} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<div>
<label for="conn-pass" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="conn-pass" bind:value={password} class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" />
</div>
<Input label={$t.connections?.db_name || "Database Name"} bind:value={database} />
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<Input label={$t.connections?.user || "Username"} bind:value={username} />
<Input label={$t.connections?.pass || "Password"} type="password" bind:value={password} />
</div>
<div class="flex justify-end pt-2">
<button type="submit" disabled={isSubmitting} class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50">
{isSubmitting ? 'Creating...' : 'Create Connection'}
</button>
<Button type="submit" disabled={isSubmitting} isLoading={isSubmitting}>
{$t.connections?.create || "Create Connection"}
</Button>
</div>
</form>
</div>
</Card>
<!-- [/SECTION] -->
<!-- [/DEF:ConnectionForm:Component] -->

30
frontend/src/components/tools/ConnectionList.svelte
View File

@@ -10,6 +10,8 @@
import { onMount, createEventDispatcher } from 'svelte';
import { getConnections, deleteConnection } from '../../services/connectionService.js';
import { addToast } from '../../lib/toasts.js';
import { t } from '../../lib/i18n';
import { Button, Card } from '../../lib/ui';
// [/SECTION]
const dispatch = createEventDispatcher();
@@ -57,32 +59,30 @@
</script>
<!-- [SECTION: TEMPLATE] -->
<div class="bg-white shadow overflow-hidden sm:rounded-md border border-gray-200">
<div class="px-4 py-5 sm:px-6 bg-gray-50 border-b border-gray-200">
<h3 class="text-lg leading-6 font-medium text-gray-900">Saved Connections</h3>
</div>
<ul class="divide-y divide-gray-200">
<Card title={$t.connections?.saved || "Saved Connections"} padding="none">
<ul class="divide-y divide-gray-100">
{#if isLoading}
<li class="p-4 text-center text-gray-500">Loading...</li>
<li class="p-6 text-center text-gray-500">{$t.common.loading}</li>
{:else if connections.length === 0}
<li class="p-8 text-center text-gray-500 italic">No connections saved yet.</li>
<li class="p-12 text-center text-gray-500 italic">{$t.connections?.no_saved || "No connections saved yet."}</li>
{:else}
{#each connections as conn}
<li class="p-4 flex items-center justify-between hover:bg-gray-50">
<li class="p-6 flex items-center justify-between hover:bg-gray-50 transition-colors">
<div>
<div class="text-sm font-medium text-indigo-600 truncate">{conn.name}</div>
<div class="text-xs text-gray-500">{conn.type}://{conn.username}@{conn.host}:{conn.port}/{conn.database}</div>
<div class="text-sm font-medium text-blue-600 truncate">{conn.name}</div>
<div class="text-xs text-gray-400 mt-1 font-mono">{conn.type}://{conn.username}@{conn.host}:{conn.port}/{conn.database}</div>
</div>
<button
<Button
variant="danger"
size="sm"
on:click={() => handleDelete(conn.id)}
class="ml-2 inline-flex items-center px-2 py-1 border border-transparent text-xs font-medium rounded text-red-700 bg-red-100 hover:bg-red-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"
>
Delete
</button>
{$t.connections?.delete || "Delete"}
</Button>
</li>
{/each}
{/if}
</ul>
</div>
</Card>
<!-- [/SECTION] -->
<!-- [/DEF:ConnectionList:Component] -->