Add instructions; error handling + layout
This commit is contained in:
parent
ecc60460b9
commit
1737648766
@ -5,7 +5,7 @@ canvas {
|
||||
margin: 0 auto;
|
||||
}
|
||||
input[type="text"] {
|
||||
width: 100%;
|
||||
width: 95%;
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
@ -18,12 +18,15 @@ footer {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.main {
|
||||
margin-top: 4rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 4rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 85vw;
|
||||
}
|
||||
nav.main {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@media (min-width: 1280px) {
|
||||
.main {
|
||||
width: 65vw;
|
||||
|
||||
56
index.html
56
index.html
@ -9,29 +9,62 @@
|
||||
<title>Q-RIHS</title>
|
||||
</head>
|
||||
<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 -->
|
||||
<img loading="eager" src="./img/e-rihsit_logo.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>
|
||||
|
||||
<p class="text-center p-2">Inserire link e ID strumento per generare l'etichetta con il QR Code</p>
|
||||
<h1 class="text-center mt-2" style="clear: both">Tracciamento strumenti E-RIHS</h1>
|
||||
|
||||
<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>È 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="column col-lg-7 col-xl-8 col-sm-12 p-2">
|
||||
<input class="d-block" type="text" name="link" placeholder="Inserire link" />
|
||||
<input class="d-block" type="text" name="id-str" placeholder="Inserire ID strumento" />
|
||||
<div class="mt-2 column col-lg-7 col-xl-8 col-sm-12 p-2">
|
||||
<label class="text-bold">Link</label>
|
||||
<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">
|
||||
Genera etichetta
|
||||
</button>
|
||||
<div class="divider"></div>
|
||||
<button class="btn btn-primary disabled c-hand mt-2" id="download">
|
||||
<button class="btn btn-primary disabled c-hand ml-2" id="download">
|
||||
Scarica PNG
|
||||
</button>
|
||||
</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">
|
||||
Etichetta strumento
|
||||
</canvas>
|
||||
@ -39,8 +72,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<footer class="text-center text-italic p-2">
|
||||
Powered by NicoPa
|
||||
<footer class="container text-center text-italic p-2">
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
|
||||
43
js/index.js
43
js/index.js
@ -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', () => {
|
||||
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;
|
||||
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');
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.clearRect(0,0,canvas.width, canvas.height);
|
||||
|
||||
const txtColor = "#000";
|
||||
const qrWidth = 220;
|
||||
const qrSize = 220;
|
||||
const leftMargin = 12;
|
||||
|
||||
ctx.fillStyle = txtColor;
|
||||
@ -26,18 +57,18 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
let qr = new QRious({element: qrImg});
|
||||
|
||||
qr.set({
|
||||
size: 200,
|
||||
size: qrSize,
|
||||
value: link
|
||||
})
|
||||
|
||||
// Draw images
|
||||
ispcLogo.onload = () => {
|
||||
ctx.drawImage(ispcLogo, leftMargin, 10, 200, 75)
|
||||
ctx.drawImage(ispcLogo, leftMargin + 4, 10, 210, 79)
|
||||
}
|
||||
|
||||
qrImg.src = qr.toDataURL();
|
||||
qrImg.onload = () => {
|
||||
ctx.drawImage(qrImg, leftMargin, 90, qrWidth, qrWidth)
|
||||
ctx.drawImage(qrImg, leftMargin, 90, qrSize, qrSize)
|
||||
}
|
||||
// Draw instrument ID as text
|
||||
ctx.font = '48px sans-serif';
|
||||
@ -46,7 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
ctx.fillText(idInstr, txtLeftDist, 352);
|
||||
|
||||
erihsLogo.onload = () => {
|
||||
ctx.drawImage(erihsLogo, 20, 370, 210, 41)
|
||||
ctx.drawImage(erihsLogo, 12, 370, 220, 43)
|
||||
}
|
||||
download.classList.remove('disabled');
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user