158 lines
6.3 KiB
HTML
158 lines
6.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Mes recettes</title>
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="top-nav">
|
||
<div>
|
||
<a href="{{ url_for('menu') }}" class="btn btn-secondary">← Retour au menu</a>
|
||
</div>
|
||
<div style="display: flex; gap: 10px;">
|
||
<a href="{{ url_for('add_recette') }}" class="btn">➕ Ajouter une recette</a>
|
||
<a href="{{ url_for('export_recettes') }}" class="btn btn-success">📥 Exporter</a>
|
||
<button type="button" class="btn btn-info" onclick="openImportModal()">📤 Importer</button>
|
||
</div>
|
||
</div>
|
||
|
||
<h1>📚 Mes recettes</h1>
|
||
|
||
<!-- 🔔 MESSAGES FLASH -->
|
||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||
{% if messages %}
|
||
{% for category, message in messages %}
|
||
<div class="alert alert-{{ category }}">
|
||
{{ message }}
|
||
</div>
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endwith %}
|
||
|
||
<!-- 🔍 BARRE DE RECHERCHE -->
|
||
<form method="GET" action="{{ url_for('recettes') }}" class="search-form">
|
||
<input
|
||
type="text"
|
||
name="search"
|
||
placeholder="🔍 Rechercher une recette ou un ingrédient..."
|
||
value="{{ search or '' }}"
|
||
autofocus
|
||
>
|
||
<button type="submit" class="btn">Rechercher</button>
|
||
{% if search %}
|
||
<a href="{{ url_for('recettes') }}" class="btn-clear">✖ Effacer</a>
|
||
{% endif %}
|
||
</form>
|
||
|
||
<!-- Affichage nombre de résultats -->
|
||
{% if search %}
|
||
<p class="search-info">
|
||
{% if recettes %}
|
||
{{ recettes|length }} résultat(s) pour "<strong>{{ search }}</strong>"
|
||
{% else %}
|
||
Aucun résultat pour "<strong>{{ search }}</strong>"
|
||
{% endif %}
|
||
</p>
|
||
{% endif %}
|
||
|
||
{% if recettes %}
|
||
<div class="recettes-list">
|
||
{% for recette in recettes %}
|
||
<div class="recette-card">
|
||
<h3>{{ recette['nom'] }}</h3>
|
||
|
||
{% if recette['lien'] %}
|
||
<div class="recipe-link" style="margin-bottom: 15px;">
|
||
<a href="{{ recette['lien'] }}" target="_blank" class="btn-link">🔗 Voir la recette en ligne</a>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if recette['ingredients'] %}
|
||
<div class="ingredients">
|
||
<strong>Ingrédients :</strong>
|
||
<pre>{{ recette['ingredients'] }}</pre>
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% if recette['instructions'] %}
|
||
<div class="instructions">
|
||
<strong>Instructions :</strong>
|
||
<pre>{{ recette['instructions'] }}</pre>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<div class="actions">
|
||
<a href="{{ url_for('edit_recette', id=recette['id']) }}" class="btn-edit">✏️ Modifier</a>
|
||
<form method="POST" action="{{ url_for('delete_recette', id=recette['id']) }}" style="display: inline;">
|
||
<button type="submit" class="btn-delete" onclick="return confirm('Supprimer cette recette ?')">🗑️ Supprimer</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
{% if search %}
|
||
<p style="text-align: center; color: #666; margin: 40px 0;">
|
||
Aucune recette trouvée. <a href="{{ url_for('recettes') }}">Voir toutes les recettes</a>
|
||
</p>
|
||
{% else %}
|
||
<p style="text-align: center; color: #666; margin: 40px 0;">
|
||
Aucune recette pour le moment. Commencez par en ajouter une !
|
||
</p>
|
||
{% endif %}
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- 📤 MODAL IMPORT -->
|
||
<div id="importModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>📤 Importer des recettes</h2>
|
||
<button class="close-btn" onclick="closeImportModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form method="POST" action="{{ url_for('import_recettes') }}" enctype="multipart/form-data" id="importForm">
|
||
<label class="form-label">Sélectionnez un fichier JSON :</label>
|
||
<input type="file" name="file" accept=".json" class="file-input" required>
|
||
|
||
<div class="alert-info">
|
||
<strong>ℹ️ Format attendu :</strong>
|
||
<ul>
|
||
<li>Fichier JSON exporté depuis cette application</li>
|
||
<li>Les recettes existantes avec le même nom seront mises à jour</li>
|
||
<li>Les nouvelles recettes seront ajoutées</li>
|
||
</ul>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" onclick="closeImportModal()">Annuler</button>
|
||
<button type="submit" form="importForm" class="btn btn-primary">Importer</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function openImportModal() {
|
||
document.getElementById('importModal').style.display = 'flex';
|
||
}
|
||
|
||
function closeImportModal() {
|
||
document.getElementById('importModal').style.display = 'none';
|
||
document.getElementById('importForm').reset();
|
||
}
|
||
|
||
// Fermer modal en cliquant en dehors
|
||
window.onclick = function(event) {
|
||
const modal = document.getElementById('importModal');
|
||
if (event.target == modal) {
|
||
closeImportModal();
|
||
}
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|