starting templates 2

templates/plan.html

@@ -1,6 +1,24 @@
 {% extends "base.html" %}
 {% block content %}
-<h3>2-Week Plan for {{ person }}</h3>
+<div class="d-flex justify-content-between align-items-center mb-4">
+    <h3>Weekly Plan for {{ person }}</h3>
+    <div class="d-flex align-items-center">
+        <button class="btn btn-outline-secondary me-2" onclick="navigateWeek('{{ prev_week }}')">
+            <i class="bi bi-chevron-left"></i> Previous Week
+        </button>
+        <div class="input-group me-2" style="width: 200px;">
+            <input type="date" class="form-control" id="weekPicker" value="{{ week_start_date }}">
+            <button class="btn btn-outline-primary" onclick="jumpToWeek()">Go</button>
+        </div>
+        <button class="btn btn-outline-secondary" onclick="navigateWeek('{{ next_week }}')">
+            <i class="bi bi-chevron-right"></i> Next Week
+        </button>
+    </div>
+</div>
+
+<div class="alert alert-info mb-3">
+    <strong>Week: {{ week_range }}</strong>
+</div>
 
 <div class="table-responsive">
     <table class="table table-bordered">
@@ -19,25 +37,28 @@
         <tbody>
             {% for day in days %}
             <tr>
-                <td><strong>{{ day }}</strong></td>
                 <td>
-                    {% for plan in plans[day] %}
+                    <strong>{{ day.name }}</strong><br>
+                    <small class="text-muted">{{ day.display }}</small>
+                </td>
+                <td>
+                    {% for plan in plans[day.date.isoformat()] %}
                         <span class="badge bg-secondary me-1">{{ plan.meal.name }}</span>
                     {% endfor %}
-                    {% if not plans[day] %}
+                    {% if not plans[day.date.isoformat()] %}
                         <em class="text-muted">No meals</em>
                     {% endif %}
                 </td>
-                <td>{{ "%.0f"|format(daily_totals[day].calories or 0) }}</td>
-                <td>{{ "%.1f"|format(daily_totals[day].protein or 0) }}g<br><small class="text-muted">({{ daily_totals[day].protein_pct or 0 }}%)</small></td>
-                <td>{{ "%.1f"|format(daily_totals[day].carbs or 0) }}g<br><small class="text-muted">({{ daily_totals[day].carbs_pct or 0 }}%)</small></td>
-                <td>{{ "%.1f"|format(daily_totals[day].fat or 0) }}g<br><small class="text-muted">({{ daily_totals[day].fat_pct or 0 }}%)</small></td>
-                <td>{{ "%.1f"|format(daily_totals[day].net_carbs or 0) }}g</td>
+                <td>{{ "%.0f"|format(daily_totals[day.date.isoformat()].calories or 0) }}</td>
+                <td>{{ "%.1f"|format(daily_totals[day.date.isoformat()].protein or 0) }}g<br><small class="text-muted">({{ daily_totals[day.date.isoformat()].protein_pct or 0 }}%)</small></td>
+                <td>{{ "%.1f"|format(daily_totals[day.date.isoformat()].carbs or 0) }}g<br><small class="text-muted">({{ daily_totals[day.date.isoformat()].carbs_pct or 0 }}%)</small></td>
+                <td>{{ "%.1f"|format(daily_totals[day.date.isoformat()].fat or 0) }}g<br><small class="text-muted">({{ daily_totals[day.date.isoformat()].fat_pct or 0 }}%)</small></td>
+                <td>{{ "%.1f"|format(daily_totals[day.date.isoformat()].net_carbs or 0) }}g</td>
                 <td>
-                    <button class="btn btn-sm btn-primary" onclick="editDay('{{ day }}', '{{ person }}')">
+                    <button class="btn btn-sm btn-primary" onclick="editDay('{{ day.date.isoformat() }}', '{{ person }}')">
                         <i class="bi bi-pencil"></i> Edit
                     </button>
