Barcode Operations
This commit is contained in:
Thanakorn S
@@ -0,0 +1,388 @@
|
||||
<?php
|
||||
session_start();
|
||||
require '../config.php';
|
||||
require '../include_header.php';
|
||||
?>
|
||||
|
||||
<body>
|
||||
<?php require '../include_topbar.php'; ?>
|
||||
<?php require '../include_master_sidebar.php'; ?>
|
||||
|
||||
<main id="content" class="content py-15">
|
||||
<div class="container-fluid">
|
||||
<div class="row mb-6">
|
||||
<div class="col-12 d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h1 class="fs-3 mb-1">Location Barcode Labels</h1>
|
||||
<p class="mb-0 text-muted">Print or reprint labels from the rack master list.</p>
|
||||
</div>
|
||||
<div class="d-flex gap-2">
|
||||
<button id="btn_print" class="btn btn-outline-success" onclick="print_selected_label()" disabled>
|
||||
<i class="ti ti-printer me-1"></i>Print
|
||||
</button>
|
||||
<button id="btn_disable" class="btn btn-outline-danger" onclick="disable_selected_label()" disabled>
|
||||
<i class="ti ti-ban me-1"></i>Disable
|
||||
</button>
|
||||
<button id="btn_reenable" class="btn btn-outline-primary d-none" onclick="reenable_selected_label()">
|
||||
<i class="ti ti-refresh me-1"></i>Re-enable
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row g-5">
|
||||
<div class="col-lg-7">
|
||||
<div class="card"><div class="card-body p-5">
|
||||
<div class="position-relative mb-4">
|
||||
<input type="search" id="search_location" class="form-control ps-9"
|
||||
placeholder="Search warehouse, zone, aisle, rack, or SKU...">
|
||||
<span class="position-absolute top-25 ms-4">
|
||||
<i class="ti ti-search text-muted"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="table-responsive table-scroll">
|
||||
<table class="table table-hover mb-0">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>Warehouse</th>
|
||||
<th class="th-zone">Zone</th>
|
||||
<th class="th-aisle">Aisle</th>
|
||||
<th id="th-rack">Rack</th>
|
||||
<th>Status</th>
|
||||
<th>Label Status</th>
|
||||
<th class="text-end">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="rack_tbody">
|
||||
<tr><td colspan="7" class="text-center text-muted py-4">Loading locations...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<div class="card"><div class="card-body p-5">
|
||||
<div id="label_preview" class="border rounded p-4 text-center text-muted">
|
||||
Select a location to preview its label.
|
||||
</div>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php require '../include_ending.php'; ?>
|
||||
<script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.6/dist/JsBarcode.all.min.js"></script>
|
||||
<script>
|
||||
var advanced = false;
|
||||
var label_rack = 'Location';
|
||||
var label_zone = 'Zone';
|
||||
var label_aisle = 'Aisle';
|
||||
var racks = [];
|
||||
var barcode_status = {};
|
||||
var selected_payload = '';
|
||||
var selected_rack_index = -1;
|
||||
|
||||
function escape_html(value) {
|
||||
return String(value ?? '').replace(/[&<>"']/g, function(char) {
|
||||
return { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[char];
|
||||
});
|
||||
}
|
||||
|
||||
function refresh_header_buttons() {
|
||||
var status = selected_payload ? barcode_status[selected_payload] : null;
|
||||
var is_active = status === 'active';
|
||||
var is_disabled = status === 'disabled';
|
||||
$('#btn_print').prop('disabled', !is_active).toggleClass('d-none', is_disabled);
|
||||
$('#btn_disable').prop('disabled', !is_active).toggleClass('d-none', is_disabled);
|
||||
$('#btn_reenable').toggleClass('d-none', !is_disabled);
|
||||
}
|
||||
|
||||
function highlight_selected_row() {
|
||||
$('#rack_tbody tr').removeClass('table-active');
|
||||
if (selected_rack_index >= 0) {
|
||||
$('#rack_tbody tr[data-rack-index="' + selected_rack_index + '"]').addClass('table-active');
|
||||
}
|
||||
}
|
||||
|
||||
function load_config() {
|
||||
return ajax_request({
|
||||
url: server_url + 'setting/api/engine/company_setting.php',
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
queueLock: false,
|
||||
onSuccess: function(res) {
|
||||
var s = res.output || {};
|
||||
advanced = s.advanced_location == 1;
|
||||
label_rack = s.location_label_rack || (advanced ? 'Rack' : 'Location');
|
||||
label_zone = s.location_label_zone || 'Zone';
|
||||
label_aisle = s.location_label_aisle || 'Aisle';
|
||||
$('.th-zone').text(label_zone).toggleClass('d-none', !advanced);
|
||||
$('.th-aisle').text(label_aisle).toggleClass('d-none', !advanced);
|
||||
$('#th-rack').text(label_rack);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function load_racks() {
|
||||
return ajax_request({
|
||||
url: server_url + 'reports/api/engine_report/rack_occupancy.php',
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
queueLock: false,
|
||||
onSuccess: function(res) {
|
||||
racks = res.output || [];
|
||||
render_racks();
|
||||
highlight_selected_row();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function load_barcode_statuses() {
|
||||
return ajax_request({
|
||||
url: server_url + 'ics/api/engine/location_barcode_label.php',
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
queueLock: false,
|
||||
data: { label_action: 'list' },
|
||||
onSuccess: function(res) {
|
||||
barcode_status = {};
|
||||
(res.output || []).forEach(function(item) {
|
||||
barcode_status[item.barcode] = parseInt(item.status) === 1 ? 'active' : 'disabled';
|
||||
});
|
||||
render_racks();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function location_payload(item) {
|
||||
return advanced
|
||||
? `LOC|${item.warehouse_id}|${item.zone}|${item.aisle}|${item.rack}`
|
||||
: `LOC|${item.warehouse_id}|${item.rack}`;
|
||||
}
|
||||
|
||||
function render_racks() {
|
||||
var keyword = $('#search_location').val().toLowerCase();
|
||||
var rows = racks.filter(function(item) {
|
||||
if (!keyword) return true;
|
||||
return [
|
||||
item.warehouse_name,
|
||||
item.zone,
|
||||
item.aisle,
|
||||
item.rack,
|
||||
item.product_sku,
|
||||
item.product_name,
|
||||
item.status
|
||||
].join(' ').toLowerCase().includes(keyword);
|
||||
});
|
||||
|
||||
if (!rows.length) {
|
||||
$('#rack_tbody').html('<tr><td colspan="7" class="text-center text-muted py-4">No locations found.</td></tr>');
|
||||
return;
|
||||
}
|
||||
|
||||
var body = '';
|
||||
rows.forEach(function(item) {
|
||||
var idx = racks.indexOf(item);
|
||||
var status = item.status === 'occupied'
|
||||
? '<span class="badge bg-warning text-dark">Occupied</span>'
|
||||
: '<span class="badge bg-success">Empty</span>';
|
||||
var payload = location_payload(item);
|
||||
var labelStatus = '<span class="badge bg-secondary">Not prepared</span>';
|
||||
if (barcode_status[payload] === 'active') {
|
||||
labelStatus = '<span class="badge bg-success">Active</span>';
|
||||
}
|
||||
if (barcode_status[payload] === 'disabled') {
|
||||
labelStatus = '<span class="badge bg-danger">Disabled</span>';
|
||||
}
|
||||
body += `<tr data-rack-index="${idx}">
|
||||
<td>${escape_html(item.warehouse_name)}</td>
|
||||
<td class="th-zone ${advanced ? '' : 'd-none'}">${escape_html(item.zone)}</td>
|
||||
<td class="th-aisle ${advanced ? '' : 'd-none'}">${escape_html(item.aisle)}</td>
|
||||
<td>${escape_html(item.rack)}</td>
|
||||
<td>${status}</td>
|
||||
<td>${labelStatus}</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="preview_label(${idx})">
|
||||
<i class="ti ti-barcode me-1"></i>Preview
|
||||
</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
});
|
||||
$('#rack_tbody').html(body);
|
||||
}
|
||||
|
||||
function render_preview(item, payload) {
|
||||
$('#label_preview').html(`
|
||||
<div class="barcode-label mx-auto">
|
||||
<div class="fw-bold fs-5">${escape_html(item.warehouse_name)}</div>
|
||||
<div class="small">${advanced
|
||||
? `${escape_html(item.zone)} / ${escape_html(item.aisle)} / ${escape_html(item.rack)}`
|
||||
: escape_html(item.rack)}</div>
|
||||
<svg id="barcode_svg"></svg>
|
||||
<div class="small text-muted">${escape_html(payload)}</div>
|
||||
</div>`);
|
||||
JsBarcode('#barcode_svg', payload, { format: 'CODE128', width: 1.6, height: 70, displayValue: false });
|
||||
}
|
||||
|
||||
function preview_label(index) {
|
||||
var item = racks[index];
|
||||
if (!item) return;
|
||||
var payload = location_payload(item);
|
||||
|
||||
ajax_request({
|
||||
url: server_url + 'ics/api/engine/location_barcode_label.php',
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
queueLock: false,
|
||||
data: {
|
||||
label_action: 'create',
|
||||
barcode: payload,
|
||||
warehouse_id: item.warehouse_id,
|
||||
zone: advanced ? item.zone : item.rack,
|
||||
aisle: advanced ? item.aisle : item.rack,
|
||||
rack: item.rack
|
||||
},
|
||||
onSuccess: function() {
|
||||
selected_payload = payload;
|
||||
selected_rack_index = index;
|
||||
if (!barcode_status[payload]) barcode_status[payload] = 'active';
|
||||
render_racks();
|
||||
refresh_header_buttons();
|
||||
highlight_selected_row();
|
||||
render_preview(item, payload);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function print_selected_label() {
|
||||
if (!selected_payload) {
|
||||
bootbox.alert('Select a location label first.');
|
||||
return;
|
||||
}
|
||||
ajax_request({
|
||||
url: server_url + 'ics/api/engine/location_barcode_label.php',
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
queueLock: false,
|
||||
data: { label_action: 'print', barcode: selected_payload },
|
||||
onSuccess: function() { window.print(); }
|
||||
});
|
||||
}
|
||||
|
||||
function disable_selected_label() {
|
||||
if (!selected_payload) {
|
||||
bootbox.alert('Select a location label first.');
|
||||
return;
|
||||
}
|
||||
|
||||
bootbox.confirm({
|
||||
message: 'Disable this location barcode label? It will no longer be accepted by stock scans.',
|
||||
buttons: {
|
||||
confirm: { label: 'Disable', className: 'btn-danger' },
|
||||
cancel: { label: 'Back', className: 'btn-secondary' }
|
||||
},
|
||||
callback: function(result) {
|
||||
if (!result) return;
|
||||
ajax_request({
|
||||
url: server_url + 'ics/api/engine/location_barcode_label.php',
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
queueLock: false,
|
||||
data: { label_action: 'disable', barcode: selected_payload },
|
||||
onSuccess: function() {
|
||||
barcode_status[selected_payload] = 'disabled';
|
||||
selected_payload = '';
|
||||
selected_rack_index = -1;
|
||||
$('#label_preview').html('Select a location to preview its label.');
|
||||
render_racks();
|
||||
refresh_header_buttons();
|
||||
highlight_selected_row();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function reenable_selected_label() {
|
||||
if (!selected_payload) return;
|
||||
var index = selected_rack_index;
|
||||
var item = racks[index];
|
||||
if (!item) return;
|
||||
|
||||
ajax_request({
|
||||
url: server_url + 'ics/api/engine/location_barcode_label.php',
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
queueLock: false,
|
||||
data: { label_action: 'enable', barcode: selected_payload },
|
||||
onSuccess: function() {
|
||||
barcode_status[selected_payload] = 'active';
|
||||
render_racks();
|
||||
refresh_header_buttons();
|
||||
highlight_selected_row();
|
||||
render_preview(item, selected_payload);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function enable_label_for_row(index) {
|
||||
var item = racks[index];
|
||||
if (!item) return;
|
||||
var payload = location_payload(item);
|
||||
|
||||
ajax_request({
|
||||
url: server_url + 'ics/api/engine/location_barcode_label.php',
|
||||
autoPrepare: true,
|
||||
checkRequired: 0,
|
||||
action: 'read',
|
||||
queueLock: false,
|
||||
data: { label_action: 'enable', barcode: payload },
|
||||
onSuccess: function() {
|
||||
barcode_status[payload] = 'active';
|
||||
selected_payload = payload;
|
||||
selected_rack_index = index;
|
||||
render_racks();
|
||||
refresh_header_buttons();
|
||||
highlight_selected_row();
|
||||
render_preview(item, payload);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#search_location').on('input', render_racks);
|
||||
|
||||
$(async function() {
|
||||
await load_config();
|
||||
await load_racks();
|
||||
await load_barcode_statuses();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.barcode-label { max-width: 420px; background: #fff; color: #111; }
|
||||
.table-scroll {
|
||||
max-height: calc(100vh - 320px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.table-scroll thead th {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
background: #f8f9fa !important;
|
||||
box-shadow: inset 0 -1px 0 #dee2e6;
|
||||
}
|
||||
@media print {
|
||||
body * { visibility: hidden; }
|
||||
#label_preview, #label_preview * { visibility: visible; }
|
||||
#label_preview { position: absolute; left: 0; top: 0; width: 100%; border: 0 !important; }
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user