Family Meal Planner

function handleZapierResponse() { const urlParams = new URLSearchParams(window.location.search); const action = urlParams.get('action'); const response = urlParams.get('response'); const planId = urlParams.get('plan'); // Handle plan viewing from SMS link if (planId) { const savedPlan = localStorage.getItem(`plan_${planId}`); if (savedPlan) { suggestedPlan = JSON.parse(savedPlan); Family Meal Planner

📅 This Week's Menu

📖 Recipe Collection

}; // Collect all ingredients from planned meals Object.values(weekMeals).forEach(dayMeals => { dayMeals.forEach(mealIndex => { const recipe = recipes[mealIndex]; if (recipe) { recipe.ingredients.forEach(ingredient => { groceryItems[ingredient] = (groceryItems[ingredient] || 0) + 1; }); } }); }); // Organize by categories const categorizedItems = {}; Object.keys(groceryItems).forEach(item => { let category = 'Other'; for (const [cat, items] of Object.entries(categories)) { if (items.includes(item)) { category = cat; break; } } if (!categorizedItems[category]) { categorizedItems[category] = []; } categorizedItems[category].push({ name: item, quantity: groceryItems[item] }); }); // Render grocery list const groceryList = document.getElementById('groceryList'); const groceryItemsDiv = document.getElementById('groceryItems'); groceryItemsDiv.innerHTML = ''; Object.entries(categorizedItems).forEach(([category, items]) => { const categoryDiv = document.createElement('div'); categoryDiv.className = 'grocery-category'; categoryDiv.innerHTML = `

${category}

${item.name}${item.quantity > 1 ? ` (×${item.quantity})` : ''}

`; groceryItemsDiv.appendChild(categoryDiv); }); groceryList.style.display = 'block'; groceryList.scrollIntoView({ behavior: 'smooth' }); } function clearWeek() { if (confirm('Are you sure you want to clear this week\'s meal plan?')) { weekMeals = {}; days.forEach(day => weekMeals[day] = []); renderWeekMeals(); document.getElementById('groceryList').style.display = 'none'; } } // SMS Integration Functions function suggestWeeklyPlan() { // Create a balanced weekly plan const availableRecipes = [...recipes]; const orderOutOptions = ['Pizza Night 🍕', 'Thai Takeout 🥡', 'Chinese Food 🥢', 'Mexican Delivery 🌮', 'Burger Night 🍔']; suggestedPlan = {}; const usedRecipes = []; days.forEach((day, index) => { if (index === 4) { // Friday night - order out const randomOrderOut = orderOutOptions[Math.floor(Math.random() * orderOutOptions.length)]; suggestedPlan[day] = { type: 'orderOut', name: randomOrderOut }; } else { // Pick a random recipe we haven't used yet const availableForPicking = availableRecipes.filter(r => !usedRecipes.includes(r.name)); if (availableForPicking.length > 0) { const randomRecipe = availableForPicking[Math.floor(Math.random() * availableForPicking.length)]; suggestedPlan[day] = { type: 'recipe', recipe: randomRecipe }; usedRecipes.push(randomRecipe.name); } else { // If we've used all recipes, pick any random one const randomRecipe = availableRecipes[Math.floor(Math.random() * availableRecipes.length)]; suggestedPlan[day] = { type: 'recipe', recipe: randomRecipe }; } } }); displaySuggestedPlan(); // If this was triggered automatically (Saturday evening), send via Zapier const now = new Date(); if (now.getDay() === ZAPIER_CONFIG.scheduledTime.day && now.getHours() >= ZAPIER_CONFIG.scheduledTime.hour) { sendWeeklyPlanViaZapier(); } } function displaySuggestedPlan() { const weekGrid = document.getElementById('weekGrid'); // Remove any existing suggested plan display const existingSuggestion = document.querySelector('.suggested-plan'); if (existingSuggestion) { existingSuggestion.remove(); } // Create suggested plan display const planDiv = document.createElement('div'); planDiv.className = 'suggested-plan'; planDiv.innerHTML = `

🍽️ Suggested Weekly Menu

${days.map(day => `

${day}: ${suggestedPlan[day].type === 'orderOut' ? suggestedPlan[day].name : suggestedPlan[day].recipe.name}

`).join('')}

