admin/recipe-importer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: structured ingredients with unit/food resolution

Browse Source 
Scraper returns {quantity, unit, food, extra} dicts instead of flat
strings. UI shows 4-column ingredient editor. Mealie client resolves
unit/food IDs via API (creates missing ones automatically).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-02-24 08:33:24 +01:00
parent 274aaeb0b6
commit cb669f1861
3 changed files with 194 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/import.html
+44 -7
View File
@@ -11,13 +11,35 @@
border-radius: var(--radius);
object-fit: cover;
}
.ingredient-header {
display: flex;
gap: 0.5rem;
margin-bottom: 0.3rem;
padding-right: 34px; /* space for remove btn */
}
.ingredient-header span {
font-size: 0.8rem;
color: var(--text-dim);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.ingredient-header .col-qty { width: 60px; flex-shrink: 0; }
.ingredient-header .col-unit { width: 80px; flex-shrink: 0; }
.ingredient-header .col-food { flex: 1; }
.ingredient-header .col-extra { width: 120px; flex-shrink: 0; }
.ingredient-row {
display: flex;
gap: 0.5rem;
align-items: center;
margin-bottom: 0.4rem;
}
.ingredient-row input { margin-bottom: 0; flex: 1; }
.ingredient-row input { margin-bottom: 0; }
.ingredient-row .ing-qty { width: 60px; flex-shrink: 0; }
.ingredient-row .ing-unit { width: 80px; flex-shrink: 0; }
.ingredient-row .ing-food { flex: 1; }
.ingredient-row .ing-extra { width: 120px; flex-shrink: 0; }
.ingredient-row button {
background: var(--danger);
border: none;
@@ -115,8 +137,14 @@
<!-- Ingredients -->
<label>Hozzávalók</label>
<div class="ingredient-header">
<span class="col-qty">Menny.</span>
<span class="col-unit">Egység</span>
<span class="col-food">Hozzávaló</span>
<span class="col-extra">Megjegyzés</span>
</div>
<div id="ingredientsList"></div>
<button class="add-btn mt-1 mb-2" onclick="addIngredient('')">+ Hozzávaló hozzáadása</button>
<button class="add-btn mt-1 mb-2" onclick="addIngredient({})">+ Hozzávaló hozzáadása</button>
<!-- Instructions -->
<label>Elkészítés</label>
@@ -206,11 +234,15 @@ function populatePreview(r) {
(r.instructions || []).forEach(t => addInstruction(t));
}
function addIngredient(value) {
function addIngredient(item) {
if (typeof item === 'string') item = { food: item };
const list = document.getElementById('ingredientsList');
const row = document.createElement('div');
row.className = 'ingredient-row';
row.innerHTML = '<input type="text" value="' + escHtml(value) + '">'
row.innerHTML = '<input type="text" class="ing-qty" placeholder="" value="' + escHtml(item.quantity || '') + '">'
+ '<input type="text" class="ing-unit" placeholder="" value="' + escHtml(item.unit || '') + '">'
+ '<input type="text" class="ing-food" placeholder="Hozzávaló" value="' + escHtml(item.food || '') + '">'
+ '<input type="text" class="ing-extra" placeholder="" value="' + escHtml(item.extra || '') + '">'
+ '<button onclick="this.parentElement.remove()">✕</button>';
list.appendChild(row);
}
@@ -239,9 +271,14 @@ function renumberInstructions() {
function gatherRecipe() {
const ingredients = [];
document.querySelectorAll('#ingredientsList .ingredient-row input').forEach(inp => {
const v = inp.value.trim();
if (v) ingredients.push(v);
document.querySelectorAll('#ingredientsList .ingredient-row').forEach(row => {
const qty = row.querySelector('.ing-qty').value.trim();
const unit = row.querySelector('.ing-unit').value.trim();
const food = row.querySelector('.ing-food').value.trim();
const extra = row.querySelector('.ing-extra').value.trim();
if (food || qty) {
ingredients.push({ quantity: qty, unit: unit, food: food, extra: extra });
}
});
const instructions = [];