foodplanner/templates/foods.html

{% extends "base.html" %}
{% block content %}
<div class="row">
    <div class="col-md-4">
        <h3>Bulk Import</h3>
        <form action="/foods/upload" method="post" enctype="multipart/form-data">
            <div class="mb-3">
                <label class="form-label">CSV File</label>
                <input type="file" class="form-control" name="file" accept=".csv" required>
            </div>
            <button type="submit" class="btn btn-secondary mb-4">Upload CSV</button>
        </form>

        <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#addFoodModal">
            <i class="bi bi-plus-circle"></i> Add New Food
        </button>
    </div>
    
    <div class="col-md-8" id="upload-results" style="display: none;">
        <div class="alert alert-success">
            <strong>Upload Results:</strong>
            <span id="created-count"></span> created,
            <span id="updated-count"></span> updated
            <div id="error-list" class="mt-2 text-danger"></div>
        </div>
    </div>
    
    <div class="col-md-8">
        <h3>Foods Database</h3>
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Select</th>
                        <th>Name</th>
                        <th>Serving</th>
                        <th>Cal</th>
                        <th>Protein</th>
                        <th>Carbs</th>
                        <th>Fat</th>
                        <th>Fiber</th>
                        <th>Sodium</th>
                        <th>Calcium</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for food in foods %}
                    <tr>
                        <td><input type="checkbox" name="selected_foods" value="{{ food.id }}"></td>
                        <td>{{ food.name }}</td>
                        <td>{{ food.serving_size }} {{ food.serving_unit }}</td>
                        <td>{{ "%.2f"|format(food.calories) }}</td>
                        <td>{{ "%.2f"|format(food.protein) }}g</td>
                        <td>{{ "%.2f"|format(food.carbs) }}g</td>
                        <td>{{ "%.2f"|format(food.fat) }}g</td>
                        <td>{{ "%.2f"|format(food.fiber) }}g</td>
                        <td>{{ "%.2f"|format(food.sodium) }}mg</td>
                        <td>{{ "%.2f"|format(food.calcium) }}mg</td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary" 
                                    onclick="editFood({{ food.id }}, '{{ food.name }}', '{{ food.serving_size }}', '{{ food.serving_unit }}', {{ food.calories }}, {{ food.protein }}, {{ food.carbs }}, {{ food.fat }}, {{ food.fiber }}, {{ food.sugar }}, {{ food.sodium }}, {{ food.calcium }})">
                                <i class="bi bi-pencil"></i> Edit
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <button class="btn btn-danger mt-3" onclick="deleteSelectedFoods()">
            <i class="bi bi-trash"></i> Delete Selected Foods
        </button>
    </div>
</div>

<!-- Add Food Modal -->
<div class="modal fade" id="addFoodModal" tabindex="-1" aria-labelledby="addFoodModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addFoodModalLabel">Add New Food</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addFoodForm" action="/foods/add" method="post">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Serving Size</label>
                            <input type="text" class="form-control" name="serving_size" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Unit</label>
                            <input type="text" class="form-control" name="serving_unit" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Calories</label>
                            <input type="number" step="0.1" class="form-control" name="calories" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Protein (g)</label>
                            <input type="number" step="0.1" class="form-control" name="protein" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Carbs (g)</label>
                            <input type="number" step="0.1" class="form-control" name="carbs" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Fat (g)</label>
                            <input type="number" step="0.1" class="form-control" name="fat" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Fiber (g)</label>
                            <input type="number" step="0.1" class="form-control" name="fiber" value="0">
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Sugar (g)</label>
                            <input type="number" step="0.1" class="form-control" name="sugar" value="0">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Sodium (mg)</label>
                            <input type="number" step="0.1" class="form-control" name="sodium" value="0">
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Calcium (mg)</label>
                            <input type="number" step="0.1" class="form-control" name="calcium" value="0">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitFoodForm('add')">Add Food</button>
            </div>
        </div>
    </div>
</div>

