124 lines
5.6 KiB
HTML
124 lines
5.6 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block title %}Admin Dashboard - KCAP Demo Server{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="row mt-4">
|
|
<div class="col-md-12">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h1>Product Management</h1>
|
|
<a href="{{ url_for('admin.add_product') }}" class="btn btn-primary">Add New Product</a>
|
|
</div>
|
|
|
|
{% if products %}
|
|
<table class="table table-striped table-bordered align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th style="width: 15%">Product ID</th>
|
|
<th style="width: 25%">Name</th>
|
|
<th style="width: 10%">Price</th>
|
|
<th style="width: 20%">Image</th>
|
|
<th style="width: 30%">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for product_id, product_data in products.items() %}
|
|
<tr>
|
|
<td>{{ product_id }}</td>
|
|
<td>
|
|
{% for field in product_data %}
|
|
{% if field.fieldName == '_name' %}
|
|
{{ field.value }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</td>
|
|
<td>
|
|
{% for field in product_data %}
|
|
{% if field.fieldName == '_price' %}
|
|
{{ field.value }}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</td>
|
|
<td>
|
|
{% for field in product_data %}
|
|
{% if field.fieldName == '_image' %}
|
|
<div class="product-image-container">
|
|
<img src="{{ field.value }}" alt="Product image" class="product-image">
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</td>
|
|
<td>
|
|
<div class="d-flex justify-content-center gap-2">
|
|
<a href="{{ url_for('admin.edit_product', product_id=product_id) }}" class="btn btn-sm btn-outline-primary">Edit</a>
|
|
<a href="{{ url_for('admin.generate_barcode_page', product_id=product_id) }}" class="btn btn-sm btn-outline-success">Barcodes</a>
|
|
<button type="button" class="btn btn-sm btn-outline-danger"
|
|
data-bs-toggle="modal" data-bs-target="#deleteModal"
|
|
data-product-id="{{ product_id }}"
|
|
data-product-name="{% for field in product_data %}{% if field.fieldName == '_name' %}{{ field.value }}{% endif %}{% endfor %}">
|
|
Delete
|
|
</button>
|
|
</div>
|
|
<form id="delete-form-{{ product_id }}" action="{{ url_for('admin.delete_product', product_id=product_id) }}" method="POST" style="display: none;">
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% else %}
|
|
<div class="alert alert-info">
|
|
No products available. Click "Add New Product" to get started.
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Delete Confirmation Modal -->
|
|
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-danger text-white">
|
|
<h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Are you sure you want to delete the product <strong id="delete-product-name"></strong>?</p>
|
|
<p class="text-danger"><i class="bi bi-exclamation-triangle-fill"></i> This action cannot be undone.</p>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="confirm-delete-btn">Delete Product</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Delete confirmation modal functionality
|
|
const deleteModal = document.getElementById('deleteModal');
|
|
if (deleteModal) {
|
|
deleteModal.addEventListener('show.bs.modal', function (event) {
|
|
// Button that triggered the modal
|
|
const button = event.relatedTarget;
|
|
|
|
// Extract product info from data attributes
|
|
const productId = button.getAttribute('data-product-id');
|
|
const productName = button.getAttribute('data-product-name');
|
|
|
|
// Update modal content
|
|
const modalProductName = document.getElementById('delete-product-name');
|
|
modalProductName.textContent = productName + " (ID: " + productId + ")";
|
|
|
|
// Setup the confirm button action
|
|
const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
|
|
confirmDeleteBtn.onclick = function() {
|
|
document.getElementById('delete-form-' + productId).submit();
|
|
};
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|