alexei.dolgolyov
b170c2b792
- Auto-refresh ticker is now silent: skips ``eventsLoading`` so the
loading placeholder no longer flashes, uses ``(event.id)`` key on
the events ``{#each}`` so unchanged rows reuse their DOM nodes, and
short-circuits the array reassignment when the visible page is
identical to what we already rendered. No-op refreshes leave the
list completely untouched.
- ``PageHeader`` crumbs (Routing · Notification, Operators · Bots, …)
were hard-coded literals. Moved to a new ``crumbs`` i18n namespace
with 9 keys; updated all 15 call sites to ``t('crumbs.*')`` so they
switch with the language.
- Tracker form's Immich feature-discovery banner now exposes both
``Open Tracking Config`` and ``Open Template Config``. Added the
``?edit=<id>`` auto-open hook to ``/template-configs`` (mirrors the
existing one on ``/tracking-configs``) so the new link lands users
directly on the editor.
256 lines
12 KiB
Svelte
256 lines
12 KiB
Svelte
<script lang="ts">
|
|
import { slide } from 'svelte/transition';
|
|
import { t } from '$lib/i18n';
|
|
import Card from '$lib/components/Card.svelte';
|
|
import IconPicker from '$lib/components/IconPicker.svelte';
|
|
import Hint from '$lib/components/Hint.svelte';
|
|
import MdiIcon from '$lib/components/MdiIcon.svelte';
|
|
import EntitySelect from '$lib/components/EntitySelect.svelte';
|
|
import MultiEntitySelect from '$lib/components/MultiEntitySelect.svelte';
|
|
import { getDescriptor } from '$lib/providers';
|
|
|
|
interface Props {
|
|
form: {
|
|
name: string;
|
|
icon: string;
|
|
provider_id: number;
|
|
collection_ids: string[];
|
|
scan_interval: number;
|
|
adaptive_max_skip: number | null;
|
|
default_tracking_config_id: number;
|
|
default_template_config_id: number;
|
|
filters: Record<string, any>;
|
|
};
|
|
providerItems: { value: number; label: string; icon: string; desc: string }[];
|
|
collections: any[];
|
|
users?: { id: string; name: string }[];
|
|
collectionFilter?: string;
|
|
trackingConfigItems?: { value: number; label: string; icon: string }[];
|
|
templateConfigItems?: { value: number; label: string; icon: string }[];
|
|
editing: number | null;
|
|
submitting: boolean;
|
|
linkCheckLoading: boolean;
|
|
error: string;
|
|
providerType: string;
|
|
onsave: (e: SubmitEvent) => void;
|
|
ontoggleCollection?: (collectionId: string) => void;
|
|
formatDate?: (dateStr: string) => string;
|
|
onnameinput?: () => void;
|
|
}
|
|
|
|
let {
|
|
form = $bindable(),
|
|
providerItems,
|
|
collections,
|
|
users = [],
|
|
collectionFilter = $bindable(),
|
|
trackingConfigItems = [],
|
|
templateConfigItems = [],
|
|
editing,
|
|
submitting,
|
|
linkCheckLoading,
|
|
error,
|
|
providerType = '',
|
|
onsave,
|
|
ontoggleCollection,
|
|
formatDate,
|
|
onnameinput,
|
|
}: Props = $props();
|
|
|
|
let descriptor = $derived(getDescriptor(providerType));
|
|
let isScheduler = $derived(providerType === 'scheduler');
|
|
let isWebhook = $derived(descriptor?.webhookBased ?? false);
|
|
let colMeta = $derived(descriptor?.collectionMeta);
|
|
|
|
// Custom variable management for scheduler
|
|
function addVariable() {
|
|
const vars = { ...(form.filters.custom_variables || {}) };
|
|
const key = `var_${Object.keys(vars).length + 1}`;
|
|
vars[key] = '';
|
|
form.filters = { ...form.filters, custom_variables: vars };
|
|
}
|
|
function removeVariable(key: string) {
|
|
const vars = { ...(form.filters.custom_variables || {}) };
|
|
delete vars[key];
|
|
form.filters = { ...form.filters, custom_variables: vars };
|
|
}
|
|
function updateVariableKey(oldKey: string, newKey: string) {
|
|
if (!newKey || newKey === oldKey) return;
|
|
const vars = { ...(form.filters.custom_variables || {}) };
|
|
const val = vars[oldKey] ?? '';
|
|
delete vars[oldKey];
|
|
vars[newKey] = val;
|
|
form.filters = { ...form.filters, custom_variables: vars };
|
|
}
|
|
function updateVariableValue(key: string, value: string) {
|
|
const vars = { ...(form.filters.custom_variables || {}) };
|
|
vars[key] = value;
|
|
form.filters = { ...form.filters, custom_variables: vars };
|
|
}
|
|
</script>
|
|
|
|
<div in:slide={{ duration: 200 }}>
|
|
<Card class="mb-6">
|
|
{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
|
|
<form onsubmit={onsave} class="space-y-4">
|
|
<div>
|
|
<label for="trk-name" class="block text-sm font-medium mb-1">{t('notificationTracker.name')}</label>
|
|
<div class="flex gap-2">
|
|
<IconPicker value={form.icon} onselect={(v: string) => form.icon = v} />
|
|
<input id="trk-name" bind:value={form.name} oninput={() => onnameinput?.()} required placeholder={t('notificationTracker.namePlaceholder')} class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="block text-sm font-medium mb-1">{t('notificationTracker.server')}</div>
|
|
<EntitySelect items={providerItems} bind:value={form.provider_id} placeholder={t('notificationTracker.selectServer')} />
|
|
</div>
|
|
{#if !isScheduler && colMeta && collections.length > 0}
|
|
<div>
|
|
<div class="block text-sm font-medium mb-1">{t(colMeta.label)}</div>
|
|
<MultiEntitySelect
|
|
items={collections.map(col => ({
|
|
value: col.id,
|
|
label: col.albumName || col.name,
|
|
icon: colMeta.icon,
|
|
desc: colMeta.desc(col),
|
|
}))}
|
|
bind:values={form.collection_ids}
|
|
placeholder={t(colMeta.placeholder)}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if descriptor?.userFilters && descriptor.userFilters.length > 0}
|
|
{@const userItems = users.map(u => ({ value: u.id, label: u.name }))}
|
|
{#each descriptor.userFilters as uf (uf.key)}
|
|
<div>
|
|
<div class="block text-sm font-medium mb-1">{t(uf.label)}</div>
|
|
<MultiEntitySelect
|
|
items={userItems.map(i => ({ ...i, icon: uf.icon }))}
|
|
values={form.filters[uf.key] || []}
|
|
onchange={(vals) => form.filters = { ...form.filters, [uf.key]: vals }}
|
|
placeholder={t(uf.placeholder)}
|
|
/>
|
|
</div>
|
|
{/each}
|
|
{/if}
|
|
|
|
{#if isScheduler}
|
|
<!-- Schedule type -->
|
|
<fieldset class="border border-[var(--color-border)] rounded-md p-3">
|
|
<legend class="text-sm font-medium px-1">{t('notificationTracker.scheduleType')}</legend>
|
|
<div class="flex gap-4 mt-1">
|
|
<label class="flex items-center gap-2 text-sm">
|
|
<input type="radio" name="schedule_type" value="interval"
|
|
checked={!form.filters.schedule_type || form.filters.schedule_type === 'interval'}
|
|
onchange={() => form.filters = { ...form.filters, schedule_type: 'interval' }} />
|
|
{t('notificationTracker.intervalMode')}
|
|
</label>
|
|
<label class="flex items-center gap-2 text-sm">
|
|
<input type="radio" name="schedule_type" value="cron"
|
|
checked={form.filters.schedule_type === 'cron'}
|
|
onchange={() => form.filters = { ...form.filters, schedule_type: 'cron' }} />
|
|
{t('notificationTracker.cronMode')}
|
|
</label>
|
|
</div>
|
|
{#if form.filters.schedule_type === 'cron'}
|
|
<div class="mt-3">
|
|
<label for="trk-cron" class="block text-xs mb-1">{t('notificationTracker.cronExpression')}</label>
|
|
<input id="trk-cron" value={form.filters.cron_expression || ''}
|
|
oninput={(e) => form.filters = { ...form.filters, cron_expression: (e.target as HTMLInputElement).value }}
|
|
placeholder="0 9 * * 1-5" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] font-mono" />
|
|
<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('notificationTracker.cronHint')}</p>
|
|
</div>
|
|
{:else}
|
|
<div class="mt-3">
|
|
<label for="trk-interval" class="block text-xs mb-1">{t('notificationTracker.scanInterval')}<Hint text={t('hints.scanInterval')} /></label>
|
|
<input id="trk-interval" type="number" bind:value={form.scan_interval} min="60" max="86400" class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
{/if}
|
|
</fieldset>
|
|
|
|
<!-- Custom variables -->
|
|
<fieldset class="border border-[var(--color-border)] rounded-md p-3">
|
|
<legend class="text-sm font-medium px-1">{t('notificationTracker.customVariables')}</legend>
|
|
<p class="text-xs text-[var(--color-muted-foreground)] mb-2">{t('notificationTracker.customVariablesHint')}</p>
|
|
{#each Object.entries(form.filters.custom_variables || {}) as [key, value]}
|
|
<div class="flex gap-2 mb-2 items-center">
|
|
<input value={key} onblur={(e) => updateVariableKey(key, (e.target as HTMLInputElement).value)}
|
|
placeholder="key" class="w-1/3 px-2 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] font-mono" />
|
|
<input value={value} oninput={(e) => updateVariableValue(key, (e.target as HTMLInputElement).value)}
|
|
placeholder="value" class="flex-1 px-2 py-1.5 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
<button type="button" onclick={() => removeVariable(key)}
|
|
class="text-[var(--color-error-fg)] hover:opacity-70 text-sm px-1">✕</button>
|
|
</div>
|
|
{/each}
|
|
<button type="button" onclick={addVariable}
|
|
class="text-xs text-[var(--color-primary)] hover:underline mt-1">+ {t('notificationTracker.addVariable')}</button>
|
|
</fieldset>
|
|
{:else}
|
|
{#if !isWebhook}
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label for="trk-interval" class="block text-sm font-medium mb-1">{t('notificationTracker.scanInterval')}<Hint text={t('hints.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>
|
|
<label for="trk-adaptive" class="block text-sm font-medium mb-1">{t('notificationTracker.adaptiveMaxSkip')}<Hint text={t('hints.adaptiveMaxSkip')} /></label>
|
|
<input id="trk-adaptive" type="number" bind:value={form.adaptive_max_skip} min="0" max="10" placeholder={t('notificationTracker.adaptiveMaxSkipPlaceholder')} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
{/if}
|
|
|
|
<!-- Default configs -->
|
|
{#if trackingConfigItems.length > 0 || templateConfigItems.length > 0}
|
|
<div class="grid grid-cols-2 gap-3">
|
|
{#if trackingConfigItems.length > 0}
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">{t('notificationTracker.defaultTrackingConfig')}<Hint text={t('hints.defaultTrackingConfig')} /></label>
|
|
<EntitySelect items={[{value: 0, label: t('common.none'), icon: 'mdiMinus'}, ...trackingConfigItems]} bind:value={form.default_tracking_config_id} placeholder={t('common.none')} />
|
|
</div>
|
|
{/if}
|
|
{#if templateConfigItems.length > 0}
|
|
<div>
|
|
<label class="block text-sm font-medium mb-1">{t('notificationTracker.defaultTemplateConfig')}<Hint text={t('hints.defaultTemplateConfig')} /></label>
|
|
<EntitySelect items={[{value: 0, label: t('common.none'), icon: 'mdiMinus'}, ...templateConfigItems]} bind:value={form.default_template_config_id} placeholder={t('common.none')} />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Feature discovery: the periodic/scheduled/memory/quiet-hours controls
|
|
live on the tracking config, not on the tracker itself. Surface this
|
|
here so users don't have to stumble onto the feature by reading docs. -->
|
|
{#if providerType === 'immich'}
|
|
<div class="flex items-start gap-2 rounded-md border border-[var(--color-border)] bg-[var(--color-muted)]/30 px-3 py-2">
|
|
<span style="color: var(--color-primary);"><MdiIcon name="mdiInformationOutline" size={16} /></span>
|
|
<div class="flex-1 text-xs">
|
|
<p style="color: var(--color-muted-foreground);">{t('notificationTracker.featureDiscovery')}</p>
|
|
<div class="flex flex-wrap gap-x-4 gap-y-1 mt-1">
|
|
<a href={form.default_tracking_config_id
|
|
? `/tracking-configs?edit=${form.default_tracking_config_id}`
|
|
: '/tracking-configs'}
|
|
class="inline-flex items-center gap-1 text-[var(--color-primary)] hover:underline">
|
|
<MdiIcon name="mdiArrowRight" size={12} />
|
|
{t('notificationTracker.openTrackingConfig')}
|
|
</a>
|
|
<a href={form.default_template_config_id
|
|
? `/template-configs?edit=${form.default_template_config_id}`
|
|
: '/template-configs'}
|
|
class="inline-flex items-center gap-1 text-[var(--color-primary)] hover:underline">
|
|
<MdiIcon name="mdiArrowRight" size={12} />
|
|
{t('notificationTracker.openTemplateConfig')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
<button type="submit" disabled={submitting || linkCheckLoading} 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">
|
|
{#if linkCheckLoading}{t('notificationTracker.checkingLinks')}{:else}{editing ? t('common.save') : t('notificationTracker.createTracker')}{/if}
|
|
</button>
|
|
</form>
|
|
</Card>
|
|
</div>
|