mattintech/KCAPDemoServer
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

updating ui

Browse Source
This commit is contained in:
Matt Hills
2025-05-08 20:49:15 -04:00
parent 1e14703eec
commit f5f6e52c4b
15 changed files with 1332 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
templates/admin/add_product.html Normal file
View File

@@ -0,0 +1,102 @@
{% extends "layout.html" %}
{% block title %}Add New Product - KCAP Demo Server{% endblock %}
{% block content %}
<div class="row mt-4">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-header">
<h2>Add New Product</h2>
</div>
<div class="card-body">
<form action="{{ url_for('admin.add_product') }}" method="POST" enctype="multipart/form-data">
<div class="mb-3">
<label for="product_id" class="form-label">Product ID *</label>
<div class="input-group">
<input type="text" class="form-control" id="product_id" name="product_id" required>
<button class="btn btn-outline-secondary" type="button" id="generate-id-btn" title="Generate Random ID">
<i class="bi bi-magic"></i> Generate
</button>
</div>
<div class="form-text">Must be unique. This will be used as the barcode for AR content.</div>
</div>
<div class="mb-3">
<label for="name" class="form-label">Product Name *</label>
<input type="text" class="form-control" id="name" name="name" required>
<div class="form-text">Enter a descriptive name for the product.</div>
</div>
<div class="mb-3">
<label for="price" class="form-label">Price *</label>
<div class="input-group">
<span class="input-group-text">$</span>
<input type="text" class="form-control" id="price" name="price" required pattern="[0-9]+(\.[0-9]{1,2})?" placeholder="49.99">
</div>
<div class="form-text">Enter the price in decimal format (e.g., 49.99)</div>
</div>
<div class="mb-3">
<label for="image" class="form-label">Product Image</label>
<input type="file" class="form-control" id="image" name="image" accept="image/*" onchange="previewImage(this)">
<div class="form-text">Supported formats: .png, .jpg, .jpeg, .gif</div>
<div class="mt-2">
<img id="image-preview" class="image-preview" style="display: none;">
</div>
</div>
<div class="d-flex justify-content-between">
<a href="{{ url_for('admin.index') }}" class="btn btn-secondary">Cancel</a>
<button type="submit" class="btn btn-primary">Add Product</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function previewImage(input) {
var preview = document.getElementById('image-preview');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = 'block';
}
reader.readAsDataURL(input.files[0]);
} else {
preview.style.display = 'none';
}
}
// Generate a random product ID
document.getElementById('generate-id-btn').addEventListener('click', function() {
// Generate a random alphanumeric ID
// Format: 3 letters followed by 4 numbers (e.g., ABC1234)
const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const numbers = '0123456789';
let id = '';
// Add 3 random uppercase letters
for (let i = 0; i < 3; i++) {
id += letters.charAt(Math.floor(Math.random() * letters.length));
}
// Add 4 random numbers
for (let i = 0; i < 4; i++) {
id += numbers.charAt(Math.floor(Math.random() * numbers.length));
}
// Set the generated ID in the input field
document.getElementById('product_id').value = id;
});
</script>
{% endblock %}

97
templates/admin/edit_product.html Normal file
View File

@@ -0,0 +1,97 @@
{% extends "layout.html" %}
{% block title %}Edit Product - KCAP Demo Server{% endblock %}
{% block content %}
<div class="row mt-4">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-header">
<h2>Edit Product</h2>
</div>
<div class="card-body">
<form action="{{ url_for('admin.edit_product', product_id=product_id) }}" method="POST" enctype="multipart/form-data">
<div class="mb-3">
<label for="product_id" class="form-label">Product ID</label>
<input type="text" class="form-control" id="product_id" value="{{ product_id }}" disabled>
<div class="form-text">Product ID cannot be changed.</div>
</div>
<div class="mb-3">
<label for="name" class="form-label">Product Name *</label>
{% for field in product %}
{% if field.fieldName == '_name' %}
<input type="text" class="form-control" id="name" name="name" required value="{{ field.value }}">
{% endif %}
{% endfor %}
<div class="form-text">Enter a descriptive name for the product.</div>
</div>
<div class="mb-3">
<label for="price" class="form-label">Price *</label>
<div class="input-group">
<span class="input-group-text">$</span>
{% for field in product %}
{% if field.fieldName == '_price' %}
{% set price_value = field.value|replace('$', '') %}
<input type="text" class="form-control" id="price" name="price" required
pattern="[0-9]+(\.[0-9]{1,2})?" value="{{ price_value }}">
{% endif %}
{% endfor %}
</div>
<div class="form-text">Enter the price in decimal format (e.g., 49.99)</div>
</div>
<div class="mb-3">
<label for="image" class="form-label">Product Image</label>
<input type="file" class="form-control" id="image" name="image" accept="image/*" onchange="previewImage(this)">
<div class="form-text">Leave empty to keep the current image.</div>
<div class="mt-3">
<label class="form-label">Current Image:</label>
{% for field in product %}
{% if field.fieldName == '_image' %}
<div>
<img src="{{ field.value }}" alt="Current product image" class="image-preview">
</div>
{% endif %}
{% endfor %}
</div>
<div class="mt-2">
<label class="form-label">New Image Preview:</label>
<img id="image-preview" class="image-preview" style="display: none;">
</div>
</div>
<div class="d-flex justify-content-between">
<a href="{{ url_for('admin.index') }}" class="btn btn-secondary">Cancel</a>
<button type="submit" class="btn btn-primary">Update Product</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
<script>
function previewImage(input) {
var preview = document.getElementById('image-preview');
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
preview.src = e.target.result;
preview.style.display = 'block';
}
reader.readAsDataURL(input.files[0]);
} else {
preview.style.display = 'none';
}
}
</script>
{% endblock %}

