alexei.dolgolyov
5a0b0b78f6
Some checks failed
Validate / Hassfest (push) Has been cancelled
- Install @mdi/js (~7000 Material Design Icons) - IconPicker component: dropdown with search, popular icons grid, clear option. Stores icon name as string (e.g. "mdiCamera") - MdiIcon component: renders SVG from icon name - Backend: add `icon` field to ImmichServer, TelegramBot, TrackingConfig, TemplateConfig, NotificationTarget, AlbumTracker - All 6 entity pages: icon picker next to name input in create/edit forms, icon displayed on entity cards Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
213 lines
13 KiB
Svelte
213 lines
13 KiB
Svelte
<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';
|
|
import Loading from '$lib/components/Loading.svelte';
|
|
import IconPicker from '$lib/components/IconPicker.svelte';
|
|
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
|
|
|
let configs = $state<any[]>([]);
|
|
let loaded = $state(false);
|
|
let showForm = $state(false);
|
|
let editing = $state<number | null>(null);
|
|
let error = $state('');
|
|
|
|
const defaultForm = () => ({
|
|
name: '', icon: '', track_assets_added: true, track_assets_removed: false,
|
|
track_album_renamed: true, track_album_deleted: true,
|
|
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',
|
|
periodic_enabled: false, periodic_interval_days: 1, periodic_start_date: '2025-01-01', periodic_times: '12:00',
|
|
scheduled_enabled: false, scheduled_times: '09:00', scheduled_album_mode: 'per_album',
|
|
scheduled_limit: 10, scheduled_favorite_only: false, scheduled_asset_type: 'all',
|
|
scheduled_min_rating: 0, scheduled_order_by: 'random', scheduled_order: 'descending',
|
|
memory_enabled: false, memory_times: '09:00', memory_album_mode: 'combined',
|
|
memory_limit: 10, memory_favorite_only: false, memory_asset_type: 'all', memory_min_rating: 0,
|
|
});
|
|
let form = $state(defaultForm());
|
|
|
|
onMount(load);
|
|
async function load() { try { configs = await api('/tracking-configs'); } catch {} finally { loaded = true; } }
|
|
|
|
function openNew() { form = defaultForm(); editing = null; showForm = true; }
|
|
function edit(c: any) {
|
|
form = { ...defaultForm(), ...c };
|
|
editing = c.id; showForm = true;
|
|
}
|
|
|
|
async function save(e: SubmitEvent) {
|
|
e.preventDefault(); error = '';
|
|
try {
|
|
if (editing) await api(`/tracking-configs/${editing}`, { method: 'PUT', body: JSON.stringify(form) });
|
|
else await api('/tracking-configs', { method: 'POST', body: JSON.stringify(form) });
|
|
showForm = false; editing = null; await load();
|
|
} catch (err: any) { error = err.message; }
|
|
}
|
|
|
|
async function remove(id: number) {
|
|
if (!confirm(t('common.delete') + '?')) return;
|
|
try { await api(`/tracking-configs/${id}`, { method: 'DELETE' }); await load(); } catch (err: any) { error = err.message; }
|
|
}
|
|
</script>
|
|
|
|
<PageHeader title={t('trackingConfig.title')} description={t('trackingConfig.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('common.cancel') : t('trackingConfig.newConfig')}
|
|
</button>
|
|
</PageHeader>
|
|
|
|
{#if !loaded}<Loading />{:else}
|
|
|
|
{#if showForm}
|
|
<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-5">
|
|
<div>
|
|
<label for="tc-name" class="block text-sm font-medium mb-1">{t('trackingConfig.name')}</label>
|
|
<div class="flex gap-2">
|
|
<IconPicker value={form.icon} onselect={(v) => form.icon = v} />
|
|
<input id="tc-name" bind:value={form.name} required placeholder={t('trackingConfig.namePlaceholder')}
|
|
class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Event tracking -->
|
|
<fieldset class="border border-[var(--color-border)] rounded-md p-3">
|
|
<legend class="text-sm font-medium px-1">{t('trackingConfig.eventTracking')}</legend>
|
|
<div class="grid grid-cols-2 gap-2 mt-2">
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_assets_added} /> {t('trackingConfig.assetsAdded')}</label>
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_assets_removed} /> {t('trackingConfig.assetsRemoved')}</label>
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_album_renamed} /> {t('trackingConfig.albumRenamed')}</label>
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_album_deleted} /> {t('trackingConfig.albumDeleted')}</label>
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_images} /> {t('trackingConfig.trackImages')}</label>
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.track_videos} /> {t('trackingConfig.trackVideos')}</label>
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.notify_favorites_only} /> {t('trackingConfig.favoritesOnly')}</label>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Asset display -->
|
|
<fieldset class="border border-[var(--color-border)] rounded-md p-3">
|
|
<legend class="text-sm font-medium px-1">{t('trackingConfig.assetDisplay')}</legend>
|
|
<div class="grid grid-cols-2 gap-2 mt-2">
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.include_people} /> {t('trackingConfig.includePeople')}</label>
|
|
<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.include_asset_details} /> {t('trackingConfig.includeDetails')}</label>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-3 mt-3">
|
|
<div>
|
|
<label for="tc-max" class="block text-xs mb-1">{t('trackingConfig.maxAssets')}</label>
|
|
<input id="tc-max" type="number" bind:value={form.max_assets_to_show} 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="tc-sort" class="block text-xs mb-1">{t('trackingConfig.sortBy')}</label>
|
|
<select id="tc-sort" bind:value={form.assets_order_by} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
|
|
<option value="none">None</option><option value="date">Date</option><option value="rating">Rating</option><option value="name">Name</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="tc-order" class="block text-xs mb-1">{t('trackingConfig.sortOrder')}</label>
|
|
<select id="tc-order" bind:value={form.assets_order} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
|
|
<option value="descending">Desc</option><option value="ascending">Asc</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<!-- Periodic summary -->
|
|
<fieldset class="border border-[var(--color-border)] rounded-md p-3">
|
|
<legend class="text-sm font-medium px-1">{t('trackingConfig.periodicSummary')}</legend>
|
|
<label class="flex items-center gap-2 text-sm mt-1"><input type="checkbox" bind:checked={form.periodic_enabled} /> {t('trackingConfig.enabled')}</label>
|
|
{#if form.periodic_enabled}
|
|
<div class="grid grid-cols-3 gap-3 mt-3">
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.intervalDays')}</label><input type="number" bind:value={form.periodic_interval_days} min="1" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.startDate')}</label><input type="date" bind:value={form.periodic_start_date} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.times')}</label><input bind:value={form.periodic_times} placeholder="12:00" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
|
|
</div>
|
|
{/if}
|
|
</fieldset>
|
|
|
|
<!-- Scheduled assets -->
|
|
<fieldset class="border border-[var(--color-border)] rounded-md p-3">
|
|
<legend class="text-sm font-medium px-1">{t('trackingConfig.scheduledAssets')}</legend>
|
|
<label class="flex items-center gap-2 text-sm mt-1"><input type="checkbox" bind:checked={form.scheduled_enabled} /> {t('trackingConfig.enabled')}</label>
|
|
{#if form.scheduled_enabled}
|
|
<div class="grid grid-cols-3 gap-3 mt-3">
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.times')}</label><input bind:value={form.scheduled_times} placeholder="09:00" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.albumMode')}</label>
|
|
<select bind:value={form.scheduled_album_mode} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
|
|
<option value="per_album">Per album</option><option value="combined">Combined</option><option value="random">Random</option>
|
|
</select></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.limit')}</label><input type="number" bind:value={form.scheduled_limit} min="1" max="100" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.assetType')}</label>
|
|
<select bind:value={form.scheduled_asset_type} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
|
|
<option value="all">All</option><option value="photo">Photo</option><option value="video">Video</option>
|
|
</select></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.minRating')}</label><input type="number" bind:value={form.scheduled_min_rating} min="0" max="5" 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"><input type="checkbox" bind:checked={form.scheduled_favorite_only} /> {t('trackingConfig.favoritesOnly')}</label>
|
|
</div>
|
|
{/if}
|
|
</fieldset>
|
|
|
|
<!-- Memory mode -->
|
|
<fieldset class="border border-[var(--color-border)] rounded-md p-3">
|
|
<legend class="text-sm font-medium px-1">{t('trackingConfig.memoryMode')}</legend>
|
|
<label class="flex items-center gap-2 text-sm mt-1"><input type="checkbox" bind:checked={form.memory_enabled} /> {t('trackingConfig.enabled')}</label>
|
|
{#if form.memory_enabled}
|
|
<div class="grid grid-cols-3 gap-3 mt-3">
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.times')}</label><input bind:value={form.memory_times} placeholder="09:00" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.albumMode')}</label>
|
|
<select bind:value={form.memory_album_mode} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
|
|
<option value="per_album">Per album</option><option value="combined">Combined</option><option value="random">Random</option>
|
|
</select></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.limit')}</label><input type="number" bind:value={form.memory_limit} min="1" max="100" class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]" /></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.assetType')}</label>
|
|
<select bind:value={form.memory_asset_type} class="w-full px-2 py-1 border border-[var(--color-border)] rounded text-sm bg-[var(--color-background)]">
|
|
<option value="all">All</option><option value="photo">Photo</option><option value="video">Video</option>
|
|
</select></div>
|
|
<div><label class="block text-xs mb-1">{t('trackingConfig.minRating')}</label><input type="number" bind:value={form.memory_min_rating} min="0" max="5" 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"><input type="checkbox" bind:checked={form.memory_favorite_only} /> {t('trackingConfig.favoritesOnly')}</label>
|
|
</div>
|
|
{/if}
|
|
</fieldset>
|
|
|
|
<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 ? t('common.save') : t('common.create')}
|
|
</button>
|
|
</form>
|
|
</Card>
|
|
{/if}
|
|
|
|
{#if configs.length === 0 && !showForm}
|
|
<Card><p class="text-sm text-[var(--color-muted-foreground)]">{t('trackingConfig.noConfigs')}</p></Card>
|
|
{:else}
|
|
<div class="space-y-3">
|
|
{#each configs as config}
|
|
<Card>
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
{#if config.icon}<MdiIcon name={config.icon} />{/if}
|
|
<p class="font-medium">{config.name}</p>
|
|
</div>
|
|
<p class="text-sm text-[var(--color-muted-foreground)]">
|
|
{[config.track_assets_added && 'added', config.track_assets_removed && 'removed', config.track_album_renamed && 'renamed', config.track_album_deleted && 'deleted'].filter(Boolean).join(', ')}
|
|
{config.periodic_enabled ? ' · periodic' : ''}
|
|
{config.scheduled_enabled ? ' · scheduled' : ''}
|
|
{config.memory_enabled ? ' · memory' : ''}
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<button onclick={() => edit(config)} class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('common.edit')}</button>
|
|
<button onclick={() => remove(config.id)} class="text-xs text-[var(--color-destructive)] hover:underline">{t('common.delete')}</button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{/if}
|