c7f5203aa7
- Created boxes_crates table with 8-digit auto-generated box numbers - Added manage_boxes route and full CRUD operations - Implemented box status tracking (open/closed) - Added location assignment functionality - Integrated QZ Tray printing with barcode labels - Created manage_boxes.html with table, preview, and print features - Added 'Manage Boxes/Crates' card to warehouse main page - Boxes can be created without location and assigned later - Includes delete functionality for admin/management roles - Added box statistics display
606 lines
22 KiB
HTML
606 lines
22 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Manage Boxes{% endblock %}
|
|
|
|
{% block head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/warehouse.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<style>
|
|
.warehouse-page-container .warehouse-container-1 {
|
|
flex: 0.5; /* Reduced from 1 to 0.5 */
|
|
}
|
|
.warehouse-page-container .warehouse-container-2 {
|
|
flex: 2.5; /* Increased from 2 to 2.5 */
|
|
}
|
|
</style>
|
|
<div class="warehouse-page-container">
|
|
<!-- Container 1: Add Box (0.5 part width) -->
|
|
<div class="warehouse-container-1">
|
|
<h3>Add New Box</h3>
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
{% for category, message in messages %}
|
|
<div class="form-message {{ 'alert-success' if category == 'success' else 'alert-danger' if category == 'error' else 'alert-info' }}">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
{% endwith %}
|
|
<form method="POST" class="form-centered">
|
|
<input type="hidden" name="action" value="add_box">
|
|
<div style="font-size: 0.9em; color: #666; margin: 8px 0;">
|
|
Box number will be auto-generated (8 digits)<br>
|
|
Location can be assigned later after filling the box.
|
|
</div>
|
|
<button type="submit" class="btn">Create Box</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Container 2: Boxes Table (2 parts width) -->
|
|
<div class="warehouse-container-2">
|
|
<h3>All Boxes</h3>
|
|
<div class="warehouse-table-scroll">
|
|
<table class="scan-table" id="boxes-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Box Number</th>
|
|
<th>Status</th>
|
|
<th>Location</th>
|
|
<th>Created At</th>
|
|
<th>Created By</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for box in boxes %}
|
|
<tr class="box-row selectable-row" data-box-id="{{ box[0] }}" data-box-number="{{ box[1] }}">
|
|
<td>{{ box[0] }}</td>
|
|
<td><strong>{{ box[1] }}</strong></td>
|
|
<td>
|
|
<span class="status-badge status-{{ box[2] }}">{{ box[2]|upper }}</span>
|
|
</td>
|
|
<td>{{ box[3] or 'Not assigned' }}</td>
|
|
<td>{{ box[4].strftime('%Y-%m-%d %H:%M') if box[4] else '' }}</td>
|
|
<td>{{ box[6] or '' }}</td>
|
|
<td class="action-cell">
|
|
<div class="action-buttons">
|
|
<!-- Status toggle -->
|
|
<form method="POST" style="display: inline;">
|
|
<input type="hidden" name="action" value="update_status">
|
|
<input type="hidden" name="box_id" value="{{ box[0] }}">
|
|
<input type="hidden" name="new_status" value="{{ 'closed' if box[2] == 'open' else 'open' }}">
|
|
<button type="submit" class="btn-small btn-info" title="Toggle status">
|
|
{{ '🔒 Close' if box[2] == 'open' else '🔓 Open' }}
|
|
</button>
|
|
</form>
|
|
<!-- Location change -->
|
|
<button type="button" class="btn-small btn-warning" onclick="openLocationModal({{ box[0] }}, '{{ box[1] }}', {{ box[7] or 'null' }});" title="Change location">
|
|
📍 Location
|
|
</button>
|
|
<!-- Make label button -->
|
|
<button type="button" class="btn-small btn-success" onclick="selectAndShowLabel('{{ box[0] }}', '{{ box[1] }}', this);" title="Select for label preview">
|
|
📋 Make Label
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Container 3: Actions and Print (1 part width) -->
|
|
<div class="warehouse-container-3">
|
|
<!-- Delete and Stats Section -->
|
|
<div style="padding: 12px; border: 1px solid #dee2e6; border-radius: 5px; margin-bottom: 16px;">
|
|
<h4 style="font-size: 1em; margin-bottom: 8px;">Box Statistics</h4>
|
|
<div style="font-size: 0.85em; display: flex; gap: 12px; margin-bottom: 12px;">
|
|
<span><strong>Total:</strong> {{ boxes|length }}</span>
|
|
<span><strong>Open:</strong> {{ boxes|selectattr('2', 'equalto', 'open')|list|length }}</span>
|
|
<span><strong>Closed:</strong> {{ boxes|selectattr('2', 'equalto', 'closed')|list|length }}</span>
|
|
</div>
|
|
|
|
{% if session['role'] in ['administrator', 'management'] %}
|
|
<div style="border-top: 1px solid #dee2e6; padding-top: 8px;">
|
|
<label style="font-weight:bold; font-size: 0.9em;">Delete Boxes</label>
|
|
<form method="POST" style="display:flex; gap:6px; align-items:center; margin-top: 6px;" onsubmit="return confirmDeleteBoxes();">
|
|
<input type="hidden" name="action" value="delete_boxes">
|
|
<input type="text" name="delete_ids" placeholder="e.g. 5,7,12" style="width:120px; font-size: 0.85em; padding: 4px;" required>
|
|
<button type="submit" class="btn" style="padding:4px 12px; font-size: 0.85em;">Delete</button>
|
|
</form>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Print Box Label Section -->
|
|
<div style="padding: 12px; border: 1px solid #dee2e6; border-radius: 5px;">
|
|
<h3 style="font-size: 1.1em; margin-bottom: 12px;">Print Box Label</h3>
|
|
<div id="box-selection-hint" style="margin-bottom: 10px; font-size: 11px; color: #666; text-align: center;">
|
|
Click on a box row in the table to select it for printing
|
|
</div>
|
|
<!-- Label Preview -->
|
|
<div id="box-label-preview" style="display: flex; align-items: center; justify-content: center; min-height: 120px;">
|
|
<div style="width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
|
<div class="box-text">
|
|
<div id="box-number-display" style="font-size: 18px; font-weight: bold;">Select a box</div>
|
|
</div>
|
|
<canvas id="box-barcode" style="display: none; margin-top: 10px;"></canvas>
|
|
<div id="box-barcode-placeholder" style="color: #999; font-style: italic; text-align: center;">No box selected</div>
|
|
</div>
|
|
</div>
|
|
<!-- Print Controls -->
|
|
<div style="text-align: center; margin-top: 15px;">
|
|
<div style="margin-bottom: 10px;">
|
|
<label for="printer-select" style="font-size: 11px; font-weight: 600;">Select Printer:</label>
|
|
<select id="printer-select" class="form-control form-control-sm" style="width: 200px; margin: 5px auto; font-size: 11px;">
|
|
<option value="">Loading printers...</option>
|
|
</select>
|
|
</div>
|
|
<button id="print-box-btn" class="btn btn-success" style="font-size: 12px; padding: 6px 20px;" disabled>
|
|
🖨️ Print Box Label
|
|
</button>
|
|
<button onclick="testQZConnection()" class="btn btn-info" style="font-size: 11px; padding: 4px 12px; margin-left: 8px;">
|
|
🔧 Test QZ Tray
|
|
</button>
|
|
<div id="print-status" style="margin-top: 8px; font-size: 11px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Change Location Modal -->
|
|
<div id="location-modal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Change Box Location</h3>
|
|
<span class="close" onclick="closeLocationModal()">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Change location for box: <strong id="modal-box-number"></strong></p>
|
|
<form method="POST" id="location-form">
|
|
<input type="hidden" name="action" value="update_location">
|
|
<input type="hidden" name="box_id" id="modal-box-id">
|
|
<label>New Location:</label>
|
|
<select name="new_location_id" id="modal-location-select" required>
|
|
<option value="">Select a location...</option>
|
|
{% for loc in locations %}
|
|
<option value="{{ loc[0] }}">{{ loc[1] }} - {{ loc[3] or 'No description' }}</option>
|
|
{% endfor %}
|
|
</select><br>
|
|
<div class="modal-buttons">
|
|
<button type="button" class="btn btn-secondary" onclick="closeLocationModal()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Update Location</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.status-badge {
|
|
padding: 3px 8px;
|
|
border-radius: 3px;
|
|
font-size: 0.85em;
|
|
font-weight: bold;
|
|
}
|
|
.status-open {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
}
|
|
.status-closed {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
.action-buttons {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.btn-small {
|
|
padding: 3px 8px;
|
|
font-size: 0.85em;
|
|
border: none;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
.btn-info {
|
|
background-color: #17a2b8;
|
|
color: white;
|
|
}
|
|
.btn-warning {
|
|
background-color: #ffc107;
|
|
color: #000;
|
|
}
|
|
.btn-success {
|
|
background-color: #28a745;
|
|
color: white;
|
|
}
|
|
.btn-info:hover {
|
|
background-color: #138496;
|
|
}
|
|
.btn-warning:hover {
|
|
background-color: #e0a800;
|
|
}
|
|
.btn-success:hover {
|
|
background-color: #218838;
|
|
}
|
|
.box-row {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.box-row:hover {
|
|
background-color: #e2e8f0;
|
|
}
|
|
.box-row.selected {
|
|
background-color: #ffb300 !important;
|
|
color: #222 !important;
|
|
font-weight: bold;
|
|
}
|
|
.selectable-row {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
.selectable-row:hover {
|
|
background-color: #f5f5f5;
|
|
}
|
|
.selectable-row.selected {
|
|
background-color: #e3f2fd !important;
|
|
}
|
|
.modal {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
background-color: rgba(0,0,0,0.4);
|
|
}
|
|
.modal-content {
|
|
background-color: #fefefe;
|
|
margin: 10% auto;
|
|
padding: 20px;
|
|
border: 1px solid #888;
|
|
width: 400px;
|
|
border-radius: 5px;
|
|
}
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.close {
|
|
color: #aaa;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
.close:hover {
|
|
color: #000;
|
|
}
|
|
.modal-buttons {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: flex-end;
|
|
margin-top: 15px;
|
|
}
|
|
.form-message {
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border-radius: 4px;
|
|
}
|
|
.alert-success {
|
|
background-color: #d4edda;
|
|
color: #155724;
|
|
border: 1px solid #c3e6cb;
|
|
}
|
|
.alert-error, .alert-danger {
|
|
background-color: #f8d7da;
|
|
color: #721c24;
|
|
border: 1px solid #f5c6cb;
|
|
}
|
|
.alert-info {
|
|
background-color: #d1ecf1;
|
|
color: #0c5460;
|
|
border: 1px solid #bee5eb;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
function confirmDeleteBoxes() {
|
|
return confirm('Do you really want to delete the selected boxes?');
|
|
}
|
|
|
|
function openLocationModal(boxId, boxNumber, currentLocationId) {
|
|
document.getElementById('modal-box-id').value = boxId;
|
|
document.getElementById('modal-box-number').textContent = boxNumber;
|
|
|
|
const locationSelect = document.getElementById('modal-location-select');
|
|
if (currentLocationId) {
|
|
locationSelect.value = currentLocationId;
|
|
} else {
|
|
locationSelect.value = '';
|
|
}
|
|
|
|
document.getElementById('location-modal').style.display = 'block';
|
|
}
|
|
|
|
function closeLocationModal() {
|
|
document.getElementById('location-modal').style.display = 'none';
|
|
}
|
|
|
|
// Close modal when clicking outside of it
|
|
window.onclick = function(event) {
|
|
const modal = document.getElementById('location-modal');
|
|
if (event.target == modal) {
|
|
closeLocationModal();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<!-- Include required JS libraries for printing -->
|
|
<script src="{{ url_for('static', filename='JsBarcode.all.min.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='qz-tray.js') }}"></script>
|
|
<script src="{{ url_for('static', filename='html2canvas.min.js') }}"></script>
|
|
|
|
<script>
|
|
// Box printing functionality
|
|
let selectedBoxNumber = null;
|
|
let selectedBoxId = null;
|
|
|
|
// Notification system
|
|
function showNotification(message, type = 'info') {
|
|
const existingNotifications = document.querySelectorAll('.notification');
|
|
existingNotifications.forEach(n => n.remove());
|
|
|
|
const notification = document.createElement('div');
|
|
notification.className = `notification alert alert-${type === 'error' ? 'danger' : type === 'success' ? 'success' : type === 'warning' ? 'warning' : 'info'}`;
|
|
notification.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 9999;
|
|
max-width: 450px;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
|
`;
|
|
|
|
const formattedMessage = message.replace(/\n/g, '<br>');
|
|
|
|
notification.innerHTML = `
|
|
<div style="display: flex; align-items: flex-start; justify-content: space-between;">
|
|
<span style="flex: 1; padding-right: 10px; white-space: pre-wrap; font-family: monospace; font-size: 12px;">${formattedMessage}</span>
|
|
<button type="button" onclick="this.parentElement.parentElement.remove()" style="background: none; border: none; font-size: 20px; cursor: pointer; flex-shrink: 0;">×</button>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(notification);
|
|
|
|
const timeout = type === 'error' ? 15000 : 5000;
|
|
setTimeout(() => {
|
|
if (notification.parentNode) {
|
|
notification.remove();
|
|
}
|
|
}, timeout);
|
|
}
|
|
|
|
// Handle box row selection
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('=== Initializing box selection ===');
|
|
|
|
const boxRows = document.querySelectorAll('.box-row');
|
|
const printButton = document.getElementById('print-box-btn');
|
|
|
|
console.log('Found box rows:', boxRows.length);
|
|
console.log('Box rows array:', Array.from(boxRows));
|
|
|
|
if (boxRows.length === 0) {
|
|
console.error('ERROR: No box rows found! Check if .box-row class exists on tr elements');
|
|
}
|
|
|
|
boxRows.forEach((row, index) => {
|
|
console.log(`Attaching click handler to row ${index}:`, row);
|
|
|
|
row.addEventListener('click', function(e) {
|
|
console.log('=== ROW CLICKED ===');
|
|
console.log('Event target:', e.target);
|
|
console.log('Current target:', e.currentTarget);
|
|
|
|
// Don't trigger if clicking on buttons or forms in action cell
|
|
if (e.target.closest('.action-cell')) {
|
|
console.log('Clicked in action cell, ignoring');
|
|
return;
|
|
}
|
|
|
|
console.log('Processing row selection...');
|
|
|
|
// Remove selection from other rows
|
|
boxRows.forEach(r => r.classList.remove('selected'));
|
|
|
|
// Select this row
|
|
this.classList.add('selected');
|
|
|
|
// Get box data from data attributes
|
|
selectedBoxId = this.dataset.boxId;
|
|
selectedBoxNumber = this.dataset.boxNumber;
|
|
|
|
console.log('Selected box ID:', selectedBoxId);
|
|
console.log('Selected box number:', selectedBoxNumber);
|
|
|
|
// Update preview
|
|
updateBoxPreview();
|
|
});
|
|
});
|
|
|
|
console.log('=== Box selection initialized ===');
|
|
|
|
// Initialize QZ Tray
|
|
initQZTray();
|
|
});
|
|
|
|
function updateBoxPreview() {
|
|
if (selectedBoxNumber) {
|
|
document.getElementById('box-number-display').textContent = selectedBoxNumber;
|
|
document.getElementById('box-barcode-placeholder').style.display = 'none';
|
|
|
|
const canvas = document.getElementById('box-barcode');
|
|
canvas.style.display = 'block';
|
|
|
|
// Generate barcode
|
|
JsBarcode(canvas, selectedBoxNumber, {
|
|
format: "CODE128",
|
|
width: 2,
|
|
height: 50,
|
|
displayValue: true,
|
|
fontSize: 14
|
|
});
|
|
|
|
document.getElementById('print-box-btn').disabled = false;
|
|
} else {
|
|
document.getElementById('box-number-display').textContent = 'Select a box';
|
|
document.getElementById('box-barcode-placeholder').style.display = 'block';
|
|
document.getElementById('box-barcode').style.display = 'none';
|
|
document.getElementById('print-box-btn').disabled = true;
|
|
}
|
|
}
|
|
|
|
// QZ Tray functionality
|
|
async function initQZTray() {
|
|
try {
|
|
if (!window.qz) {
|
|
console.error('QZ Tray library not loaded');
|
|
document.getElementById('print-status').innerHTML = '<span style="color: red;">QZ Tray library not loaded</span>';
|
|
return;
|
|
}
|
|
|
|
if (!window.qz.websocket.isActive()) {
|
|
await window.qz.websocket.connect();
|
|
}
|
|
await loadPrinters();
|
|
} catch (e) {
|
|
console.error('QZ Tray initialization failed:', e);
|
|
document.getElementById('print-status').innerHTML = '<span style="color: red;">QZ Tray not connected</span>';
|
|
}
|
|
}
|
|
|
|
async function loadPrinters() {
|
|
try {
|
|
const printers = await window.qz.printers.find();
|
|
const printerSelect = document.getElementById('printer-select');
|
|
printerSelect.innerHTML = '';
|
|
|
|
if (printers.length === 0) {
|
|
printerSelect.innerHTML = '<option value="">No printers found</option>';
|
|
return;
|
|
}
|
|
|
|
printers.forEach(printer => {
|
|
const option = document.createElement('option');
|
|
option.value = printer;
|
|
option.textContent = printer;
|
|
printerSelect.appendChild(option);
|
|
});
|
|
|
|
// Select first printer by default
|
|
if (printers.length > 0) {
|
|
printerSelect.value = printers[0];
|
|
}
|
|
} catch (e) {
|
|
console.error('Error loading printers:', e);
|
|
showNotification('Error loading printers: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
async function testQZConnection() {
|
|
try {
|
|
if (!window.qz.websocket.isActive()) {
|
|
await window.qz.websocket.connect();
|
|
}
|
|
showNotification('QZ Tray connected successfully!', 'success');
|
|
await loadPrinters();
|
|
} catch (e) {
|
|
showNotification('QZ Tray connection failed: ' + e.message, 'error');
|
|
}
|
|
}
|
|
|
|
// Function to select box and show label preview from action button
|
|
function selectAndShowLabel(boxId, boxNumber, buttonElement) {
|
|
console.log('Make Label button clicked for box:', boxId, boxNumber);
|
|
|
|
// Find the row that contains this button
|
|
const row = buttonElement.closest('tr.box-row');
|
|
|
|
if (!row) {
|
|
console.error('Could not find parent row');
|
|
return;
|
|
}
|
|
|
|
// Remove selection from all rows
|
|
document.querySelectorAll('.box-row').forEach(r => {
|
|
r.classList.remove('selected');
|
|
});
|
|
|
|
// Select this row
|
|
row.classList.add('selected');
|
|
|
|
// Update selected box data
|
|
selectedBoxId = boxId;
|
|
selectedBoxNumber = boxNumber;
|
|
|
|
console.log('Box selected for label:', selectedBoxId, selectedBoxNumber);
|
|
|
|
// Update preview
|
|
updateBoxPreview();
|
|
|
|
// Scroll to print preview section
|
|
document.getElementById('box-label-preview').scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
}
|
|
|
|
document.getElementById('print-box-btn').addEventListener('click', async function() {
|
|
if (!selectedBoxNumber) {
|
|
showNotification('Please select a box from the table', 'warning');
|
|
return;
|
|
}
|
|
|
|
const printerSelect = document.getElementById('printer-select');
|
|
const selectedPrinter = printerSelect.value;
|
|
|
|
if (!selectedPrinter) {
|
|
showNotification('Please select a printer', 'warning');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
document.getElementById('print-status').innerHTML = '<span style="color: blue;">Printing...</span>';
|
|
|
|
// Create ZPL code for box label
|
|
const zpl = `^XA
|
|
^FO50,50^A0N,40,40^FDBox: ${selectedBoxNumber}^FS
|
|
^FO50,120^BY2,3,80^BCN,80,Y,N,N^FD${selectedBoxNumber}^FS
|
|
^XZ`;
|
|
|
|
const config = window.qz.configs.create(selectedPrinter);
|
|
await window.qz.print(config, [zpl]);
|
|
|
|
showNotification('Box label printed successfully!', 'success');
|
|
document.getElementById('print-status').innerHTML = '<span style="color: green;">✓ Printed successfully</span>';
|
|
|
|
setTimeout(() => {
|
|
document.getElementById('print-status').innerHTML = '';
|
|
}, 3000);
|
|
} catch (e) {
|
|
console.error('Print error:', e);
|
|
showNotification('Print failed: ' + e.message, 'error');
|
|
document.getElementById('print-status').innerHTML = '<span style="color: red;">Print failed</span>';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
{% endblock %}
|