112 lines
		
	
	
		
			5.0 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			112 lines
		
	
	
		
			5.0 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html>
 | 
						|
<html lang="en">
 | 
						|
<head>
 | 
						|
    <meta charset="UTF-8">
 | 
						|
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 | 
						|
    <title>Upload CSV File</title>
 | 
						|
    {% include 'favicon.html' %}
 | 
						|
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
 | 
						|
    <link href="{{ url_for('static', filename='css/bootstrap-icons.min.css') }}" rel="stylesheet">
 | 
						|
    <link href="{{ url_for('static', filename='css/upload_page.css') }}" rel="stylesheet">
 | 
						|
</head>
 | 
						|
<body>
 | 
						|
    {% include 'header.html' %}
 | 
						|
    
 | 
						|
    <main class="container mt-5 pt-4">
 | 
						|
        <div class="upload-container">
 | 
						|
            <div class="d-flex justify-content-between align-items-center mb-4">
 | 
						|
                <h1 class="h2">
 | 
						|
                    {% if mode == "import" %} 
 | 
						|
                        <i class="bi bi-upload me-2"></i>Import Items From CSV 
 | 
						|
                    {% elif mode == "edit" %} 
 | 
						|
                        <i class="bi bi-pencil-square me-2"></i>Update Items Using CSV 
 | 
						|
                    {% endif %}
 | 
						|
                </h1>
 | 
						|
            </div>
 | 
						|
 | 
						|
            <!-- Flash messages (errors only) -->
 | 
						|
            {% with messages = get_flashed_messages(category_filter=["error"]) %}
 | 
						|
                {% if messages %}
 | 
						|
                    <div class="alert alert-danger error-details mb-4">
 | 
						|
                        <h2 class="h5 mb-3">Errors found during submission:</h2>
 | 
						|
                        <ul class="mb-0">
 | 
						|
                            {% for message in messages %}
 | 
						|
                                <li>{{ message }}</li>
 | 
						|
                            {% endfor %}
 | 
						|
                        </ul>
 | 
						|
                    </div>
 | 
						|
                {% endif %}
 | 
						|
            {% endwith %}
 | 
						|
 | 
						|
            <!-- Upload form card -->
 | 
						|
            <div class="card shadow-sm">
 | 
						|
                <div class="card-body">
 | 
						|
                    <form method="POST" enctype="multipart/form-data" 
 | 
						|
                        {% if mode == "import" %}
 | 
						|
                            action="/import_from_csv"
 | 
						|
                        {% elif mode == "edit" %}
 | 
						|
                            action="/edit_using_csv"
 | 
						|
                        {% endif %}>
 | 
						|
                        
 | 
						|
                        <div class="mb-4">
 | 
						|
                            <label for="file" class="form-label fw-bold">Select CSV File:</label>
 | 
						|
                            <input class="form-control form-control-lg" 
 | 
						|
                                   type="file" 
 | 
						|
                                   id="file" 
 | 
						|
                                   name="file" 
 | 
						|
                                   accept=".csv" 
 | 
						|
                                   required>
 | 
						|
                            <div class="form-text">
 | 
						|
                                Please upload a properly formatted CSV file
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
 | 
						|
                        <div class="d-flex justify-content-end gap-3">
 | 
						|
                            <a href="/" class="btn btn-outline-secondary">Cancel</a>
 | 
						|
                            <button type="submit" class="btn btn-primary px-4">
 | 
						|
                                Upload
 | 
						|
                            </button>
 | 
						|
                        </div>
 | 
						|
                    </form>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
            
 | 
						|
            <!-- Optional help section -->
 | 
						|
            <div class="mt-4">
 | 
						|
                <div class="accordion" id="helpAccordion">
 | 
						|
                    <div class="accordion-item">
 | 
						|
                        <h2 class="accordion-header">
 | 
						|
                            <button class="accordion-button collapsed" 
 | 
						|
                                    type="button" 
 | 
						|
                                    data-bs-toggle="collapse" 
 | 
						|
                                    data-bs-target="#helpContent">
 | 
						|
                                <i class="bi bi-question-circle me-2"></i>
 | 
						|
                                CSV Format Help
 | 
						|
                            </button>
 | 
						|
                        </h2>
 | 
						|
                        <div id="helpContent" 
 | 
						|
                             class="accordion-collapse collapse" 
 | 
						|
                             data-bs-parent="#helpAccordion">
 | 
						|
                            <div class="accordion-body">
 | 
						|
                                <!-- Add your CSV format instructions here -->
 | 
						|
                                <p>Your CSV should include the following columns:</p>
 | 
						|
                                <ul>
 | 
						|
                                    <li><code>id</code> - Required for edits</li>
 | 
						|
                                    <li><code>name</code> - Item name</li>
 | 
						|
                                    <!-- Add more columns as needed -->
 | 
						|
                                </ul>
 | 
						|
                                <a href="/sample.csv" class="btn btn-sm btn-outline-primary">
 | 
						|
                                    Download Sample CSV
 | 
						|
                                </a>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </main>    
 | 
						|
    {% include 'footer.html' %}
 | 
						|
    <!-- Bootstrap JS -->
 | 
						|
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
 | 
						|
</body>
 | 
						|
</html> |