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,38 @@
|
||||
"""Configuration management — persists Mealie connection settings to a JSON file."""
|
||||
|
||||
import json
|
||||
import os
|
||||
from pathlib import Path
|
||||
|
||||
DATA_DIR = Path(os.environ.get("DATA_DIR", "/data"))
|
||||
CONFIG_FILE = DATA_DIR / "config.json"
|
||||
|
||||
_DEFAULTS = {
|
||||
"mealie_url": "",
|
||||
"mealie_api_key": "",
|
||||
}
|
||||
|
||||
|
||||
def _ensure_dir():
|
||||
DATA_DIR.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
|
||||
def load() -> dict:
|
||||
"""Return the current config dict, merged with defaults."""
|
||||
cfg = dict(_DEFAULTS)
|
||||
if CONFIG_FILE.exists():
|
||||
try:
|
||||
with open(CONFIG_FILE, "r", encoding="utf-8") as f:
|
||||
cfg.update(json.load(f))
|
||||
except (json.JSONDecodeError, OSError):
|
||||
pass
|
||||
return cfg
|
||||
|
||||
|
||||
def save(cfg: dict):
|
||||
"""Atomically persist *cfg* to disk."""
|
||||
_ensure_dir()
|
||||
tmp = CONFIG_FILE.with_suffix(".tmp")
|
||||
with open(tmp, "w", encoding="utf-8") as f:
|
||||
json.dump(cfg, f, indent=2, ensure_ascii=False)
|
||||
tmp.replace(CONFIG_FILE)
|
||||
+115
@@ -0,0 +1,115 @@
|
||||
"""Flask application — recipe importer web UI."""
|
||||
|
||||
import os
|
||||
import traceback
|
||||
|
||||
from flask import Flask, render_template, request, redirect, url_for, flash, jsonify
|
||||
|
||||
from app import config
|
||||
from app.scraper import scrape
|
||||
from app.mealie import MealieClient
|
||||
|
||||
app = Flask(
|
||||
__name__,
|
||||
template_folder=os.path.join(os.path.dirname(__file__), "templates"),
|
||||
static_folder=os.path.join(os.path.dirname(__file__), "static"),
|
||||
)
|
||||
app.secret_key = os.environ.get("SECRET_KEY", "recipe-importer-dev-key")
|
||||
|
||||
VERSION = os.environ.get("VERSION", "dev")
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Routes
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@app.route("/")
|
||||
def index():
|
||||
"""Redirect to the import page (or settings if not configured)."""
|
||||
cfg = config.load()
|
||||
if not cfg.get("mealie_url") or not cfg.get("mealie_api_key"):
|
||||
return redirect(url_for("settings"))
|
||||
return redirect(url_for("import_page"))
|
||||
|
||||
|
||||
@app.route("/settings", methods=["GET", "POST"])
|
||||
def settings():
|
||||
"""Configure Mealie connection."""
|
||||
cfg = config.load()
|
||||
|
||||
if request.method == "POST":
|
||||
cfg["mealie_url"] = request.form.get("mealie_url", "").strip().rstrip("/")
|
||||
cfg["mealie_api_key"] = request.form.get("mealie_api_key", "").strip()
|
||||
config.save(cfg)
|
||||
flash("Beállítások mentve.", "success")
|
||||
return redirect(url_for("settings"))
|
||||
|
||||
return render_template("settings.html", cfg=cfg, version=VERSION)
|
||||
|
||||
|
||||
@app.route("/settings/test", methods=["POST"])
|
||||
def settings_test():
|
||||
"""AJAX endpoint — test Mealie connection."""
|
||||
cfg = config.load()
|
||||
if not cfg.get("mealie_url") or not cfg.get("mealie_api_key"):
|
||||
return jsonify({"ok": False, "error": "Nincs megadva Mealie URL vagy API kulcs."})
|
||||
try:
|
||||
client = MealieClient(cfg["mealie_url"], cfg["mealie_api_key"])
|
||||
info = client.test_connection()
|
||||
return jsonify({"ok": True, "data": info})
|
||||
except Exception as exc:
|
||||
return jsonify({"ok": False, "error": str(exc)})
|
||||
|
||||
|
||||
@app.route("/import", methods=["GET"])
|
||||
def import_page():
|
||||
"""Show the import form."""
|
||||
cfg = config.load()
|
||||
if not cfg.get("mealie_url") or not cfg.get("mealie_api_key"):
|
||||
flash("Először állítsd be a Mealie kapcsolatot.", "warning")
|
||||
return redirect(url_for("settings"))
|
||||
return render_template("import.html", cfg=cfg, version=VERSION)
|
||||
|
||||
|
||||
@app.route("/scrape", methods=["POST"])
|
||||
def scrape_url():
|
||||
"""AJAX — scrape a recipe URL and return structured data."""
|
||||
url = request.form.get("url", "").strip()
|
||||
if not url:
|
||||
return jsonify({"ok": False, "error": "Nincs URL megadva."})
|
||||
try:
|
||||
data = scrape(url)
|
||||
return jsonify({"ok": True, "data": data})
|
||||
except Exception as exc:
|
||||
return jsonify({"ok": False, "error": str(exc), "trace": traceback.format_exc()})
|
||||
|
||||
|
||||
@app.route("/send", methods=["POST"])
|
||||
def send_to_mealie():
|
||||
"""AJAX — send edited recipe data to Mealie."""
|
||||
cfg = config.load()
|
||||
if not cfg.get("mealie_url") or not cfg.get("mealie_api_key"):
|
||||
return jsonify({"ok": False, "error": "Mealie nincs beállítva."})
|
||||
|
||||
payload = request.get_json(silent=True)
|
||||
if not payload:
|
||||
return jsonify({"ok": False, "error": "Érvénytelen kérés."})
|
||||
|
||||
try:
|
||||
client = MealieClient(cfg["mealie_url"], cfg["mealie_api_key"])
|
||||
slug = client.create_recipe(payload)
|
||||
recipe_url = f"{cfg['mealie_url']}/g/home/r/{slug}"
|
||||
return jsonify({"ok": True, "slug": slug, "url": recipe_url})
|
||||
except Exception as exc:
|
||||
return jsonify({"ok": False, "error": str(exc), "trace": traceback.format_exc()})
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Health
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
@app.route("/health")
|
||||
def health():
|
||||
return jsonify({"status": "ok", "version": VERSION})
|
||||
+114
@@ -0,0 +1,114 @@
|
||||
"""Mealie API client — creates recipes and uploads images."""
|
||||
|
||||
import io
|
||||
import uuid
|
||||
import requests
|
||||
|
||||
|
||||
class MealieClient:
|
||||
"""Thin wrapper around the Mealie REST API."""
|
||||
|
||||
def __init__(self, base_url: str, api_key: str):
|
||||
self.base_url = base_url.rstrip("/")
|
||||
self.session = requests.Session()
|
||||
self.session.headers.update({
|
||||
"Authorization": f"Bearer {api_key}",
|
||||
"Accept": "application/json",
|
||||
})
|
||||
|
||||
# ------------------------------------------------------------------
|
||||
# Public
|
||||
# ------------------------------------------------------------------
|
||||
|
||||
def test_connection(self) -> dict:
|
||||
"""Return Mealie app info or raise on failure."""
|
||||
r = self.session.get(f"{self.base_url}/api/app/about", timeout=10)
|
||||
r.raise_for_status()
|
||||
return r.json()
|
||||
|
||||
def create_recipe(self, recipe: dict) -> str:
|
||||
"""Create a recipe in Mealie from a scraper result dict.
|
||||
|
||||
*recipe* keys: title, description, image_url, ingredients, instructions, original_url.
|
||||
Returns the recipe slug.
|
||||
"""
|
||||
# Step 1: create stub
|
||||
r = self.session.post(
|
||||
f"{self.base_url}/api/recipes",
|
||||
json={"name": recipe["title"]},
|
||||
timeout=15,
|
||||
)
|
||||
r.raise_for_status()
|
||||
slug = r.json() # Mealie returns the slug as a plain string
|
||||
|
||||
# Step 2: build full payload and PATCH
|
||||
payload = self._build_payload(recipe)
|
||||
r = self.session.patch(
|
||||
f"{self.base_url}/api/recipes/{slug}",
|
||||
json=payload,
|
||||
timeout=15,
|
||||
)
|
||||
r.raise_for_status()
|
||||
|
||||
# Step 3: upload image if available
|
||||
image_url = recipe.get("image_url")
|
||||
if image_url:
|
||||
try:
|
||||
self._upload_image(slug, image_url)
|
||||
except Exception:
|
||||
pass # non-fatal — recipe is still created
|
||||
|
||||
return slug
|
||||
|
||||
# ------------------------------------------------------------------
|
||||
# Internal
|
||||
# ------------------------------------------------------------------
|
||||
|
||||
def _build_payload(self, recipe: dict) -> dict:
|
||||
ingredients = []
|
||||
for line in recipe.get("ingredients", []):
|
||||
ingredients.append({
|
||||
"note": line,
|
||||
"isFood": False,
|
||||
"disableAmount": True,
|
||||
})
|
||||
|
||||
instructions = []
|
||||
for text in recipe.get("instructions", []):
|
||||
instructions.append({
|
||||
"id": uuid.uuid4().hex,
|
||||
"text": text,
|
||||
})
|
||||
|
||||
return {
|
||||
"name": recipe["title"],
|
||||
"description": recipe.get("description", ""),
|
||||
"recipeIngredient": ingredients,
|
||||
"recipeInstructions": instructions,
|
||||
"orgURL": recipe.get("original_url", ""),
|
||||
"recipeYield": "",
|
||||
}
|
||||
|
||||
def _upload_image(self, slug: str, image_url: str):
|
||||
"""Download image from *image_url* and upload it to the recipe."""
|
||||
img_resp = requests.get(image_url, timeout=30, headers={
|
||||
"User-Agent": "RecipeImporter/1.0",
|
||||
})
|
||||
img_resp.raise_for_status()
|
||||
|
||||
content_type = img_resp.headers.get("Content-Type", "image/jpeg")
|
||||
ext = "jpg"
|
||||
if "png" in content_type:
|
||||
ext = "png"
|
||||
elif "webp" in content_type:
|
||||
ext = "webp"
|
||||
|
||||
files = {
|
||||
"image": (f"recipe.{ext}", io.BytesIO(img_resp.content), content_type),
|
||||
}
|
||||
r = self.session.put(
|
||||
f"{self.base_url}/api/recipes/{slug}/image",
|
||||
files=files,
|
||||
timeout=30,
|
||||
)
|
||||
r.raise_for_status()
|
||||
+181
@@ -0,0 +1,181 @@
|
||||
"""Recipe scraper — parses Hungarian recipe sites into a structured dict.
|
||||
|
||||
Currently supported: mindmegette.hu
|
||||
"""
|
||||
|
||||
import re
|
||||
import requests
|
||||
from bs4 import BeautifulSoup
|
||||
|
||||
_HEADERS = {
|
||||
"User-Agent": "RecipeImporter/1.0 (Hungarian recipe scraper)",
|
||||
"Accept-Language": "hu-HU,hu;q=0.9,en;q=0.5",
|
||||
}
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Public API
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def scrape(url: str) -> dict:
|
||||
"""Fetch *url* and return a recipe dict.
|
||||
|
||||
Returns::
|
||||
|
||||
{
|
||||
"title": str,
|
||||
"description": str,
|
||||
"image_url": str | None,
|
||||
"ingredients": [str, ...],
|
||||
"instructions": [str, ...],
|
||||
"original_url": str,
|
||||
}
|
||||
|
||||
Raises ValueError on unsupported sites or parse failures.
|
||||
"""
|
||||
resp = requests.get(url, headers=_HEADERS, timeout=30)
|
||||
resp.raise_for_status()
|
||||
resp.encoding = resp.apparent_encoding or "utf-8"
|
||||
soup = BeautifulSoup(resp.text, "lxml")
|
||||
|
||||
host = _host(url)
|
||||
if "mindmegette" in host:
|
||||
return _parse_mindmegette(soup, url)
|
||||
else:
|
||||
# Fallback: try generic schema.org / og-tag extraction
|
||||
return _parse_generic(soup, url)
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# mindmegette.hu
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def _parse_mindmegette(soup: BeautifulSoup, url: str) -> dict:
|
||||
title = _og(soup, "og:title") or _text(soup.find("title"))
|
||||
# Strip " | Mindmegette.hu" suffix
|
||||
if title:
|
||||
title = re.sub(r"\s*\|\s*Mindmegette\.hu$", "", title).strip()
|
||||
|
||||
description = _og(soup, "og:description") or ""
|
||||
image_url = _og(soup, "og:image")
|
||||
|
||||
# --- Ingredients ---
|
||||
ingredients = []
|
||||
ing_container = soup.find("div", class_="ingredients")
|
||||
if ing_container:
|
||||
for row in ing_container.find_all("div", class_="ingredients-meta"):
|
||||
parts = []
|
||||
# Quantity spans: <span class="quantity">1</span> <span class="unit">kg</span>
|
||||
qty_el = row.find("span", class_="quantity")
|
||||
unit_el = row.find("span", class_="unit")
|
||||
name_el = row.find("span", class_="name")
|
||||
extra_el = row.find("span", class_="extra")
|
||||
|
||||
if qty_el:
|
||||
parts.append(_text(qty_el))
|
||||
if unit_el:
|
||||
parts.append(_text(unit_el))
|
||||
if name_el:
|
||||
parts.append(_text(name_el))
|
||||
if extra_el:
|
||||
parts.append(_text(extra_el))
|
||||
|
||||
line = " ".join(p for p in parts if p)
|
||||
if not line:
|
||||
# Fallback: just grab the whole text of the row
|
||||
line = _text(row)
|
||||
if line:
|
||||
ingredients.append(line)
|
||||
|
||||
# --- Instructions ---
|
||||
instructions = []
|
||||
wysiwyg = soup.find("mindmegette-wysiwyg-box")
|
||||
if wysiwyg:
|
||||
for li in wysiwyg.find_all("li"):
|
||||
txt = _text(li)
|
||||
if txt:
|
||||
instructions.append(txt)
|
||||
# Fallback: look for block-content divs
|
||||
if not instructions:
|
||||
for div in soup.find_all("div", class_="block-content"):
|
||||
ol = div.find("ol")
|
||||
if ol:
|
||||
for li in ol.find_all("li"):
|
||||
txt = _text(li)
|
||||
if txt:
|
||||
instructions.append(txt)
|
||||
|
||||
return {
|
||||
"title": title or "Ismeretlen recept",
|
||||
"description": description,
|
||||
"image_url": image_url,
|
||||
"ingredients": ingredients,
|
||||
"instructions": instructions,
|
||||
"original_url": url,
|
||||
}
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Generic fallback (og-tags + schema.org microdata)
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def _parse_generic(soup: BeautifulSoup, url: str) -> dict:
|
||||
title = _og(soup, "og:title") or _text(soup.find("title")) or "Ismeretlen recept"
|
||||
description = _og(soup, "og:description") or ""
|
||||
image_url = _og(soup, "og:image")
|
||||
|
||||
ingredients = []
|
||||
instructions = []
|
||||
|
||||
# Try schema.org JSON-LD
|
||||
for script in soup.find_all("script", type="application/ld+json"):
|
||||
try:
|
||||
import json
|
||||
data = json.loads(script.string or "")
|
||||
if isinstance(data, list):
|
||||
data = data[0]
|
||||
if data.get("@type") == "Recipe":
|
||||
ingredients = data.get("recipeIngredient", [])
|
||||
raw_instructions = data.get("recipeInstructions", [])
|
||||
for item in raw_instructions:
|
||||
if isinstance(item, str):
|
||||
instructions.append(item)
|
||||
elif isinstance(item, dict):
|
||||
instructions.append(item.get("text", ""))
|
||||
break
|
||||
except (json.JSONDecodeError, TypeError, AttributeError):
|
||||
continue
|
||||
|
||||
return {
|
||||
"title": title,
|
||||
"description": description,
|
||||
"image_url": image_url,
|
||||
"ingredients": ingredients,
|
||||
"instructions": instructions,
|
||||
"original_url": url,
|
||||
}
|
||||
|
||||
|
||||
# ---------------------------------------------------------------------------
|
||||
# Helpers
|
||||
# ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
def _host(url: str) -> str:
|
||||
from urllib.parse import urlparse
|
||||
return urlparse(url).hostname or ""
|
||||
|
||||
|
||||
def _og(soup: BeautifulSoup, prop: str) -> str | None:
|
||||
tag = soup.find("meta", property=prop)
|
||||
if tag and tag.get("content"):
|
||||
return tag["content"]
|
||||
return None
|
||||
|
||||
|
||||
def _text(el) -> str:
|
||||
if el is None:
|
||||
return ""
|
||||
return el.get_text(strip=True)
|
||||
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="hu">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Recept Importáló{% endblock %}</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #1a1a2e;
|
||||
--surface: #16213e;
|
||||
--surface2: #0f3460;
|
||||
--accent: #e94560;
|
||||
--accent-hover: #d63851;
|
||||
--text: #eee;
|
||||
--text-dim: #aab;
|
||||
--success: #2ecc71;
|
||||
--warning: #f39c12;
|
||||
--danger: #e74c3c;
|
||||
--border: #2a2a4a;
|
||||
--input-bg: #1a1a3e;
|
||||
--radius: 8px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* --- Nav --- */
|
||||
nav {
|
||||
background: var(--surface);
|
||||
border-bottom: 1px solid var(--border);
|
||||
padding: 0.75rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
nav .brand {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
nav a {
|
||||
color: var(--text-dim);
|
||||
text-decoration: none;
|
||||
padding: 0.4rem 0.75rem;
|
||||
border-radius: var(--radius);
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
nav a:hover, nav a.active {
|
||||
background: var(--surface2);
|
||||
color: var(--text);
|
||||
}
|
||||
nav .version {
|
||||
margin-left: auto;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* --- Layout --- */
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 2rem auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* --- Cards --- */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.card h2 {
|
||||
margin-bottom: 1rem;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* --- Forms --- */
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.3rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-dim);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
input[type="text"], input[type="url"], input[type="password"], textarea {
|
||||
width: 100%;
|
||||
padding: 0.6rem 0.8rem;
|
||||
background: var(--input-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--text);
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 1rem;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
textarea { resize: vertical; min-height: 80px; font-family: inherit; }
|
||||
|
||||
/* --- Buttons --- */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border: none;
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
color: #fff;
|
||||
}
|
||||
.btn:active { transform: scale(0.97); }
|
||||
.btn-primary { background: var(--accent); }
|
||||
.btn-primary:hover { background: var(--accent-hover); }
|
||||
.btn-secondary { background: var(--surface2); }
|
||||
.btn-secondary:hover { background: #1a4a7a; }
|
||||
.btn-success { background: var(--success); color: #111; }
|
||||
.btn-success:hover { background: #27ae60; }
|
||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
/* --- Alerts --- */
|
||||
.alert {
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.alert-success { background: rgba(46,204,113,0.15); border: 1px solid var(--success); }
|
||||
.alert-warning { background: rgba(243,156,18,0.15); border: 1px solid var(--warning); }
|
||||
.alert-danger { background: rgba(231,76,60,0.15); border: 1px solid var(--danger); }
|
||||
|
||||
/* --- Spinner --- */
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border: 2px solid rgba(255,255,255,0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
/* --- Misc --- */
|
||||
.hidden { display: none !important; }
|
||||
.mb-1 { margin-bottom: 0.5rem; }
|
||||
.mb-2 { margin-bottom: 1rem; }
|
||||
.mt-1 { margin-top: 0.5rem; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.text-dim { color: var(--text-dim); }
|
||||
.text-success { color: var(--success); }
|
||||
.text-danger { color: var(--danger); }
|
||||
.flex { display: flex; gap: 0.75rem; align-items: center; }
|
||||
.flex-wrap { flex-wrap: wrap; }
|
||||
.grow { flex: 1; }
|
||||
</style>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<a href="/" class="brand">Recept Importáló</a>
|
||||
<a href="/import" {% if request.path == '/import' %}class="active"{% endif %}>Importálás</a>
|
||||
<a href="/settings" {% if request.path == '/settings' %}class="active"{% endif %}>Beállítások</a>
|
||||
<span class="version">v{{ version }}</span>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% for cat, msg in messages %}
|
||||
<div class="alert alert-{{ cat }}">{{ msg }}</div>
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% block scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 %}
|
||||
@@ -0,0 +1,56 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Beállítások — Recept Importáló{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="card">
|
||||
<h2>Mealie kapcsolat</h2>
|
||||
<form method="POST" action="/settings">
|
||||
<label for="mealie_url">Mealie URL</label>
|
||||
<input type="url" id="mealie_url" name="mealie_url"
|
||||
value="{{ cfg.mealie_url }}"
|
||||
placeholder="https://mealie.example.com">
|
||||
|
||||
<label for="mealie_api_key">API kulcs</label>
|
||||
<input type="password" id="mealie_api_key" name="mealie_api_key"
|
||||
value="{{ cfg.mealie_api_key }}"
|
||||
placeholder="Mealie API token">
|
||||
<p class="text-dim mb-2" style="font-size:0.85rem;">
|
||||
Az API kulcsot a Mealie felhasználói profilod alatt hozhatod létre:
|
||||
<em>Profil → API Tokenek</em>
|
||||
</p>
|
||||
|
||||
<div class="flex">
|
||||
<button type="submit" class="btn btn-primary">Mentés</button>
|
||||
<button type="button" class="btn btn-secondary" id="testBtn" onclick="testConnection()">
|
||||
Kapcsolat tesztelése
|
||||
</button>
|
||||
<span id="testResult"></span>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<script>
|
||||
async function testConnection() {
|
||||
const btn = document.getElementById('testBtn');
|
||||
const result = document.getElementById('testResult');
|
||||
btn.disabled = true;
|
||||
result.innerHTML = '<span class="spinner"></span>';
|
||||
|
||||
try {
|
||||
const resp = await fetch('/settings/test', { method: 'POST' });
|
||||
const data = await resp.json();
|
||||
if (data.ok) {
|
||||
const v = data.data.version || '?';
|
||||
result.innerHTML = '<span class="text-success">✓ Kapcsolódva (Mealie v' + v + ')</span>';
|
||||
} else {
|
||||
result.innerHTML = '<span class="text-danger">✗ ' + data.error + '</span>';
|
||||
}
|
||||
} catch (e) {
|
||||
result.innerHTML = '<span class="text-danger">✗ Hálózati hiba</span>';
|
||||
}
|
||||
btn.disabled = false;
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user