Scribd
Upload
35 views4 pages

Printbackup

This document describes a PrintService class that generates end run paperwork for assembly parts carriers. The class contains methods to print end run box sheets and cover sheets, which include item lists, barcode images, and other identifying information formatted as HTML.

Uploaded by

ammukutty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
35 views4 pages

Printbackup

This document describes a PrintService class that generates end run paperwork for assembly parts carriers. The class contains methods to print end run box sheets and cover sheets, which include item lists, barcode images, and other identifying information formatted as HTML.

Uploaded by

ammukutty
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

/**

* Holds actual implementation of service APIs needed specifically to support


Assembly Parts Carrier - End Run functionality.
*/
export class PrintService {
/**
* Build the box with the given items for the End Run process
* End Run coversheet should have model, date, rfid tag and barcode for rfid
tag.
* Then we should have boxsheets (3 copies to start; in end will drop down to
1). The boxsheet should
* have the rfid tag, list of items and quantity in the box as well as the
line, order, model, run qty and userName.
*/
printEndRunPaperwork(containerTagId, numCopies, boxItems, userName) {
let boxHtml = '';
for (let i = 0; i < numCopies; i++) {
boxHtml += this.#generateEndRunBoxSheetHtml(boxItems, userName);
}

const model = boxItems[0].model;


const coverSheetHtml = this.#generateEndRunCoverSheetHtml(model,
containerTagId);

// Merge two html content and have it in two different page to print.
const htmlContent = '<html><body>' + coverSheetHtml + boxHtml +
'</html></body>';
console.log(htmlContent);
return htmlContent;
}

#generateEndRunBoxSheetHtml(boxItems, userName) {
const sortedItems = boxItems.sort((a, b) => {
// TODO: confirm logic with business - copied from HJ4MFG
if (a.itemNumber.Length < b.itemNumber.Length) return -1;
else if (a.itemNumber.Length > b.itemNumber.Length) return 1;
else {
if (a.itemNumber < b.itemNumber) return -1;
else if (a.itemNumber > b.itemNumber) return 1;
else return 0;
}
});

const now = new Date();


const dateTimeStr = [
String(now.getMonth() + 1).padStart(2, '0'),
String(now.getDate()).padStart(2, '0'),
String(now.getFullYear())
].join('/') + ' ' + now.toLocaleTimeString('en-US');

let html = `
<div style='display:block; margin:15px; clear:both; page-break-after:always'>
<div style='width:100%; text-align:center;'>
<span style='margin-top: 0.67em; margin-bottom: 0.67em; font-weight: bold;
float:right'>${dateTimeStr} ${boxItems.length} Parts</span>
<br>
<span style='font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em;
font-weight: bold'>Rack Location : ________________</span>
<br><br>
<span style='font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em;
font-weight: bold'>BOX-SHEET</span>
</div>
<table style='width: 100%; border-collapse: collapse; margin-bottom: 10px;
margin-top: 10px; border: 1px solid black'>
<tr>
<th style='text-align: center; padding:3px; border: 1px solid black;
font-weight: bold'>Line</th>
<th style='text-align: center; padding:3px; border: 1px solid black;
font-weight: bold'>Order Number</th>
<th style='text-align: center; padding:3px; border: 1px solid black;
font-weight: bold'>Model Number</th>
<th style='text-align: center; padding:3px; border: 1px solid black;
font-weight: bold'>Run Qty</th>
<th style='text-align: center; padding:3px; border: 1px solid black;
font-weight: bold'>Submitted By</th>
</tr>
<tr>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{boxItems[0].line}</td>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{boxItems[0].orderNumber}</td>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{boxItems[0].model}</td>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{boxItems[0].orderQty}</td>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{userName}</td>
</tr>
</table>
<br></br>Parent Tag - <span style='font-size: 1em; margin-top: 0.67em; margin-
bottom: 0.67em'>${boxItems[0].containerTagId}</span>
<table style='table-layout: fixed;width: 100%; border-collapse: collapse;
margin-bottom: 10px; margin-top: 10px; border: 1px solid black'>
<tr>
<th style='text-align: center; width:50px; padding:3px; border: 1px
solid black;font-weight: bold'>#</th>
<th style='text-align: center; padding:3px; border: 1px solid
black;font-weight: bold'>Quantity</th>
<th style='text-align: center; padding:3px; border: 1px solid
black;font-weight: bold'>Part Number</th>
<th style='text-align: center; padding:3px; border: 1px solid
black;font-weight: bold'>Description</th>
</tr>`;

for (let i = 0; i < sortedItems.length; i++) {


html += `
<tr>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{i + 1}</td>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{sortedItems[i].quantity}</td>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{sortedItems[i].itemNumber}</td>
<td style='text-align: center; padding:3px; border: 1px solid black'>$
{sortedItems[i].itemDesc}</td>
</tr>`;
}
html += `
</table>
</div>`;
return html;
}

#generateEndRunCoverSheetHtml(model, containerTagId) {
let fontSize = '265px';
// if (model.length >= 8) fontSize = '250px';
// else if (model.length >= 9) fontSize = '220px';
// else if (model.length >= 10) fontSize = '200px';
// else if (model.length >= 12) fontSize = '170px';
// else if (model.length >= 14) fontSize = '150px';

const now = new Date();


const dateStr = [
String(now.getMonth() + 1).padStart(2, '0'),
String(now.getDate()).padStart(2, '0'),
String(now.getFullYear())
].join('/');

const barCodeModel = this.#generateBarcode(model, 246, 60);


// TODO: For some reason - this does not generate correctly - need to
investigate WHY???
const barCodeTagId = this.#generateBarcode(containerTagId, 450, 60);

// build paperwork as html which can then be printed


const html = `
<div style='display:block; margin:15px; clear:both; page-break-after:always'>
<div style='text-align:center; vertical-align: middle; transform:
rotateZ(90deg);'>
<br>
<span style='text-align: center; margin-top: 0.67em; margin-bottom: 0.67em;
font-weight: bold;font-size:${fontSize}; white-space:nowrap'>${'B2587-71'}</span>
<br>

<img src="${this.textToBase64BarcodeCustom('B2587-71', 50, 2)}" alt="$


{'B2587-71'}">
<br>
<span style='font-size: 1em; margin-top: 0.67em; margin-bottom: 0.67em;
font-weight: bold'>${'B2587-71'}</span>
<br>
<span style='text-align: center;font-size: 1em; margin-top: 0.67em; margin-
bottom: 0.67em; font-weight: bold;font-size:185px'>${dateStr}</span>
<br>
<img ${barCodeTagId}></img>
<br>
<span style='font-size: 1em; margin-top: 0.67em; margin-bottom: 0.67em;
font-weight: bold'>${containerTagId}</span>
<br>
</div>
</div>`;
return html;
}

textToBase64BarcodeCustom(barcodeValue, height, width, displayValue = true) {


var canvas = document.createElement('canvas');
JsBarcode(canvas, barcodeValue, {
format: 'CODE128',
displayValue,
margin: 0,
padding: 0,
height,
width,
fontOptions: 'bold',
font: 'Helvetica',
textMargin: 10
});
return canvas.toDataURL('image/png');
}

#generateBarcode(text, wid, hgt) {


var canvas = document.createElement('canvas');
JsBarcode(canvas, text, {
format: 'CODE128',
displayValue: false,
height: hgt,
width: wid
});
return `width="${wid}" height="${hgt}"
src="${canvas.toDataURL('image/png')}"`;
}
}

You might also like