Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 rmcampos
|
d43544a232 |
@@ -22,6 +22,8 @@ jobs:
|
||||
VITE_APPWRITE_USERSETTINGSID: ${{ secrets.VITE_APPWRITE_USERSETTINGSID }}
|
||||
VITE_APPWRITE_MONTLYCALORIESID: ${{ secrets.VITE_APPWRITE_MONTLYCALORIESID }}
|
||||
VITE_APPWRITE_SHAREDDAYSID: ${{ secrets.VITE_APPWRITE_SHAREDDAYSID }}
|
||||
VITE_APPWRITE_MEALPLANTEMPLATESID: ${{ secrets.VITE_APPWRITE_MEALPLANTEMPLATESID }}
|
||||
VITE_APPWRITE_PLANNEDFOODITEMSID: ${{ secrets.VITE_APPWRITE_PLANNEDFOODITEMSID }}
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"projectId": "684ac3bf000ee8950f5a",
|
||||
"endpoint": "https://fra.cloud.appwrite.io/v1"
|
||||
}
|
||||
+176
-2
@@ -7,6 +7,7 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="stylesheet" href="auth.css">
|
||||
<link rel="stylesheet" href="settings.css">
|
||||
<link rel="stylesheet" href="mealPlanner.css">
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/assets/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/assets/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/assets/apple-icon-72x72.png">
|
||||
@@ -82,6 +83,7 @@
|
||||
<div class="header-buttons">
|
||||
<button id="shareBtn" class="header-btn">🔗 Share</button>
|
||||
<button id="calendarBtn" class="header-btn">📅 Calendar</button>
|
||||
<button id="mealPlannerBtn" class="header-btn">📋 Meal Planner</button>
|
||||
<button id="settingsBtn" class="header-btn">⚙️ Settings</button>
|
||||
<button id="logoutBtn" class="header-btn logout">🚪 Logout</button>
|
||||
</div>
|
||||
@@ -92,6 +94,7 @@
|
||||
<div id="mobileMenu" class="mobile-menu hidden">
|
||||
<button id="shareBtnMobile" class="mobile-menu-item">🔗 Share</button>
|
||||
<button id="calendarBtnMobile" class="mobile-menu-item">📅 Calendar</button>
|
||||
<button id="mealPlannerBtnMobile" class="mobile-menu-item">📋 Meal Planner</button>
|
||||
<button id="settingsBtnMobile" class="mobile-menu-item">⚙️ Settings</button>
|
||||
<button id="logoutBtnMobile" class="mobile-menu-item logout">🚪 Logout</button>
|
||||
</div>
|
||||
@@ -166,6 +169,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Add from Meal Plan -->
|
||||
<div class="quick-add-section hidden" id="quickAddSection">
|
||||
<h2 class="section-title">📋 Quick Add from Meal Plan</h2>
|
||||
<div class="quick-add-items" id="quickAddItemsContainer">
|
||||
<!-- Quick add items will be populated here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="add-food-section">
|
||||
<h2 class="add-food-title" id="add-foot-title">Add Food Entry</h2>
|
||||
<div class="add-food-form">
|
||||
@@ -248,9 +259,9 @@
|
||||
<section id="settings-content" class="hidden">
|
||||
<div class="container">
|
||||
<h1>⚙️ Settings</h1>
|
||||
|
||||
|
||||
<div class="date-display">Define your daily macros goal</div>
|
||||
|
||||
|
||||
<form id="settingsForm" class="settings-form">
|
||||
<div class="form-group">
|
||||
<label for="caloriesGoal">Daily calorie goal</label>
|
||||
@@ -277,6 +288,169 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Meal Planner -->
|
||||
<section id="meal-planner-content" class="hidden">
|
||||
<div class="container">
|
||||
<h1>📋 Meal Planner</h1>
|
||||
|
||||
<div class="date-display">Plan your meals and compare with your goals</div>
|
||||
|
||||
<!-- Template Management -->
|
||||
<div class="template-management">
|
||||
<div class="template-selector-container">
|
||||
<label for="templateSelector">Current Plan:</label>
|
||||
<select id="templateSelector" class="template-selector">
|
||||
<option value="">-- Select a plan --</option>
|
||||
</select>
|
||||
<button id="newTemplateBtn" class="template-btn">+ New Plan</button>
|
||||
<button id="deleteTemplateBtn" class="template-btn delete-btn">Delete Plan</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Plan Progress Summary -->
|
||||
<div class="plan-progress-container">
|
||||
<div class="calories-banner">
|
||||
<div class="calories-number" id="planCaloriesTotal">0</div>
|
||||
<div class="calories-text">Total Calories</div>
|
||||
<div class="calories-text-goal" id="planCaloriesGoalText">of 0</div>
|
||||
</div>
|
||||
|
||||
<div class="nutrition-summary" id="planNutritionSummary">
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-label">Protein (g)</div>
|
||||
<div class="nutrition-value" id="planProteinValue">0</div>
|
||||
<div class="nutrition-progress-bar">
|
||||
<div class="nutrition-progress-fill" id="planProteinProgress"></div>
|
||||
</div>
|
||||
<div class="nutrition-label" id="planProteinGoalText">of 0</div>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-label">Fat (g)</div>
|
||||
<div class="nutrition-value" id="planFatValue">0</div>
|
||||
<div class="nutrition-progress-bar">
|
||||
<div class="nutrition-progress-fill" id="planFatProgress"></div>
|
||||
</div>
|
||||
<div class="nutrition-label" id="planFatGoalText">of 0</div>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-label">Carbs (g)</div>
|
||||
<div class="nutrition-value" id="planCarboValue">0</div>
|
||||
<div class="nutrition-progress-bar">
|
||||
<div class="nutrition-progress-fill" id="planCarboProgress"></div>
|
||||
</div>
|
||||
<div class="nutrition-label" id="planCarboGoalText">of 0</div>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-label">Fiber (g)</div>
|
||||
<div class="nutrition-value" id="planFiberValue">0</div>
|
||||
<div class="nutrition-progress-bar">
|
||||
<div class="nutrition-progress-fill" id="planFiberProgress"></div>
|
||||
</div>
|
||||
<div class="nutrition-label" id="planFiberGoalText">of 0</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Meal Sections -->
|
||||
<div class="meals-container">
|
||||
<!-- Breakfast -->
|
||||
<div class="meal-section" data-meal-type="breakfast">
|
||||
<h2 class="meal-section-title">🌅 Breakfast</h2>
|
||||
<button class="add-meal-item-btn" data-meal-type="breakfast">+ Add Food</button>
|
||||
<div class="meal-items-container" id="breakfastItemsContainer">
|
||||
<!-- Planned items will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Lunch -->
|
||||
<div class="meal-section" data-meal-type="lunch">
|
||||
<h2 class="meal-section-title">☀️ Lunch</h2>
|
||||
<button class="add-meal-item-btn" data-meal-type="lunch">+ Add Food</button>
|
||||
<div class="meal-items-container" id="lunchItemsContainer">
|
||||
<!-- Planned items will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dinner -->
|
||||
<div class="meal-section" data-meal-type="dinner">
|
||||
<h2 class="meal-section-title">🌙 Dinner</h2>
|
||||
<button class="add-meal-item-btn" data-meal-type="dinner">+ Add Food</button>
|
||||
<div class="meal-items-container" id="dinnerItemsContainer">
|
||||
<!-- Planned items will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Snacks -->
|
||||
<div class="meal-section" data-meal-type="snacks">
|
||||
<h2 class="meal-section-title">🍿 Snacks</h2>
|
||||
<button class="add-meal-item-btn" data-meal-type="snacks">+ Add Food</button>
|
||||
<div class="meal-items-container" id="snacksItemsContainer">
|
||||
<!-- Planned items will be added here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Food to Plan Form (initially hidden) -->
|
||||
<div class="add-food-to-plan-section hidden" id="addFoodToPlanSection">
|
||||
<h2 class="add-food-title" id="addFoodToPlanTitle">Add Food to <span id="currentMealType"></span></h2>
|
||||
<div class="add-food-form">
|
||||
<div class="form-group">
|
||||
<label for="planFoodSearchInput">Food Item</label>
|
||||
<div class="food-search-container">
|
||||
<input
|
||||
type="text"
|
||||
class="food-search-input"
|
||||
id="planFoodSearchInput"
|
||||
placeholder="Search food (e.g., apple, chicken breast, rice...)"
|
||||
autocomplete="off"
|
||||
>
|
||||
<div class="search-loading" id="planSearchLoading"></div>
|
||||
|
||||
<!-- Search Results Overlay -->
|
||||
<div class="search-results" id="planSearchResults">
|
||||
<!-- Results will be populated here -->
|
||||
</div>
|
||||
|
||||
<!-- Hidden input for current meal type -->
|
||||
<input type="hidden" id="currentMealTypeInput">
|
||||
<input type="hidden" id="planItemIdToUpdate">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="planGramAmount">Amount (grams)</label>
|
||||
<input type="number" id="planGramAmount" min="1" step="1" value="100">
|
||||
</div>
|
||||
<button class="add-btn" id="addFoodToPlanBtn">Add Food</button>
|
||||
<button class="cancel-btn" id="cancelFoodToPlanBtn">Cancel</button>
|
||||
</div>
|
||||
<div class="display-none" id="plan-food-preview">
|
||||
<div class="nutrition-summary">
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-value" id="planCalorieValuePreview">0</div>
|
||||
<div class="nutrition-label">Calories</div>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-value" id="planProteinValuePreview">0</div>
|
||||
<div class="nutrition-label">Protein (g)</div>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-value" id="planFatValuePreview">0</div>
|
||||
<div class="nutrition-label">Fat (g)</div>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-value" id="planCarboValuePreview">0</div>
|
||||
<div class="nutrition-label">Carbs (g)</div>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<div class="nutrition-value" id="planFiberValuePreview">0</div>
|
||||
<div class="nutrition-label">Fiber (g)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script type="module" src="src/index.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+283
@@ -0,0 +1,283 @@
|
||||
/* Meal Planner Page Styles */
|
||||
|
||||
/* Template Management */
|
||||
.template-management {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.template-selector-container {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.template-selector-container label {
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #ffffff);
|
||||
}
|
||||
|
||||
.template-selector {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
padding: 10px;
|
||||
background: var(--input-bg, #2a2a2a);
|
||||
color: var(--text-color, #ffffff);
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.template-btn {
|
||||
padding: 10px 20px;
|
||||
background: var(--primary-color, #4CAF50);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.template-btn:hover {
|
||||
background: var(--primary-hover, #45a049);
|
||||
}
|
||||
|
||||
.template-btn.delete-btn {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
.template-btn.delete-btn:hover {
|
||||
background: #da190b;
|
||||
}
|
||||
|
||||
/* Plan Progress Container */
|
||||
.plan-progress-container {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* Nutrition Progress Bars */
|
||||
.nutrition-progress-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--progress-bg, #2a2a2a);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin: 5px 0;
|
||||
}
|
||||
|
||||
.nutrition-progress-fill {
|
||||
height: 100%;
|
||||
background: #4CAF50;
|
||||
transition: width 0.3s ease, background-color 0.3s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Meals Container */
|
||||
.meals-container {
|
||||
margin: 30px 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Meal Section */
|
||||
.meal-section {
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
}
|
||||
|
||||
.meal-section-title {
|
||||
margin: 0 0 15px 0;
|
||||
color: var(--text-color, #ffffff);
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.add-meal-item-btn {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
background: var(--primary-color, #4CAF50);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.add-meal-item-btn:hover {
|
||||
background: var(--primary-hover, #45a049);
|
||||
}
|
||||
|
||||
.meal-items-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.no-items-message {
|
||||
text-align: center;
|
||||
color: var(--text-secondary, #888);
|
||||
padding: 20px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Planned Item Cards */
|
||||
.planned-item-card {
|
||||
background: var(--input-bg, #2a2a2a);
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.planned-item-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.planned-item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.planned-item-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #ffffff);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.planned-item-grams {
|
||||
color: var(--text-secondary, #888);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.planned-item-nutrition {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary, #888);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.delete-planned-item-btn {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
background: #f44336;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.delete-planned-item-btn:hover {
|
||||
background: #da190b;
|
||||
}
|
||||
|
||||
/* Add Food to Plan Section */
|
||||
.add-food-to-plan-section {
|
||||
margin: 30px 0;
|
||||
padding: 20px;
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border-radius: 10px;
|
||||
border: 2px solid var(--primary-color, #4CAF50);
|
||||
}
|
||||
|
||||
/* Quick Add Section in Food Log */
|
||||
.quick-add-section {
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
background: var(--card-bg, #1e1e1e);
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
}
|
||||
|
||||
.quick-add-items {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.quick-add-meal-header {
|
||||
grid-column: 1 / -1;
|
||||
margin: 10px 0 5px 0;
|
||||
color: var(--text-color, #ffffff);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.quick-add-btn {
|
||||
padding: 12px;
|
||||
background: var(--input-bg, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #3a3a3a);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.quick-add-btn:hover {
|
||||
background: var(--primary-color, #4CAF50);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(76, 175, 80, 0.3);
|
||||
}
|
||||
|
||||
.quick-add-name {
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #ffffff);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.quick-add-details {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #888);
|
||||
}
|
||||
|
||||
.quick-add-btn:hover .quick-add-name,
|
||||
.quick-add-btn:hover .quick-add-details {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Mobile Responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.template-selector-container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.template-selector {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.meals-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.quick-add-items {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.planned-item-nutrition {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.quick-add-btn {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
+214
-1
@@ -1,5 +1,5 @@
|
||||
import { Client, Account, Databases, Query, ID } from 'appwrite';
|
||||
import { DailyTotalCalories, FoodStorage, UserSettings, SharedDay } from './types';
|
||||
import { DailyTotalCalories, FoodStorage, UserSettings, SharedDay, MealPlanTemplate, PlannedFoodItem, MealType } from './types';
|
||||
|
||||
// Initialize Appwrite client
|
||||
const client = new Client();
|
||||
@@ -18,6 +18,8 @@ export const FOOD_ENTRIES_COLLECTION_ID = import.meta.env.VITE_APPWRITE_FOODENTR
|
||||
export const USER_SETTINGS_COLLECTION_ID = import.meta.env.VITE_APPWRITE_USERSETTINGSID
|
||||
export const MONTHLY_CALORIES_COLLECTION_ID = import.meta.env.VITE_APPWRITE_MONTLYCALORIESID
|
||||
export const SHARED_DAYS_COLLECTION_ID = import.meta.env.VITE_APPWRITE_SHAREDDAYSID
|
||||
export const MEAL_PLAN_TEMPLATES_COLLECTION_ID = import.meta.env.VITE_APPWRITE_MEALPLANTEMPLATESID
|
||||
export const PLANNED_FOOD_ITEMS_COLLECTION_ID = import.meta.env.VITE_APPWRITE_PLANNEDFOODITEMSID
|
||||
|
||||
// Auth helper functions
|
||||
export class AppwriteAuth {
|
||||
@@ -330,4 +332,215 @@ export class AppwriteDB {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Meal Plan Template methods
|
||||
|
||||
// Create meal plan template
|
||||
static async createMealPlanTemplate(name: string) {
|
||||
try {
|
||||
const user = await account.get();
|
||||
const response = await databases.createDocument(
|
||||
DATABASE_ID,
|
||||
MEAL_PLAN_TEMPLATES_COLLECTION_ID,
|
||||
'unique()',
|
||||
{
|
||||
name: name,
|
||||
userId: user.$id,
|
||||
isActive: false,
|
||||
createdAt: new Date().toISOString()
|
||||
}
|
||||
);
|
||||
console.debug('Meal plan template created:', response);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('Create meal plan template error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Get all meal plan templates for user
|
||||
static async getMealPlanTemplates() {
|
||||
try {
|
||||
const user = await account.get();
|
||||
const response = await databases.listDocuments(
|
||||
DATABASE_ID,
|
||||
MEAL_PLAN_TEMPLATES_COLLECTION_ID,
|
||||
[
|
||||
Query.equal('userId', user.$id),
|
||||
Query.limit(50)
|
||||
]
|
||||
);
|
||||
console.debug('Meal plan templates retrieved:', response);
|
||||
return response.documents;
|
||||
} catch (error) {
|
||||
console.error('Get meal plan templates error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Get active meal plan template
|
||||
static async getActiveMealPlanTemplate() {
|
||||
try {
|
||||
const user = await account.get();
|
||||
const response = await databases.listDocuments(
|
||||
DATABASE_ID,
|
||||
MEAL_PLAN_TEMPLATES_COLLECTION_ID,
|
||||
[
|
||||
Query.equal('userId', user.$id),
|
||||
Query.equal('isActive', true),
|
||||
Query.limit(1)
|
||||
]
|
||||
);
|
||||
console.debug('Active meal plan template retrieved:', response);
|
||||
return response.documents.length > 0 ? response.documents[0] : null;
|
||||
} catch (error) {
|
||||
console.error('Get active meal plan template error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Set active meal plan template
|
||||
static async setActiveMealPlanTemplate(templateId: string) {
|
||||
try {
|
||||
const user = await account.get();
|
||||
|
||||
// First, deactivate all templates
|
||||
const allTemplates = await this.getMealPlanTemplates();
|
||||
const deactivatePromises = allTemplates.map(template =>
|
||||
databases.updateDocument(
|
||||
DATABASE_ID,
|
||||
MEAL_PLAN_TEMPLATES_COLLECTION_ID,
|
||||
template.$id,
|
||||
{ isActive: false }
|
||||
)
|
||||
);
|
||||
await Promise.all(deactivatePromises);
|
||||
|
||||
// Then activate the selected template
|
||||
const response = await databases.updateDocument(
|
||||
DATABASE_ID,
|
||||
MEAL_PLAN_TEMPLATES_COLLECTION_ID,
|
||||
templateId,
|
||||
{ isActive: true }
|
||||
);
|
||||
console.debug('Meal plan template set as active:', response);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('Set active meal plan template error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Delete meal plan template
|
||||
static async deleteMealPlanTemplate(templateId: string) {
|
||||
try {
|
||||
// First delete all planned items for this template
|
||||
const plannedItems = await this.getPlannedItemsByTemplate(templateId);
|
||||
const deletePromises = plannedItems.map(item =>
|
||||
this.deletePlannedFoodItem(item.$id)
|
||||
);
|
||||
await Promise.all(deletePromises);
|
||||
|
||||
// Then delete the template
|
||||
await databases.deleteDocument(
|
||||
DATABASE_ID,
|
||||
MEAL_PLAN_TEMPLATES_COLLECTION_ID,
|
||||
templateId
|
||||
);
|
||||
console.debug('Meal plan template deleted:', templateId);
|
||||
} catch (error) {
|
||||
console.error('Delete meal plan template error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Planned Food Item methods
|
||||
|
||||
// Create planned food item
|
||||
static async createPlannedFoodItem(item: Omit<PlannedFoodItem, 'id'>) {
|
||||
try {
|
||||
const response = await databases.createDocument(
|
||||
DATABASE_ID,
|
||||
PLANNED_FOOD_ITEMS_COLLECTION_ID,
|
||||
'unique()',
|
||||
item
|
||||
);
|
||||
console.debug('Planned food item created:', response);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('Create planned food item error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Get all planned items for a template
|
||||
static async getPlannedItemsByTemplate(templateId: string) {
|
||||
try {
|
||||
const response = await databases.listDocuments(
|
||||
DATABASE_ID,
|
||||
PLANNED_FOOD_ITEMS_COLLECTION_ID,
|
||||
[
|
||||
Query.equal('templateId', templateId),
|
||||
Query.limit(100)
|
||||
]
|
||||
);
|
||||
console.debug('Planned items retrieved for template:', response);
|
||||
return response.documents;
|
||||
} catch (error) {
|
||||
console.error('Get planned items by template error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Get planned items by template and meal type
|
||||
static async getPlannedItemsByMealType(templateId: string, mealType: MealType) {
|
||||
try {
|
||||
const response = await databases.listDocuments(
|
||||
DATABASE_ID,
|
||||
PLANNED_FOOD_ITEMS_COLLECTION_ID,
|
||||
[
|
||||
Query.equal('templateId', templateId),
|
||||
Query.equal('mealType', mealType),
|
||||
Query.limit(50)
|
||||
]
|
||||
);
|
||||
console.debug('Planned items retrieved for meal type:', response);
|
||||
return response.documents;
|
||||
} catch (error) {
|
||||
console.error('Get planned items by meal type error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Update planned food item
|
||||
static async updatePlannedFoodItem(itemId: string, updates: Partial<PlannedFoodItem>) {
|
||||
try {
|
||||
const response = await databases.updateDocument(
|
||||
DATABASE_ID,
|
||||
PLANNED_FOOD_ITEMS_COLLECTION_ID,
|
||||
itemId,
|
||||
updates
|
||||
);
|
||||
console.debug('Planned food item updated:', response);
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error('Update planned food item error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Delete planned food item
|
||||
static async deletePlannedFoodItem(itemId: string) {
|
||||
try {
|
||||
await databases.deleteDocument(
|
||||
DATABASE_ID,
|
||||
PLANNED_FOOD_ITEMS_COLLECTION_ID,
|
||||
itemId
|
||||
);
|
||||
console.debug('Planned food item deleted:', itemId);
|
||||
} catch (error) {
|
||||
console.error('Delete planned food item error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+15
-3
@@ -6,6 +6,7 @@ import swal from 'sweetalert';
|
||||
import { closeMobileMenu, delay, getCleanName, getIcon, handleMobileCalendarClick, hideLoading, hideSearchResults, navigateResultsKeyboard, QUICK_DELAY, scrollToCalendarView, showLoading, toggleCardHandler, toggleMobileMenu } from './Utils.ts';
|
||||
import { showAuthForms, toggleAuthForms } from './auth.ts';
|
||||
import { appState } from "./state";
|
||||
import { setupMealPlannerEventListeners, displayQuickAddItems } from './mealPlanner.js';
|
||||
|
||||
// App state
|
||||
let selectedDate = new Date();
|
||||
@@ -485,13 +486,21 @@ const setupEventListeners = () => {
|
||||
const target = e.target as HTMLElement;
|
||||
const mobileMenu = document.getElementById('mobileMenu');
|
||||
const mobileMenuToggle = document.getElementById('mobileMenuToggle');
|
||||
|
||||
if (mobileMenu && mobileMenuToggle &&
|
||||
!mobileMenu.contains(target) &&
|
||||
|
||||
if (mobileMenu && mobileMenuToggle &&
|
||||
!mobileMenu.contains(target) &&
|
||||
!mobileMenuToggle.contains(target)) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
|
||||
// Setup meal planner event listeners
|
||||
setupMealPlannerEventListeners();
|
||||
|
||||
// Listen for food added event from quick add
|
||||
window.addEventListener('foodAdded', () => {
|
||||
loadFoodEntries(selectedDate);
|
||||
});
|
||||
}
|
||||
|
||||
function performSearch(query: string) {
|
||||
@@ -1028,6 +1037,9 @@ async function loadFoodEntries(date: Date) {
|
||||
getDivById('carboGoalText').classList.add('hidden');
|
||||
getDivById('fiberGoalText').classList.add('hidden');
|
||||
}
|
||||
|
||||
// Load quick add items from meal plan
|
||||
await displayQuickAddItems();
|
||||
} catch (error) {
|
||||
console.error('Load food entries error:', error);
|
||||
if (error instanceof Error) {
|
||||
|
||||
@@ -0,0 +1,770 @@
|
||||
import { foodDatabase } from './foodDatabase.js';
|
||||
import { getButtonById, getDivById, getInputById, showFoodPreview } from './DomUtils.ts';
|
||||
import { FoodItem, MealType, PlannedFoodItem } from './types.js';
|
||||
import { AppwriteDB } from './appwrite.js';
|
||||
import swal from 'sweetalert';
|
||||
import { hideLoading, showLoading, getCleanName, getIcon } from './Utils.ts';
|
||||
import { appState } from "./state";
|
||||
|
||||
let selectedPlanFood: FoodItem | null = null;
|
||||
let currentMealType: MealType | null = null;
|
||||
|
||||
// Navigation functions
|
||||
export async function toggleMealPlannerView() {
|
||||
const showMealPlanner = getButtonById('mealPlannerBtn').textContent?.includes('Meal Planner');
|
||||
|
||||
if (showMealPlanner) {
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
// Load templates
|
||||
await loadMealPlanTemplates();
|
||||
|
||||
// Load active template if exists
|
||||
const activeTemplate = await AppwriteDB.getActiveMealPlanTemplate();
|
||||
if (activeTemplate) {
|
||||
appState.currentTemplate = activeTemplate as any;
|
||||
await loadPlannedItemsForTemplate(activeTemplate.$id);
|
||||
}
|
||||
|
||||
// Show meal planner page
|
||||
getDivById('app-content').classList.add('hidden');
|
||||
getDivById('settings-content').classList.add('hidden');
|
||||
getDivById('meal-planner-content').classList.remove('hidden');
|
||||
getButtonById('mealPlannerBtn').textContent = '← Back';
|
||||
getButtonById('mealPlannerBtnMobile').textContent = '← Back';
|
||||
hideLoading();
|
||||
} catch (error) {
|
||||
hideLoading();
|
||||
console.error('Show meal planner error:', error);
|
||||
if (error instanceof Error) {
|
||||
swal('Oh no!', 'Failed to load meal planner: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// Go back to main app
|
||||
getDivById('app-content').classList.remove('hidden');
|
||||
getDivById('meal-planner-content').classList.add('hidden');
|
||||
getButtonById('mealPlannerBtn').textContent = '📋 Meal Planner';
|
||||
getButtonById('mealPlannerBtnMobile').textContent = '📋 Meal Planner';
|
||||
}
|
||||
}
|
||||
|
||||
export function handleMobileMealPlannerClick() {
|
||||
toggleMealPlannerView();
|
||||
// Close mobile menu
|
||||
const mobileMenu = document.getElementById('mobileMenu');
|
||||
if (mobileMenu) {
|
||||
mobileMenu.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Template management functions
|
||||
export async function loadMealPlanTemplates() {
|
||||
try {
|
||||
const templates = await AppwriteDB.getMealPlanTemplates();
|
||||
const templateSelector = document.getElementById('templateSelector') as HTMLSelectElement;
|
||||
|
||||
if (!templateSelector) return;
|
||||
|
||||
// Clear existing options except the first one
|
||||
templateSelector.innerHTML = '<option value="">-- Select a plan --</option>';
|
||||
|
||||
// Add templates
|
||||
templates.forEach(template => {
|
||||
const option = document.createElement('option');
|
||||
option.value = template.$id;
|
||||
option.textContent = template.name;
|
||||
if (template.isActive) {
|
||||
option.selected = true;
|
||||
}
|
||||
templateSelector.appendChild(option);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Load templates error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
export async function createNewTemplate() {
|
||||
const templateName = await swal({
|
||||
title: 'New Meal Plan',
|
||||
text: 'Enter a name for your meal plan:',
|
||||
content: {
|
||||
element: 'input',
|
||||
attributes: {
|
||||
placeholder: 'e.g., Workout Day, Rest Day',
|
||||
type: 'text',
|
||||
},
|
||||
},
|
||||
buttons: {
|
||||
cancel: true,
|
||||
confirm: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!templateName || templateName.trim() === '') {
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const newTemplate = await AppwriteDB.createMealPlanTemplate(templateName.trim());
|
||||
await loadMealPlanTemplates();
|
||||
|
||||
// Set as active and load it
|
||||
await AppwriteDB.setActiveMealPlanTemplate(newTemplate.$id);
|
||||
appState.currentTemplate = newTemplate as any;
|
||||
appState.plannedItems = [];
|
||||
|
||||
// Update selector
|
||||
const templateSelector = document.getElementById('templateSelector') as HTMLSelectElement;
|
||||
if (templateSelector) {
|
||||
templateSelector.value = newTemplate.$id;
|
||||
}
|
||||
|
||||
// Refresh display
|
||||
displayPlannedItems();
|
||||
updatePlanTotals();
|
||||
|
||||
hideLoading();
|
||||
swal('Success!', 'Meal plan created successfully!', 'success');
|
||||
} catch (error) {
|
||||
hideLoading();
|
||||
console.error('Create template error:', error);
|
||||
if (error instanceof Error) {
|
||||
swal('Oh no!', 'Failed to create meal plan: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteCurrentTemplate() {
|
||||
if (!appState.currentTemplate) {
|
||||
swal('Oh no!', 'No meal plan selected', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const confirm = await swal({
|
||||
title: 'Delete Meal Plan',
|
||||
text: `Are you sure you want to delete "${appState.currentTemplate.name}"? This will also delete all planned items.`,
|
||||
icon: 'warning',
|
||||
buttons: {
|
||||
cancel: true,
|
||||
confirm: {
|
||||
text: 'Delete',
|
||||
value: true,
|
||||
},
|
||||
},
|
||||
dangerMode: true,
|
||||
});
|
||||
|
||||
if (!confirm) {
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
await AppwriteDB.deleteMealPlanTemplate(appState.currentTemplate.id!);
|
||||
appState.currentTemplate = null;
|
||||
appState.plannedItems = [];
|
||||
|
||||
await loadMealPlanTemplates();
|
||||
displayPlannedItems();
|
||||
updatePlanTotals();
|
||||
|
||||
hideLoading();
|
||||
swal('Success!', 'Meal plan deleted successfully!', 'success');
|
||||
} catch (error) {
|
||||
hideLoading();
|
||||
console.error('Delete template error:', error);
|
||||
if (error instanceof Error) {
|
||||
swal('Oh no!', 'Failed to delete meal plan: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export async function handleTemplateChange(templateId: string) {
|
||||
if (!templateId) {
|
||||
appState.currentTemplate = null;
|
||||
appState.plannedItems = [];
|
||||
displayPlannedItems();
|
||||
updatePlanTotals();
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
// Set as active template
|
||||
await AppwriteDB.setActiveMealPlanTemplate(templateId);
|
||||
|
||||
// Load template details
|
||||
const templates = await AppwriteDB.getMealPlanTemplates();
|
||||
const template = templates.find(t => t.$id === templateId);
|
||||
|
||||
if (template) {
|
||||
appState.currentTemplate = template as any;
|
||||
await loadPlannedItemsForTemplate(templateId);
|
||||
}
|
||||
|
||||
hideLoading();
|
||||
} catch (error) {
|
||||
hideLoading();
|
||||
console.error('Handle template change error:', error);
|
||||
if (error instanceof Error) {
|
||||
swal('Oh no!', 'Failed to load meal plan: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function loadPlannedItemsForTemplate(templateId: string) {
|
||||
try {
|
||||
const items = await AppwriteDB.getPlannedItemsByTemplate(templateId);
|
||||
appState.plannedItems = items as any[];
|
||||
displayPlannedItems();
|
||||
updatePlanTotals();
|
||||
} catch (error) {
|
||||
console.error('Load planned items error:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
// Food search and add functions
|
||||
export function setupPlanFoodSearch() {
|
||||
const searchInput = document.getElementById('planFoodSearchInput') as HTMLInputElement;
|
||||
const gramAmountInput = document.getElementById('planGramAmount') as HTMLInputElement;
|
||||
|
||||
if (!searchInput || !gramAmountInput) return;
|
||||
|
||||
searchInput.addEventListener('input', (e) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
const searchTerm = target.value.trim().toLowerCase();
|
||||
|
||||
if (searchTerm === '') {
|
||||
hidePlanSearchResults();
|
||||
selectedPlanFood = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Debounce search
|
||||
if (appState.planSearchTimeout) {
|
||||
clearTimeout(appState.planSearchTimeout);
|
||||
}
|
||||
|
||||
appState.planSearchTimeout = window.setTimeout(() => {
|
||||
performPlanFoodSearch(searchTerm);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
searchInput.addEventListener('keydown', (e) => {
|
||||
navigatePlanResultsKeyboard(e as KeyboardEvent);
|
||||
});
|
||||
|
||||
gramAmountInput.addEventListener('input', () => {
|
||||
previewPlanCalories();
|
||||
});
|
||||
}
|
||||
|
||||
function performPlanFoodSearch(searchTerm: string) {
|
||||
const results = foodDatabase.filter(food =>
|
||||
food.name.toLowerCase().includes(searchTerm)
|
||||
).slice(0, 10);
|
||||
|
||||
appState.planSearchResults = results;
|
||||
appState.planCurrentHighlightIndex = -1;
|
||||
displayPlanSearchResults(results);
|
||||
}
|
||||
|
||||
function displayPlanSearchResults(results: FoodItem[]) {
|
||||
const searchResults = document.getElementById('planSearchResults');
|
||||
if (!searchResults) return;
|
||||
|
||||
if (results.length === 0) {
|
||||
searchResults.innerHTML = '<div class="no-results">No foods found</div>';
|
||||
searchResults.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
searchResults.innerHTML = '';
|
||||
results.forEach((food, index) => {
|
||||
const resultItem = document.createElement('div');
|
||||
resultItem.className = 'search-result-item';
|
||||
resultItem.setAttribute('data-index', index.toString());
|
||||
resultItem.innerHTML = `
|
||||
${getIcon(food.info.category)}
|
||||
<span class="food-name">${getCleanName(food.name)}</span>
|
||||
<span class="food-calories">${food.info.calories} cal</span>
|
||||
`;
|
||||
resultItem.addEventListener('click', () => selectPlanFood(food));
|
||||
searchResults.appendChild(resultItem);
|
||||
});
|
||||
|
||||
searchResults.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function hidePlanSearchResults() {
|
||||
const searchResults = document.getElementById('planSearchResults');
|
||||
if (searchResults) {
|
||||
searchResults.classList.add('hidden');
|
||||
searchResults.innerHTML = '';
|
||||
}
|
||||
appState.planSearchResults = [];
|
||||
appState.planCurrentHighlightIndex = -1;
|
||||
}
|
||||
|
||||
function navigatePlanResultsKeyboard(e: KeyboardEvent) {
|
||||
const results = appState.planSearchResults;
|
||||
|
||||
if (results.length === 0) return;
|
||||
|
||||
if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
appState.planCurrentHighlightIndex = Math.min(appState.planCurrentHighlightIndex + 1, results.length - 1);
|
||||
updatePlanResultsHighlight();
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
appState.planCurrentHighlightIndex = Math.max(appState.planCurrentHighlightIndex - 1, -1);
|
||||
updatePlanResultsHighlight();
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (appState.planCurrentHighlightIndex >= 0) {
|
||||
selectPlanFood(results[appState.planCurrentHighlightIndex]);
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
hidePlanSearchResults();
|
||||
}
|
||||
}
|
||||
|
||||
function updatePlanResultsHighlight() {
|
||||
const searchResults = document.getElementById('planSearchResults');
|
||||
if (!searchResults) return;
|
||||
|
||||
const items = searchResults.querySelectorAll('.search-result-item');
|
||||
items.forEach((item, index) => {
|
||||
if (index === appState.planCurrentHighlightIndex) {
|
||||
item.classList.add('highlighted');
|
||||
} else {
|
||||
item.classList.remove('highlighted');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function selectPlanFood(food: FoodItem) {
|
||||
selectedPlanFood = food;
|
||||
const searchInput = document.getElementById('planFoodSearchInput') as HTMLInputElement;
|
||||
if (searchInput) {
|
||||
searchInput.value = getCleanName(food.name);
|
||||
}
|
||||
hidePlanSearchResults();
|
||||
previewPlanCalories();
|
||||
}
|
||||
|
||||
function previewPlanCalories() {
|
||||
const gramAmountInput = document.getElementById('planGramAmount') as HTMLInputElement;
|
||||
const previewContainer = document.getElementById('plan-food-preview');
|
||||
|
||||
if (!selectedPlanFood || !gramAmountInput || !previewContainer) {
|
||||
if (previewContainer) previewContainer.classList.add('display-none');
|
||||
return;
|
||||
}
|
||||
|
||||
const grams = parseFloat(gramAmountInput.value) || 100;
|
||||
const proportion = grams / 100;
|
||||
|
||||
const calories = Math.round(selectedPlanFood.info.calories * proportion);
|
||||
const protein = Math.round(selectedPlanFood.info.protein * proportion * 10) / 10;
|
||||
const fat = Math.round(selectedPlanFood.info.fat * proportion * 10) / 10;
|
||||
const carbs = Math.round(selectedPlanFood.info.carbs * proportion * 10) / 10;
|
||||
const fiber = Math.round(selectedPlanFood.info.fiber * proportion * 10) / 10;
|
||||
|
||||
const calorieEl = document.getElementById('planCalorieValuePreview');
|
||||
const proteinEl = document.getElementById('planProteinValuePreview');
|
||||
const fatEl = document.getElementById('planFatValuePreview');
|
||||
const carbsEl = document.getElementById('planCarboValuePreview');
|
||||
const fiberEl = document.getElementById('planFiberValuePreview');
|
||||
|
||||
if (calorieEl) calorieEl.textContent = calories.toString();
|
||||
if (proteinEl) proteinEl.textContent = protein.toString();
|
||||
if (fatEl) fatEl.textContent = fat.toString();
|
||||
if (carbsEl) carbsEl.textContent = carbs.toString();
|
||||
if (fiberEl) fiberEl.textContent = fiber.toString();
|
||||
|
||||
previewContainer.classList.remove('display-none');
|
||||
}
|
||||
|
||||
export function showAddFoodToPlan(mealType: MealType) {
|
||||
if (!appState.currentTemplate) {
|
||||
swal('Oh no!', 'Please select or create a meal plan first', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
currentMealType = mealType;
|
||||
const addSection = document.getElementById('addFoodToPlanSection');
|
||||
const mealTypeSpan = document.getElementById('currentMealType');
|
||||
const currentMealTypeInput = document.getElementById('currentMealTypeInput') as HTMLInputElement;
|
||||
|
||||
if (addSection) addSection.classList.remove('hidden');
|
||||
if (mealTypeSpan) mealTypeSpan.textContent = mealType.charAt(0).toUpperCase() + mealType.slice(1);
|
||||
if (currentMealTypeInput) currentMealTypeInput.value = mealType;
|
||||
|
||||
// Scroll to form
|
||||
addSection?.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
export function hideAddFoodToPlan() {
|
||||
const addSection = document.getElementById('addFoodToPlanSection');
|
||||
const searchInput = document.getElementById('planFoodSearchInput') as HTMLInputElement;
|
||||
const gramInput = document.getElementById('planGramAmount') as HTMLInputElement;
|
||||
const previewContainer = document.getElementById('plan-food-preview');
|
||||
|
||||
if (addSection) addSection.classList.add('hidden');
|
||||
if (searchInput) searchInput.value = '';
|
||||
if (gramInput) gramInput.value = '100';
|
||||
if (previewContainer) previewContainer.classList.add('display-none');
|
||||
|
||||
selectedPlanFood = null;
|
||||
currentMealType = null;
|
||||
hidePlanSearchResults();
|
||||
}
|
||||
|
||||
export async function addFoodToPlan() {
|
||||
if (!selectedPlanFood || !currentMealType || !appState.currentTemplate) {
|
||||
swal('Oh no!', 'Please select a food item', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const gramAmountInput = document.getElementById('planGramAmount') as HTMLInputElement;
|
||||
const grams = parseFloat(gramAmountInput.value);
|
||||
|
||||
if (!grams || grams <= 0) {
|
||||
swal('Oh no!', 'Please enter a valid amount in grams', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const proportion = grams / 100;
|
||||
const plannedItem: Omit<PlannedFoodItem, 'id'> = {
|
||||
templateId: appState.currentTemplate.id!,
|
||||
mealType: currentMealType,
|
||||
name: selectedPlanFood.name,
|
||||
grams: grams,
|
||||
calories: Math.round(selectedPlanFood.info.calories * proportion),
|
||||
protein: Math.round(selectedPlanFood.info.protein * proportion * 10) / 10,
|
||||
fat: Math.round(selectedPlanFood.info.fat * proportion * 10) / 10,
|
||||
carbs: Math.round(selectedPlanFood.info.carbs * proportion * 10) / 10,
|
||||
fiber: Math.round(selectedPlanFood.info.fiber * proportion * 10) / 10,
|
||||
alkaline: selectedPlanFood.info.alkaline
|
||||
};
|
||||
|
||||
await AppwriteDB.createPlannedFoodItem(plannedItem);
|
||||
await loadPlannedItemsForTemplate(appState.currentTemplate.id!);
|
||||
|
||||
hideAddFoodToPlan();
|
||||
hideLoading();
|
||||
swal('Success!', 'Food added to meal plan!', 'success');
|
||||
} catch (error) {
|
||||
hideLoading();
|
||||
console.error('Add food to plan error:', error);
|
||||
if (error instanceof Error) {
|
||||
swal('Oh no!', 'Failed to add food: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Display functions
|
||||
export function displayPlannedItems() {
|
||||
const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snacks'];
|
||||
|
||||
mealTypes.forEach(mealType => {
|
||||
const container = document.getElementById(`${mealType}ItemsContainer`);
|
||||
if (!container) return;
|
||||
|
||||
const items = appState.plannedItems.filter(item => item.mealType === mealType);
|
||||
|
||||
if (items.length === 0) {
|
||||
container.innerHTML = '<p class="no-items-message">No foods planned for this meal</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = '';
|
||||
items.forEach(item => {
|
||||
const card = createPlannedItemCard(item);
|
||||
container.appendChild(card);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function createPlannedItemCard(item: PlannedFoodItem): HTMLElement {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'planned-item-card';
|
||||
card.innerHTML = `
|
||||
<div class="planned-item-header">
|
||||
<span class="planned-item-name">${getCleanName(item.name)}</span>
|
||||
<span class="planned-item-grams">${item.grams}g</span>
|
||||
</div>
|
||||
<div class="planned-item-nutrition">
|
||||
<span>${item.calories} cal</span>
|
||||
<span>P: ${item.protein}g</span>
|
||||
<span>F: ${item.fat}g</span>
|
||||
<span>C: ${item.carbs}g</span>
|
||||
</div>
|
||||
<button class="delete-planned-item-btn" data-item-id="${item.id}">Delete</button>
|
||||
`;
|
||||
|
||||
const deleteBtn = card.querySelector('.delete-planned-item-btn');
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', () => deletePlannedItem(item.id!));
|
||||
}
|
||||
|
||||
return card;
|
||||
}
|
||||
|
||||
export async function deletePlannedItem(itemId: string) {
|
||||
const confirm = await swal({
|
||||
title: 'Delete Item',
|
||||
text: 'Are you sure you want to delete this item from your meal plan?',
|
||||
icon: 'warning',
|
||||
buttons: {
|
||||
cancel: true,
|
||||
confirm: true,
|
||||
},
|
||||
});
|
||||
|
||||
if (!confirm) return;
|
||||
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
await AppwriteDB.deletePlannedFoodItem(itemId);
|
||||
if (appState.currentTemplate) {
|
||||
await loadPlannedItemsForTemplate(appState.currentTemplate.id!);
|
||||
}
|
||||
hideLoading();
|
||||
} catch (error) {
|
||||
hideLoading();
|
||||
console.error('Delete planned item error:', error);
|
||||
if (error instanceof Error) {
|
||||
swal('Oh no!', 'Failed to delete item: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function updatePlanTotals() {
|
||||
const totals = appState.plannedItems.reduce((acc, item) => {
|
||||
acc.calories += item.calories;
|
||||
acc.protein += item.protein;
|
||||
acc.fat += item.fat;
|
||||
acc.carbs += item.carbs;
|
||||
acc.fiber += item.fiber;
|
||||
return acc;
|
||||
}, { calories: 0, protein: 0, fat: 0, carbs: 0, fiber: 0 });
|
||||
|
||||
// Update totals display
|
||||
const caloriesTotalEl = document.getElementById('planCaloriesTotal');
|
||||
const proteinValueEl = document.getElementById('planProteinValue');
|
||||
const fatValueEl = document.getElementById('planFatValue');
|
||||
const carboValueEl = document.getElementById('planCarboValue');
|
||||
const fiberValueEl = document.getElementById('planFiberValue');
|
||||
|
||||
if (caloriesTotalEl) caloriesTotalEl.textContent = totals.calories.toString();
|
||||
if (proteinValueEl) proteinValueEl.textContent = Math.round(totals.protein * 10) / 10 + '';
|
||||
if (fatValueEl) fatValueEl.textContent = Math.round(totals.fat * 10) / 10 + '';
|
||||
if (carboValueEl) carboValueEl.textContent = Math.round(totals.carbs * 10) / 10 + '';
|
||||
if (fiberValueEl) fiberValueEl.textContent = Math.round(totals.fiber * 10) / 10 + '';
|
||||
|
||||
// Update progress bars and goals
|
||||
updatePlanProgressBars(totals);
|
||||
}
|
||||
|
||||
async function updatePlanProgressBars(totals: { calories: number, protein: number, fat: number, carbs: number, fiber: number }) {
|
||||
try {
|
||||
const settings = await AppwriteDB.getUserSettings();
|
||||
if (!settings || settings.length === 0) return;
|
||||
|
||||
const userSettings = settings[settings.length - 1];
|
||||
|
||||
// Update goal texts
|
||||
const caloriesGoalEl = document.getElementById('planCaloriesGoalText');
|
||||
const proteinGoalEl = document.getElementById('planProteinGoalText');
|
||||
const fatGoalEl = document.getElementById('planFatGoalText');
|
||||
const carboGoalEl = document.getElementById('planCarboGoalText');
|
||||
const fiberGoalEl = document.getElementById('planFiberGoalText');
|
||||
|
||||
if (caloriesGoalEl) caloriesGoalEl.textContent = `of ${userSettings.caloriesGoal || 0}`;
|
||||
if (proteinGoalEl) proteinGoalEl.textContent = `of ${userSettings.proteinGoal}`;
|
||||
if (fatGoalEl) fatGoalEl.textContent = `of ${userSettings.fatGoal}`;
|
||||
if (carboGoalEl) carboGoalEl.textContent = `of ${userSettings.carboGoal}`;
|
||||
if (fiberGoalEl) fiberGoalEl.textContent = `of ${userSettings.fiberGoal}`;
|
||||
|
||||
// Update progress bars
|
||||
updateProgressBar('planProteinProgress', totals.protein, userSettings.proteinGoal);
|
||||
updateProgressBar('planFatProgress', totals.fat, userSettings.fatGoal);
|
||||
updateProgressBar('planCarboProgress', totals.carbs, userSettings.carboGoal);
|
||||
updateProgressBar('planFiberProgress', totals.fiber, userSettings.fiberGoal);
|
||||
} catch (error) {
|
||||
console.error('Update progress bars error:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function updateProgressBar(elementId: string, current: number, goal: number) {
|
||||
const progressBar = document.getElementById(elementId);
|
||||
if (!progressBar) return;
|
||||
|
||||
const percentage = Math.min((current / goal) * 100, 100);
|
||||
progressBar.style.width = `${percentage}%`;
|
||||
|
||||
// Color coding: green when within range, yellow when getting close, red when over
|
||||
if (percentage < 80) {
|
||||
progressBar.style.backgroundColor = '#4CAF50'; // green
|
||||
} else if (percentage < 100) {
|
||||
progressBar.style.backgroundColor = '#FFC107'; // yellow
|
||||
} else {
|
||||
progressBar.style.backgroundColor = '#f44336'; // red
|
||||
}
|
||||
}
|
||||
|
||||
// Quick add functions for food log
|
||||
export async function displayQuickAddItems() {
|
||||
const quickAddSection = document.getElementById('quickAddSection');
|
||||
const quickAddContainer = document.getElementById('quickAddItemsContainer');
|
||||
|
||||
if (!quickAddSection || !quickAddContainer) return;
|
||||
|
||||
// Check if there's an active template
|
||||
const activeTemplate = await AppwriteDB.getActiveMealPlanTemplate();
|
||||
|
||||
if (!activeTemplate) {
|
||||
quickAddSection.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Load planned items
|
||||
const plannedItems = await AppwriteDB.getPlannedItemsByTemplate(activeTemplate.$id);
|
||||
|
||||
if (plannedItems.length === 0) {
|
||||
quickAddSection.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Show section and populate items
|
||||
quickAddSection.classList.remove('hidden');
|
||||
quickAddContainer.innerHTML = '';
|
||||
|
||||
// Group by meal type
|
||||
const mealTypes: MealType[] = ['breakfast', 'lunch', 'dinner', 'snacks'];
|
||||
const mealIcons = {
|
||||
breakfast: '🌅',
|
||||
lunch: '☀️',
|
||||
dinner: '🌙',
|
||||
snacks: '🍿'
|
||||
};
|
||||
|
||||
mealTypes.forEach(mealType => {
|
||||
const items = plannedItems.filter(item => item.mealType === mealType);
|
||||
|
||||
if (items.length > 0) {
|
||||
// Add meal type header
|
||||
const mealHeader = document.createElement('h3');
|
||||
mealHeader.className = 'quick-add-meal-header';
|
||||
mealHeader.textContent = `${mealIcons[mealType]} ${mealType.charAt(0).toUpperCase() + mealType.slice(1)}`;
|
||||
quickAddContainer.appendChild(mealHeader);
|
||||
|
||||
// Add items
|
||||
items.forEach(item => {
|
||||
const quickAddItem = createQuickAddButton(item);
|
||||
quickAddContainer.appendChild(quickAddItem);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createQuickAddButton(item: any): HTMLElement {
|
||||
const button = document.createElement('button');
|
||||
button.className = 'quick-add-btn';
|
||||
button.innerHTML = `
|
||||
<span class="quick-add-name">${getCleanName(item.name)}</span>
|
||||
<span class="quick-add-details">${item.grams}g • ${item.calories} cal</span>
|
||||
`;
|
||||
button.addEventListener('click', () => quickAddToFoodLog(item));
|
||||
return button;
|
||||
}
|
||||
|
||||
async function quickAddToFoodLog(plannedItem: any) {
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const now = new Date();
|
||||
const time = now.toLocaleTimeString('en-US', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false
|
||||
});
|
||||
|
||||
const selectedDate = new Date(); // This should be the actual selected date from the app
|
||||
const localDateTime = new Date(selectedDate.getTime() - (selectedDate.getTimezoneOffset() * 60000)).toISOString();
|
||||
|
||||
const foodEntry = {
|
||||
name: plannedItem.name,
|
||||
grams: plannedItem.grams,
|
||||
calories: plannedItem.calories,
|
||||
protein: plannedItem.protein,
|
||||
fat: plannedItem.fat,
|
||||
carbs: plannedItem.carbs,
|
||||
fiber: plannedItem.fiber,
|
||||
time: time,
|
||||
date: localDateTime.split('T')[0],
|
||||
alkaline: plannedItem.alkaline
|
||||
};
|
||||
|
||||
await AppwriteDB.saveFoodEntry(foodEntry);
|
||||
|
||||
// Dispatch custom event to trigger food log reload
|
||||
const event = new CustomEvent('foodAdded');
|
||||
window.dispatchEvent(event);
|
||||
|
||||
hideLoading();
|
||||
swal('Success!', `${getCleanName(plannedItem.name)} added to food log!`, 'success');
|
||||
} catch (error) {
|
||||
hideLoading();
|
||||
console.error('Quick add to food log error:', error);
|
||||
if (error instanceof Error) {
|
||||
swal('Oh no!', 'Failed to add food: ' + error.message, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Event listener setup
|
||||
export function setupMealPlannerEventListeners() {
|
||||
// Navigation buttons
|
||||
document.getElementById('mealPlannerBtn')?.addEventListener('click', toggleMealPlannerView);
|
||||
document.getElementById('mealPlannerBtnMobile')?.addEventListener('click', handleMobileMealPlannerClick);
|
||||
|
||||
// Template management
|
||||
document.getElementById('newTemplateBtn')?.addEventListener('click', createNewTemplate);
|
||||
document.getElementById('deleteTemplateBtn')?.addEventListener('click', deleteCurrentTemplate);
|
||||
document.getElementById('templateSelector')?.addEventListener('change', (e) => {
|
||||
const target = e.target as HTMLSelectElement;
|
||||
handleTemplateChange(target.value);
|
||||
});
|
||||
|
||||
// Add food buttons for each meal
|
||||
const addMealButtons = document.querySelectorAll('.add-meal-item-btn');
|
||||
addMealButtons.forEach(button => {
|
||||
button.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement;
|
||||
const mealType = target.getAttribute('data-meal-type') as MealType;
|
||||
showAddFoodToPlan(mealType);
|
||||
});
|
||||
});
|
||||
|
||||
// Add food to plan form
|
||||
document.getElementById('addFoodToPlanBtn')?.addEventListener('click', addFoodToPlan);
|
||||
document.getElementById('cancelFoodToPlanBtn')?.addEventListener('click', hideAddFoodToPlan);
|
||||
|
||||
// Setup food search
|
||||
setupPlanFoodSearch();
|
||||
}
|
||||
+14
-2
@@ -1,4 +1,4 @@
|
||||
import { DailyTotalCalories, FoodItem, SharedDay } from "./types";
|
||||
import { DailyTotalCalories, FoodItem, SharedDay, MealPlanTemplate, PlannedFoodItem } from "./types";
|
||||
|
||||
interface AppState {
|
||||
currentHighlightIndex: number;
|
||||
@@ -7,6 +7,12 @@ interface AppState {
|
||||
calendarMonthlyCalories: DailyTotalCalories[];
|
||||
isSharedView: boolean;
|
||||
sharedData: SharedDay | null;
|
||||
// Meal Planner state
|
||||
currentTemplate: MealPlanTemplate | null;
|
||||
plannedItems: PlannedFoodItem[];
|
||||
planSearchResults: FoodItem[];
|
||||
planCurrentHighlightIndex: number;
|
||||
planSearchTimeout: number | null;
|
||||
}
|
||||
|
||||
export const appState: AppState = {
|
||||
@@ -15,5 +21,11 @@ export const appState: AppState = {
|
||||
searchResults: [],
|
||||
calendarMonthlyCalories: [],
|
||||
isSharedView: false,
|
||||
sharedData: null
|
||||
sharedData: null,
|
||||
// Meal Planner state
|
||||
currentTemplate: null,
|
||||
plannedItems: [],
|
||||
planSearchResults: [],
|
||||
planCurrentHighlightIndex: -1,
|
||||
planSearchTimeout: null
|
||||
};
|
||||
|
||||
@@ -43,3 +43,27 @@ export type SharedDay = {
|
||||
foodEntries: string; // JSON stringified FoodStorage[]
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
export type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snacks';
|
||||
|
||||
export type MealPlanTemplate = {
|
||||
id?: string;
|
||||
name: string;
|
||||
userId: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
};
|
||||
|
||||
export type PlannedFoodItem = {
|
||||
id?: string;
|
||||
templateId: string;
|
||||
mealType: MealType;
|
||||
name: string;
|
||||
grams: number;
|
||||
calories: number;
|
||||
protein: number;
|
||||
fat: number;
|
||||
carbs: number;
|
||||
fiber: number;
|
||||
alkaline: boolean | null;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user