feat: tag management — scrape, edit, search existing, import to Mealie/Tandoor
- Scraper extracts tags from mindmegette.hu (<a class="tag">) and schema.org keywords - Tag editor UI with removable chips, search/autocomplete for existing tags, custom add - Mealie: auto-create tags via POST /api/organizers/tags, include in recipe PATCH - Tandoor: include keywords in recipe POST (auto-created by name) - New GET /tags endpoint returns existing tags from both services for search Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -123,6 +123,70 @@
|
||||
}
|
||||
.add-btn:hover { border-color: var(--accent); color: var(--text); }
|
||||
|
||||
/* Tags */
|
||||
.tag-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
.tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.tag-chip button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255,255,255,0.7);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
.tag-chip button:hover { color: #fff; }
|
||||
.tag-search-wrap {
|
||||
position: relative;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.tag-search-wrap input {
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.tag-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--surface2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
.tag-dropdown.open { display: block; }
|
||||
.tag-dropdown-item {
|
||||
padding: 0.4rem 0.6rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.tag-dropdown-item:hover { background: var(--surface); }
|
||||
.tag-dropdown-item .tag-source {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.tag-dropdown-item.tag-add-new { color: var(--accent); font-style: italic; }
|
||||
|
||||
.result-card { display: none; }
|
||||
.result-card.visible { display: block; }
|
||||
</style>
|
||||
@@ -179,6 +243,15 @@
|
||||
<div id="instructionsList"></div>
|
||||
<button class="add-btn mt-1 mb-2" onclick="addInstruction('')">+ Lépés hozzáadása</button>
|
||||
|
||||
<!-- Tags -->
|
||||
<label>Címkék</label>
|
||||
<div id="tagChips" class="tag-chips"></div>
|
||||
<div class="tag-search-wrap">
|
||||
<input type="text" id="tagSearch" placeholder="Címke keresése / hozzáadása..."
|
||||
autocomplete="off" oninput="onTagSearch()" onfocus="onTagSearch()" onkeydown="onTagKeydown(event)">
|
||||
<div id="tagDropdown" class="tag-dropdown"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex mt-2">
|
||||
{% if has_mealie %}
|
||||
<button class="btn btn-success" id="sendMealieBtn" onclick="sendToMealie()">
|
||||
@@ -278,6 +351,10 @@ function populatePreview(r) {
|
||||
const instList = document.getElementById('instructionsList');
|
||||
instList.innerHTML = '';
|
||||
(r.instructions || []).forEach(t => addInstruction(t));
|
||||
|
||||
// Tags
|
||||
document.getElementById('tagChips').innerHTML = '';
|
||||
(r.tags || []).forEach(t => addTagChip(t));
|
||||
}
|
||||
|
||||
function addIngredient(item) {
|
||||
@@ -352,12 +429,18 @@ function gatherRecipe() {
|
||||
if (v) instructions.push(v);
|
||||
});
|
||||
|
||||
const tags = [];
|
||||
document.querySelectorAll('#tagChips .tag-chip').forEach(el => {
|
||||
tags.push(el.dataset.tag);
|
||||
});
|
||||
|
||||
return {
|
||||
title: document.getElementById('recipeTitle').value.trim(),
|
||||
description: document.getElementById('recipeDesc').value.trim(),
|
||||
image_url: currentRecipe ? currentRecipe.image_url : null,
|
||||
ingredients: ingredients,
|
||||
instructions: instructions,
|
||||
tags: tags,
|
||||
original_url: currentRecipe ? currentRecipe.original_url : '',
|
||||
};
|
||||
}
|
||||
@@ -436,6 +519,114 @@ function showResultCard() {
|
||||
document.getElementById('resultCard').classList.add('visible');
|
||||
}
|
||||
|
||||
// --- Tag management ---
|
||||
let existingTags = { mealie: [], tandoor: [] };
|
||||
|
||||
async function loadExistingTags() {
|
||||
try {
|
||||
const resp = await fetch('/tags');
|
||||
if (resp.ok) existingTags = await resp.json();
|
||||
} catch (e) { /* ignore */ }
|
||||
}
|
||||
|
||||
function addTagChip(name) {
|
||||
name = name.trim();
|
||||
if (!name) return;
|
||||
// Avoid duplicates
|
||||
const chips = document.getElementById('tagChips');
|
||||
for (const c of chips.querySelectorAll('.tag-chip')) {
|
||||
if (c.dataset.tag.toLowerCase() === name.toLowerCase()) return;
|
||||
}
|
||||
const chip = document.createElement('span');
|
||||
chip.className = 'tag-chip';
|
||||
chip.dataset.tag = name;
|
||||
chip.innerHTML = escHtml(name) + ' <button onclick="this.parentElement.remove()">✕</button>';
|
||||
chips.appendChild(chip);
|
||||
}
|
||||
|
||||
function getActiveTags() {
|
||||
const tags = [];
|
||||
document.querySelectorAll('#tagChips .tag-chip').forEach(el => tags.push(el.dataset.tag.toLowerCase()));
|
||||
return tags;
|
||||
}
|
||||
|
||||
function onTagSearch() {
|
||||
const input = document.getElementById('tagSearch');
|
||||
const dropdown = document.getElementById('tagDropdown');
|
||||
const q = input.value.trim().toLowerCase();
|
||||
|
||||
if (!q) { dropdown.classList.remove('open'); return; }
|
||||
|
||||
const active = getActiveTags();
|
||||
// Merge tags from both sources, track origin
|
||||
const seen = {};
|
||||
for (const t of existingTags.mealie || []) {
|
||||
const k = t.toLowerCase();
|
||||
if (!seen[k]) seen[k] = { name: t, sources: [] };
|
||||
seen[k].sources.push('M');
|
||||
}
|
||||
for (const t of existingTags.tandoor || []) {
|
||||
const k = t.toLowerCase();
|
||||
if (!seen[k]) seen[k] = { name: t, sources: [] };
|
||||
seen[k].sources.push('T');
|
||||
}
|
||||
|
||||
// Filter by query, exclude already-added
|
||||
const matches = Object.values(seen)
|
||||
.filter(e => e.name.toLowerCase().includes(q) && !active.includes(e.name.toLowerCase()))
|
||||
.slice(0, 10);
|
||||
|
||||
let html = '';
|
||||
for (const m of matches) {
|
||||
const src = m.sources.join('+');
|
||||
html += '<div class="tag-dropdown-item" onclick="selectTag(\'' + escHtml(m.name).replace(/'/g, "\\'") + '\')">'
|
||||
+ '<span>' + escHtml(m.name) + '</span>'
|
||||
+ '<span class="tag-source">' + src + '</span></div>';
|
||||
}
|
||||
|
||||
// "Add new" option if exact match not found
|
||||
const exactExists = matches.some(m => m.name.toLowerCase() === q) || active.includes(q);
|
||||
if (!exactExists && q) {
|
||||
html += '<div class="tag-dropdown-item tag-add-new" onclick="selectTag(\'' + escHtml(input.value.trim()).replace(/'/g, "\\'") + '\')">'
|
||||
+ '+ "' + escHtml(input.value.trim()) + '" hozzáadása</div>';
|
||||
}
|
||||
|
||||
dropdown.innerHTML = html;
|
||||
dropdown.classList.toggle('open', html.length > 0);
|
||||
}
|
||||
|
||||
function selectTag(name) {
|
||||
addTagChip(name);
|
||||
const input = document.getElementById('tagSearch');
|
||||
input.value = '';
|
||||
document.getElementById('tagDropdown').classList.remove('open');
|
||||
input.focus();
|
||||
}
|
||||
|
||||
function onTagKeydown(e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
const val = e.target.value.trim();
|
||||
if (val) {
|
||||
addTagChip(val);
|
||||
e.target.value = '';
|
||||
document.getElementById('tagDropdown').classList.remove('open');
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
document.getElementById('tagDropdown').classList.remove('open');
|
||||
}
|
||||
}
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', function(e) {
|
||||
if (!e.target.closest('.tag-search-wrap')) {
|
||||
document.getElementById('tagDropdown').classList.remove('open');
|
||||
}
|
||||
});
|
||||
|
||||
// Load existing tags on page load
|
||||
loadExistingTags();
|
||||
|
||||
function escHtml(s) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
|
||||
Reference in New Issue
Block a user