alexei.dolgolyov
91e5cd58e9
Backend: - Scheduler lifecycle sync: create/update/delete tracker now syncs APScheduler jobs - Test-periodic/test-memory endpoints render actual Jinja2 templates with sample data - Cascade cleanup on tracker delete (TrackerState removed, EventLog nullified) - Fix user_id=0 FK violation for system-owned TemplateConfig (removed FK constraint) - Fix API key leak: only attach x-api-key header for internal provider URLs - Validate config ownership in tracker_targets create/update - Fix _response() double-emit of created_at in template/tracking configs - Add per-target-link test endpoints (test, test-periodic, test-memory) Frontend: - Fix orphaned provider on test exception in providers/new - Add submitting guard + disabled state to targets save button - Move test buttons from tracker card to per-target-link rows - Fix Svelte 5 async $state reactivity (spread reassignment for all Record mutations) - i18n for dashboard timeAgo and event type badges (EN + RU) - Add required attribute to chat select dropdown in targets - Fix font CSS vars to prioritize imported DM Sans / JetBrains Mono - Standardize empty states with centered icon + text across all 6 list pages - Add stagger-children animation class to all list containers - Fix slide transition duration consistency (200ms everywhere) - Standardize border-radius to rounded-md across all form inputs - Fix providers/new page structure (h2 + mb-8 spacing) - Fix tracker card action row overflow (flex-wrap justify-end) - JinjaEditor dark mode reactivity (recreate editor on theme change) - Add aria-labels to mobile nav items - Make ConfirmModal confirm button label/icon configurable - Remove double error reporting on providers page - Add telegram bot edit functionality (name editing via PUT) - i18n for External Domain label on provider forms Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
265 lines
13 KiB
Svelte
265 lines
13 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import { slide } from 'svelte/transition';
|
|
import { api } from '$lib/api';
|
|
import { t } from '$lib/i18n';
|
|
import PageHeader from '$lib/components/PageHeader.svelte';
|
|
import Card from '$lib/components/Card.svelte';
|
|
import Loading from '$lib/components/Loading.svelte';
|
|
import IconPicker from '$lib/components/IconPicker.svelte';
|
|
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
|
import ConfirmModal from '$lib/components/ConfirmModal.svelte';
|
|
import Hint from '$lib/components/Hint.svelte';
|
|
import IconButton from '$lib/components/IconButton.svelte';
|
|
import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
|
|
|
|
let targets = $state<any[]>([]);
|
|
let bots = $state<any[]>([]);
|
|
let botChats = $state<Record<number, any[]>>({});
|
|
let showForm = $state(false);
|
|
let editing = $state<number | null>(null);
|
|
let formType = $state<'telegram' | 'webhook'>('telegram');
|
|
const defaultForm = () => ({ name: '', icon: '', bot_id: 0, chat_id: '', bot_token: '', url: '', headers: '',
|
|
max_media_to_send: 50, max_media_per_group: 10, media_delay: 500, max_asset_size: 50,
|
|
disable_url_preview: false, send_large_photos_as_documents: false, ai_captions: false });
|
|
let form = $state(defaultForm());
|
|
let error = $state('');
|
|
let headersError = $state('');
|
|
let loaded = $state(false);
|
|
let submitting = $state(false);
|
|
let loadError = $state('');
|
|
let showTelegramSettings = $state(false);
|
|
let confirmDelete = $state<any>(null);
|
|
|
|
onMount(load);
|
|
async function load() {
|
|
try {
|
|
[targets, bots] = await Promise.all([api('/targets'), api('/telegram-bots')]);
|
|
loadError = '';
|
|
} catch (err: any) { loadError = err.message || t('common.loadError'); snackError(loadError); } finally { loaded = true; }
|
|
}
|
|
|
|
async function loadBotChats() {
|
|
if (!form.bot_id) return;
|
|
try { botChats[form.bot_id] = await api(`/telegram-bots/${form.bot_id}/chats`); } catch {}
|
|
}
|
|
|
|
function openNew() { form = defaultForm(); formType = 'telegram'; editing = null; showTelegramSettings = false; showForm = true; }
|
|
async function edit(tgt: any) {
|
|
formType = tgt.type;
|
|
const c = tgt.config || {};
|
|
form = {
|
|
name: tgt.name, icon: tgt.icon || '', bot_id: c.bot_id || 0, bot_token: '', chat_id: c.chat_id || '', url: c.url || '', headers: '',
|
|
max_media_to_send: c.max_media_to_send ?? 50, max_media_per_group: c.max_media_per_group ?? 10,
|
|
media_delay: c.media_delay ?? 500, max_asset_size: c.max_asset_size ?? 50,
|
|
disable_url_preview: c.disable_url_preview ?? false, send_large_photos_as_documents: c.send_large_photos_as_documents ?? false,
|
|
ai_captions: c.ai_captions ?? false,
|
|
};
|
|
editing = tgt.id; showTelegramSettings = false; showForm = true;
|
|
if (form.bot_id) await loadBotChats();
|
|
}
|
|
|
|
async function save(e: SubmitEvent) {
|
|
e.preventDefault(); error = ''; headersError = '';
|
|
if (submitting) return;
|
|
submitting = true;
|
|
try {
|
|
let botToken = form.bot_token;
|
|
if (formType === 'telegram' && form.bot_id && !botToken) {
|
|
const tokenRes = await api(`/telegram-bots/${form.bot_id}/token`);
|
|
botToken = tokenRes.token;
|
|
}
|
|
let parsedHeaders = {};
|
|
if (formType === 'webhook' && form.headers) {
|
|
try { parsedHeaders = JSON.parse(form.headers); }
|
|
catch { headersError = t('common.headersInvalid'); return; }
|
|
}
|
|
const config = formType === 'telegram'
|
|
? { ...(botToken ? { bot_token: botToken } : {}), chat_id: form.chat_id,
|
|
bot_id: form.bot_id || undefined,
|
|
max_media_to_send: form.max_media_to_send, max_media_per_group: form.max_media_per_group,
|
|
media_delay: form.media_delay, max_asset_size: form.max_asset_size,
|
|
disable_url_preview: form.disable_url_preview, send_large_photos_as_documents: form.send_large_photos_as_documents,
|
|
ai_captions: form.ai_captions }
|
|
: { url: form.url, headers: parsedHeaders, ai_captions: form.ai_captions };
|
|
if (editing) {
|
|
await api(`/targets/${editing}`, { method: 'PUT', body: JSON.stringify({ name: form.name, icon: form.icon, config }) });
|
|
} else {
|
|
await api('/targets', { method: 'POST', body: JSON.stringify({ type: formType, name: form.name, icon: form.icon, config }) });
|
|
}
|
|
showForm = false; editing = null; await load();
|
|
snackSuccess(t('snack.targetSaved'));
|
|
} catch (err: any) { error = err.message; snackError(err.message); }
|
|
finally { submitting = false; }
|
|
}
|
|
async function test(id: number) {
|
|
try {
|
|
const res = await api(`/targets/${id}/test`, { method: 'POST' });
|
|
if (res.success) snackSuccess(t('snack.targetTestSent'));
|
|
else snackError(`Failed: ${res.error}`);
|
|
} catch (err: any) { snackError(err.message); }
|
|
}
|
|
async function remove(id: number) {
|
|
try { await api(`/targets/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.targetDeleted')); }
|
|
catch (err: any) { error = err.message; snackError(err.message); }
|
|
}
|
|
</script>
|
|
|
|
<PageHeader title={t('targets.title')} description={t('targets.description')}>
|
|
<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
|
|
class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
|
|
{showForm ? t('targets.cancel') : t('targets.addTarget')}
|
|
</button>
|
|
</PageHeader>
|
|
|
|
{#if !loaded}<Loading />{:else}
|
|
|
|
{#if loadError}
|
|
<div class="mb-4 p-3 rounded-md text-sm bg-[var(--color-error-bg)] text-[var(--color-error-fg)]">{loadError}</div>
|
|
{/if}
|
|
|
|
{#if showForm}
|
|
<div in:slide={{ duration: 200 }}>
|
|
<Card class="mb-6">
|
|
{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
|
<form onsubmit={save} class="space-y-4">
|
|
<div>
|
|
<span class="block text-sm font-medium mb-1">{t('targets.type')}</span>
|
|
<div class="flex gap-4">
|
|
<label class="flex items-center gap-1 text-sm"><input type="radio" bind:group={formType} value="telegram" /> Telegram</label>
|
|
<label class="flex items-center gap-1 text-sm"><input type="radio" bind:group={formType} value="webhook" /> Webhook</label>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="tgt-name" class="block text-sm font-medium mb-1">{t('targets.name')}</label>
|
|
<div class="flex gap-2">
|
|
<IconPicker value={form.icon} onselect={(v: string) => form.icon = v} />
|
|
<input id="tgt-name" bind:value={form.name} required placeholder={t('targets.namePlaceholder')} class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
</div>
|
|
{#if formType === 'telegram'}
|
|
<div>
|
|
<label for="tgt-bot" class="block text-sm font-medium mb-1">{t('telegramBot.selectBot')}</label>
|
|
<select id="tgt-bot" bind:value={form.bot_id} onchange={loadBotChats} required
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
|
<option value={0} disabled>— {t('telegramBot.selectBot')} —</option>
|
|
{#each bots as bot}<option value={bot.id}>{bot.name} (@{bot.bot_username})</option>{/each}
|
|
</select>
|
|
{#if bots.length === 0}
|
|
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('telegramBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
|
|
{/if}
|
|
</div>
|
|
|
|
{#if form.bot_id}
|
|
<div>
|
|
<label for="tgt-chat" class="block text-sm font-medium mb-1">{t('telegramBot.selectChat')}</label>
|
|
{#if (botChats[form.bot_id] || []).length > 0}
|
|
<select id="tgt-chat" bind:value={form.chat_id} required
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
|
<option value="">— {t('telegramBot.selectChat')} —</option>
|
|
{#each botChats[form.bot_id] as chat}
|
|
<option value={chat.chat_id}>{chat.title || chat.username || 'Unknown'} ({chat.type}) [{chat.chat_id}]</option>
|
|
{/each}
|
|
</select>
|
|
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">
|
|
<button type="button" onclick={loadBotChats} class="hover:underline">{t('telegramBot.refreshChats')}</button>
|
|
</p>
|
|
{:else}
|
|
<input id="tgt-chat" bind:value={form.chat_id} required placeholder="Chat ID"
|
|
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('telegramBot.noChats')}</p>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<div class="border border-[var(--color-border)] rounded-md p-3">
|
|
<button type="button" onclick={() => showTelegramSettings = !showTelegramSettings}
|
|
class="text-sm font-medium cursor-pointer w-full text-left flex items-center justify-between">
|
|
{t('targets.telegramSettings')}
|
|
<span class="text-xs transition-transform duration-200" class:rotate-180={showTelegramSettings}>▼</span>
|
|
</button>
|
|
{#if showTelegramSettings}
|
|
<div in:slide={{ duration: 150 }} class="grid grid-cols-2 gap-3 mt-3">
|
|
<div>
|
|
<label for="tgt-maxmedia" class="block text-xs mb-1">{t('targets.maxMedia')}<Hint text={t('hints.maxMedia')} /></label>
|
|
<input id="tgt-maxmedia" type="number" bind:value={form.max_media_to_send} min="0" max="50" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="tgt-groupsize" class="block text-xs mb-1">{t('targets.maxGroupSize')}<Hint text={t('hints.groupSize')} /></label>
|
|
<input id="tgt-groupsize" type="number" bind:value={form.max_media_per_group} min="2" max="10" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="tgt-delay" class="block text-xs mb-1">{t('targets.chunkDelay')}<Hint text={t('hints.chunkDelay')} /></label>
|
|
<input id="tgt-delay" type="number" bind:value={form.media_delay} min="0" max="60000" step="100" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="tgt-maxsize" class="block text-xs mb-1">{t('targets.maxAssetSize')}<Hint text={t('hints.maxAssetSize')} /></label>
|
|
<input id="tgt-maxsize" type="number" bind:value={form.max_asset_size} min="1" max="50" class="w-full px-2 py-1 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<label class="flex items-center gap-2 text-sm col-span-2"><input type="checkbox" bind:checked={form.disable_url_preview} /> {t('targets.disableUrlPreview')}</label>
|
|
<label class="flex items-center gap-2 text-sm col-span-2"><input type="checkbox" bind:checked={form.send_large_photos_as_documents} /> {t('targets.sendLargeAsDocuments')}</label>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<div>
|
|
<label for="tgt-url" class="block text-sm font-medium mb-1">{t('targets.webhookUrl')}</label>
|
|
<input id="tgt-url" bind:value={form.url} required placeholder="https://..." class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
<div>
|
|
<label for="tgt-headers" class="block text-sm font-medium mb-1">Headers (JSON)</label>
|
|
<input id="tgt-headers" bind:value={form.headers} placeholder={'{"Authorization": "Bearer ..."}'} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" style={headersError ? 'border-color: var(--color-error-fg)' : ''} />
|
|
{#if headersError}<p class="text-xs text-[var(--color-error-fg)] mt-1">{headersError}</p>{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.ai_captions} /> {t('targets.aiCaptions')}<Hint text={t('hints.aiCaptions')} /></label>
|
|
|
|
<button type="submit" disabled={submitting} class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">{submitting ? t('common.loading') : (editing ? t('common.save') : t('targets.create'))}</button>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if targets.length === 0 && !showForm}
|
|
<Card>
|
|
<div class="flex flex-col items-center py-8 gap-3" style="color: var(--color-muted-foreground);">
|
|
<div style="opacity: 0.4;"><MdiIcon name="mdiTarget" size={40} /></div>
|
|
<p class="text-sm">{t('targets.noTargets')}</p>
|
|
</div>
|
|
</Card>
|
|
{:else}
|
|
<div class="space-y-3 stagger-children">
|
|
{#each targets as target}
|
|
<Card hover>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
{#if target.icon}<MdiIcon name={target.icon} />{/if}
|
|
<p class="font-medium">{target.name}</p>
|
|
<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.type}</span>
|
|
</div>
|
|
<p class="text-sm text-[var(--color-muted-foreground)]">
|
|
{target.type === 'telegram' ? `Chat: ${target.config?.chat_id || '***'}` : target.config?.url || ''}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-1">
|
|
<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => edit(target)} />
|
|
<IconButton icon="mdiSend" title={t('targets.test')} onclick={() => test(target.id)} />
|
|
<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => confirmDelete = target} variant="danger" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{/if}
|
|
|
|
<ConfirmModal
|
|
open={!!confirmDelete}
|
|
message={t('targets.confirmDelete')}
|
|
onconfirm={() => { if (confirmDelete) { remove(confirmDelete.id); confirmDelete = null; } }}
|
|
oncancel={() => confirmDelete = null}
|
|
/>
|