-                    <button class="btn btn-sm btn-outline-success" onclick="quickAddMeal('{{ day }}')">
+                    <button class="btn btn-sm btn-outline-success" onclick="quickAddMeal('{{ day.date.isoformat() }}')">
                         <i class="bi bi-plus"></i> Add
                     </button>
                 </td>
@@ -130,17 +151,36 @@
 let currentEditingDay = null;
 let currentEditingPerson = null;
 
+// Week navigation function
+function navigateWeek(weekStartDate) {
+    const url = new URL(window.location);
+    url.searchParams.set('week_start_date', weekStartDate);
+    window.location.href = url.toString();
+}
+
+// Jump to specific week
+function jumpToWeek() {
+    const weekPicker = document.getElementById('weekPicker');
+    const selectedDate = weekPicker.value;
+    if (selectedDate) {
+        navigateWeek(selectedDate);
+    }
+}
+
 // Quick add meal function
-function quickAddMeal(day) {
-    document.getElementById('quickAddDay').textContent = day;
-    document.getElementById('quickAddPlanDay').value = day;
+function quickAddMeal(date) {
+    // Format date for display
+    const dateObj = new Date(date);
+    const options = { weekday: 'long', month: 'short', day: 'numeric' };
+    document.getElementById('quickAddDay').textContent = dateObj.toLocaleDateString('en-US', options);
+    document.getElementById('quickAddPlanDay').value = date;
     new bootstrap.Modal(document.getElementById('quickAddMealModal')).show();
 }
 
 function submitQuickAddMeal() {
     const form = document.getElementById('quickAddMealForm');
     const formData = new FormData(form);
-    
+
     fetch('/plan/add', {
         method: 'POST',
         body: formData
@@ -160,26 +200,29 @@ function submitQuickAddMeal() {
 }
 
 // Edit day function
-async function editDay(day, person) {
-    currentEditingDay = day;
+async function editDay(date, person) {
+    currentEditingDay = date;
     currentEditingPerson = person;
-    
-    document.getElementById('editDayName').textContent = day;
+
+    // Format date for display
+    const dateObj = new Date(date);
+    const options = { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric' };
+    document.getElementById('editDayName').textContent = dateObj.toLocaleDateString('en-US', options);
     document.getElementById('editDayPerson').value = person;
-    document.getElementById('editDayValue').value = day;
-    
-    // Load current meals for this day
-    await loadCurrentDayMeals(person, day);
-    
+    document.getElementById('editDayValue').value = date;
+
+    // Load current meals for this date
+    await loadCurrentDayMeals(person, date);
+
     new bootstrap.Modal(document.getElementById('editDayModal')).show();
 }
 
-// Load current meals for the day
-async function loadCurrentDayMeals(person, day) {
+// Load current meals for the date
+async function loadCurrentDayMeals(person, date) {
     try {
-        const response = await fetch(`/plan/${person}/${day}`);
+        const response = await fetch(`/plan/${person}/${date}`);
         const meals = await response.json();
-        
+
         const container = document.getElementById('currentDayMeals');
         if (meals.length === 0) {
             container.innerHTML = '<em class="text-muted">No meals planned</em>';
@@ -193,7 +236,7 @@ async function loadCurrentDayMeals(person, day) {
                 </div>
             `).join('');
         }
-        
+
         // Update nutrition preview
         updateDayNutritionPreview(meals);
     } catch (error) {

templates/plans.html

@@ -1,4 +1,353 @@
 {% extends "base.html" %}
 {% block content %}
-    <h1>Templates Page</h1>
+<div class="row">
+    <div class="col-12">
+        <div class="d-flex justify-content-between align-items-center mb-4">
+            <h2><i class="bi bi-file-earmark-text"></i> Meal Templates</h2>
+            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTemplateModal">
+                <i class="bi bi-plus-circle"></i> Create Template
+            </button>
+        </div>
+
+        <div class="card">
+            <div class="card-header">
+                <h5 class="mb-0">Your Templates</h5>
+            </div>
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped" id="templatesTable">
+                        <thead>
+                            <tr>
+                                <th>Template Name</th>
+                                <th>Meals Assigned</th>
+                                <th>Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- Templates will be loaded here -->
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Create Template Modal -->
+<div class="modal fade" id="createTemplateModal" tabindex="-1" aria-labelledby="createTemplateModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="createTemplateModalLabel">Create New Template</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form id="createTemplateForm">
+                <div class="modal-body">
+                    <div class="mb-3">
+                        <label for="templateName" class="form-label">Template Name</label>
+                        <input type="text" class="form-control" id="templateName" name="name" required>
+                    </div>
+
+                    <h6 class="mb-3">Assign Meals to Meal Times</h6>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label for="breakfast" class="form-label">Breakfast</label>
+                                <select class="form-control meal-select" id="breakfast" name="breakfast">
+                                    <option value="">Select meal...</option>
+                                    {% for meal in meals %}
+                                    <option value="{{ meal.id }}">{{ meal.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label for="lunch" class="form-label">Lunch</label>
+                                <select class="form-control meal-select" id="lunch" name="lunch">
+                                    <option value="">Select meal...</option>
+                                    {% for meal in meals %}
+                                    <option value="{{ meal.id }}">{{ meal.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label for="dinner" class="form-label">Dinner</label>
+                                <select class="form-control meal-select" id="dinner" name="dinner">
+                                    <option value="">Select meal...</option>
+                                    {% for meal in meals %}
+                                    <option value="{{ meal.id }}">{{ meal.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label for="snack1" class="form-label">Snack 1</label>
+                                <select class="form-control meal-select" id="snack1" name="snack1">
+                                    <option value="">Select meal...</option>
+                                    {% for meal in meals %}
+                                    <option value="{{ meal.id }}">{{ meal.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label for="snack2" class="form-label">Snack 2</label>
+                                <select class="form-control meal-select" id="snack2" name="snack2">
+                                    <option value="">Select meal...</option>
+                                    {% for meal in meals %}
+                                    <option value="{{ meal.id }}">{{ meal.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label for="beverage1" class="form-label">Beverage 1</label>
+                                <select class="form-control meal-select" id="beverage1" name="beverage1">
+                                    <option value="">Select meal...</option>
+                                    {% for meal in meals %}
+                                    <option value="{{ meal.id }}">{{ meal.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="mb-3">
+                                <label for="beverage2" class="form-label">Beverage 2</label>
+                                <select class="form-control meal-select" id="beverage2" name="beverage2">
+                                    <option value="">Select meal...</option>
+                                    {% for meal in meals %}
+                                    <option value="{{ meal.id }}">{{ meal.name }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Create Template</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<!-- Use Template Modal -->
+<div class="modal fade" id="useTemplateModal" tabindex="-1" aria-labelledby="useTemplateModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="useTemplateModalLabel">Use Template</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <form id="useTemplateForm">
+                <div class="modal-body">
+                    <p>Copy template meals to your plan for the selected date:</p>
+                    <div class="mb-3">
+                        <label for="startDate" class="form-label">Select Date</label>
+                        <input type="date" class="form-control" id="startDate" name="start_date" required>
+                    </div>
+                    <div class="mb-3">
+                        <label for="person" class="form-label">Person</label>
+                        <select class="form-control" id="person" name="person" required>
+                            <option value="Person A">Person A</option>
+                            <option value="Person B">Person B</option>
+                        </select>
+                    </div>
+                    <div id="overwriteWarning" class="alert alert-warning" style="display: none;">
+                        <i class="bi bi-exclamation-triangle"></i>
+                        <strong>Warning:</strong> There are already meals planned for this date.
+                        Applying the template will overwrite them.
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                    <button type="submit" class="btn btn-primary">Use Template</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<script>
+let currentTemplateId = null;
+
+document.addEventListener('DOMContentLoaded', function() {
+    loadTemplates();
+
+    // Handle template creation
+    document.getElementById('createTemplateForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+        createTemplate();
+    });
+
+    // Handle template usage
+    document.getElementById('useTemplateForm').addEventListener('submit', function(e) {
+        e.preventDefault();
+        useTemplate();
+    });
+});
+
+function loadTemplates() {
+    fetch('/templates')
+        .then(response => response.text())
+        .then(html => {
+            // Extract templates data from the HTML response
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(html, 'text/html');
+            const templates = JSON.parse(doc.querySelector('script[data-templates]')?.textContent || '[]');
+
+            const tbody = document.querySelector('#templatesTable tbody');
+            tbody.innerHTML = '';
+
+            if (templates.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted">No templates created yet. Click "Create Template" to get started.</td></tr>';
+                return;
+            }
+
+            templates.forEach(template => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td><strong>${template.name}</strong></td>
+                    <td>
+                        ${template.template_meals && template.template_meals.length > 0 ? template.template_meals.map(tm =>
+                            `<span class="badge bg-secondary me-1">${tm.meal_time}: ${tm.meal.name}</span>`
+                        ).join('') : 'No meals assigned'}
+                    </td>
+                    <td>
+                        <button class="btn btn-sm btn-outline-primary me-2" onclick="useTemplateModal(${template.id})">
+                            <i class="bi bi-play-circle"></i> Use
+                        </button>
+                        <button class="btn btn-sm btn-outline-danger" onclick="deleteTemplate(${template.id})">
+                            <i class="bi bi-trash"></i> Delete
+                        </button>
+                    </td>
+                `;
+                tbody.appendChild(row);
+            });
+        })
+        .catch(error => {
+            console.error('Error loading templates:', error);
+        });
+}
+
+function createTemplate() {
+    const form = document.getElementById('createTemplateForm');
+    const formData = new FormData(form);
+
+    // Build meal assignments string
+    const mealTimes = ['breakfast', 'lunch', 'dinner', 'snack1', 'snack2', 'beverage1', 'beverage2'];
+    const assignments = [];
+
+    mealTimes.forEach(mealTime => {
+        const mealId = formData.get(mealTime);
+        if (mealId) {
+            const displayName = mealTime.charAt(0).toUpperCase() + mealTime.slice(1).replace('1', ' 1').replace('2', ' 2');
+            assignments.push(`${displayName}:${mealId}`);
+        }
+    });
+
+    const data = {
+        name: formData.get('name'),
+        meal_assignments: assignments.join(',')
+    };
+
+    fetch('/templates/create', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams(data)
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            bootstrap.Modal.getInstance(document.getElementById('createTemplateModal')).hide();
+            form.reset();
+            loadTemplates();
+        } else {
+            alert('Error creating template: ' + data.message);
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Error creating template');
+    });
+}
+
+function useTemplateModal(templateId) {
+    currentTemplateId = templateId;
+    new bootstrap.Modal(document.getElementById('useTemplateModal')).show();
+}
+
+function useTemplate() {
+    const form = document.getElementById('useTemplateForm');
+    const formData = new FormData(form);
+
+    const data = {
+        person: formData.get('person'),
+        start_day: formData.get('start_day')
+    };
+
+    fetch(`/templates/${currentTemplateId}/use`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: new URLSearchParams(data)
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            bootstrap.Modal.getInstance(document.getElementById('useTemplateModal')).hide();
+            alert('Template applied to your plan successfully!');
+        } else {
+            alert('Error using template: ' + data.message);
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Error using template');
+    });
+}
+
+function deleteTemplate(templateId) {
+    if (!confirm('Are you sure you want to delete this template?')) {
+        return;
+    }
+
+    fetch(`/templates/${templateId}`, {
+        method: 'DELETE'
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.status === 'success') {
+            loadTemplates();
+        } else {
+            alert('Error deleting template: ' + data.message);
+        }
+    })
+    .catch(error => {
+        console.error('Error:', error);
+        alert('Error deleting template');
+    });
+}
+</script>
+
+<!-- Hidden script to pass templates data -->
+<script type="application/json" data-templates>
+{{ templates|tojson }}
+</script>
 {% endblock %}