Add i18n (RU/EN), dark/light themes, enhanced tracker/target forms (Phase 7a)
Some checks failed
Validate / Hassfest (push) Has been cancelled
Some checks failed
Validate / Hassfest (push) Has been cancelled
Frontend enhancements: - i18n: Full Russian and English translations (~170 keys each), language switcher in sidebar and login page, auto-detect from browser, persists to localStorage - Themes: Light/dark mode with CSS custom properties, system preference detection, toggle in sidebar header, smooth transitions - Dark theme: Full color palette (background, card, muted, border, success, warning, error variants) Enhanced forms: - Tracker creation: asset type filtering (images/videos), favorites only, include people/details toggles, sort by/order selects, max assets to show - Target creation: Telegram media settings (collapsible) with max media, group size, chunk delay, max asset size, URL preview disable, large photos as documents - Template creation: event_type selector (all/added/removed/renamed/deleted) All pages use t() for translations, var(--color-*) for theme-safe colors, and proper label-for-input associations. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -13,12 +13,41 @@
|
||||
--color-destructive: #ef4444;
|
||||
--color-card: #ffffff;
|
||||
--color-card-foreground: #18181b;
|
||||
--color-success-bg: #f0fdf4;
|
||||
--color-success-fg: #15803d;
|
||||
--color-warning-bg: #fefce8;
|
||||
--color-warning-fg: #a16207;
|
||||
--color-error-bg: #fef2f2;
|
||||
--color-error-fg: #dc2626;
|
||||
--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* Dark theme overrides */
|
||||
[data-theme="dark"] {
|
||||
--color-background: #09090b;
|
||||
--color-foreground: #fafafa;
|
||||
--color-muted: #27272a;
|
||||
--color-muted-foreground: #a1a1aa;
|
||||
--color-border: #3f3f46;
|
||||
--color-primary: #fafafa;
|
||||
--color-primary-foreground: #18181b;
|
||||
--color-accent: #27272a;
|
||||
--color-accent-foreground: #fafafa;
|
||||
--color-destructive: #f87171;
|
||||
--color-card: #18181b;
|
||||
--color-card-foreground: #fafafa;
|
||||
--color-success-bg: #052e16;
|
||||
--color-success-fg: #4ade80;
|
||||
--color-warning-bg: #422006;
|
||||
--color-warning-fg: #facc15;
|
||||
--color-error-bg: #450a0a;
|
||||
--color-error-fg: #f87171;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-sans);
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-foreground);
|
||||
transition: background-color 0.2s, color 0.2s;
|
||||
}
|
||||
|
||||
176
frontend/src/lib/i18n/en.json
Normal file
176
frontend/src/lib/i18n/en.json
Normal file
@@ -0,0 +1,176 @@
|
||||
{
|
||||
"app": {
|
||||
"name": "Immich Watcher",
|
||||
"tagline": "Album notifications"
|
||||
},
|
||||
"nav": {
|
||||
"dashboard": "Dashboard",
|
||||
"servers": "Servers",
|
||||
"trackers": "Trackers",
|
||||
"templates": "Templates",
|
||||
"targets": "Targets",
|
||||
"users": "Users",
|
||||
"logout": "Logout"
|
||||
},
|
||||
"auth": {
|
||||
"signIn": "Sign in",
|
||||
"signInTitle": "Sign in to your account",
|
||||
"signingIn": "Signing in...",
|
||||
"username": "Username",
|
||||
"password": "Password",
|
||||
"confirmPassword": "Confirm password",
|
||||
"setupTitle": "Welcome",
|
||||
"setupDescription": "Create your admin account to get started",
|
||||
"createAccount": "Create account",
|
||||
"creatingAccount": "Creating account...",
|
||||
"passwordMismatch": "Passwords do not match",
|
||||
"passwordTooShort": "Password must be at least 6 characters",
|
||||
"loginWithImmich": "Login with Immich",
|
||||
"or": "or"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Dashboard",
|
||||
"description": "Overview of your Immich Watcher setup",
|
||||
"servers": "Servers",
|
||||
"activeTrackers": "Active Trackers",
|
||||
"targets": "Targets",
|
||||
"recentEvents": "Recent Events",
|
||||
"noEvents": "No events yet. Create a tracker to start monitoring albums.",
|
||||
"loading": "Loading..."
|
||||
},
|
||||
"servers": {
|
||||
"title": "Servers",
|
||||
"description": "Manage Immich server connections",
|
||||
"addServer": "Add Server",
|
||||
"cancel": "Cancel",
|
||||
"name": "Name",
|
||||
"url": "Immich URL",
|
||||
"urlPlaceholder": "http://immich:2283",
|
||||
"apiKey": "API Key",
|
||||
"connecting": "Connecting...",
|
||||
"noServers": "No servers configured yet.",
|
||||
"delete": "Delete",
|
||||
"confirmDelete": "Delete this server?"
|
||||
},
|
||||
"trackers": {
|
||||
"title": "Trackers",
|
||||
"description": "Monitor albums for changes",
|
||||
"newTracker": "New Tracker",
|
||||
"cancel": "Cancel",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "Family photos tracker",
|
||||
"server": "Server",
|
||||
"selectServer": "Select server...",
|
||||
"albums": "Albums",
|
||||
"eventTypes": "Event Types",
|
||||
"notificationTargets": "Notification Targets",
|
||||
"scanInterval": "Scan Interval (seconds)",
|
||||
"createTracker": "Create Tracker",
|
||||
"noTrackers": "No trackers yet. Add a server first, then create a tracker.",
|
||||
"active": "Active",
|
||||
"paused": "Paused",
|
||||
"pause": "Pause",
|
||||
"resume": "Resume",
|
||||
"delete": "Delete",
|
||||
"confirmDelete": "Delete this tracker?",
|
||||
"albums_count": "album(s)",
|
||||
"every": "every",
|
||||
"trackImages": "Track images",
|
||||
"trackVideos": "Track videos",
|
||||
"favoritesOnly": "Favorites only",
|
||||
"includePeople": "Include people in notifications",
|
||||
"includeAssetDetails": "Include asset details",
|
||||
"maxAssetsToShow": "Max assets to show",
|
||||
"sortBy": "Sort by",
|
||||
"sortOrder": "Sort order",
|
||||
"sortNone": "Original order",
|
||||
"sortDate": "Date",
|
||||
"sortRating": "Rating",
|
||||
"sortName": "Name",
|
||||
"sortRandom": "Random",
|
||||
"ascending": "Ascending",
|
||||
"descending": "Descending",
|
||||
"quietHoursStart": "Quiet hours start",
|
||||
"quietHoursEnd": "Quiet hours end"
|
||||
},
|
||||
"templates": {
|
||||
"title": "Templates",
|
||||
"description": "Jinja2 message templates for notifications",
|
||||
"newTemplate": "New Template",
|
||||
"cancel": "Cancel",
|
||||
"name": "Name",
|
||||
"body": "Template Body (Jinja2)",
|
||||
"variables": "Variables",
|
||||
"preview": "Preview",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"confirmDelete": "Delete this template?",
|
||||
"create": "Create Template",
|
||||
"update": "Update Template",
|
||||
"noTemplates": "No templates yet. A default template will be used if none is configured.",
|
||||
"eventType": "Event type",
|
||||
"allEvents": "All events",
|
||||
"assetsAdded": "Assets added",
|
||||
"assetsRemoved": "Assets removed",
|
||||
"albumRenamed": "Album renamed",
|
||||
"albumDeleted": "Album deleted"
|
||||
},
|
||||
"targets": {
|
||||
"title": "Targets",
|
||||
"description": "Notification destinations (Telegram, webhooks)",
|
||||
"addTarget": "Add Target",
|
||||
"cancel": "Cancel",
|
||||
"type": "Type",
|
||||
"name": "Name",
|
||||
"namePlaceholder": "My notifications",
|
||||
"botToken": "Bot Token",
|
||||
"chatId": "Chat ID",
|
||||
"webhookUrl": "Webhook URL",
|
||||
"create": "Add Target",
|
||||
"test": "Test",
|
||||
"delete": "Delete",
|
||||
"confirmDelete": "Delete this target?",
|
||||
"noTargets": "No notification targets configured yet.",
|
||||
"testSent": "Test sent successfully!",
|
||||
"aiCaptions": "Enable AI captions",
|
||||
"telegramSettings": "Telegram Settings",
|
||||
"maxMedia": "Max media to send",
|
||||
"maxGroupSize": "Max group size",
|
||||
"chunkDelay": "Delay between groups (ms)",
|
||||
"maxAssetSize": "Max asset size (MB)",
|
||||
"videoWarning": "Video size warning",
|
||||
"disableUrlPreview": "Disable link previews",
|
||||
"sendLargeAsDocuments": "Send large photos as documents"
|
||||
},
|
||||
"users": {
|
||||
"title": "Users",
|
||||
"description": "Manage user accounts (admin only)",
|
||||
"addUser": "Add User",
|
||||
"cancel": "Cancel",
|
||||
"username": "Username",
|
||||
"password": "Password",
|
||||
"role": "Role",
|
||||
"roleUser": "User",
|
||||
"roleAdmin": "Admin",
|
||||
"create": "Create User",
|
||||
"delete": "Delete",
|
||||
"confirmDelete": "Delete this user?",
|
||||
"joined": "joined"
|
||||
},
|
||||
"common": {
|
||||
"loading": "Loading...",
|
||||
"save": "Save",
|
||||
"cancel": "Cancel",
|
||||
"delete": "Delete",
|
||||
"edit": "Edit",
|
||||
"close": "Close",
|
||||
"confirm": "Confirm",
|
||||
"error": "Error",
|
||||
"success": "Success",
|
||||
"language": "Language",
|
||||
"theme": "Theme",
|
||||
"light": "Light",
|
||||
"dark": "Dark",
|
||||
"system": "System"
|
||||
}
|
||||
}
|
||||
60
frontend/src/lib/i18n/index.ts
Normal file
60
frontend/src/lib/i18n/index.ts
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* Simple i18n store using Svelte 5 runes.
|
||||
* Supports nested keys like "nav.dashboard".
|
||||
*/
|
||||
|
||||
import en from './en.json';
|
||||
import ru from './ru.json';
|
||||
|
||||
export type Locale = 'en' | 'ru';
|
||||
|
||||
const translations: Record<Locale, Record<string, any>> = { en, ru };
|
||||
|
||||
let currentLocale = $state<Locale>('en');
|
||||
|
||||
export function getLocale(): Locale {
|
||||
return currentLocale;
|
||||
}
|
||||
|
||||
export function setLocale(locale: Locale) {
|
||||
currentLocale = locale;
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('locale', locale);
|
||||
}
|
||||
}
|
||||
|
||||
export function initLocale() {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
const saved = localStorage.getItem('locale') as Locale | null;
|
||||
if (saved && saved in translations) {
|
||||
currentLocale = saved;
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (typeof navigator !== 'undefined') {
|
||||
const lang = navigator.language.slice(0, 2);
|
||||
if (lang in translations) {
|
||||
currentLocale = lang as Locale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get a translated string by dot-separated key.
|
||||
* Falls back to English if key not found in current locale.
|
||||
*/
|
||||
export function t(key: string): string {
|
||||
return resolve(translations[currentLocale], key)
|
||||
?? resolve(translations.en, key)
|
||||
?? key;
|
||||
}
|
||||
|
||||
function resolve(obj: any, path: string): string | undefined {
|
||||
const parts = path.split('.');
|
||||
let current = obj;
|
||||
for (const part of parts) {
|
||||
if (current == null || typeof current !== 'object') return undefined;
|
||||
current = current[part];
|
||||
}
|
||||
return typeof current === 'string' ? current : undefined;
|
||||
}
|
||||
176
frontend/src/lib/i18n/ru.json
Normal file
176
frontend/src/lib/i18n/ru.json
Normal file
@@ -0,0 +1,176 @@
|
||||
{
|
||||
"app": {
|
||||
"name": "Immich Watcher",
|
||||
"tagline": "Уведомления об альбомах"
|
||||
},
|
||||
"nav": {
|
||||
"dashboard": "Главная",
|
||||
"servers": "Серверы",
|
||||
"trackers": "Трекеры",
|
||||
"templates": "Шаблоны",
|
||||
"targets": "Получатели",
|
||||
"users": "Пользователи",
|
||||
"logout": "Выход"
|
||||
},
|
||||
"auth": {
|
||||
"signIn": "Войти",
|
||||
"signInTitle": "Вход в аккаунт",
|
||||
"signingIn": "Вход...",
|
||||
"username": "Имя пользователя",
|
||||
"password": "Пароль",
|
||||
"confirmPassword": "Подтвердите пароль",
|
||||
"setupTitle": "Добро пожаловать",
|
||||
"setupDescription": "Создайте учётную запись администратора",
|
||||
"createAccount": "Создать аккаунт",
|
||||
"creatingAccount": "Создание...",
|
||||
"passwordMismatch": "Пароли не совпадают",
|
||||
"passwordTooShort": "Пароль должен быть не менее 6 символов",
|
||||
"loginWithImmich": "Войти через Immich",
|
||||
"or": "или"
|
||||
},
|
||||
"dashboard": {
|
||||
"title": "Главная",
|
||||
"description": "Обзор настроек Immich Watcher",
|
||||
"servers": "Серверы",
|
||||
"activeTrackers": "Активные трекеры",
|
||||
"targets": "Получатели",
|
||||
"recentEvents": "Последние события",
|
||||
"noEvents": "Событий пока нет. Создайте трекер для отслеживания альбомов.",
|
||||
"loading": "Загрузка..."
|
||||
},
|
||||
"servers": {
|
||||
"title": "Серверы",
|
||||
"description": "Управление подключениями к Immich",
|
||||
"addServer": "Добавить сервер",
|
||||
"cancel": "Отмена",
|
||||
"name": "Название",
|
||||
"url": "URL Immich",
|
||||
"urlPlaceholder": "http://immich:2283",
|
||||
"apiKey": "API ключ",
|
||||
"connecting": "Подключение...",
|
||||
"noServers": "Серверы не настроены.",
|
||||
"delete": "Удалить",
|
||||
"confirmDelete": "Удалить этот сервер?"
|
||||
},
|
||||
"trackers": {
|
||||
"title": "Трекеры",
|
||||
"description": "Отслеживание изменений в альбомах",
|
||||
"newTracker": "Новый трекер",
|
||||
"cancel": "Отмена",
|
||||
"name": "Название",
|
||||
"namePlaceholder": "Трекер семейных фото",
|
||||
"server": "Сервер",
|
||||
"selectServer": "Выберите сервер...",
|
||||
"albums": "Альбомы",
|
||||
"eventTypes": "Типы событий",
|
||||
"notificationTargets": "Получатели уведомлений",
|
||||
"scanInterval": "Интервал проверки (секунды)",
|
||||
"createTracker": "Создать трекер",
|
||||
"noTrackers": "Трекеров пока нет. Сначала добавьте сервер, затем создайте трекер.",
|
||||
"active": "Активен",
|
||||
"paused": "Приостановлен",
|
||||
"pause": "Пауза",
|
||||
"resume": "Возобновить",
|
||||
"delete": "Удалить",
|
||||
"confirmDelete": "Удалить этот трекер?",
|
||||
"albums_count": "альбом(ов)",
|
||||
"every": "каждые",
|
||||
"trackImages": "Отслеживать фото",
|
||||
"trackVideos": "Отслеживать видео",
|
||||
"favoritesOnly": "Только избранные",
|
||||
"includePeople": "Включать людей в уведомления",
|
||||
"includeAssetDetails": "Включать детали файлов",
|
||||
"maxAssetsToShow": "Макс. файлов в уведомлении",
|
||||
"sortBy": "Сортировка",
|
||||
"sortOrder": "Порядок",
|
||||
"sortNone": "Исходный порядок",
|
||||
"sortDate": "Дата",
|
||||
"sortRating": "Рейтинг",
|
||||
"sortName": "Имя",
|
||||
"sortRandom": "Случайный",
|
||||
"ascending": "По возрастанию",
|
||||
"descending": "По убыванию",
|
||||
"quietHoursStart": "Тихие часы начало",
|
||||
"quietHoursEnd": "Тихие часы конец"
|
||||
},
|
||||
"templates": {
|
||||
"title": "Шаблоны",
|
||||
"description": "Шаблоны сообщений Jinja2 для уведомлений",
|
||||
"newTemplate": "Новый шаблон",
|
||||
"cancel": "Отмена",
|
||||
"name": "Название",
|
||||
"body": "Текст шаблона (Jinja2)",
|
||||
"variables": "Переменные",
|
||||
"preview": "Предпросмотр",
|
||||
"edit": "Редактировать",
|
||||
"delete": "Удалить",
|
||||
"confirmDelete": "Удалить этот шаблон?",
|
||||
"create": "Создать шаблон",
|
||||
"update": "Обновить шаблон",
|
||||
"noTemplates": "Шаблонов пока нет. Без шаблона будет использован шаблон по умолчанию.",
|
||||
"eventType": "Тип события",
|
||||
"allEvents": "Все события",
|
||||
"assetsAdded": "Добавлены файлы",
|
||||
"assetsRemoved": "Удалены файлы",
|
||||
"albumRenamed": "Альбом переименован",
|
||||
"albumDeleted": "Альбом удалён"
|
||||
},
|
||||
"targets": {
|
||||
"title": "Получатели",
|
||||
"description": "Адреса уведомлений (Telegram, вебхуки)",
|
||||
"addTarget": "Добавить получателя",
|
||||
"cancel": "Отмена",
|
||||
"type": "Тип",
|
||||
"name": "Название",
|
||||
"namePlaceholder": "Мои уведомления",
|
||||
"botToken": "Токен бота",
|
||||
"chatId": "ID чата",
|
||||
"webhookUrl": "URL вебхука",
|
||||
"create": "Добавить",
|
||||
"test": "Тест",
|
||||
"delete": "Удалить",
|
||||
"confirmDelete": "Удалить этого получателя?",
|
||||
"noTargets": "Получатели уведомлений не настроены.",
|
||||
"testSent": "Тестовое уведомление отправлено!",
|
||||
"aiCaptions": "Включить AI подписи",
|
||||
"telegramSettings": "Настройки Telegram",
|
||||
"maxMedia": "Макс. медиафайлов",
|
||||
"maxGroupSize": "Макс. размер группы",
|
||||
"chunkDelay": "Задержка между группами (мс)",
|
||||
"maxAssetSize": "Макс. размер файла (МБ)",
|
||||
"videoWarning": "Предупреждение о размере видео",
|
||||
"disableUrlPreview": "Отключить превью ссылок",
|
||||
"sendLargeAsDocuments": "Отправлять большие фото как документы"
|
||||
},
|
||||
"users": {
|
||||
"title": "Пользователи",
|
||||
"description": "Управление аккаунтами (только админ)",
|
||||
"addUser": "Добавить пользователя",
|
||||
"cancel": "Отмена",
|
||||
"username": "Имя пользователя",
|
||||
"password": "Пароль",
|
||||
"role": "Роль",
|
||||
"roleUser": "Пользователь",
|
||||
"roleAdmin": "Администратор",
|
||||
"create": "Создать",
|
||||
"delete": "Удалить",
|
||||
"confirmDelete": "Удалить этого пользователя?",
|
||||
"joined": "зарегистрирован"
|
||||
},
|
||||
"common": {
|
||||
"loading": "Загрузка...",
|
||||
"save": "Сохранить",
|
||||
"cancel": "Отмена",
|
||||
"delete": "Удалить",
|
||||
"edit": "Редактировать",
|
||||
"close": "Закрыть",
|
||||
"confirm": "Подтвердить",
|
||||
"error": "Ошибка",
|
||||
"success": "Успешно",
|
||||
"language": "Язык",
|
||||
"theme": "Тема",
|
||||
"light": "Светлая",
|
||||
"dark": "Тёмная",
|
||||
"system": "Системная"
|
||||
}
|
||||
}
|
||||
54
frontend/src/lib/theme.svelte.ts
Normal file
54
frontend/src/lib/theme.svelte.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* Theme management with Svelte 5 runes.
|
||||
* Supports light, dark, and system preference.
|
||||
*/
|
||||
|
||||
export type Theme = 'light' | 'dark' | 'system';
|
||||
|
||||
let theme = $state<Theme>('system');
|
||||
let resolved = $state<'light' | 'dark'>('light');
|
||||
|
||||
export function getTheme() {
|
||||
return {
|
||||
get current() { return theme; },
|
||||
get resolved() { return resolved; },
|
||||
get isDark() { return resolved === 'dark'; },
|
||||
};
|
||||
}
|
||||
|
||||
export function setTheme(newTheme: Theme) {
|
||||
theme = newTheme;
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
localStorage.setItem('theme', newTheme);
|
||||
}
|
||||
applyTheme();
|
||||
}
|
||||
|
||||
export function initTheme() {
|
||||
if (typeof localStorage !== 'undefined') {
|
||||
const saved = localStorage.getItem('theme') as Theme | null;
|
||||
if (saved && ['light', 'dark', 'system'].includes(saved)) {
|
||||
theme = saved;
|
||||
}
|
||||
}
|
||||
applyTheme();
|
||||
|
||||
// Listen for system preference changes
|
||||
if (typeof window !== 'undefined') {
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
||||
if (theme === 'system') applyTheme();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function applyTheme() {
|
||||
if (typeof document === 'undefined') return;
|
||||
|
||||
if (theme === 'system') {
|
||||
resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||
} else {
|
||||
resolved = theme;
|
||||
}
|
||||
|
||||
document.documentElement.setAttribute('data-theme', resolved);
|
||||
}
|
||||
@@ -4,16 +4,19 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { getAuth, loadUser, logout } from '$lib/auth.svelte';
|
||||
import { t, initLocale, getLocale, setLocale, type Locale } from '$lib/i18n';
|
||||
import { getTheme, initTheme, setTheme, type Theme } from '$lib/theme.svelte';
|
||||
|
||||
let { children } = $props();
|
||||
const auth = getAuth();
|
||||
const theme = getTheme();
|
||||
|
||||
const navItems = [
|
||||
{ href: '/', label: 'Dashboard', icon: '⊞' },
|
||||
{ href: '/servers', label: 'Servers', icon: '⬡' },
|
||||
{ href: '/trackers', label: 'Trackers', icon: '◎' },
|
||||
{ href: '/templates', label: 'Templates', icon: '⎘' },
|
||||
{ href: '/targets', label: 'Targets', icon: '◇' },
|
||||
{ href: '/', key: 'nav.dashboard', icon: '⊞' },
|
||||
{ href: '/servers', key: 'nav.servers', icon: '⬡' },
|
||||
{ href: '/trackers', key: 'nav.trackers', icon: '◎' },
|
||||
{ href: '/templates', key: 'nav.templates', icon: '⎘' },
|
||||
{ href: '/targets', key: 'nav.targets', icon: '◇' },
|
||||
];
|
||||
|
||||
const isAuthPage = $derived(
|
||||
@@ -21,26 +24,52 @@
|
||||
);
|
||||
|
||||
onMount(async () => {
|
||||
initLocale();
|
||||
initTheme();
|
||||
await loadUser();
|
||||
if (!auth.user && !isAuthPage) {
|
||||
goto('/login');
|
||||
}
|
||||
});
|
||||
|
||||
function cycleTheme() {
|
||||
const order: Theme[] = ['light', 'dark', 'system'];
|
||||
const idx = order.indexOf(theme.current);
|
||||
setTheme(order[(idx + 1) % order.length]);
|
||||
}
|
||||
|
||||
function toggleLocale() {
|
||||
setLocale(getLocale() === 'en' ? 'ru' : 'en');
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if isAuthPage}
|
||||
{@render children()}
|
||||
{:else if auth.loading}
|
||||
<div class="min-h-screen flex items-center justify-center">
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">Loading...</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{t('common.loading')}</p>
|
||||
</div>
|
||||
{:else if auth.user}
|
||||
<div class="flex h-screen">
|
||||
<!-- Sidebar -->
|
||||
<aside class="w-56 border-r border-[var(--color-border)] bg-[var(--color-card)] flex flex-col">
|
||||
<div class="p-4 border-b border-[var(--color-border)]">
|
||||
<h1 class="text-base font-semibold tracking-tight">Immich Watcher</h1>
|
||||
<p class="text-xs text-[var(--color-muted-foreground)] mt-0.5">Album notifications</p>
|
||||
<div class="p-4 border-b border-[var(--color-border)] flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-base font-semibold tracking-tight">{t('app.name')}</h1>
|
||||
<p class="text-xs text-[var(--color-muted-foreground)] mt-0.5">{t('app.tagline')}</p>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<button onclick={toggleLocale}
|
||||
class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
|
||||
title={t('common.language')}>
|
||||
{getLocale().toUpperCase()}
|
||||
</button>
|
||||
<button onclick={cycleTheme}
|
||||
class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
|
||||
title={t('common.theme')}>
|
||||
{theme.resolved === 'dark' ? '🌙' : '☀️'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 p-2 space-y-0.5">
|
||||
{#each navItems as item}
|
||||
@@ -52,7 +81,7 @@
|
||||
: 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)]'}"
|
||||
>
|
||||
<span class="text-base">{item.icon}</span>
|
||||
{item.label}
|
||||
{t(item.key)}
|
||||
</a>
|
||||
{/each}
|
||||
{#if auth.isAdmin}
|
||||
@@ -64,7 +93,7 @@
|
||||
: 'text-[var(--color-muted-foreground)] hover:bg-[var(--color-accent)] hover:text-[var(--color-accent-foreground)]'}"
|
||||
>
|
||||
<span class="text-base">⊕</span>
|
||||
Users
|
||||
{t('nav.users')}
|
||||
</a>
|
||||
{/if}
|
||||
</nav>
|
||||
@@ -78,7 +107,7 @@
|
||||
onclick={logout}
|
||||
class="text-xs text-[var(--color-muted-foreground)] hover:text-[var(--color-foreground)] transition-colors"
|
||||
>
|
||||
Logout
|
||||
{t('nav.logout')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,39 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/api';
|
||||
import { t } from '$lib/i18n';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
|
||||
let status = $state<any>(null);
|
||||
|
||||
onMount(async () => {
|
||||
try { status = await api('/status'); } catch { /* ignore */ }
|
||||
});
|
||||
onMount(async () => { try { status = await api('/status'); } catch {} });
|
||||
</script>
|
||||
|
||||
<PageHeader title="Dashboard" description="Overview of your Immich Watcher setup" />
|
||||
<PageHeader title={t('dashboard.title')} description={t('dashboard.description')} />
|
||||
|
||||
{#if status}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
|
||||
<Card>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">Servers</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{t('dashboard.servers')}</p>
|
||||
<p class="text-3xl font-semibold mt-1">{status.servers}</p>
|
||||
</Card>
|
||||
<Card>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">Active Trackers</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{t('dashboard.activeTrackers')}</p>
|
||||
<p class="text-3xl font-semibold mt-1">{status.trackers.active}<span class="text-base font-normal text-[var(--color-muted-foreground)]"> / {status.trackers.total}</span></p>
|
||||
</Card>
|
||||
<Card>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">Targets</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{t('dashboard.targets')}</p>
|
||||
<p class="text-3xl font-semibold mt-1">{status.targets}</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<h3 class="text-lg font-medium mb-3">Recent Events</h3>
|
||||
<h3 class="text-lg font-medium mb-3">{t('dashboard.recentEvents')}</h3>
|
||||
{#if status.recent_events.length === 0}
|
||||
<Card>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">No events yet. Create a tracker to start monitoring albums.</p>
|
||||
</Card>
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('dashboard.noEvents')}</p></Card>
|
||||
{:else}
|
||||
<Card>
|
||||
<div class="divide-y divide-[var(--color-border)]">
|
||||
@@ -52,5 +48,5 @@
|
||||
</Card>
|
||||
{/if}
|
||||
{:else}
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">Loading...</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{t('dashboard.loading')}</p>
|
||||
{/if}
|
||||
|
||||
@@ -3,13 +3,18 @@
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/api';
|
||||
import { login } from '$lib/auth.svelte';
|
||||
import { t, initLocale, getLocale, setLocale } from '$lib/i18n';
|
||||
import { initTheme, getTheme, setTheme, type Theme } from '$lib/theme.svelte';
|
||||
|
||||
const theme = getTheme();
|
||||
let username = $state('');
|
||||
let password = $state('');
|
||||
let error = $state('');
|
||||
let submitting = $state(false);
|
||||
|
||||
onMount(async () => {
|
||||
initLocale();
|
||||
initTheme();
|
||||
try {
|
||||
const res = await api<{ needs_setup: boolean }>('/auth/needs-setup');
|
||||
if (res.needs_setup) goto('/setup');
|
||||
@@ -33,40 +38,37 @@
|
||||
<div class="min-h-screen flex items-center justify-center bg-[var(--color-background)]">
|
||||
<div class="w-full max-w-sm">
|
||||
<div class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg p-6 shadow-sm">
|
||||
<h1 class="text-xl font-semibold text-center mb-1">Immich Watcher</h1>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)] text-center mb-6">Sign in to your account</p>
|
||||
<div class="flex justify-end gap-1 mb-4">
|
||||
<button onclick={() => setLocale(getLocale() === 'en' ? 'ru' : 'en')}
|
||||
class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">
|
||||
{getLocale().toUpperCase()}
|
||||
</button>
|
||||
<button onclick={() => { const o: Theme[] = ['light','dark','system']; setTheme(o[(o.indexOf(theme.current)+1)%3]); }}
|
||||
class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">
|
||||
{theme.resolved === 'dark' ? '🌙' : '☀️'}
|
||||
</button>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold text-center mb-1">{t('app.name')}</h1>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)] text-center mb-6">{t('auth.signInTitle')}</p>
|
||||
|
||||
{#if error}
|
||||
<div class="bg-red-50 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>
|
||||
<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={handleSubmit} class="space-y-4">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium mb-1.5">Username</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
bind:value={username}
|
||||
required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]"
|
||||
/>
|
||||
<label for="username" class="block text-sm font-medium mb-1.5">{t('auth.username')}</label>
|
||||
<input id="username" type="text" bind:value={username} required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium mb-1.5">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
bind:value={password}
|
||||
required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]"
|
||||
/>
|
||||
<label for="password" class="block text-sm font-medium mb-1.5">{t('auth.password')}</label>
|
||||
<input id="password" type="password" bind:value={password} required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
class="w-full py-2 px-4 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Signing in...' : 'Sign in'}
|
||||
<button type="submit" disabled={submitting}
|
||||
class="w-full py-2 px-4 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50">
|
||||
{submitting ? t('auth.signingIn') : t('auth.signIn')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/api';
|
||||
import { t } from '$lib/i18n';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
|
||||
@@ -11,67 +12,55 @@
|
||||
let submitting = $state(false);
|
||||
|
||||
onMount(load);
|
||||
|
||||
async function load() {
|
||||
try { servers = await api('/servers'); } catch { /* ignore */ }
|
||||
}
|
||||
async function load() { try { servers = await api('/servers'); } catch {} }
|
||||
|
||||
async function create(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
submitting = true;
|
||||
e.preventDefault(); error = ''; submitting = true;
|
||||
try {
|
||||
await api('/servers', { method: 'POST', body: JSON.stringify(form) });
|
||||
form = { name: 'Immich', url: '', api_key: '' };
|
||||
showForm = false;
|
||||
await load();
|
||||
form = { name: 'Immich', url: '', api_key: '' }; showForm = false; await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
submitting = false;
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
if (!confirm('Delete this server?')) return;
|
||||
try {
|
||||
await api(`/servers/${id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
if (!confirm(t('servers.confirmDelete'))) return;
|
||||
try { await api(`/servers/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageHeader title="Servers" description="Manage Immich server connections">
|
||||
<PageHeader title={t('servers.title')} description={t('servers.description')}>
|
||||
<button onclick={() => showForm = !showForm}
|
||||
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 ? 'Cancel' : 'Add Server'}
|
||||
{showForm ? t('servers.cancel') : t('servers.addServer')}
|
||||
</button>
|
||||
</PageHeader>
|
||||
|
||||
{#if showForm}
|
||||
<Card class="mb-6">
|
||||
{#if error}
|
||||
<div class="bg-red-50 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>
|
||||
{/if}
|
||||
{#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={create} class="space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Name</label>
|
||||
<input bind:value={form.name} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<label for="srv-name" class="block text-sm font-medium mb-1">{t('servers.name')}</label>
|
||||
<input id="srv-name" bind:value={form.name} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Immich URL</label>
|
||||
<input bind:value={form.url} required placeholder="http://immich:2283" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<label for="srv-url" class="block text-sm font-medium mb-1">{t('servers.url')}</label>
|
||||
<input id="srv-url" bind:value={form.url} required placeholder={t('servers.urlPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">API Key</label>
|
||||
<input bind:value={form.api_key} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<label for="srv-key" class="block text-sm font-medium mb-1">{t('servers.apiKey')}</label>
|
||||
<input id="srv-key" bind:value={form.api_key} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<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 ? 'Connecting...' : 'Add Server'}
|
||||
{submitting ? t('servers.connecting') : t('servers.addServer')}
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
{#if servers.length === 0 && !showForm}
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">No servers configured yet.</p></Card>
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('servers.noServers')}</p></Card>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each servers as server}
|
||||
@@ -81,7 +70,7 @@
|
||||
<p class="font-medium">{server.name}</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{server.url}</p>
|
||||
</div>
|
||||
<button onclick={() => remove(server.id)} class="text-xs text-[var(--color-destructive)] hover:underline">Delete</button>
|
||||
<button onclick={() => remove(server.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('servers.delete')}</button>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
import { onMount } from 'svelte';
|
||||
import { setup } from '$lib/auth.svelte';
|
||||
import { t, initLocale } from '$lib/i18n';
|
||||
import { initTheme } from '$lib/theme.svelte';
|
||||
|
||||
let username = $state('admin');
|
||||
let password = $state('');
|
||||
@@ -8,24 +11,18 @@
|
||||
let error = $state('');
|
||||
let submitting = $state(false);
|
||||
|
||||
onMount(() => { initLocale(); initTheme(); });
|
||||
|
||||
async function handleSubmit(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
if (password !== confirmPassword) {
|
||||
error = 'Passwords do not match';
|
||||
return;
|
||||
}
|
||||
if (password.length < 6) {
|
||||
error = 'Password must be at least 6 characters';
|
||||
return;
|
||||
}
|
||||
if (password !== confirmPassword) { error = t('auth.passwordMismatch'); return; }
|
||||
if (password.length < 6) { error = t('auth.passwordTooShort'); return; }
|
||||
submitting = true;
|
||||
try {
|
||||
await setup(username, password);
|
||||
goto('/');
|
||||
} catch (err: any) {
|
||||
error = err.message || 'Setup failed';
|
||||
}
|
||||
} catch (err: any) { error = err.message || 'Setup failed'; }
|
||||
submitting = false;
|
||||
}
|
||||
</script>
|
||||
@@ -33,50 +30,25 @@
|
||||
<div class="min-h-screen flex items-center justify-center bg-[var(--color-background)]">
|
||||
<div class="w-full max-w-sm">
|
||||
<div class="bg-[var(--color-card)] border border-[var(--color-border)] rounded-lg p-6 shadow-sm">
|
||||
<h1 class="text-xl font-semibold text-center mb-1">Welcome</h1>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)] text-center mb-6">Create your admin account to get started</p>
|
||||
|
||||
{#if error}
|
||||
<div class="bg-red-50 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>
|
||||
{/if}
|
||||
|
||||
<h1 class="text-xl font-semibold text-center mb-1">{t('auth.setupTitle')}</h1>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)] text-center mb-6">{t('auth.setupDescription')}</p>
|
||||
{#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={handleSubmit} class="space-y-4">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium mb-1.5">Username</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
bind:value={username}
|
||||
required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]"
|
||||
/>
|
||||
<label for="username" class="block text-sm font-medium mb-1.5">{t('auth.username')}</label>
|
||||
<input id="username" type="text" bind:value={username} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium mb-1.5">Password</label>
|
||||
<input
|
||||
id="password"
|
||||
type="password"
|
||||
bind:value={password}
|
||||
required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]"
|
||||
/>
|
||||
<label for="password" class="block text-sm font-medium mb-1.5">{t('auth.password')}</label>
|
||||
<input id="password" type="password" bind:value={password} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="confirm" class="block text-sm font-medium mb-1.5">Confirm password</label>
|
||||
<input
|
||||
id="confirm"
|
||||
type="password"
|
||||
bind:value={confirmPassword}
|
||||
required
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] bg-[var(--color-background)]"
|
||||
/>
|
||||
<label for="confirm" class="block text-sm font-medium mb-1.5">{t('auth.confirmPassword')}</label>
|
||||
<input id="confirm" type="password" bind:value={confirmPassword} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
class="w-full py-2 px-4 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 transition-opacity disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Creating account...' : 'Create account'}
|
||||
<button type="submit" disabled={submitting}
|
||||
class="w-full py-2 px-4 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
|
||||
{submitting ? t('auth.creatingAccount') : t('auth.createAccount')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,100 +1,124 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/api';
|
||||
import { t } from '$lib/i18n';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
|
||||
let targets = $state<any[]>([]);
|
||||
let showForm = $state(false);
|
||||
let formType = $state<'telegram' | 'webhook'>('telegram');
|
||||
let form = $state({ name: '', bot_token: '', chat_id: '', url: '', headers: '' });
|
||||
let form = $state({ name: '', bot_token: '', chat_id: '', 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 error = $state('');
|
||||
let testResult = $state('');
|
||||
|
||||
onMount(load);
|
||||
|
||||
async function load() {
|
||||
try { targets = await api('/targets'); } catch { /* ignore */ }
|
||||
}
|
||||
async function load() { try { targets = await api('/targets'); } catch {} }
|
||||
|
||||
async function create(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
e.preventDefault(); error = '';
|
||||
try {
|
||||
const config = formType === 'telegram'
|
||||
? { bot_token: form.bot_token, chat_id: form.chat_id }
|
||||
: { url: form.url, headers: form.headers ? JSON.parse(form.headers) : {} };
|
||||
? { bot_token: form.bot_token, chat_id: form.chat_id,
|
||||
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: form.headers ? JSON.parse(form.headers) : {}, ai_captions: form.ai_captions };
|
||||
await api('/targets', { method: 'POST', body: JSON.stringify({ type: formType, name: form.name, config }) });
|
||||
showForm = false;
|
||||
form = { name: '', bot_token: '', chat_id: '', url: '', headers: '' };
|
||||
await load();
|
||||
showForm = false; await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
}
|
||||
|
||||
async function test(id: number) {
|
||||
testResult = 'Sending...';
|
||||
try {
|
||||
const res = await api(`/targets/${id}/test`, { method: 'POST' });
|
||||
testResult = res.success ? 'Test sent successfully!' : `Failed: ${res.error}`;
|
||||
} catch (err: any) { testResult = `Error: ${err.message}`; }
|
||||
testResult = '...';
|
||||
try { const res = await api(`/targets/${id}/test`, { method: 'POST' }); testResult = res.success ? t('targets.testSent') : `Failed: ${res.error}`; }
|
||||
catch (err: any) { testResult = `Error: ${err.message}`; }
|
||||
setTimeout(() => testResult = '', 5000);
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
if (!confirm('Delete this target?')) return;
|
||||
await api(`/targets/${id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
if (!confirm(t('targets.confirmDelete'))) return;
|
||||
try { await api(`/targets/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageHeader title="Targets" description="Notification destinations (Telegram, webhooks)">
|
||||
<button onclick={() => { showForm = !showForm; }}
|
||||
<PageHeader title={t('targets.title')} description={t('targets.description')}>
|
||||
<button onclick={() => showForm = !showForm}
|
||||
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 ? 'Cancel' : 'Add Target'}
|
||||
{showForm ? t('targets.cancel') : t('targets.addTarget')}
|
||||
</button>
|
||||
</PageHeader>
|
||||
|
||||
{#if testResult}
|
||||
<div class="mb-4 p-3 rounded-md text-sm {testResult.includes('success') ? 'bg-green-50 text-green-700' : 'bg-yellow-50 text-yellow-700'}">{testResult}</div>
|
||||
<div class="mb-4 p-3 rounded-md text-sm {testResult.includes(t('targets.testSent')) ? 'bg-[var(--color-success-bg)] text-[var(--color-success-fg)]' : 'bg-[var(--color-warning-bg)] text-[var(--color-warning-fg)]'}">{testResult}</div>
|
||||
{/if}
|
||||
|
||||
{#if showForm}
|
||||
<Card class="mb-6">
|
||||
{#if error}<div class="bg-red-50 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
||||
{#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={create} class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Type</label>
|
||||
<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 class="block text-sm font-medium mb-1">Name</label>
|
||||
<input bind:value={form.name} required placeholder="My notifications" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<label for="tgt-name" class="block text-sm font-medium mb-1">{t('targets.name')}</label>
|
||||
<input id="tgt-name" bind:value={form.name} required placeholder={t('targets.namePlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
{#if formType === 'telegram'}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Bot Token</label>
|
||||
<input bind:value={form.bot_token} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<label for="tgt-token" class="block text-sm font-medium mb-1">{t('targets.botToken')}</label>
|
||||
<input id="tgt-token" bind:value={form.bot_token} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Chat ID</label>
|
||||
<input 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)]" />
|
||||
<label for="tgt-chat" class="block text-sm font-medium mb-1">{t('targets.chatId')}</label>
|
||||
<input 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)]" />
|
||||
</div>
|
||||
|
||||
<!-- Telegram media settings -->
|
||||
<details class="border border-[var(--color-border)] rounded-md p-3">
|
||||
<summary class="text-sm font-medium cursor-pointer">{t('targets.telegramSettings')}</summary>
|
||||
<div class="grid grid-cols-2 gap-3 mt-3">
|
||||
<div>
|
||||
<label for="tgt-maxmedia" class="block text-xs mb-1">{t('targets.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 text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-groupsize" class="block text-xs mb-1">{t('targets.maxGroupSize')}</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 text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-delay" class="block text-xs mb-1">{t('targets.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 text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="tgt-maxsize" class="block text-xs mb-1">{t('targets.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 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>
|
||||
</details>
|
||||
{:else}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Webhook URL</label>
|
||||
<input 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)]" />
|
||||
<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>
|
||||
{/if}
|
||||
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">Add Target</button>
|
||||
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.ai_captions} /> {t('targets.aiCaptions')}</label>
|
||||
|
||||
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">{t('targets.create')}</button>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
{#if targets.length === 0 && !showForm}
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">No notification targets configured yet.</p></Card>
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('targets.noTargets')}</p></Card>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each targets as target}
|
||||
@@ -110,8 +134,8 @@
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick={() => test(target.id)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">Test</button>
|
||||
<button onclick={() => remove(target.id)} class="text-xs text-[var(--color-destructive)] hover:underline">Delete</button>
|
||||
<button onclick={() => test(target.id)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('targets.test')}</button>
|
||||
<button onclick={() => remove(target.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('targets.delete')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,113 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/api';
|
||||
import { t } from '$lib/i18n';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
|
||||
let templates = $state<any[]>([]);
|
||||
let showForm = $state(false);
|
||||
let form = $state({ name: '', body: '{{ added_count }} new item(s) added to album "{{ album_name }}".' });
|
||||
let form = $state({ name: '', body: '{{ added_count }} new item(s) added to album "{{ album_name }}".', event_type: '' });
|
||||
let preview = $state('');
|
||||
let previewId = $state<number | null>(null);
|
||||
let editing = $state<number | null>(null);
|
||||
let error = $state('');
|
||||
|
||||
onMount(load);
|
||||
|
||||
async function load() {
|
||||
try { templates = await api('/templates'); } catch { /* ignore */ }
|
||||
}
|
||||
async function load() { try { templates = await api('/templates'); } catch {} }
|
||||
|
||||
async function save(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
e.preventDefault(); error = '';
|
||||
try {
|
||||
if (editing) {
|
||||
await api(`/templates/${editing}`, { method: 'PUT', body: JSON.stringify(form) });
|
||||
} else {
|
||||
await api('/templates', { method: 'POST', body: JSON.stringify(form) });
|
||||
}
|
||||
showForm = false;
|
||||
editing = null;
|
||||
await load();
|
||||
if (editing) { await api(`/templates/${editing}`, { method: 'PUT', body: JSON.stringify(form) }); }
|
||||
else { await api('/templates', { method: 'POST', body: JSON.stringify(form) }); }
|
||||
showForm = false; editing = null; await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
}
|
||||
|
||||
async function doPreview(id: number) {
|
||||
previewId = id;
|
||||
try {
|
||||
const res = await api<{ rendered: string }>(`/templates/${id}/preview`, { method: 'POST' });
|
||||
preview = res.rendered;
|
||||
} catch (err: any) { preview = `Error: ${err.message}`; }
|
||||
try { const res = await api<{ rendered: string }>(`/templates/${id}/preview`, { method: 'POST' }); preview = res.rendered; }
|
||||
catch (err: any) { preview = `Error: ${err.message}`; }
|
||||
}
|
||||
|
||||
function edit(t: any) {
|
||||
form = { name: t.name, body: t.body };
|
||||
editing = t.id;
|
||||
showForm = true;
|
||||
preview = '';
|
||||
}
|
||||
|
||||
function edit(tmpl: any) { form = { name: tmpl.name, body: tmpl.body, event_type: tmpl.event_type || '' }; editing = tmpl.id; showForm = true; preview = ''; }
|
||||
async function remove(id: number) {
|
||||
if (!confirm('Delete this template?')) return;
|
||||
try {
|
||||
await api(`/templates/${id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
if (!confirm(t('templates.confirmDelete'))) return;
|
||||
try { await api(`/templates/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageHeader title="Templates" description="Jinja2 message templates for notifications">
|
||||
<button onclick={() => { showForm = !showForm; editing = null; form = { name: '', body: '{{ added_count }} new item(s) added to album "{{ album_name }}".' }; preview = ''; }}
|
||||
<PageHeader title={t('templates.title')} description={t('templates.description')}>
|
||||
<button onclick={() => { showForm = !showForm; editing = null; form = { name: '', body: '{{ added_count }} new item(s) added to album "{{ album_name }}".', event_type: '' }; preview = ''; }}
|
||||
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 ? 'Cancel' : 'New Template'}
|
||||
{showForm ? t('templates.cancel') : t('templates.newTemplate')}
|
||||
</button>
|
||||
</PageHeader>
|
||||
|
||||
{#if showForm}
|
||||
<Card class="mb-6">
|
||||
{#if error}<div class="bg-red-50 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
||||
{#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>
|
||||
<label class="block text-sm font-medium mb-1">Name</label>
|
||||
<input bind:value={form.name} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="tmpl-name" class="block text-sm font-medium mb-1">{t('templates.name')}</label>
|
||||
<input id="tmpl-name" bind:value={form.name} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="tmpl-event" class="block text-sm font-medium mb-1">{t('templates.eventType')}</label>
|
||||
<select id="tmpl-event" bind:value={form.event_type} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
<option value="">{t('templates.allEvents')}</option>
|
||||
<option value="assets_added">{t('templates.assetsAdded')}</option>
|
||||
<option value="assets_removed">{t('templates.assetsRemoved')}</option>
|
||||
<option value="album_renamed">{t('templates.albumRenamed')}</option>
|
||||
<option value="album_deleted">{t('templates.albumDeleted')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Template Body (Jinja2)</label>
|
||||
<textarea bind:value={form.body} rows={8}
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] font-mono"
|
||||
></textarea>
|
||||
<label for="tmpl-body" class="block text-sm font-medium mb-1">{t('templates.body')}</label>
|
||||
<textarea id="tmpl-body" bind:value={form.body} rows={8}
|
||||
class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] font-mono"></textarea>
|
||||
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">
|
||||
Variables: {'{{ album_name }}'}, {'{{ added_count }}'}, {'{{ removed_count }}'}, {'{{ people }}'}, {'{{ change_type }}'}, {'{{ album_url }}'}, {'{{ added_assets }}'}
|
||||
{t('templates.variables')}: {'{{ album_name }}'}, {'{{ added_count }}'}, {'{{ removed_count }}'}, {'{{ people }}'}, {'{{ change_type }}'}, {'{{ album_url }}'}, {'{{ added_assets }}'}, {'{{ old_name }}'}, {'{{ new_name }}'}
|
||||
</p>
|
||||
</div>
|
||||
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
|
||||
{editing ? 'Update' : 'Create'} Template
|
||||
{editing ? t('templates.update') : t('templates.create')}
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
{#if templates.length === 0 && !showForm}
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">No templates yet. A default template will be used if none is configured.</p></Card>
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('templates.noTemplates')}</p></Card>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each templates as template}
|
||||
{#each templates as tmpl}
|
||||
<Card>
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<p class="font-medium">{template.name}</p>
|
||||
<pre class="text-xs text-[var(--color-muted-foreground)] mt-1 whitespace-pre-wrap font-mono bg-[var(--color-muted)] rounded p-2">{template.body.slice(0, 200)}{template.body.length > 200 ? '...' : ''}</pre>
|
||||
{#if preview && previewId === template.id && !showForm}
|
||||
<div class="mt-2 p-2 bg-green-50 rounded text-sm">
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="font-medium">{tmpl.name}</p>
|
||||
{#if tmpl.event_type}
|
||||
<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{tmpl.event_type}</span>
|
||||
{/if}
|
||||
</div>
|
||||
<pre class="text-xs text-[var(--color-muted-foreground)] mt-1 whitespace-pre-wrap font-mono bg-[var(--color-muted)] rounded p-2">{tmpl.body.slice(0, 200)}{tmpl.body.length > 200 ? '...' : ''}</pre>
|
||||
{#if preview && previewId === tmpl.id && !showForm}
|
||||
<div class="mt-2 p-2 bg-[var(--color-success-bg)] rounded text-sm">
|
||||
<pre class="whitespace-pre-wrap">{preview}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="flex items-center gap-3 ml-4">
|
||||
<button onclick={() => doPreview(template.id)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">Preview</button>
|
||||
<button onclick={() => edit(template)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">Edit</button>
|
||||
<button onclick={() => remove(template.id)} class="text-xs text-[var(--color-destructive)] hover:underline">Delete</button>
|
||||
<button onclick={() => doPreview(tmpl.id)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templates.preview')}</button>
|
||||
<button onclick={() => edit(tmpl)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templates.edit')}</button>
|
||||
<button onclick={() => remove(tmpl.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('templates.delete')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/api';
|
||||
import { t } from '$lib/i18n';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
|
||||
@@ -9,92 +10,61 @@
|
||||
let targets = $state<any[]>([]);
|
||||
let albums = $state<any[]>([]);
|
||||
let showForm = $state(false);
|
||||
let form = $state({ name: '', server_id: 0, album_ids: [] as string[], event_types: ['assets_added'], target_ids: [] as number[], scan_interval: 60 });
|
||||
let form = $state({
|
||||
name: '', server_id: 0, album_ids: [] as string[], event_types: ['assets_added'],
|
||||
target_ids: [] as number[], scan_interval: 60,
|
||||
track_images: true, track_videos: true, notify_favorites_only: false,
|
||||
include_people: true, include_asset_details: false,
|
||||
max_assets_to_show: 5, assets_order_by: 'none', assets_order: 'descending',
|
||||
});
|
||||
let error = $state('');
|
||||
|
||||
onMount(load);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
[trackers, servers, targets] = await Promise.all([
|
||||
api('/trackers'), api('/servers'), api('/targets')
|
||||
]);
|
||||
} catch { /* handled by api redirect on 401 */ }
|
||||
}
|
||||
|
||||
async function loadAlbums() {
|
||||
if (!form.server_id) return;
|
||||
albums = await api(`/servers/${form.server_id}/albums`);
|
||||
try { [trackers, servers, targets] = await Promise.all([api('/trackers'), api('/servers'), api('/targets')]); } catch {}
|
||||
}
|
||||
async function loadAlbums() { if (!form.server_id) return; albums = await api(`/servers/${form.server_id}/albums`); }
|
||||
|
||||
async function create(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
try {
|
||||
await api('/trackers', { method: 'POST', body: JSON.stringify(form) });
|
||||
showForm = false;
|
||||
await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
e.preventDefault(); error = '';
|
||||
try { await api('/trackers', { method: 'POST', body: JSON.stringify(form) }); showForm = false; await load(); } catch (err: any) { error = err.message; }
|
||||
}
|
||||
|
||||
async function toggle(tracker: any) {
|
||||
await api(`/trackers/${tracker.id}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ enabled: !tracker.enabled })
|
||||
});
|
||||
await load();
|
||||
await api(`/trackers/${tracker.id}`, { method: 'PUT', body: JSON.stringify({ enabled: !tracker.enabled }) }); await load();
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
if (!confirm('Delete this tracker?')) return;
|
||||
try {
|
||||
await api(`/trackers/${id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
}
|
||||
|
||||
function toggleAlbum(albumId: string) {
|
||||
if (form.album_ids.includes(albumId)) {
|
||||
form.album_ids = form.album_ids.filter(id => id !== albumId);
|
||||
} else {
|
||||
form.album_ids = [...form.album_ids, albumId];
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTarget(targetId: number) {
|
||||
if (form.target_ids.includes(targetId)) {
|
||||
form.target_ids = form.target_ids.filter(id => id !== targetId);
|
||||
} else {
|
||||
form.target_ids = [...form.target_ids, targetId];
|
||||
}
|
||||
if (!confirm(t('trackers.confirmDelete'))) return;
|
||||
try { await api(`/trackers/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
|
||||
}
|
||||
function toggleAlbum(albumId: string) { form.album_ids = form.album_ids.includes(albumId) ? form.album_ids.filter(id => id !== albumId) : [...form.album_ids, albumId]; }
|
||||
function toggleTarget(targetId: number) { form.target_ids = form.target_ids.includes(targetId) ? form.target_ids.filter(id => id !== targetId) : [...form.target_ids, targetId]; }
|
||||
</script>
|
||||
|
||||
<PageHeader title="Trackers" description="Monitor albums for changes">
|
||||
<button onclick={() => { showForm = !showForm; form = { name: '', server_id: 0, album_ids: [], event_types: ['assets_added'], target_ids: [], scan_interval: 60 }; }}
|
||||
<PageHeader title={t('trackers.title')} description={t('trackers.description')}>
|
||||
<button onclick={() => { showForm = !showForm; form = { name: '', server_id: 0, album_ids: [], event_types: ['assets_added'], target_ids: [], scan_interval: 60, track_images: true, track_videos: true, notify_favorites_only: false, include_people: true, include_asset_details: false, max_assets_to_show: 5, assets_order_by: 'none', assets_order: 'descending' }; }}
|
||||
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 ? 'Cancel' : 'New Tracker'}
|
||||
{showForm ? t('trackers.cancel') : t('trackers.newTracker')}
|
||||
</button>
|
||||
</PageHeader>
|
||||
|
||||
{#if showForm}
|
||||
<Card class="mb-6">
|
||||
{#if error}<div class="bg-red-50 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
||||
{#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={create} class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Name</label>
|
||||
<input bind:value={form.name} required placeholder="Family photos tracker" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<label for="trk-name" class="block text-sm font-medium mb-1">{t('trackers.name')}</label>
|
||||
<input id="trk-name" bind:value={form.name} required placeholder={t('trackers.namePlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Server</label>
|
||||
<select bind:value={form.server_id} onchange={loadAlbums} 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>Select server...</option>
|
||||
<label for="trk-server" class="block text-sm font-medium mb-1">{t('trackers.server')}</label>
|
||||
<select id="trk-server" bind:value={form.server_id} onchange={loadAlbums} 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('trackers.selectServer')}</option>
|
||||
{#each servers as s}<option value={s.id}>{s.name}</option>{/each}
|
||||
</select>
|
||||
</div>
|
||||
{#if albums.length > 0}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Albums</label>
|
||||
<label class="block text-sm font-medium mb-1">{t('trackers.albums')}</label>
|
||||
<div class="max-h-48 overflow-y-auto border border-[var(--color-border)] rounded-md p-2 space-y-1">
|
||||
{#each albums as album}
|
||||
<label class="flex items-center gap-2 text-sm cursor-pointer hover:bg-[var(--color-muted)] px-2 py-1 rounded">
|
||||
@@ -106,7 +76,7 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Event Types</label>
|
||||
<label class="block text-sm font-medium mb-1">{t('trackers.eventTypes')}</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each ['assets_added', 'assets_removed', 'album_renamed', 'album_sharing_changed', 'changed'] as evt}
|
||||
<label class="flex items-center gap-1 text-sm">
|
||||
@@ -117,30 +87,69 @@
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Asset filtering -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_images} /> {t('trackers.trackImages')}</label>
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_videos} /> {t('trackers.trackVideos')}</label>
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.notify_favorites_only} /> {t('trackers.favoritesOnly')}</label>
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.include_people} /> {t('trackers.includePeople')}</label>
|
||||
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.include_asset_details} /> {t('trackers.includeAssetDetails')}</label>
|
||||
</div>
|
||||
|
||||
<!-- Sorting -->
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="trk-sort" class="block text-sm font-medium mb-1">{t('trackers.sortBy')}</label>
|
||||
<select id="trk-sort" bind:value={form.assets_order_by} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
<option value="none">{t('trackers.sortNone')}</option>
|
||||
<option value="date">{t('trackers.sortDate')}</option>
|
||||
<option value="rating">{t('trackers.sortRating')}</option>
|
||||
<option value="name">{t('trackers.sortName')}</option>
|
||||
<option value="random">{t('trackers.sortRandom')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="trk-order" class="block text-sm font-medium mb-1">{t('trackers.sortOrder')}</label>
|
||||
<select id="trk-order" bind:value={form.assets_order} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
<option value="descending">{t('trackers.descending')}</option>
|
||||
<option value="ascending">{t('trackers.ascending')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label for="trk-max" class="block text-sm font-medium mb-1">{t('trackers.maxAssetsToShow')}</label>
|
||||
<input id="trk-max" type="number" bind:value={form.max_assets_to_show} min="0" max="50" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="trk-interval" class="block text-sm font-medium mb-1">{t('trackers.scanInterval')}</label>
|
||||
<input id="trk-interval" type="number" bind:value={form.scan_interval} min="10" max="3600" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if targets.length > 0}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Notification Targets</label>
|
||||
<label class="block text-sm font-medium mb-1">{t('trackers.notificationTargets')}</label>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
{#each targets as t}
|
||||
{#each targets as tgt}
|
||||
<label class="flex items-center gap-1 text-sm">
|
||||
<input type="checkbox" checked={form.target_ids.includes(t.id)} onchange={() => toggleTarget(t.id)} />
|
||||
{t.name} ({t.type})
|
||||
<input type="checkbox" checked={form.target_ids.includes(tgt.id)} onchange={() => toggleTarget(tgt.id)} />
|
||||
{tgt.name} ({tgt.type})
|
||||
</label>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Scan Interval (seconds)</label>
|
||||
<input type="number" bind:value={form.scan_interval} min="10" max="3600" class="w-32 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">Create Tracker</button>
|
||||
|
||||
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">{t('trackers.createTracker')}</button>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
|
||||
{#if trackers.length === 0 && !showForm}
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">No trackers yet. Add a server first, then create a tracker.</p></Card>
|
||||
<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('trackers.noTrackers')}</p></Card>
|
||||
{:else}
|
||||
<div class="space-y-3">
|
||||
{#each trackers as tracker}
|
||||
@@ -149,17 +158,17 @@
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="font-medium">{tracker.name}</p>
|
||||
<span class="text-xs px-1.5 py-0.5 rounded {tracker.enabled ? 'bg-green-100 text-green-700' : 'bg-[var(--color-muted)] text-[var(--color-muted-foreground)]'}">
|
||||
{tracker.enabled ? 'Active' : 'Paused'}
|
||||
<span class="text-xs px-1.5 py-0.5 rounded {tracker.enabled ? 'bg-[var(--color-success-bg)] text-[var(--color-success-fg)]' : 'bg-[var(--color-muted)] text-[var(--color-muted-foreground)]'}">
|
||||
{tracker.enabled ? t('trackers.active') : t('trackers.paused')}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{tracker.album_ids.length} album(s) · every {tracker.scan_interval}s · {tracker.event_types.join(', ')}</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{tracker.album_ids.length} {t('trackers.albums_count')} · {t('trackers.every')} {tracker.scan_interval}s · {tracker.event_types.join(', ')}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button onclick={() => toggle(tracker)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">
|
||||
{tracker.enabled ? 'Pause' : 'Resume'}
|
||||
{tracker.enabled ? t('trackers.pause') : t('trackers.resume')}
|
||||
</button>
|
||||
<button onclick={() => remove(tracker.id)} class="text-xs text-[var(--color-destructive)] hover:underline">Delete</button>
|
||||
<button onclick={() => remove(tracker.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('trackers.delete')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { api } from '$lib/api';
|
||||
import { t } from '$lib/i18n';
|
||||
import { getAuth } from '$lib/auth.svelte';
|
||||
import PageHeader from '$lib/components/PageHeader.svelte';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
@@ -12,58 +13,46 @@
|
||||
let error = $state('');
|
||||
|
||||
onMount(load);
|
||||
|
||||
async function load() {
|
||||
try { users = await api('/users'); } catch { /* ignore */ }
|
||||
}
|
||||
async function load() { try { users = await api('/users'); } catch {} }
|
||||
|
||||
async function create(e: SubmitEvent) {
|
||||
e.preventDefault();
|
||||
error = '';
|
||||
try {
|
||||
await api('/users', { method: 'POST', body: JSON.stringify(form) });
|
||||
form = { username: '', password: '', role: 'user' };
|
||||
showForm = false;
|
||||
await load();
|
||||
} catch (err: any) { error = err.message; }
|
||||
e.preventDefault(); error = '';
|
||||
try { await api('/users', { method: 'POST', body: JSON.stringify(form) }); form = { username: '', password: '', role: 'user' }; showForm = false; await load(); }
|
||||
catch (err: any) { error = err.message; }
|
||||
}
|
||||
|
||||
async function remove(id: number) {
|
||||
if (!confirm('Delete this user?')) return;
|
||||
try {
|
||||
await api(`/users/${id}`, { method: 'DELETE' });
|
||||
await load();
|
||||
} catch (err: any) { alert(err.message); }
|
||||
if (!confirm(t('users.confirmDelete'))) return;
|
||||
try { await api(`/users/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { alert(err.message); }
|
||||
}
|
||||
</script>
|
||||
|
||||
<PageHeader title="Users" description="Manage user accounts (admin only)">
|
||||
<PageHeader title={t('users.title')} description={t('users.description')}>
|
||||
<button onclick={() => showForm = !showForm}
|
||||
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 ? 'Cancel' : 'Add User'}
|
||||
{showForm ? t('users.cancel') : t('users.addUser')}
|
||||
</button>
|
||||
</PageHeader>
|
||||
|
||||
{#if showForm}
|
||||
<Card class="mb-6">
|
||||
{#if error}<div class="bg-red-50 text-red-700 text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
||||
{#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={create} class="space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Username</label>
|
||||
<input bind:value={form.username} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<label for="usr-name" class="block text-sm font-medium mb-1">{t('users.username')}</label>
|
||||
<input id="usr-name" bind:value={form.username} required class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Password</label>
|
||||
<input bind:value={form.password} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
<label for="usr-pass" class="block text-sm font-medium mb-1">{t('users.password')}</label>
|
||||
<input id="usr-pass" bind:value={form.password} required type="password" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-1">Role</label>
|
||||
<select bind:value={form.role} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
<label for="usr-role" class="block text-sm font-medium mb-1">{t('users.role')}</label>
|
||||
<select id="usr-role" bind:value={form.role} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
|
||||
<option value="user">{t('users.roleUser')}</option>
|
||||
<option value="admin">{t('users.roleAdmin')}</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">Create User</button>
|
||||
<button type="submit" class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">{t('users.create')}</button>
|
||||
</form>
|
||||
</Card>
|
||||
{/if}
|
||||
@@ -74,10 +63,10 @@
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-medium">{user.username}</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{user.role} · joined {new Date(user.created_at).toLocaleDateString()}</p>
|
||||
<p class="text-sm text-[var(--color-muted-foreground)]">{user.role} · {t('users.joined')} {new Date(user.created_at).toLocaleDateString()}</p>
|
||||
</div>
|
||||
{#if user.id !== auth.user?.id}
|
||||
<button onclick={() => remove(user.id)} class="text-xs text-[var(--color-destructive)] hover:underline">Delete</button>
|
||||
<button onclick={() => remove(user.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('users.delete')}</button>
|
||||
{/if}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
Reference in New Issue
Block a user