<!-- Edit Food Modal -->
<div class="modal fade" id="editFoodModal" tabindex="-1" aria-labelledby="editFoodModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editFoodModalLabel">Edit Food</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editFoodForm" action="/foods/edit" method="post">
                    <input type="hidden" name="food_id" id="edit_food_id">
                    <div class="row">
                        <div class="col-12 mb-3">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="name" id="edit_name" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Serving Size</label>
                            <input type="text" class="form-control" name="serving_size" id="edit_serving_size" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Unit</label>
                            <input type="text" class="form-control" name="serving_unit" id="edit_serving_unit" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Calories</label>
                            <input type="number" step="0.1" class="form-control" name="calories" id="edit_calories" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Protein (g)</label>
                            <input type="number" step="0.1" class="form-control" name="protein" id="edit_protein" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Carbs (g)</label>
                            <input type="number" step="0.1" class="form-control" name="carbs" id="edit_carbs" required>
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Fat (g)</label>
                            <input type="number" step="0.1" class="form-control" name="fat" id="edit_fat" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Fiber (g)</label>
                            <input type="number" step="0.1" class="form-control" name="fiber" id="edit_fiber">
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Sugar (g)</label>
                            <input type="number" step="0.1" class="form-control" name="sugar" id="edit_sugar">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 mb-3">
                            <label class="form-label">Sodium (mg)</label>
                            <input type="number" step="0.1" class="form-control" name="sodium" id="edit_sodium">
                        </div>
                        <div class="col-6 mb-3">
                            <label class="form-label">Calcium (mg)</label>
                            <input type="number" step="0.1" class="form-control" name="calcium" id="edit_calcium">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" onclick="submitFoodForm('edit')">Update Food</button>
            </div>
        </div>
    </div>
</div>

<script>
// Edit food function
function editFood(id, name, serving_size, serving_unit, calories, protein, carbs, fat, fiber, sugar, sodium, calcium) {
    document.getElementById('edit_food_id').value = id;
    document.getElementById('edit_name').value = name;
    document.getElementById('edit_serving_size').value = serving_size;
    document.getElementById('edit_serving_unit').value = serving_unit;
    document.getElementById('edit_calories').value = calories;
    document.getElementById('edit_protein').value = protein;
    document.getElementById('edit_carbs').value = carbs;
    document.getElementById('edit_fat').value = fat;
    document.getElementById('edit_fiber').value = fiber;
    document.getElementById('edit_sugar').value = sugar;
    document.getElementById('edit_sodium').value = sodium;
    document.getElementById('edit_calcium').value = calcium;
    
    new bootstrap.Modal(document.getElementById('editFoodModal')).show();
}

// Submit food form (add or edit)
async function submitFoodForm(action) {
    const form = document.getElementById(action + 'FoodForm');
    const formData = new FormData(form);
    
    try {
        const response = await fetch(form.action, {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.status === 'success') {
            // Close modal and reload page
            bootstrap.Modal.getInstance(document.getElementById(action + 'FoodModal')).hide();
            location.reload();
        } else {
            alert('Error: ' + result.message);
        }
    } catch (error) {
        alert('Error submitting form: ' + error.message);
    }
}

// Delete selected foods
async function deleteSelectedFoods() {
    const selected = Array.from(document.querySelectorAll('input[name="selected_foods"]:checked'))
        .map(checkbox => checkbox.value);

    if (selected.length === 0) {
        alert('Please select foods to delete');
        return;
    }

    if (confirm(`Delete ${selected.length} selected foods?`)) {
        try {
            const response = await fetch('/foods/delete', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({food_ids: selected})
            });

            const result = await response.json();

            if (response.ok) {
                window.location.reload();
            } else {
                alert(`Delete failed: ${result.message || response.status}`);
            }
        } catch (error) {
            alert('Delete failed: ' + error.message);
        }
    }
}

// CSV upload handling
document.querySelector('form[action="/foods/upload"]').addEventListener('submit', async (e) => {
    e.preventDefault();
    const form = e.target;
    const submitBtn = form.querySelector('button[type="submit"]');
    const resultsDiv = document.getElementById('upload-results');
    
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Uploading...';
    
    try {
        const formData = new FormData(form);
        const response = await fetch('/foods/upload', {
            method: 'POST',
            body: formData
        });

        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
        
        const results = await response.json();

        resultsDiv.style.display = 'block';
        document.getElementById('created-count').textContent = results.created || 0;
        document.getElementById('updated-count').textContent = results.updated || 0;

        if (results.errors?.length > 0) {
            document.getElementById('error-list').innerHTML =
                `<strong>Errors (${results.errors.length}):</strong><br>` + results.errors.join('<br>');
        } else {
            document.getElementById('error-list').innerHTML = '';
        }

        if (results.created || results.updated) {
            setTimeout(() => window.location.reload(), 2000);
        }
    } catch (error) {
        resultsDiv.style.display = 'block';
        resultsDiv.querySelector('.alert').className = 'alert alert-danger';
        document.getElementById('error-list').innerHTML =
            `<strong>Upload Failed:</strong> ${error.message}`;
    } finally {
        submitBtn.disabled = false;
        submitBtn.textContent = 'Upload CSV';
    }
});
</script>
{% endblock %}