Add buttons
This commit is contained in:
Flatlogic Bot
parent
8cf30205a9
commit
ea0af5455b
@ -242,7 +242,7 @@ const app = {
|
||||
buttonGroup.className = 'mt-auto pt-2 d-flex gap-2 justify-content-center w-100';
|
||||
buttonGroup.innerHTML = `
|
||||
<button class="btn btn-light btn-sm view-recipe"><i class="bi bi-eye"></i> View</button>
|
||||
<button class="btn btn-light btn-sm edit-recipe"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-light btn-sm edit-recipe"><i class="bi bi-pencil"></i> Edit</button>
|
||||
<button class="btn btn-outline-danger btn-sm delete-recipe" title="Delete"><i class="bi bi-trash"></i></button>
|
||||
`;
|
||||
|
||||
@ -496,20 +496,33 @@ const app = {
|
||||
document.getElementById('view-recipe-guests').textContent = recipe.guests;
|
||||
document.getElementById('view-recipe-instructions').textContent = recipe.instructions || 'No instructions provided.';
|
||||
|
||||
const ingredientsList = document.getElementById('view-recipe-ingredients');
|
||||
ingredientsList.innerHTML = '';
|
||||
if (recipe.ingredients) {
|
||||
recipe.ingredients.forEach(ing => {
|
||||
const li = document.createElement('li');
|
||||
li.className = 'list-group-item';
|
||||
li.textContent = `${ing.name} - ${ing.quantity} ${ing.unit}`;
|
||||
ingredientsList.appendChild(li);
|
||||
});
|
||||
}
|
||||
const ingredientsList = document.getElementById('view-recipe-ingredients');
|
||||
|
||||
const viewRecipeModal = new bootstrap.Modal(modal);
|
||||
viewRecipeModal.show();
|
||||
},
|
||||
ingredientsList.innerHTML = '';
|
||||
|
||||
|
||||
|
||||
if (recipe.ingredients) {
|
||||
|
||||
recipe.ingredients.forEach(ing => {
|
||||
|
||||
const li = document.createElement('li');
|
||||
|
||||
li.className = 'list-group-item';
|
||||
|
||||
li.textContent = `${ing.name} - ${ing.quantity} ${ing.unit}`;
|
||||
|
||||
ingredientsList.appendChild(li);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
app.dom.viewRecipeModal.show();
|
||||
|
||||
},
|
||||
getRecipeDataFromForm() {
|
||||
const recipeName = app.dom.recipeNameInput.value.trim();
|
||||
const instructions = app.dom.recipeInstructionsInput.value.trim();
|
||||
@ -635,6 +648,34 @@ const app = {
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('add-recipe-options-modal').addEventListener('click', (e) => {
|
||||
const btn = e.target.closest('.add-option-btn');
|
||||
if (!btn) return;
|
||||
|
||||
const method = btn.dataset.method;
|
||||
app.dom.addRecipeOptionsModal.hide();
|
||||
|
||||
if (method === 'scratch' || method === 'photo') {
|
||||
app.ui.clearForm();
|
||||
app.dom.recipeFormModal.show();
|
||||
if (method === 'photo') {
|
||||
setTimeout(() => app.dom.recipeImage.click(), 500);
|
||||
}
|
||||
} else if (method === 'web' || method === 'social') {
|
||||
const url = prompt('Please enter the URL of the recipe:');
|
||||
if (url) {
|
||||
alert('Analyzing recipe from URL... (Feature integration in progress)');
|
||||
// Here you would typically call an AI endpoint to scrape/analyze the URL
|
||||
}
|
||||
} else if (method === 'ingredients') {
|
||||
const ingredients = prompt('What ingredients do you have? (comma separated)');
|
||||
if (ingredients) {
|
||||
alert('Generating a recipe from: ' + ingredients + '... (Feature integration in progress)');
|
||||
// Here you would call an AI endpoint to generate a recipe
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
app.dom.addIngredientBtn.addEventListener('click', () => app.ui.addIngredientRow());
|
||||
|
||||
app.dom.aiScanBtn.addEventListener('click', async function() {
|
||||
@ -749,7 +790,7 @@ const app = {
|
||||
app.dom.recipeCardsContainer.addEventListener('click', function(e) {
|
||||
const target = e.target.closest('button');
|
||||
const checkbox = e.target.closest('.select-recipe');
|
||||
const cardCol = e.target.closest('.col-12[data-id]');
|
||||
const cardCol = e.target.closest('[data-id]');
|
||||
if (!cardCol) return;
|
||||
|
||||
const recipeId = cardCol.getAttribute('data-id');
|
||||
@ -1042,12 +1083,14 @@ const app = {
|
||||
|
||||
printShoppingListBtn: document.getElementById('print-shopping-list-btn'),
|
||||
recipeFormModal: new bootstrap.Modal(document.getElementById('recipe-form-modal')),
|
||||
viewRecipeModal: new bootstrap.Modal(document.getElementById('view-recipe-modal')),
|
||||
addProductModal: new bootstrap.Modal(document.getElementById('add-product-modal')),
|
||||
addProductForm: document.getElementById('add-product-form'),
|
||||
productNameInput: document.getElementById('productName'),
|
||||
productQuantityInput: document.getElementById('productQuantity'),
|
||||
productCategoryWrapper: document.getElementById('product-category-wrapper'),
|
||||
productCategory: document.getElementById('productCategory'),
|
||||
addRecipeOptionsModal: new bootstrap.Modal(document.getElementById('add-recipe-options-modal')),
|
||||
};
|
||||
|
||||
app.ui.loadCheckedItems();
|
||||
|
||||
53
index.php
53
index.php
@ -167,7 +167,7 @@
|
||||
<div class="col-md-6">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2 class="text-center mb-0">All Recipes</h2>
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#recipe-form-modal">
|
||||
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#add-recipe-options-modal">
|
||||
Add recipe
|
||||
</button>
|
||||
</div>
|
||||
@ -211,6 +211,57 @@
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Modal Add Recipe Options -->
|
||||
<div class="modal fade" id="add-recipe-options-modal" tabindex="-1" aria-labelledby="add-recipe-options-modal-label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content border-0 shadow-lg" style="border-radius: 20px;">
|
||||
<div class="modal-header border-0 pb-0">
|
||||
<h5 class="modal-title fw-bold" id="add-recipe-options-modal-label">Choose method</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body p-4">
|
||||
<div class="d-grid gap-3">
|
||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="photo">
|
||||
<i class="bi bi-camera fs-3 me-3"></i>
|
||||
<div>
|
||||
<div class="fw-bold">Create from a photo</div>
|
||||
<div class="small text-muted">Scan a physical recipe or a dish</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="web">
|
||||
<i class="bi bi-globe fs-3 me-3"></i>
|
||||
<div>
|
||||
<div class="fw-bold">Save from the web</div>
|
||||
<div class="small text-muted">Paste a recipe URL</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="social">
|
||||
<i class="bi bi-instagram fs-3 me-3"></i>
|
||||
<div>
|
||||
<div class="fw-bold">Save from social media</div>
|
||||
<div class="small text-muted">Instagram, TikTok, Pinterest</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="ingredients">
|
||||
<i class="bi bi-basket fs-3 me-3"></i>
|
||||
<div>
|
||||
<div class="fw-bold">Create from available ingredients</div>
|
||||
<div class="small text-muted">Generate a recipe from what you have</div>
|
||||
</div>
|
||||
</button>
|
||||
<button class="btn btn-outline-primary p-3 text-start d-flex align-items-center rounded-4 add-option-btn" data-method="scratch">
|
||||
<i class="bi bi-pencil-square fs-3 me-3"></i>
|
||||
<div>
|
||||
<div class="fw-bold">Create a recipe from scratch</div>
|
||||
<div class="small text-muted">Enter ingredients and steps manually</div>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Recipe Form -->
|
||||
<div class="modal fade" id="recipe-form-modal" tabindex="-1" aria-labelledby="recipe-form-modal-label" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user