alexei.dolgolyov/haos-hacs-immich-album-watcher
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Show template previews by default, remove Preview toggle button
All checks were successful
Validate / Hassfest (push) Successful in 3s
Details

Browse Source 
Previews now always visible below each template editor when content
is valid. Populated automatically via the debounced validation call.
When editing an existing config, all slots are previewed immediately
on form open. Preview hidden when there are errors.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-19 21:17:22 +03:00
parent c5a3521b14
commit ffce3ee337
1 changed files with 9 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/routes/template-configs/+page.svelte
View File

@@ -118,8 +118,13 @@
finally { loaded = true; }
}
function openNew() { form = defaultForm(); editing = null; showForm = true; }
function edit(c: any) { form = { ...defaultForm(), ...c }; editing = c.id; showForm = true; }
function openNew() { form = defaultForm(); editing = null; showForm = true; slotPreview = {}; slotErrors = {}; }
function edit(c: any) {
form = { ...defaultForm(), ...c }; editing = c.id; showForm = true;
slotPreview = {}; slotErrors = {};
// Trigger initial preview for all populated slots
setTimeout(() => refreshAllPreviews(), 100);
}
async function save(e: SubmitEvent) {
e.preventDefault(); error = '';
@@ -130,17 +135,6 @@
} catch (err: any) { error = err.message; }
}
async function previewSlot(slotKey: string) {
// Toggle: if already showing, hide it
if (slotPreview[slotKey]) { delete slotPreview[slotKey]; slotPreview = { ...slotPreview }; return; }
const template = (form as any)[slotKey] || '';
if (!template) { slotPreview = { ...slotPreview, [slotKey]: '(empty)' }; return; }
try {
const res = await api('/template-configs/preview-raw', { method: 'POST', body: JSON.stringify({ template, target_type: previewTargetType }) });
slotPreview = { ...slotPreview, [slotKey]: res.error ? `Error: ${res.error}` : res.rendered };
} catch (err: any) { slotPreview = { ...slotPreview, [slotKey]: `Error: ${err.message}` }; }
}
async function preview(configId: number, slotKey: string) {
const config = configs.find(c => c.id === configId);
if (!config) return;
@@ -211,8 +205,6 @@
<div class="flex items-center justify-between mb-1">
<label class="text-xs text-[var(--color-muted-foreground)]">{t(`templateConfig.${slot.label}`)}</label>
<div class="flex items-center gap-2">
<button type="button" onclick={() => previewSlot(slot.key)}
class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.preview')}</button>
{#if varsRef[slot.key]}
<button type="button" onclick={() => showVarsFor = slot.key}
class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.variables')}</button>
@@ -231,9 +223,9 @@
<p class="mt-1 text-xs" style="color: var(--color-error-fg);">✕ {t('common.syntaxError')}: {slotErrors[slot.key]}{slotErrorLines[slot.key] ? ` (${t('common.line')} ${slotErrorLines[slot.key]})` : ''}</p>
{/if}
{/if}
{#if slotPreview[slot.key]}
{#if slotPreview[slot.key] && !slotErrors[slot.key]}
<div class="mt-1 p-2 bg-[var(--color-muted)] rounded text-sm">
<pre class="whitespace-pre-wrap">{slotPreview[slot.key]}</pre>
<pre class="whitespace-pre-wrap text-xs">{slotPreview[slot.key]}</pre>
</div>
{/if}
{/if}