diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/app.js | 47 | ||||
| -rw-r--r-- | static/index.html | 1 | ||||
| -rw-r--r-- | static/recipe.html | 217 |
3 files changed, 231 insertions, 34 deletions
diff --git a/static/app.js b/static/app.js index 3135aa9..796b9bf 100644 --- a/static/app.js +++ b/static/app.js @@ -592,6 +592,7 @@ async function loadGrocery() { document.getElementById('grocery-empty').classList.remove('hidden'); document.getElementById('btn-mark-purchased').classList.add('hidden'); document.getElementById('btn-clear-grocery').classList.add('hidden'); + document.getElementById('btn-copy-grocery').classList.add('hidden'); return; } @@ -599,6 +600,7 @@ async function loadGrocery() { state.currentGroceryId = res.id; document.getElementById('grocery-empty').classList.add('hidden'); document.getElementById('btn-clear-grocery').classList.remove('hidden'); + document.getElementById('btn-copy-grocery').classList.remove('hidden'); if (res.notes) { document.getElementById('grocery-notes').textContent = res.notes; @@ -691,6 +693,48 @@ function renderGroceryList() { } } +function copyGroceryList() { + if (!state.currentGrocery) return; + + let items = state.currentGrocery.items; + if (typeof items === 'string') { + try { items = JSON.parse(items); } catch { items = []; } + } + if (!Array.isArray(items)) items = []; + + const total = items.filter(i => !i.checked).reduce((sum, item) => sum + (item.estimated_cost || 0), 0); + const grouped = {}; + items.forEach(item => { + const section = item.store_section || 'other'; + if (!grouped[section]) grouped[section] = []; + grouped[section].push(item); + }); + + let md = '## Grocery List\n'; + if (total > 0) md += `**Estimated total: $${total.toFixed(2)}**\n`; + + Object.keys(grouped).sort().forEach(section => { + const unchecked = grouped[section].filter(item => !item.checked); + if (!unchecked.length) return; + const title = section.charAt(0).toUpperCase() + section.slice(1); + md += `\n### ${title}\n`; + unchecked.forEach(item => { + const qty = [item.quantity, item.unit].filter(Boolean).join(' '); + md += `- [ ] ${qty ? qty + ' ' : ''}${item.name}\n`; + }); + }); + + const notes = state.currentGrocery.notes; + if (notes) md += `\n> ${notes}\n`; + + navigator.clipboard.writeText(md).then(() => { + const btn = document.getElementById('btn-copy-grocery'); + const orig = btn.textContent; + btn.textContent = 'Copied!'; + setTimeout(() => { btn.textContent = orig; }, 2000); + }).catch(() => showToast('Could not copy to clipboard', 'error')); +} + async function checkGroceryItem(checkbox) { const checked = checkbox.checked; const row = checkbox.closest('.grocery-item'); @@ -739,6 +783,7 @@ async function generateGrocery() { document.getElementById('grocery-empty').classList.add('hidden'); document.getElementById('btn-mark-purchased').classList.remove('hidden'); document.getElementById('btn-clear-grocery').classList.remove('hidden'); + document.getElementById('btn-copy-grocery').classList.remove('hidden'); if (res.shopping_notes) { document.getElementById('grocery-notes').textContent = res.shopping_notes; @@ -771,6 +816,7 @@ async function clearGrocery() { document.getElementById('grocery-notes').classList.add('hidden'); document.getElementById('btn-mark-purchased').classList.add('hidden'); document.getElementById('btn-clear-grocery').classList.add('hidden'); + document.getElementById('btn-copy-grocery').classList.add('hidden'); showToast('Grocery list cleared'); } catch (err) { showToast(err.message, 'error'); @@ -999,6 +1045,7 @@ async function init() { // Set up grocery form document.getElementById('btn-generate-grocery').addEventListener('click', generateGrocery); document.getElementById('btn-clear-grocery').addEventListener('click', clearGrocery); + document.getElementById('btn-copy-grocery').addEventListener('click', copyGroceryList); document.getElementById('btn-mark-purchased').addEventListener('click', markPurchased); // Set up chat diff --git a/static/index.html b/static/index.html index 7db0a86..f009e00 100644 --- a/static/index.html +++ b/static/index.html @@ -110,6 +110,7 @@ <textarea id="grocery-user-notes" class="ai-notes-input" placeholder="Any preferences or instructions for the AI (e.g. budget $50, no red meat, stock up on breakfast items)..." rows="2"></textarea> <button class="btn btn-primary" id="btn-generate-grocery">✨ Generate List</button> <button class="btn btn-danger hidden" id="btn-clear-grocery">Clear</button> + <button class="btn btn-secondary hidden" id="btn-copy-grocery">Copy</button> <button class="btn btn-success hidden" id="btn-mark-purchased">✓ Mark All Purchased</button> <div id="grocery-spinner" class="spinner hidden"></div> </div> diff --git a/static/recipe.html b/static/recipe.html index 2a5614f..34b0669 100644 --- a/static/recipe.html +++ b/static/recipe.html @@ -18,46 +18,195 @@ <script> const params = new URLSearchParams(location.search); const id = params.get('id'); + let currentRecipe = null; + let isEditMode = false; + + function parseIngredientsFromText(text) { + return text.split('\n') + .map(line => line.trim()) + .filter(line => line.length > 0) + .map(line => { + const parts = line.split(/\s+/); + if (parts.length >= 3) { + const quantity = parseFloat(parts[0]); + if (!isNaN(quantity)) { + const unit = parts[1]; + const name = parts.slice(2).join(' '); + return { quantity, unit, name }; + } + } + return { name: line, quantity: 1, unit: '' }; + }); + } + + function ingredientsToText(ingredients) { + if (!Array.isArray(ingredients)) return ''; + return ingredients.map(i => { + if (typeof i === 'string') return i; + return [i.quantity, i.unit, i.name].filter(Boolean).join(' '); + }).join('\n'); + } + + function renderViewMode(recipe) { + let ingredients = []; + try { ingredients = JSON.parse(recipe.ingredients); } catch {} + + const mealType = recipe.meal_type || 'dinner'; + const typeDisplay = mealType.charAt(0).toUpperCase() + mealType.slice(1); + const time = recipe.estimated_time_minutes; + const serves = recipe.servings; + const meta = [time ? `${time} min` : '', serves ? `serves ${serves}` : ''].filter(Boolean).join(' · '); + + const ingredientList = Array.isArray(ingredients) + ? ingredients.map(i => { + if (typeof i === 'string') return `<li>${i}</li>`; + return `<li>${[i.quantity, i.unit, i.name].filter(Boolean).join(' ')}</li>`; + }).join('') + : ''; + + const instructionSteps = (recipe.instructions || '') + .split(/\n+| (?=\d+\. )/) + .map(s => s.trim()) + .filter(Boolean) + .map(s => `<p>${s}</p>`) + .join(''); + + document.title = `${recipe.name} — Commis`; + document.getElementById('recipe-content').innerHTML = ` + <div class="recipe-card-header" style="margin-bottom:0.5rem;display:flex;justify-content:space-between;align-items:start;gap:1rem;"> + <div> + <h1 style="font-size:1.6rem;margin:0;">${recipe.name}</h1> + <span class="recipe-type-badge ${mealType}">${typeDisplay}</span> + </div> + <button class="btn btn-secondary" style="white-space:nowrap;margin-top:0.25rem;" onclick="enterEditMode()">Edit</button> + </div> + ${recipe.description ? `<p style="color:var(--text-muted);margin:0.5rem 0 1rem;">${recipe.description}</p>` : ''} + ${meta ? `<div class="recipe-card-meta" style="margin-bottom:1.5rem;">${meta}</div>` : ''} + ${ingredientList ? `<h2 style="font-size:1.1rem;margin-bottom:0.5rem;">Ingredients</h2><ul style="padding-left:1.25rem;line-height:1.8;">${ingredientList}</ul>` : ''} + ${instructionSteps ? `<h2 style="font-size:1.1rem;margin:1.5rem 0 0.5rem;">Instructions</h2><div style="line-height:1.7;">${instructionSteps}</div>` : ''} + `; + isEditMode = false; + } + + function renderEditMode(recipe) { + let ingredients = []; + try { ingredients = JSON.parse(recipe.ingredients); } catch {} + const ingredientText = ingredientsToText(ingredients); + + document.getElementById('recipe-content').innerHTML = ` + <div style="margin-bottom:1.5rem;"> + <button class="btn btn-secondary" style="margin-bottom:1rem;" onclick="exitEditMode()">← Back</button> + <h2 style="font-size:1.4rem;margin:0 0 1.5rem;">Edit Recipe</h2> + + <form id="edit-form" style="display:flex;flex-direction:column;gap:1.5rem;"> + <div> + <label style="display:block;margin-bottom:0.5rem;font-weight:500;">Name</label> + <input type="text" id="edit-name" value="${recipe.name}" style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;box-sizing:border-box;"> + </div> + + <div> + <label style="display:block;margin-bottom:0.5rem;font-weight:500;">Meal Type</label> + <select id="edit-meal-type" style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;box-sizing:border-box;"> + <option value="breakfast" ${recipe.meal_type === 'breakfast' ? 'selected' : ''}>Breakfast</option> + <option value="lunch" ${recipe.meal_type === 'lunch' ? 'selected' : ''}>Lunch</option> + <option value="dinner" ${recipe.meal_type === 'dinner' ? 'selected' : ''}>Dinner</option> + </select> + </div> + + <div> + <label style="display:block;margin-bottom:0.5rem;font-weight:500;">Description (optional)</label> + <textarea id="edit-description" style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;box-sizing:border-box;min-height:80px;font-family:inherit;" placeholder="Brief description of the recipe">${recipe.description || ''}</textarea> + </div> + + <div> + <label style="display:block;margin-bottom:0.5rem;font-weight:500;">Time (minutes, optional)</label> + <input type="number" id="edit-time" value="${recipe.estimated_time_minutes || ''}" style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;box-sizing:border-box;"> + </div> + + <div> + <label style="display:block;margin-bottom:0.5rem;font-weight:500;">Servings</label> + <input type="number" id="edit-servings" value="${recipe.servings}" min="1" style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;box-sizing:border-box;"> + </div> + + <div> + <label style="display:block;margin-bottom:0.5rem;font-weight:500;">Ingredients</label> + <textarea id="edit-ingredients" style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;box-sizing:border-box;min-height:150px;font-family:monospace;" placeholder="One ingredient per line (e.g., 1 cup flour)">${ingredientText}</textarea> + <p style="color:var(--text-muted);font-size:0.9rem;margin-top:0.25rem;">Format: quantity unit name (e.g., 1 cup flour)</p> + </div> + + <div> + <label style="display:block;margin-bottom:0.5rem;font-weight:500;">Instructions</label> + <textarea id="edit-instructions" style="width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:6px;font-size:1rem;box-sizing:border-box;min-height:150px;font-family:inherit;" placeholder="Step-by-step instructions">${recipe.instructions || ''}</textarea> + </div> + + <div style="display:flex;gap:1rem;"> + <button type="button" class="btn btn-primary" onclick="saveRecipe()" style="flex:1;">Save</button> + <button type="button" class="btn btn-secondary" onclick="exitEditMode()" style="flex:1;">Cancel</button> + </div> + </form> + </div> + `; + isEditMode = true; + } + + function enterEditMode() { + if (currentRecipe) renderEditMode(currentRecipe); + } + + function exitEditMode() { + if (currentRecipe) renderViewMode(currentRecipe); + } + + async function saveRecipe() { + const name = document.getElementById('edit-name').value.trim(); + const meal_type = document.getElementById('edit-meal-type').value; + const description = document.getElementById('edit-description').value.trim(); + const time_minutes = document.getElementById('edit-time').value; + const servings = parseInt(document.getElementById('edit-servings').value, 10) || 2; + const ingredientText = document.getElementById('edit-ingredients').value.trim(); + const instructions = document.getElementById('edit-instructions').value.trim(); + + if (!name) { + alert('Recipe name is required.'); + return; + } + + const ingredients = parseIngredientsFromText(ingredientText); + const payload = { + name, + meal_type, + description: description || null, + estimated_time_minutes: time_minutes ? parseInt(time_minutes, 10) : null, + servings, + ingredients: JSON.stringify(ingredients), + instructions: instructions || null, + }; + + try { + const response = await fetch(`/api/recipes/${id}`, { + method: 'PUT', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(payload), + }); + if (!response.ok) { + throw new Error(`HTTP ${response.status}: ${response.statusText}`); + } + const updated = await response.json(); + currentRecipe = updated; + renderViewMode(currentRecipe); + } catch (err) { + alert(`Failed to save recipe: ${err.message}`); + } + } + if (!id) { document.getElementById('recipe-content').innerHTML = '<p>No recipe ID provided.</p>'; } else { fetch(`/api/recipes/${id}`) .then(r => r.ok ? r.json() : Promise.reject(r.statusText)) .then(recipe => { - let ingredients = []; - try { ingredients = JSON.parse(recipe.ingredients); } catch {} - - const mealType = recipe.meal_type || 'dinner'; - const typeDisplay = mealType.charAt(0).toUpperCase() + mealType.slice(1); - const time = recipe.estimated_time_minutes; - const serves = recipe.servings; - const meta = [time ? `${time} min` : '', serves ? `serves ${serves}` : ''].filter(Boolean).join(' · '); - - const ingredientList = Array.isArray(ingredients) - ? ingredients.map(i => { - if (typeof i === 'string') return `<li>${i}</li>`; - return `<li>${[i.quantity, i.unit, i.name].filter(Boolean).join(' ')}</li>`; - }).join('') - : ''; - - const instructionSteps = (recipe.instructions || '') - .split(/\n+| (?=\d+\. )/) - .map(s => s.trim()) - .filter(Boolean) - .map(s => `<p>${s}</p>`) - .join(''); - - document.title = `${recipe.name} — Commis`; - document.getElementById('recipe-content').innerHTML = ` - <div class="recipe-card-header" style="margin-bottom:0.5rem;"> - <h1 style="font-size:1.6rem;margin:0;">${recipe.name}</h1> - <span class="recipe-type-badge ${mealType}">${typeDisplay}</span> - </div> - ${recipe.description ? `<p style="color:var(--text-muted);margin:0.5rem 0 1rem;">${recipe.description}</p>` : ''} - ${meta ? `<div class="recipe-card-meta" style="margin-bottom:1.5rem;">${meta}</div>` : ''} - ${ingredientList ? `<h2 style="font-size:1.1rem;margin-bottom:0.5rem;">Ingredients</h2><ul style="padding-left:1.25rem;line-height:1.8;">${ingredientList}</ul>` : ''} - ${instructionSteps ? `<h2 style="font-size:1.1rem;margin:1.5rem 0 0.5rem;">Instructions</h2><div style="line-height:1.7;">${instructionSteps}</div>` : ''} - `; + currentRecipe = recipe; + renderViewMode(recipe); }) .catch(err => { document.getElementById('recipe-content').innerHTML = `<p>Failed to load recipe: ${err}</p>`; |