nicolo/qrihs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add instructions; error handling + layout

Browse Source
This commit is contained in:
Nicolò P 2023-08-30 12:06:16 +02:00
parent ecc60460b9
commit 1737648766
3 changed files with 86 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/qrihs.css
View File

@ -5,7 +5,7 @@ canvas {
margin: 0 auto; margin: 0 auto;
} }
input[type="text"] { input[type="text"] {
width: 100%; width: 95%;
border-top: none; border-top: none;
border-left: none; border-left: none;
border-right: none; border-right: none;
@ -18,12 +18,15 @@ footer {
margin-top: 3rem; margin-top: 3rem;
} }
.main { .main {
margin-top: 4rem; margin-top: 2rem;
margin-bottom: 4rem; margin-bottom: 4rem;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 85vw; width: 85vw;
} }
nav.main {
margin-bottom: 0;
}
@media (min-width: 1280px) { @media (min-width: 1280px) {
.main { .main {
width: 65vw; width: 65vw;

56
index.html
View File

@ -9,29 +9,62 @@
<title>Q-RIHS</title> <title>Q-RIHS</title>
</head> </head>
<body> <body>
<nav class="main">
<a href="http://www.e-rihs.it/" class="nav-item d-inline-block float-left">
<img loading="eager" class="img-fit-contain" src="./img/e-rihsit_logo.png" />
</a>
<a href="https://www.ispc.cnr.it" class="nav-item d-inline-block float-right">
<img loading="eager" class="img-fit-contain" src="./img/logo_ispc.png" height="41"/>
</a>
</nav>
<!-- Preload logos for canvas --> <!-- Preload logos for canvas -->
<img loading="eager" src="./img/e-rihsit_logo.png" class="d-hide" /> <img loading="eager" src="./img/e-rihsit_logo.png" class="d-hide" />
<img loading="eager" src="./img/logo_ispc.png" class="d-hide" /> <img loading="eager" src="./img/logo_ispc.png" class="d-hide" />
<h1 class="text-center">Q-RIHS</h1>
<h2 class="text-center">Tracciamento strumenti E-RIHS</h2> <h1 class="text-center mt-2" style="clear: both">Tracciamento strumenti E-RIHS</h1>
<p class="text-center p-2">Inserire link e ID strumento per generare l'etichetta con il QR Code</p>
<div class="container main"> <div class="container main">
<h2 class="text-center">Modalità d'uso</h2>
<p class="pt-2">
Riportare nel campo <strong>"Link"</strong> il link alla scheda mirror che l'operatore sul campo può visualizzare in caso di necessità.<br>
<u>&Egrave; importante che il link sia alla scheda mirror</u> e non a quella editabile dal responsabile dello strumento, per evitare che
i dati possano essere erroneamente modificati sul campo.
<p class="pt-0">
Per creare il link alla scheda mirror da OneDrive, cliccare con il tasto destro sulla scheda, premere "condividi" nella rotella impostazioni
selezionare "Personale CNR", Applica e poi cliccare "copia collegamento"
</p>
<p class="pt-2">
Riportare nel campo <strong>"Codice oggetto"</strong> il codice dell'oggetto sul quale va applicata l'etichetta come da colonna A della scheda Excel.<br>
Si consiglia di creare un codice della forma <code>AAA_00</code>, per es. <code>IRT_01</code>, composto dai seguenti campi:
<ul>
<li>
<code>AAA</code>: codice di 3 lettere - in maiuscolo - che identifica lo strumento e la sua scheda
</li>
<li>
<code>00</code>: numerazione progressiva del singolo oggetto da catalogare all'interno dello
strumento (può essere il <em>case</em> generale in cui viene trasportato, l'oggetto stesso, i suoi supporti, un faldone in cui
è contenuta la documentazione). L'idea è di catalogare tutti gli oggetti che compongono lo strumento.
</li>
</ul>
</p>
<p class="text-center toast toast-error d-hide" id="error-link">Il link alla scheda è obbligatorio</p>
<p class="text-center toast toast-error d-hide" id="error-code">Codice oggetto non valido, deve essere della forma AAA_00</p>
<div class="columns mt-2"> <div class="columns mt-2">
<div class="column col-lg-7 col-xl-8 col-sm-12 p-2"> <div class="mt-2 column col-lg-7 col-xl-8 col-sm-12 p-2">
<input class="d-block" type="text" name="link" placeholder="Inserire link" /> <label class="text-bold">Link</label>
<input class="d-block" type="text" name="id-str" placeholder="Inserire ID strumento" /> <input class="d-block form-input" type="text" name="link" placeholder="Inserire link a scheda mirror" required />
<label class="text-bold">Codice oggetto</label>
<input class="d-block form-input" type="text" name="id-str" placeholder="Inserire codice oggetto (della forma AAA_00)"
maxlength="6" pattern="[A-Z]{3}_[0-9]{2}" required />
<button class="btn btn-primary c-hand" id="gen"> <button class="btn btn-primary c-hand" id="gen">
Genera etichetta Genera etichetta
</button> </button>
<div class="divider"></div> <button class="btn btn-primary disabled c-hand ml-2" id="download">
<button class="btn btn-primary disabled c-hand mt-2" id="download">
Scarica PNG Scarica PNG
</button> </button>
</div> </div>
<div class="column col-lg-5 col-xl-4 col-sm-12 text-center" style="border: #ccc 1px solid;"> <div class="mt-2 column col-lg-5 col-xl-4 col-sm-12 text-center" style="border: #ccc 1px solid;">
<canvas id="qrcode" width="244" height="420"> <canvas id="qrcode" width="244" height="420">
Etichetta strumento Etichetta strumento
</canvas> </canvas>
@ -39,8 +72,7 @@
</div> </div>
</div> </div>
</div> </div>
<footer class="text-center text-italic p-2"> <footer class="container text-center text-italic p-2">
Powered by NicoPa
</footer> </footer>
</body> </body>

43
js/index.js
View File

@ -1,16 +1,47 @@
/**
* @param {string} link
* @param {string} idInstr
* @returns {object}
*/
function validate(link, idInstr) {
const pattern = /[A-Z]{3}_[0-9]{2}/;
return {
linkError : link !== '',
idInstrError : pattern.test(idInstr)
}
}
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
const download = document.querySelector('#download'); const download = document.querySelector('#download');
document.querySelector('#gen').addEventListener('click', () => { 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; let link = document.querySelector('input[name="link"]').value;
let idInstr =document.querySelector('input[name="id-str"]').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'); let canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width, canvas.height); ctx.clearRect(0,0,canvas.width, canvas.height);
const txtColor = "#000"; const txtColor = "#000";
const qrWidth = 220; const qrSize = 220;
const leftMargin = 12; const leftMargin = 12;
ctx.fillStyle = txtColor; ctx.fillStyle = txtColor;
@ -26,18 +57,18 @@ document.addEventListener('DOMContentLoaded', () => {
let qr = new QRious({element: qrImg}); let qr = new QRious({element: qrImg});
qr.set({ qr.set({
size: 200, size: qrSize,
value: link value: link
}) })
// Draw images // Draw images
ispcLogo.onload = () => { ispcLogo.onload = () => {
ctx.drawImage(ispcLogo, leftMargin, 10, 200, 75) ctx.drawImage(ispcLogo, leftMargin + 4, 10, 210, 79)
} }
qrImg.src = qr.toDataURL(); qrImg.src = qr.toDataURL();
qrImg.onload = () => { qrImg.onload = () => {
ctx.drawImage(qrImg, leftMargin, 90, qrWidth, qrWidth) ctx.drawImage(qrImg, leftMargin, 90, qrSize, qrSize)
} }
// Draw instrument ID as text // Draw instrument ID as text
ctx.font = '48px sans-serif'; ctx.font = '48px sans-serif';
@ -46,7 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
ctx.fillText(idInstr, txtLeftDist, 352); ctx.fillText(idInstr, txtLeftDist, 352);
erihsLogo.onload = () => { erihsLogo.onload = () => {
ctx.drawImage(erihsLogo, 20, 370, 210, 41) ctx.drawImage(erihsLogo, 12, 370, 220, 43)
} }
download.classList.remove('disabled'); download.classList.remove('disabled');
}); });