updating ui
This commit is contained in:
150
templates/admin/generate_barcode.html
Normal file
150
templates/admin/generate_barcode.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user