150
templates/admin/generate_barcode.html Normal file
View File

@@ -0,0 +1,150 @@
{% extends "layout.html" %}
{% block title %}Generate Barcodes - KCAP Demo Server{% endblock %}
{% block content %}
<div class="row mt-4">
<div class="col-md-12">
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h2>Generate Barcodes for Product: {{ product_id }}</h2>
<a href="{{ url_for('admin.index') }}" class="btn btn-outline-secondary">Back to Products</a>
</div>
<div class="card-body">
{% if not dependencies.qrcode or not dependencies.barcode or not dependencies.pillow %}
<div class="alert alert-warning mb-4">
<h4 class="alert-heading">Missing Dependencies</h4>
<p>Some barcode generation features are unavailable because required packages are not installed:</p>
<ul>
{% if not dependencies.qrcode %}
<li><strong>QR Code:</strong> The 'qrcode' package is required for QR code generation</li>
{% endif %}
{% if not dependencies.barcode %}
<li><strong>Barcodes:</strong> The 'python-barcode' package is required for EAN-13 and Code 128 generation</li>
{% endif %}
{% if not dependencies.pillow %}
<li><strong>Image Processing:</strong> The 'Pillow' package is required for image processing</li>
{% endif %}
</ul>
<hr>
<p class="mb-0">To install the required dependencies, run: <code>pip install -r requirements.txt</code></p>
</div>
{% endif %}
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3>QR Code</h3>
</div>
<div class="card-body text-center">
<img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='qrcode') }}" alt="QR Code" class="img-fluid mb-3" style="max-width: 250px;">
<p class="text-muted">QR Code contains a link to the product AR info.</p>
<a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='qrcode') }}" class="btn btn-primary" download="product_{{ product_id }}_qrcode.png">Download QR Code</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3>EAN-13 Barcode</h3>
</div>
<div class="card-body text-center">
<img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='ean13') }}" alt="EAN-13 Barcode" class="img-fluid mb-3" style="max-width: 250px;">
<p class="text-muted">Standard EAN-13 barcode format.</p>
<a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='ean13') }}" class="btn btn-primary" download="product_{{ product_id }}_ean13.png">Download EAN-13</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-header">
<h3>Code 128 Barcode</h3>
</div>
<div class="card-body text-center">
<img src="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='code128') }}" alt="Code 128 Barcode" class="img-fluid mb-3" style="max-width: 250px;">
<p class="text-muted">High-density alphanumeric barcode.</p>
<a href="{{ url_for('admin.generate_barcode', product_id=product_id, code_type='code128') }}" class="btn btn-primary" download="product_{{ product_id }}_code128.png">Download Code 128</a>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3>Product Information</h3>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<p><strong>Product ID:</strong> {{ product_id }}</p>
<p><strong>Price:</strong> {{ product.price }}</p>
</div>
<div class="col-md-4">
<p><strong>AR Info URL:</strong>
<a href="{{ url_for('get_ar_info', barcode=product_id) }}" target="_blank">
{{ url_for('get_ar_info', barcode=product_id, _external=True) }}
</a>
</p>
</div>
<div class="col-md-4">
{% if product.image %}
<img src="{{ product.image }}" alt="Product Image" class="img-thumbnail" style="max-height: 100px;">
{% else %}
<p>No product image available</p>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3>Print All Codes</h3>
</div>
<div class="card-body">
<p>Use the button below to open a printable version of all barcodes for this product.</p>
<button class="btn btn-success" onclick="window.print()">Print Barcodes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block extra_css %}
<style>
@media print {
.navbar, .card-header, .btn, .text-muted, .alert {
display: none;
}
.card {
border: none;
margin-bottom: 1cm;
}
.card-body {
text-align: center;
}
.row {
display: block;
}
.col-md-4 {
width: 100%;
max-width: 100%;
flex: 0 0 100%;
page-break-after: always;
}
}
</style>
{% endblock %}

121
templates/admin/index.html Normal file
View File

@@ -0,0 +1,121 @@
{% 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">
<thead>
<tr>
<th>Product ID</th>
<th>Name</th>
<th>Price</th>
<th>Image</th>
<th>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' %}
<img src="{{ field.value }}" alt="Product image" style="max-height: 100px; max-width: 100px;">
{% endif %}
{% endfor %}
</td>
<td>
<div class="btn-group">
<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 %}