97 lines
2.8 KiB
JavaScript
97 lines
2.8 KiB
JavaScript
/**
|
|
* @param {string} link
|
|
* @param {string} idInstr
|
|
* @returns {object}
|
|
*/
|
|
function validate(link, idInstr) {
|
|
const pattern = /[A-Z0-9]{3}_[0-9]{2}/;
|
|
|
|
return {
|
|
linkError : link !== '',
|
|
idInstrError : pattern.test(idInstr)
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const download = document.querySelector('#download');
|
|
|
|
document.querySelector('#gen').addEventListener('click', () => {
|
|
const errors = document.querySelectorAll(".toast-error");
|
|
|
|
for (let error of errors) {
|
|
error.className = 'text-center toast toast-error d-hide';
|
|
}
|
|
|
|
let link = document.querySelector('input[name="link"]').value;
|
|
const idInput = document.querySelector('input[name="id-str"]');
|
|
const idInstr = idInput.value;
|
|
|
|
if (!validate(link, idInstr).linkError) {
|
|
errors[0].classList.remove('d-hide');
|
|
return;
|
|
}
|
|
|
|
if (!validate(link, idInstr).idInstrError) {
|
|
errors[1].classList.remove('d-hide');
|
|
return;
|
|
}
|
|
|
|
let canvas = document.querySelector('canvas');
|
|
const ctx = canvas.getContext('2d');
|
|
ctx.clearRect(0,0,canvas.width, canvas.height);
|
|
|
|
const txtColor = "#000";
|
|
const qrSize = 225;
|
|
const leftMargin = 12;
|
|
|
|
ctx.fillStyle = txtColor;
|
|
|
|
// Prepare img elements
|
|
const qrImg = new Image();
|
|
const ispcLogo = new Image();
|
|
const erihsLogo = new Image();
|
|
|
|
ispcLogo.src = "./img/logo_ispc.png";
|
|
erihsLogo.src = "./img/e-rihsit_logo.png";
|
|
|
|
let qr = new QRious({element: qrImg});
|
|
|
|
qr.set({
|
|
size: qrSize,
|
|
value: link
|
|
})
|
|
|
|
// Draw images
|
|
ispcLogo.onload = () => {
|
|
ctx.drawImage(ispcLogo, leftMargin + 4, 10, 210, 79)
|
|
}
|
|
|
|
qrImg.src = qr.toDataURL();
|
|
qrImg.onload = () => {
|
|
ctx.drawImage(qrImg, leftMargin, 90, qrSize, qrSize)
|
|
}
|
|
// Draw instrument ID as text
|
|
ctx.font = '48px sans-serif';
|
|
const txtWidth = Math.round(ctx.measureText(idInstr).width);
|
|
const txtLeftDist = (220 - txtWidth) / 2 + leftMargin;
|
|
ctx.fillText(idInstr, txtLeftDist, 352);
|
|
|
|
erihsLogo.onload = () => {
|
|
ctx.drawImage(erihsLogo, 12, 370, 220, 43)
|
|
}
|
|
download.classList.remove('disabled');
|
|
});
|
|
|
|
download.addEventListener('click', () => {
|
|
let downloadLink = document.createElement('a');
|
|
downloadLink.setAttribute('download', 'etichetta.png');
|
|
let canvas = document.querySelector('canvas');
|
|
|
|
canvas.toBlob(function(blob) {
|
|
let url = URL.createObjectURL(blob);
|
|
downloadLink.setAttribute('href', url);
|
|
downloadLink.click();
|
|
});
|
|
});
|
|
});
|