in use-cases/order-picking/src/main/resources/META-INF/resources/app.js [228:297]
function printTrolleyDetail(detailContainer, trolley, trolleySteps, unAssignedItemsByOrder, trolleysByOrder) {
const orderVolumes = new Map();
for (const trolleyStep of trolleySteps) {
const orderItem = trolleyStep.orderItem;
let orderVolume = orderVolumes.get(orderItem.orderId);
if (orderVolume === undefined) {
orderVolume = orderItem.product.volume;
} else {
orderVolume = orderVolume + orderItem.product.volume;
}
orderVolumes.set(orderItem.orderId, orderVolume);
}
const sortedEntries = Array.from(orderVolumes.entries());
sortedEntries.sort((e1, e2) => e2[1] - e1[1]);
const bucketWidth = 50;
const trolleyBucketsContainer = $('<div class="row">').appendTo(detailContainer);
const bucketsDiv = $('<div style="padding-left: 15px; padding-top: 15px;">').appendTo(trolleyBucketsContainer);
const bucketsTable = $('<table>').appendTo(bucketsDiv);
let bucketsRow;
let bucketTd;
let bucketTdNumber = 0;
let availableBuckets = trolley.bucketCount;
let orderCount = 0;
const ordersDetail = [];
for (const entry of sortedEntries) {
const orderNumber = entry[0];
const orderTotalVolume = entry[1];
const orderRequiredBuckets = Math.ceil(orderTotalVolume / trolley.bucketCapacity);
const bucketColor = orderColor(orderNumber);
ordersDetail.push([orderNumber, bucketColor, orderTotalVolume, orderRequiredBuckets]);
for (let orderBucket = 1; orderBucket <= orderRequiredBuckets; orderBucket++) {
if (bucketTdNumber % 2 === 0) {
bucketsRow = $('<tr>').appendTo(bucketsTable);
}
bucketTdNumber++;
let bucketDivWidth = bucketWidth;
let bucketOccupancyPercent = 100;
if (orderBucket === orderRequiredBuckets) {
const lastBucketVolume = orderTotalVolume - ((orderBucket - 1) * trolley.bucketCapacity);
bucketDivWidth = (bucketDivWidth / trolley.bucketCapacity) * lastBucketVolume;
bucketOccupancyPercent = Math.ceil((100 * bucketDivWidth) / bucketWidth);
}
bucketTd = $(`<td style="border: 1px solid; border-color: black; padding: 1px; width:${bucketWidth};" title="${bucketOccupancyPercent}% of the bucket reserved for order #${orderNumber}">`).appendTo(bucketsRow);
$(`<div style="background-color: ${bucketColor}; width:${bucketDivWidth}px; height:${bucketWidth}px;"></div>`).appendTo(bucketTd);
availableBuckets--;
}
}
if (availableBuckets > 0) {
for (let i = 0; i < availableBuckets; i++) {
if (bucketTdNumber % 2 === 0) {
bucketsRow = $('<tr>').appendTo(bucketsTable);
}
bucketTdNumber++;
bucketTd = $(`<td style="border: 1px solid; border-color: black; padding: 1px; width:${bucketWidth};" title="Free bucket">`).appendTo(bucketsRow);
$(`<div style="width:${bucketWidth}px; height:${bucketWidth}px;"></div>`).appendTo(bucketTd);
}
} else if (availableBuckets < 0) {
$(`<div><strong>Over constrained problem!! with the configured number of trolleys and buckets it's not possible to complete the orders, please check the configuration parameters.</strong></div>`).appendTo(bucketsDiv);
}
const trolleyOrdersDetailContainer = $('<div class="row" style="padding-left: 15px; padding-top: 15px; padding-right: 15px;">').appendTo(detailContainer);
printTrolleyOrdersDetail(trolleyOrdersDetailContainer, trolley, ordersDetail);
const trolleyOrdersSplitDetailContainer = $('<div class="row" style="padding-left: 15px; padding-top: 15px; padding-right: 15px;">').appendTo(detailContainer);
printTrolleyOrdersSplitDetail(trolleyOrdersSplitDetailContainer, trolley, ordersDetail, unAssignedItemsByOrder, trolleysByOrder);
}