feat: initial recipe-importer application
Python/Flask web app that scrapes Hungarian recipe sites (mindmegette.hu) and imports them into Mealie via its REST API. Includes dark-themed web UI with editable preview, Dockerfile, build script, and docker-compose. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,304 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Importálás — Recept Importáló{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<style>
|
||||
.recipe-preview { display: none; }
|
||||
.recipe-preview.visible { display: block; }
|
||||
.recipe-image {
|
||||
max-width: 300px;
|
||||
max-height: 200px;
|
||||
border-radius: var(--radius);
|
||||
object-fit: cover;
|
||||
}
|
||||
.ingredient-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
.ingredient-row input { margin-bottom: 0; flex: 1; }
|
||||
.ingredient-row button {
|
||||
background: var(--danger);
|
||||
border: none;
|
||||
color: #fff;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.instruction-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.instruction-row .step-num {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.instruction-row textarea { margin-bottom: 0; flex: 1; min-height: 60px; }
|
||||
.instruction-row button {
|
||||
background: var(--danger);
|
||||
border: none;
|
||||
color: #fff;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
.add-btn {
|
||||
background: var(--surface2);
|
||||
border: 1px dashed var(--border);
|
||||
color: var(--text-dim);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: var(--radius);
|
||||
cursor: pointer;
|
||||
font-size: 0.9rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.add-btn:hover { border-color: var(--accent); color: var(--text); }
|
||||
|
||||
.result-card { display: none; }
|
||||
.result-card.visible { display: block; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Step 1: URL input -->
|
||||
<div class="card">
|
||||
<h2>Recept importálása</h2>
|
||||
<div class="flex">
|
||||
<input type="url" id="recipeUrl" class="grow" style="margin-bottom:0"
|
||||
placeholder="https://www.mindmegette.hu/recept/brassoi">
|
||||
<button class="btn btn-primary" id="scrapeBtn" onclick="scrapeRecipe()">
|
||||
Beolvasás
|
||||
</button>
|
||||
</div>
|
||||
<div id="scrapeStatus" class="mt-1"></div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Editable preview -->
|
||||
<div class="recipe-preview" id="previewCard">
|
||||
<div class="card">
|
||||
<h2>Recept adatai</h2>
|
||||
|
||||
<div class="flex flex-wrap mb-2">
|
||||
<div class="grow">
|
||||
<label for="recipeTitle">Név</label>
|
||||
<input type="text" id="recipeTitle">
|
||||
|
||||
<label for="recipeDesc">Leírás</label>
|
||||
<textarea id="recipeDesc" rows="2"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<img id="recipeImage" class="recipe-image" src="" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ingredients -->
|
||||
<label>Hozzávalók</label>
|
||||
<div id="ingredientsList"></div>
|
||||
<button class="add-btn mt-1 mb-2" onclick="addIngredient('')">+ Hozzávaló hozzáadása</button>
|
||||
|
||||
<!-- Instructions -->
|
||||
<label>Elkészítés</label>
|
||||
<div id="instructionsList"></div>
|
||||
<button class="add-btn mt-1 mb-2" onclick="addInstruction('')">+ Lépés hozzáadása</button>
|
||||
|
||||
<div class="flex mt-2">
|
||||
<button class="btn btn-success" id="sendBtn" onclick="sendToMealie()">
|
||||
Importálás Mealie-be
|
||||
</button>
|
||||
<span id="sendStatus"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Result -->
|
||||
<div class="result-card" id="resultCard">
|
||||
<div class="card">
|
||||
<h2 class="text-success">Recept sikeresen importálva!</h2>
|
||||
<p class="mt-1">
|
||||
<a id="resultLink" href="#" target="_blank" style="color:var(--accent);">
|
||||
Megnyitás Mealie-ben →
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
let currentRecipe = null;
|
||||
|
||||
async function scrapeRecipe() {
|
||||
const url = document.getElementById('recipeUrl').value.trim();
|
||||
if (!url) return;
|
||||
|
||||
const btn = document.getElementById('scrapeBtn');
|
||||
const status = document.getElementById('scrapeStatus');
|
||||
btn.disabled = true;
|
||||
status.innerHTML = '<span class="spinner"></span> Beolvasás folyamatban...';
|
||||
|
||||
document.getElementById('previewCard').classList.remove('visible');
|
||||
document.getElementById('resultCard').classList.remove('visible');
|
||||
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append('url', url);
|
||||
const resp = await fetch('/scrape', { method: 'POST', body: form });
|
||||
const data = await resp.json();
|
||||
|
||||
if (!data.ok) {
|
||||
status.innerHTML = '<span class="text-danger">Hiba: ' + data.error + '</span>';
|
||||
btn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
currentRecipe = data.data;
|
||||
populatePreview(currentRecipe);
|
||||
document.getElementById('previewCard').classList.add('visible');
|
||||
status.innerHTML = '<span class="text-success">✓ Beolvasva</span>';
|
||||
} catch (e) {
|
||||
status.innerHTML = '<span class="text-danger">Hálózati hiba: ' + e.message + '</span>';
|
||||
}
|
||||
btn.disabled = false;
|
||||
}
|
||||
|
||||
function populatePreview(r) {
|
||||
document.getElementById('recipeTitle').value = r.title || '';
|
||||
document.getElementById('recipeDesc').value = r.description || '';
|
||||
|
||||
const img = document.getElementById('recipeImage');
|
||||
if (r.image_url) {
|
||||
img.src = r.image_url;
|
||||
img.style.display = 'block';
|
||||
} else {
|
||||
img.style.display = 'none';
|
||||
}
|
||||
|
||||
// Ingredients
|
||||
const ingList = document.getElementById('ingredientsList');
|
||||
ingList.innerHTML = '';
|
||||
(r.ingredients || []).forEach(i => addIngredient(i));
|
||||
|
||||
// Instructions
|
||||
const instList = document.getElementById('instructionsList');
|
||||
instList.innerHTML = '';
|
||||
(r.instructions || []).forEach(t => addInstruction(t));
|
||||
}
|
||||
|
||||
function addIngredient(value) {
|
||||
const list = document.getElementById('ingredientsList');
|
||||
const row = document.createElement('div');
|
||||
row.className = 'ingredient-row';
|
||||
row.innerHTML = '<input type="text" value="' + escHtml(value) + '">'
|
||||
+ '<button onclick="this.parentElement.remove()">✕</button>';
|
||||
list.appendChild(row);
|
||||
}
|
||||
|
||||
function addInstruction(value) {
|
||||
const list = document.getElementById('instructionsList');
|
||||
const idx = list.children.length + 1;
|
||||
const row = document.createElement('div');
|
||||
row.className = 'instruction-row';
|
||||
row.innerHTML = '<span class="step-num">' + idx + '</span>'
|
||||
+ '<textarea>' + escHtml(value) + '</textarea>'
|
||||
+ '<button onclick="removeInstruction(this)">✕</button>';
|
||||
list.appendChild(row);
|
||||
}
|
||||
|
||||
function removeInstruction(btn) {
|
||||
btn.closest('.instruction-row').remove();
|
||||
renumberInstructions();
|
||||
}
|
||||
|
||||
function renumberInstructions() {
|
||||
document.querySelectorAll('#instructionsList .step-num').forEach((el, i) => {
|
||||
el.textContent = i + 1;
|
||||
});
|
||||
}
|
||||
|
||||
function gatherRecipe() {
|
||||
const ingredients = [];
|
||||
document.querySelectorAll('#ingredientsList .ingredient-row input').forEach(inp => {
|
||||
const v = inp.value.trim();
|
||||
if (v) ingredients.push(v);
|
||||
});
|
||||
|
||||
const instructions = [];
|
||||
document.querySelectorAll('#instructionsList .instruction-row textarea').forEach(ta => {
|
||||
const v = ta.value.trim();
|
||||
if (v) instructions.push(v);
|
||||
});
|
||||
|
||||
return {
|
||||
title: document.getElementById('recipeTitle').value.trim(),
|
||||
description: document.getElementById('recipeDesc').value.trim(),
|
||||
image_url: currentRecipe ? currentRecipe.image_url : null,
|
||||
ingredients: ingredients,
|
||||
instructions: instructions,
|
||||
original_url: currentRecipe ? currentRecipe.original_url : '',
|
||||
};
|
||||
}
|
||||
|
||||
async function sendToMealie() {
|
||||
const recipe = gatherRecipe();
|
||||
if (!recipe.title) {
|
||||
alert('A recept neve kötelező!');
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = document.getElementById('sendBtn');
|
||||
const status = document.getElementById('sendStatus');
|
||||
btn.disabled = true;
|
||||
status.innerHTML = '<span class="spinner"></span> Importálás...';
|
||||
|
||||
try {
|
||||
const resp = await fetch('/send', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(recipe),
|
||||
});
|
||||
const data = await resp.json();
|
||||
|
||||
if (!data.ok) {
|
||||
status.innerHTML = '<span class="text-danger">Hiba: ' + data.error + '</span>';
|
||||
btn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
status.innerHTML = '';
|
||||
document.getElementById('resultLink').href = data.url;
|
||||
document.getElementById('resultCard').classList.add('visible');
|
||||
} catch (e) {
|
||||
status.innerHTML = '<span class="text-danger">Hálózati hiba: ' + e.message + '</span>';
|
||||
}
|
||||
btn.disabled = false;
|
||||
}
|
||||
|
||||
function escHtml(s) {
|
||||
const d = document.createElement('div');
|
||||
d.textContent = s;
|
||||
return d.innerHTML;
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user