foodplanner/templates/imports.html

{% extends "base.html" %}
{% block content %}
<div class="row">
    <div class="col-md-6">
        <h3>Food 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 Foods CSV</button>
        </form>
    </div>
    
    <div class="col-md-6">
        <h3>Meal Import</h3>
        <form action="/meals/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 Meals CSV</button>
        </form>
    </div>
</div>

<div class="mt-4" 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>

<script>
// CSV upload handling (copied from foods.html)
document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        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(form.action, {
                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 = submitBtn.textContent.replace('Uploading...', 'Upload CSV');
        }
    });
});
</script>
{% endblock %}