Possibilité d'entrer le code à la main

WebContent/js/script.js

@@ -99,6 +99,8 @@ $(document).ready(function(){
     $('select').formSelect();
     // Tooltip
     $('.tooltipped').tooltip();
+    // Tabs
+    $('.tabs').tabs();
     // Modal
     M.Modal.init($('.popup'), {
         dismissible: false,

WebContent/scan/index.jsp

@@ -35,16 +35,47 @@
 
     <!-- Main -->
     <main class="container">
-        <div class="row">
-            <div class="col s12 center-align">
-                <h3 id="title">QR Code Scanner</h3>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col s12 center-align">
-                <video id="qr-preview"></video>
-            </div>
-        </div>
+    	<div class="row">
+			<div class="col s12 center-align">
+		    	<h3 id="title">QR Code Scanner</h3>
+		    </div>
+	    </div>
+    	<div class="row white z-depth-1">
+    		<div class="col s12">
+    			<ul class="tabs">
+    				<li class="tab col s6"><a href="#scan" class="active">Scanner</a></li>
+    				<li class="tab col s6"><a href="#code" class="active">Code</a></li>
+    			</ul>
+    		</div>
+    		<div id="scan" class="col s12">
+		        <div class="row">
+		            <div class="col s12 center-align">
+		                <video id="qr-preview"></video>
+		            </div>
+		        </div>
+    		</div>
+    		<div id="code" class="col s12">
+    			<div class="row">
+    				<div class="col s12">
+    					<div class="row mtop-5">
+        					<div class="input-field col s8 offset-s2 m6 offset-m3">
+          						<i class="material-icons prefix">person</i>
+          						<input id="code-input" type="text">
+          						<label for="code-input">Code</label>
+          						<span id="code-helper" class="helper-text"></span>
+       	 					</div>
+        				</div>
+        				<div class="row mbot-5">
+        					<div class="col s12 center-align">
+        						<button id="code-btn" class="waves-effect waves-light btn" disabled>
+        							<i class="material-icons left">check</i>Valider
+        						</button>
+        					</div>
+        				</div>
+    				</div>
+    			</div>
+    		</div>
+    	</div>
     </main>
 
     <!-- Popup -->
@@ -79,6 +110,30 @@
     <tag:script />
     <script type="text/javascript" src="../js/instascan.min.js"></script>
     <script type="text/javascript">
+    	function sendCode(code, espace, nom, loader, okPopup, errPopup) {
+    		loader.open();
+            const result = espace ? espace + "/" + code : code;
+            $.ajax({
+            	type: "POST",
+            	url: "${base}api/badge/" + result,
+            	error: () => {
+            		$("#error-text").html('Une erreur est survenue');
+            		loader.close();
+            		errPopup.open();
+            	},
+            	success: (result) => {
+            		loader.close();
+            		if (result.success) {
+            			$("#ok-text").html(result.data.msg.replace("#ESPACE#", nom));
+            			okPopup.open();
+            		} else {
+            			$("#error-text").html(result.data);
+            			errPopup.open();
+            		}
+            	},
+            });
+    	}
+    
     	$(document).ready(() => {
     		const okPopup = M.Modal.getInstance($('#ok-popup'));
     		const errPopup = M.Modal.getInstance($('#err-popup'));
@@ -108,30 +163,10 @@
                 },
             });
             
-            //Scanner QRcode
+            // Scanner QRcode
             const scanner = new Instascan.Scanner({ video: document.getElementById('qr-preview') });
             scanner.addListener('scan', function (content) {
-            	loader.open();
-                const result = espace ? espace + "/" + content : content;
-                $.ajax({
-                	type: "POST",
-                	url: "${base}api/badge/" + result,
-                	error: () => {
-                		$("#error-text").html('Une erreur est survenue');
-                		loader.close();
-                		errPopup.open();
-                	},
-                	success: (result) => {
-                		loader.close();
-                		if (result.success) {
-                			$("#ok-text").html(result.data.msg.replace("#ESPACE#", nom));
-                			okPopup.open();
-                		} else {
-                			$("#error-text").html(result.data);
-                			errPopup.open();
-                		}
-                	},
-                });
+            	sendCode(content, espace, nom, loader, okPopup, errPopup);
             });
             Instascan.Camera.getCameras().then(function (cameras) {
                 if (cameras.length > 0) {
@@ -142,7 +177,26 @@
                 }
             }).catch(err => {
                 console.error(err);
-            });	
+            });
+            
+            // Formulaire
+            $('#code-input').on('keyup', function() {
+            	const regex = /[A-Za-z0-9]{4}/gm;
+            	if (regex.test($(this).val()) && $(this).val().length == 4) {
+            		$(this).addClass('valid');
+            		$(this).removeClass('invalid');
+            		$("#code-btn").attr('disabled', false);
+            	} else {
+            		$(this).addClass('invalid');
+            		$(this).removeClass('valid');
+            		$("#code-helper").attr('data-error', 'Code invalide, exemple de code : Az6y');
+            		$("#code-btn").attr('disabled', true);
+            	}
+            });
+            $('#code-btn').on('click', () => {
+            	sendCode($('#code-input').val(), espace, nom, loader, okPopup, errPopup);
+            	$('#code-input').val('');
+            });
     	});
     </script>
 </body>