Change 'Rack' to 'Bin'

This commit is contained in:
Thanakorn S
2026-05-27 17:14:53 +07:00
parent b8798bc02d
commit 8f57ab5570
41 changed files with 931 additions and 933 deletions
+43 -43
View File
@@ -18,7 +18,7 @@
<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>
<p class="mb-0 text-muted">Print or reprint labels from the bin master list.</p>
</div>
<div class="d-flex gap-2">
<button id="btn_print" class="btn btn-outline-success" data-min-role="staff" onclick="print_selected_label()" disabled>
@@ -39,7 +39,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...">
placeholder="Search warehouse, zone, aisle, bin, or SKU...">
<span class="position-absolute top-25 ms-4">
<i class="ti ti-search text-muted"></i>
</span>
@@ -51,13 +51,13 @@
<th>Warehouse</th>
<th class="th-zone">Zone</th>
<th class="th-aisle">Aisle</th>
<th id="th-rack">Rack</th>
<th id="th-bin">Bin</th>
<th>Status</th>
<th>Label Status</th>
<th class="text-end">Action</th>
</tr>
</thead>
<tbody id="rack_tbody">
<tbody id="bin_tbody">
<tr><td colspan="7" class="text-center text-muted py-4">Loading locations...</td></tr>
</tbody>
</table>
@@ -79,13 +79,13 @@
<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_bin = 'Location';
var label_zone = 'Zone';
var label_aisle = 'Aisle';
var racks = [];
var bins = [];
var barcode_status = {};
var selected_payload = '';
var selected_rack_index = -1;
var selected_bin_index = -1;
function escape_html(value) {
return String(value ?? '').replace(/[&<>"']/g, function(char) {
@@ -103,9 +103,9 @@
}
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');
$('#bin_tbody tr').removeClass('table-active');
if (selected_bin_index >= 0) {
$('#bin_tbody tr[data-bin-index="' + selected_bin_index + '"]').addClass('table-active');
}
}
@@ -119,26 +119,26 @@
onSuccess: function(res) {
var s = res.output || {};
advanced = s.advanced_location == 1;
label_rack = s.location_label_rack || (advanced ? 'Rack' : 'Location');
label_bin = s.location_label_bin || (advanced ? 'Bin' : '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);
$('#th-bin').text(label_bin);
}
});
}
function load_racks() {
function load_bins() {
return ajax_request({
url: server_url + 'reports/api/engine_report/rack_occupancy.php',
url: server_url + 'reports/api/engine_report/bin_occupancy.php',
autoPrepare: true,
checkRequired: 0,
action: 'read',
queueLock: false,
onSuccess: function(res) {
racks = res.output || [];
render_racks();
bins = res.output || [];
render_bins();
highlight_selected_row();
}
});
@@ -157,26 +157,26 @@
(res.output || []).forEach(function(item) {
barcode_status[item.barcode] = parseInt(item.status) === 1 ? 'active' : 'disabled';
});
render_racks();
render_bins();
}
});
}
function location_payload(item) {
return advanced
? `LOC|${item.warehouse_id}|${item.zone}|${item.aisle}|${item.rack}`
: `LOC|${item.warehouse_id}|${item.rack}`;
? `LOC|${item.warehouse_id}|${item.zone}|${item.aisle}|${item.bin}`
: `LOC|${item.warehouse_id}|${item.bin}`;
}
function render_racks() {
function render_bins() {
var keyword = $('#search_location').val().toLowerCase();
var rows = racks.filter(function(item) {
var rows = bins.filter(function(item) {
if (!keyword) return true;
return [
item.warehouse_name,
item.zone,
item.aisle,
item.rack,
item.bin,
item.product_sku,
item.product_name,
item.status
@@ -184,13 +184,13 @@
});
if (!rows.length) {
$('#rack_tbody').html('<tr><td colspan="7" class="text-center text-muted py-4">No locations found.</td></tr>');
$('#bin_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 idx = bins.indexOf(item);
var status = item.status === 'occupied'
? '<span class="badge bg-warning text-dark">Occupied</span>'
: '<span class="badge bg-success">Empty</span>';
@@ -202,11 +202,11 @@
if (barcode_status[payload] === 'disabled') {
labelStatus = '<span class="badge bg-danger">Disabled</span>';
}
body += `<tr data-rack-index="${idx}">
body += `<tr data-bin-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>${escape_html(item.bin)}</td>
<td>${status}</td>
<td>${labelStatus}</td>
<td class="text-end">
@@ -216,7 +216,7 @@
</td>
</tr>`;
});
$('#rack_tbody').html(body);
$('#bin_tbody').html(body);
}
function render_preview(item, payload) {
@@ -224,8 +224,8 @@
<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>
? `${escape_html(item.zone)} / ${escape_html(item.aisle)} / ${escape_html(item.bin)}`
: escape_html(item.bin)}</div>
<svg id="barcode_svg"></svg>
<div class="small text-muted">${escape_html(payload)}</div>
</div>`);
@@ -233,7 +233,7 @@
}
function preview_label(index) {
var item = racks[index];
var item = bins[index];
if (!item) return;
var payload = location_payload(item);
@@ -249,13 +249,13 @@
warehouse_id: item.warehouse_id,
zone: item.zone || '',
aisle: item.aisle || '',
rack: item.rack
bin: item.bin
},
onSuccess: function() {
selected_payload = payload;
selected_rack_index = index;
selected_bin_index = index;
if (!barcode_status[payload]) barcode_status[payload] = 'active';
render_racks();
render_bins();
refresh_header_buttons();
highlight_selected_row();
render_preview(item, payload);
@@ -303,9 +303,9 @@
onSuccess: function() {
barcode_status[selected_payload] = 'disabled';
selected_payload = '';
selected_rack_index = -1;
selected_bin_index = -1;
$('#label_preview').html('Select a location to preview its label.');
render_racks();
render_bins();
refresh_header_buttons();
highlight_selected_row();
}
@@ -316,8 +316,8 @@
function reenable_selected_label() {
if (!selected_payload) return;
var index = selected_rack_index;
var item = racks[index];
var index = selected_bin_index;
var item = bins[index];
if (!item) return;
ajax_request({
@@ -329,7 +329,7 @@
data: { label_action: 'enable', barcode: selected_payload },
onSuccess: function() {
barcode_status[selected_payload] = 'active';
render_racks();
render_bins();
refresh_header_buttons();
highlight_selected_row();
render_preview(item, selected_payload);
@@ -338,7 +338,7 @@
}
function enable_label_for_row(index) {
var item = racks[index];
var item = bins[index];
if (!item) return;
var payload = location_payload(item);
@@ -352,8 +352,8 @@
onSuccess: function() {
barcode_status[payload] = 'active';
selected_payload = payload;
selected_rack_index = index;
render_racks();
selected_bin_index = index;
render_bins();
refresh_header_buttons();
highlight_selected_row();
render_preview(item, payload);
@@ -361,11 +361,11 @@
});
}
$('#search_location').on('input', render_racks);
$('#search_location').on('input', render_bins);
$(async function() {
await load_config();
await load_racks();
await load_bins();
await load_barcode_statuses();
});
</script>