`; weekGrid.parentNode.insertBefore(planDiv, weekGrid); } function acceptSuggestedPlan() { // Clear current week weekMeals = {}; days.forEach(day => weekMeals[day] = []); // Apply suggested plan days.forEach(day => { if (suggestedPlan[day].type === 'recipe') { const recipeIndex = recipes.findIndex(r => r.name === suggestedPlan[day].recipe.name); if (recipeIndex !== -1) { weekMeals[day].push(recipeIndex); } } // Order out days are just displayed, no ingredients needed }); renderWeekMeals(); generateGroceryList(); // Remove suggested plan display const existingSuggestion = document.querySelector('.suggested-plan'); if (existingSuggestion) { existingSuggestion.remove(); } // Send confirmation to Zapier sendPlanAcceptedViaZapier(); showMessage('Meal plan accepted! Grocery list generated.', 'success'); } function rejectSuggestedPlan() { suggestWeeklyPlan(); // Generate a new plan } async function sendWeeklyPlanViaZapier() { const message = createWeeklyPlanMessage(); currentWeekId = generateWeekId(); const payload = { action: 'sendWeeklyPlan', phones: ZAPIER_CONFIG.phoneNumbers, message: message, weekId: currentWeekId, timestamp: new Date().toISOString(), // Structured data for easier Zapier processing mealPlan: days.map(day => ({ day: day, meal: suggestedPlan[day].type === 'orderOut' ? suggestedPlan[day].name : suggestedPlan[day].recipe.name, type: suggestedPlan[day].type })), // Individual phone numbers for Zapier to process separately phone1: ZAPIER_CONFIG.phoneNumbers[0], phone2: ZAPIER_CONFIG.phoneNumbers[1] }; try { const response = await fetch(ZAPIER_CONFIG.webhookUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (response.ok) { showMessage('Weekly plan sent via Zapier! 📱', 'success'); console.log('Zapier webhook triggered successfully'); } else { showMessage('Failed to trigger Zapier webhook. Check your URL.', 'error'); } } catch (error) { console.error('Zapier Error:', error); showMessage('Zapier webhook failed. Check your configuration.', 'error'); } } async function sendPlanAcceptedViaZapier() { const groceryListText = formatGroceryListForSharing(collectGroceryItems()); const payload = { action: 'planAccepted', phones: ZAPIER_CONFIG.phoneNumbers, phone1: ZAPIER_CONFIG.phoneNumbers[0], phone2: ZAPIER_CONFIG.phoneNumbers[1], message: '✅ Meal plan accepted! Grocery list is ready. Happy cooking! 🛒👨‍🍳', groceryList: groceryListText, weekId: currentWeekId, timestamp: new Date().toISOString() }; try { await fetch(ZAPIER_CONFIG.webhookUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); console.log('Plan acceptance sent to Zapier'); } catch (error) { console.error('Zapier Confirmation Error:', error); } } function showZapierPanel() { document.getElementById('zapierPanel').style.display = 'block'; document.getElementById('zapierPanel').scrollIntoView({ behavior: 'smooth' }); // Update the response webhook URL document.getElementById('responseWebhook').textContent = window.location.origin + '/accept-plan'; } function updateZapierConfig() { ZAPIER_CONFIG.webhookUrl = document.getElementById('zapierWebhook').value; ZAPIER_CONFIG.phoneNumbers = [ document.getElementById('phone1').value, document.getElementById('phone2').value ]; const timeValue = document.getElementById('scheduleTime').value.split(':'); ZAPIER_CONFIG.scheduledTime.hour = parseInt(timeValue[0]); ZAPIER_CONFIG.scheduledTime.minute = parseInt(timeValue[1]); ZAPIER_CONFIG.scheduledTime.day = parseInt(document.getElementById('scheduleDay').value); showMessage('Zapier settings updated! ⚡', 'success'); } function shareGroceryList() { // Create shareable grocery list const groceryItems = collectGroceryItems(); const listText = formatGroceryListForSharing(groceryItems); if (navigator.share) { navigator.share({ title: 'Weekly Grocery List', text: listText }); } else { // Fallback - copy to clipboard navigator.clipboard.writeText(listText).then(() => { showMessage('Grocery list copied to clipboard!', 'success'); }); } } function exportGroceryList() { const groceryItems = collectGroceryItems(); const listText = formatGroceryListForSharing(groceryItems); // Create downloadable file const blob = new Blob([listText], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'grocery-list.txt'; a.click(); URL.revokeObjectURL(url); } function collectGroceryItems() { const groceryItems = {}; Object.values(weekMeals).forEach(dayMeals => { dayMeals.forEach(mealIndex => { const recipe = recipes[mealIndex]; if (recipe) { recipe.ingredients.forEach(ingredient => { groceryItems[ingredient] = (groceryItems[ingredient] || 0) + 1; }); } }); }); return groceryItems; } function formatGroceryListForSharing(groceryItems) { const categories = { 'Produce': ['lettuce', 'tomatoes', 'onion', 'garlic', 'bell peppers', 'broccoli', 'avocado', 'lemon', 'asparagus', 'herbs'], 'Meat & Fish': ['ground beef', 'chicken breast', 'ground turkey', 'salmon fillet'], 'Pantry': ['spaghetti', 'tomato sauce', 'olive oil', 'soy sauce', 'rice', 'taco shells', 'quinoa'], 'Dairy': ['parmesan cheese', 'cheese', 'sour cream'], 'Spices': ['ginger'] }; let listText = '🛒 WEEKLY GROCERY LIST\n\n'; // Organize by categories const categorizedItems = {}; Object.keys(groceryItems).forEach(item => { let category = 'Other'; for (const [cat, items] of Object.entries(categories)) { if (items.includes(item)) { category = cat; break; } } if (!categorizedItems[category]) { categorizedItems[category] = []; } categorizedItems[category].push({ name: item, quantity: groceryItems[item] }); }); Object.entries(categorizedItems).forEach(([category, items]) => { listText += `📋 ${category.toUpperCase()}\n`; items.forEach(item => { listText += `• ${item.name}${item.quantity > 1 ? ` (×${item.quantity})` : ''}\n`; }); listText += '\n'; }); return listText; } function showMessage(message, type = 'success') { const statusDiv = document.getElementById('zapierStatus'); statusDiv.className = `${type}-message`; statusDiv.textContent = message; statusDiv.style.display = 'block'; setTimeout(() => { statusDiv.style.display = 'none'; }, 5000); } function createWeeklyPlanMessage() { let message = "🍽️ WEEKLY MEAL PLAN SUGGESTION 📅\n\n"; days.forEach(day => { const meal = suggestedPlan[day]; message += `${day}: ${meal.type === 'orderOut' ? meal.name : meal.recipe.name}\n`; }); message += `\n💬 Reply:\n"YES" to accept & get grocery list\n"NO" for a new plan`; return message; } function generateWeekId() { return 'week_' + Date.now(); } // URL handler for Zapier response integration function handleZapierResponse() { const urlParams = new URLSearchParams(window.location.search); const action = urlParams.get('action'); const response = urlParams.get('response'); if (action === 'plan_response') { if (response === 'yes' || response === 'accept') { // Auto-accept the most recent suggested plan if (suggestedPlan) { acceptSuggestedPlan(); showMessage('Plan accepted via SMS! 📱✅', 'success'); } } else if (response === 'no' || response === 'reject') { // Generate a new plan suggestWeeklyPlan(); showMessage('Generating new plan as requested! 🔄', 'success'); } // Clean up URL window.history.replaceState({}, document.title, window.location.pathname); } } // Check for Zapier responses on page load window.addEventListener('load', handleZapierResponse); // Make sure showZapierPanel is globally available window.showZapierPanel = function() { document.getElementById('zapierPanel').style.display = 'block'; document.getElementById('zapierPanel').scrollIntoView({ behavior: 'smooth' }); // Update the response webhook URL document.getElementById('responseWebhook').textContent = window.location.origin + '?action=plan_response'; }; } // Scheduled check for Saturday evening (runs every minute) setInterval(() => { const now = new Date(); if (now.getDay() === ZAPIER_CONFIG.scheduledTime.day && now.getHours() === ZAPIER_CONFIG.scheduledTime.hour && now.getMinutes() === ZAPIER_CONFIG.scheduledTime.minute) { suggestWeeklyPlan(); } }, 60000); // Initialize the app initializeWeek(); renderRecipes(); // Add enter key support for recipe form document.addEventListener('keypress', (e) => { if (e.key === 'Enter' && e.target.closest('.add-recipe')) { addRecipe(); } });

🍽️ Family Meal Planner

📅 This Week's Menu

📖 Recipe Collection

🛒 Grocery Shopping List

⚡ Zapier Integration

🔧 Zapier Setup Instructions:

${category}

🍽️ Suggested Weekly Menu