function printTrolleyDetail()

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);
}