feat: add batched recipe import queue
This commit is contained in:
+110
-142
@@ -9,8 +9,10 @@ const appBar = mountAppBar({ onManageAccess: openAccessManager });
|
||||
const elements = {
|
||||
importForm: document.querySelector('#import-form'),
|
||||
importStatus: document.querySelector('#import-status'),
|
||||
previewSection: document.querySelector('#preview-section'),
|
||||
previewForm: document.querySelector('#preview-form'),
|
||||
importQueue: document.querySelector('#import-queue'),
|
||||
importJobList: document.querySelector('#import-job-list'),
|
||||
importJobCount: document.querySelector('#import-job-count'),
|
||||
processImportJobs: document.querySelector('#process-import-jobs'),
|
||||
recipeGrid: document.querySelector('#recipe-grid'),
|
||||
emptyLibrary: document.querySelector('#empty-library'),
|
||||
recipeCount: document.querySelector('#recipe-count'),
|
||||
@@ -30,7 +32,8 @@ const elements = {
|
||||
toast: document.querySelector('#toast'),
|
||||
};
|
||||
|
||||
let previewData = null;
|
||||
let importJobs = [];
|
||||
let importJobPollTimer = null;
|
||||
let savedRecipes = [];
|
||||
let currentUser = null;
|
||||
let searchQuery = '';
|
||||
@@ -41,6 +44,7 @@ const selectedTags = new Set();
|
||||
|
||||
const SEARCH_DEBOUNCE_MS = 180;
|
||||
const VISIBLE_TAG_LIMIT = 6;
|
||||
const IMPORT_JOB_POLL_MS = 3000;
|
||||
|
||||
function escapeHtml(value) {
|
||||
return String(value ?? '')
|
||||
@@ -181,6 +185,75 @@ async function loadRecipes() {
|
||||
renderRecipes();
|
||||
}
|
||||
|
||||
function importJobLabel(status) {
|
||||
if (status === 'pending') return '대기 중';
|
||||
if (status === 'processing') return '처리 중';
|
||||
return '처리 실패';
|
||||
}
|
||||
|
||||
function importJobUrlLabel(value) {
|
||||
try {
|
||||
const url = new URL(value);
|
||||
return `${url.hostname}${url.pathname}${url.search}`;
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
function renderImportJobs() {
|
||||
const pendingCount = importJobs.filter(({ status }) => status === 'pending').length;
|
||||
const processingCount = importJobs.filter(({ status }) => status === 'processing').length;
|
||||
elements.importQueue.hidden = importJobs.length === 0;
|
||||
elements.importJobCount.textContent = `${importJobs.length}개`;
|
||||
elements.processImportJobs.disabled = pendingCount === 0 && processingCount === 0;
|
||||
elements.processImportJobs.textContent = processingCount > 0
|
||||
? `처리 재요청 (${processingCount})`
|
||||
: `처리 요청${pendingCount ? ` (${pendingCount})` : ''}`;
|
||||
elements.importJobList.innerHTML = importJobs.map((job) => `
|
||||
<div class="import-job import-job-${escapeHtml(job.status)}">
|
||||
<div class="import-job-body">
|
||||
<span class="import-job-status">${importJobLabel(job.status)}</span>
|
||||
<a href="${escapeHtml(job.url)}" target="_blank" rel="noreferrer">${escapeHtml(importJobUrlLabel(job.url))}</a>
|
||||
${job.error?.message ? `<small>${escapeHtml(job.error.message)}</small>` : ''}
|
||||
</div>
|
||||
${job.status === 'failed'
|
||||
? `<button class="text-button" type="button" data-retry-import-job="${escapeHtml(job.id)}">재시도</button>`
|
||||
: ''}
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function scheduleImportJobPoll() {
|
||||
window.clearTimeout(importJobPollTimer);
|
||||
importJobPollTimer = null;
|
||||
if (!importJobs.some(({ status }) => status === 'processing')) return;
|
||||
importJobPollTimer = window.setTimeout(async () => {
|
||||
try {
|
||||
await loadImportJobs();
|
||||
} catch (error) {
|
||||
showToast(error.message);
|
||||
scheduleImportJobPoll();
|
||||
}
|
||||
}, IMPORT_JOB_POLL_MS);
|
||||
}
|
||||
|
||||
async function loadImportJobs() {
|
||||
const previousActiveIds = new Set(
|
||||
importJobs
|
||||
.filter(({ status }) => status === 'pending' || status === 'processing')
|
||||
.map(({ id }) => id),
|
||||
);
|
||||
const { jobs } = await apiRequest('/api/import/jobs');
|
||||
importJobs = jobs;
|
||||
renderImportJobs();
|
||||
|
||||
const visibleIds = new Set(jobs.map(({ id }) => id));
|
||||
if ([...previousActiveIds].some((id) => !visibleIds.has(id))) {
|
||||
await loadRecipes();
|
||||
}
|
||||
scheduleImportJobPoll();
|
||||
}
|
||||
|
||||
async function loadAllowedEmails() {
|
||||
const { emails } = await apiRequest('/api/allowed-emails');
|
||||
elements.allowedEmailList.innerHTML = emails.map((email) => {
|
||||
@@ -216,166 +289,60 @@ async function openAccessManager() {
|
||||
}
|
||||
}
|
||||
|
||||
function ingredientGroupTemplate(group, groupIndex) {
|
||||
return `<fieldset class="editor-group" data-ingredient-group>
|
||||
<div class="editor-group-heading">
|
||||
<input aria-label="재료 그룹 이름" data-group-name value="${escapeHtml(group.name)}" required>
|
||||
<button class="text-button danger" type="button" data-action="remove-group" data-group="${groupIndex}">그룹 삭제</button>
|
||||
</div>
|
||||
<div class="ingredient-list">
|
||||
${group.items.map((item, itemIndex) => `<div class="ingredient-row" data-ingredient-item>
|
||||
<input aria-label="재료 이름" data-item-name value="${escapeHtml(item.name)}" placeholder="재료" required>
|
||||
<input aria-label="재료 수량" data-item-amount value="${escapeHtml(item.amount || '')}" placeholder="수량">
|
||||
<button class="icon-button" type="button" aria-label="재료 삭제" data-action="remove-item" data-group="${groupIndex}" data-item="${itemIndex}">×</button>
|
||||
</div>`).join('')}
|
||||
</div>
|
||||
<button class="text-button" type="button" data-action="add-item" data-group="${groupIndex}">+ 재료 추가</button>
|
||||
</fieldset>`;
|
||||
}
|
||||
|
||||
function renderPreview() {
|
||||
const { recipe, imagePreviewUrl, source } = previewData;
|
||||
const image = safeImageUrl(imagePreviewUrl);
|
||||
elements.previewForm.innerHTML = `
|
||||
<div class="preview-layout">
|
||||
<div class="preview-image">
|
||||
${image ? `<img src="${escapeHtml(image)}" alt="가져온 레시피 미리보기">` : '<span>NO IMAGE</span>'}
|
||||
<span class="platform-label">${escapeHtml(source.platform)}</span>
|
||||
</div>
|
||||
<div class="editor-fields">
|
||||
<label>제목<input id="recipe-title" value="${escapeHtml(recipe.title)}" required></label>
|
||||
<label>한 줄 설명<textarea id="recipe-summary" rows="2">${escapeHtml(recipe.summary || '')}</textarea></label>
|
||||
<label>분량<input id="recipe-servings" value="${escapeHtml(recipe.servings || '')}"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="editor-section">
|
||||
<div class="editor-section-heading"><h3>재료</h3><button class="text-button" type="button" data-action="add-group">+ 그룹 추가</button></div>
|
||||
<div id="ingredient-groups">${recipe.ingredientGroups.map(ingredientGroupTemplate).join('')}</div>
|
||||
</div>
|
||||
<div class="editor-section">
|
||||
<div class="editor-section-heading"><h3>조리 순서</h3><button class="text-button" type="button" data-action="add-step">+ 단계 추가</button></div>
|
||||
<div id="step-list">${recipe.steps.map((step, index) => `<div class="step-row" data-step>
|
||||
<span>${index + 1}</span>
|
||||
<textarea data-step-text rows="2" required>${escapeHtml(step.text)}</textarea>
|
||||
<input data-step-time type="number" min="0" step="1" value="${step.timestampSec ?? ''}" placeholder="초">
|
||||
<button class="icon-button" type="button" aria-label="단계 삭제" data-action="remove-step" data-step-index="${index}">×</button>
|
||||
</div>`).join('')}</div>
|
||||
</div>
|
||||
<div class="editor-fields two-column">
|
||||
<label>팁 (한 줄에 하나)<textarea id="recipe-tips" rows="3">${escapeHtml(recipe.tips.join('\n'))}</textarea></label>
|
||||
<label>태그 (표준 태그 중 최대 3개, 쉼표로 구분)<textarea id="recipe-tags" rows="3">${escapeHtml(recipe.tags.join(', '))}</textarea></label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button class="button button-primary" type="submit">아틀라스에 저장</button>
|
||||
</div>`;
|
||||
elements.previewSection.hidden = false;
|
||||
elements.previewSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
}
|
||||
|
||||
function readPreviewForm() {
|
||||
const ingredientGroups = [...elements.previewForm.querySelectorAll('[data-ingredient-group]')].map((group) => ({
|
||||
name: group.querySelector('[data-group-name]').value.trim(),
|
||||
items: [...group.querySelectorAll('[data-ingredient-item]')].map((item) => ({
|
||||
name: item.querySelector('[data-item-name]').value.trim(),
|
||||
amount: item.querySelector('[data-item-amount]').value.trim() || null,
|
||||
})),
|
||||
}));
|
||||
const steps = [...elements.previewForm.querySelectorAll('[data-step]')].map((step, index) => {
|
||||
const timestamp = step.querySelector('[data-step-time]').value;
|
||||
return {
|
||||
order: index + 1,
|
||||
text: step.querySelector('[data-step-text]').value.trim(),
|
||||
timestampSec: timestamp === '' ? null : Number(timestamp),
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
title: document.querySelector('#recipe-title').value.trim(),
|
||||
summary: document.querySelector('#recipe-summary').value.trim() || null,
|
||||
servings: document.querySelector('#recipe-servings').value.trim() || null,
|
||||
ingredientGroups,
|
||||
steps,
|
||||
tips: document.querySelector('#recipe-tips').value.split(/\r?\n/).map((item) => item.trim()).filter(Boolean),
|
||||
tags: document.querySelector('#recipe-tags').value.split(',').map((item) => item.trim()).filter(Boolean),
|
||||
};
|
||||
}
|
||||
|
||||
function mutatePreview(action, button) {
|
||||
previewData.recipe = readPreviewForm();
|
||||
const groupIndex = Number(button.dataset.group);
|
||||
const itemIndex = Number(button.dataset.item);
|
||||
const stepIndex = Number(button.dataset.stepIndex);
|
||||
|
||||
if (action === 'add-group') previewData.recipe.ingredientGroups.push({ name: '재료', items: [] });
|
||||
if (action === 'remove-group') previewData.recipe.ingredientGroups.splice(groupIndex, 1);
|
||||
if (action === 'add-item') previewData.recipe.ingredientGroups[groupIndex].items.push({ name: '', amount: null });
|
||||
if (action === 'remove-item') previewData.recipe.ingredientGroups[groupIndex].items.splice(itemIndex, 1);
|
||||
if (action === 'add-step') previewData.recipe.steps.push({ order: previewData.recipe.steps.length + 1, text: '', timestampSec: null });
|
||||
if (action === 'remove-step') previewData.recipe.steps.splice(stepIndex, 1);
|
||||
previewData.recipe.steps.forEach((step, index) => { step.order = index + 1; });
|
||||
renderPreview();
|
||||
}
|
||||
|
||||
elements.importForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
const button = elements.importForm.querySelector('button');
|
||||
button.disabled = true;
|
||||
const timers = [
|
||||
window.setTimeout(() => setStatus('콘텐츠 가져오는 중...'), 500),
|
||||
window.setTimeout(() => setStatus('레시피 분석 중...'), 1600),
|
||||
];
|
||||
setStatus('링크 확인 중...');
|
||||
setStatus('URL을 대기열에 추가하는 중...');
|
||||
|
||||
try {
|
||||
const url = new FormData(elements.importForm).get('url');
|
||||
previewData = await apiRequest('/api/import/preview', {
|
||||
const urls = String(new FormData(elements.importForm).get('urls') ?? '')
|
||||
.split(/\s+/)
|
||||
.map((url) => url.trim())
|
||||
.filter(Boolean);
|
||||
const result = await apiRequest('/api/import/jobs', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ url }),
|
||||
body: JSON.stringify({ urls }),
|
||||
});
|
||||
timers.forEach(window.clearTimeout);
|
||||
setStatus('분석 완료', 'success');
|
||||
renderPreview();
|
||||
elements.importForm.reset();
|
||||
const duplicateMessage = result.duplicateCount
|
||||
? `, 중복 ${result.duplicateCount}개 제외`
|
||||
: '';
|
||||
setStatus(`${result.addedCount}개를 대기열에 추가했습니다${duplicateMessage}.`, 'success');
|
||||
importJobs = result.jobs;
|
||||
renderImportJobs();
|
||||
scheduleImportJobPoll();
|
||||
} catch (error) {
|
||||
timers.forEach(window.clearTimeout);
|
||||
setStatus(error.message, 'error');
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
elements.previewForm.addEventListener('click', (event) => {
|
||||
const button = event.target.closest('[data-action]');
|
||||
if (button) mutatePreview(button.dataset.action, button);
|
||||
});
|
||||
|
||||
elements.previewForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
const button = elements.previewForm.querySelector('[type="submit"]');
|
||||
button.disabled = true;
|
||||
elements.processImportJobs.addEventListener('click', async () => {
|
||||
elements.processImportJobs.disabled = true;
|
||||
try {
|
||||
const { recipe } = await apiRequest('/api/recipes', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
recipe: readPreviewForm(),
|
||||
source: previewData.source,
|
||||
imagePreviewUrl: previewData.imagePreviewUrl,
|
||||
}),
|
||||
});
|
||||
previewData = null;
|
||||
elements.previewSection.hidden = true;
|
||||
elements.importForm.reset();
|
||||
showToast(`${recipe.title} 레시피를 저장했습니다.`);
|
||||
await loadRecipes();
|
||||
await apiRequest('/api/import/jobs/process', { method: 'POST' });
|
||||
await loadImportJobs();
|
||||
} catch (error) {
|
||||
showToast(error.message);
|
||||
} finally {
|
||||
button.disabled = false;
|
||||
renderImportJobs();
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelector('#cancel-preview').addEventListener('click', () => {
|
||||
previewData = null;
|
||||
elements.previewSection.hidden = true;
|
||||
elements.importJobList.addEventListener('click', async (event) => {
|
||||
const button = event.target.closest('[data-retry-import-job]');
|
||||
if (!button) return;
|
||||
button.disabled = true;
|
||||
try {
|
||||
await apiRequest(`/api/import/jobs/${encodeURIComponent(button.dataset.retryImportJob)}/retry`, {
|
||||
method: 'POST',
|
||||
});
|
||||
await loadImportJobs();
|
||||
} catch (error) {
|
||||
showToast(error.message);
|
||||
button.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
elements.tagFilterOptions.addEventListener('click', (event) => {
|
||||
@@ -484,6 +451,7 @@ bindScrollToTop(elements.scrollToTop);
|
||||
currentUser = await loadSession();
|
||||
appBar.setUser(currentUser);
|
||||
await loadRecipes();
|
||||
await loadImportJobs();
|
||||
if (
|
||||
currentUser.canManageAccess
|
||||
&& new URLSearchParams(window.location.search).get('manage-access') === '1'
|
||||
|
||||
Reference in New Issue
Block a user