Fixe problème QRCode Chrome

public-events/js/control.js

@@ -34,7 +34,7 @@ function checkEmagementControl() {
             $("#confirmationModal").append(getConfirmModal(retour));
             $('#ResultQRCode').modal("show");
         });
-        $("#QRCodeRead").removeAttr('value');
+       $("#QRCodeRead").removeAttr('value');
 
     } else {
         $("#divOffline").empty();
@@ -49,10 +49,40 @@ function checkEmagementControl() {
     }
 }
 
-$("#QRCodeRead").bind("DOMSubtreeModified", function () {
-    if ($("#QRCodeRead").val() !== null && $("#QRCodeRead").val() !== '') {
-        checkEmagementControl();
+$(document).ready(function () {
+    // Sélectionnez le nœud à observer
+    const targetNode = document.getElementById("QRCodeRead");
+
+    // Vérifiez si l'élément existe avant de continuer
+    if (!targetNode) {
+        console.error("L'élément #QRCodeRead n'existe pas.");
+        return;
     }
+
+    // Options pour l'observateur (quelles mutations observer)
+    const config = { attributes: true, attributeFilter: ['value'] };
+
+    // Fonction de rappel à exécuter lorsque des mutations sont observées
+    const callback = (mutationList, observer) => {
+        mutationList.forEach(mutation => {
+            if (mutation.type === "attributes" && mutation.attributeName === "value") {
+                const value = $("#QRCodeRead").val();
+                console.log("Modification détectée : ", value);
+                if (value !== null && value !== '') {
+                    checkEmagementControl();
+                }
+            }
+        });
+    };
+
+    // Créez une instance d'observateur liée à la fonction de rappel
+    const observer = new MutationObserver(callback);
+
+    // Commencez à observer le nœud cible pour les mutations configurées
+    observer.observe(targetNode, config);
+
+    console.log("Observation des changements sur #QRCodeRead activée.");
 });
 
 
+

public-events/js/list-events.js

@@ -108,6 +108,7 @@ function showQRCode(element){
     $("#showTitreEvent").replaceWith('<div class="card-header" id="showTitreEvent">' + titre + '</div>');
 }
 
+
 // Reade QRCode
 
 $(".qrcodeReader").on("click", function () {
@@ -119,7 +120,7 @@ $("#qrr-close").on("click", function () {
     $("#form-event").val("");
 });
 
-function checkEmagementControl(){
+function checkEmagementSalarie(){
     var formData = {
         form: $("#emargementControlFrom").val(),
         event: $("#form-event").val(),
@@ -163,8 +164,37 @@ function checkEmagementControl(){
     }
 }
 
-$("#QRCodeRead").bind("DOMSubtreeModified", function () {
-    if ($("#QRCodeRead").val() !== null && $("#QRCodeRead").val() !== '') {
-        checkEmagementControl();
+$(document).ready(function () {
+    // Sélectionnez le nœud à observer
+    const targetNode = document.getElementById("QRCodeRead");
+
+    // Vérifiez si l'élément existe avant de continuer
+    if (!targetNode) {
+        console.error("L'élément #QRCodeRead n'existe pas.");
+        return;
     }
+
+    // Options pour l'observateur (quelles mutations observer)
+    const config = { attributes: true, attributeFilter: ['value'] };
+
+    // Fonction de rappel à exécuter lorsque des mutations sont observées
+    const callback = (mutationList, observer) => {
+        mutationList.forEach(mutation => {
+            if (mutation.type === "attributes" && mutation.attributeName === "value") {
+                const value = $("#QRCodeRead").val();
+                console.log("Modification détectée : ", value);
+                if (value !== null && value !== '') {
+                    checkEmagementSalarie();
+                }
+            }
+        });
+    };
+
+    // Créez une instance d'observateur liée à la fonction de rappel
+    const observer = new MutationObserver(callback);
+
+    // Commencez à observer le nœud cible pour les mutations configurées
+    observer.observe(targetNode, config);
+
+    console.log("Observation des changements sur #QRCodeRead activée.");
 });

public-events/libs/qrcode-reader/js/qrcode-reader.js

@@ -62,7 +62,7 @@
     constructor: QRCodeReader,
 
     init: function () {
-
+      console.log("Initialisation du lecteur de QRCode");
       // build the HTML 
       qrr.buildHTML();
       qrr.scriptLoaded = false;
@@ -70,13 +70,13 @@
 
       // load the script performing the actual QRCode reading
       $.getScript( $.qrCodeReader.jsQRpath, function( data, textStatus, jqxhr ) {
-        if ( jqxhr.status == 200) {
+        if (jqxhr.status == 200) {
           qrr.scriptLoaded = true;
-        } else {
-          console.error("Erreur lors du chargement du script d'analyse QRCode");
-        };
-
-      });
+          console.log("Script de lecture QRCode chargé avec succès");
+      } else {
+          console.error("Erreur lors du chargement du script de lecture QRCode");
+      }
+  });
 
     },
 
@@ -86,17 +86,17 @@
       qrr.bgOverlay = $('<div id="qrr-overlay"></div>');
       qrr.container = $('<div id="qrr-container"></div>');
       
-      qrr.closeBtn = $('<button type="button" class="fadeIn third" id="qrr-close">ANNULER</button>')
+      qrr.closeBtn = $('<span id="qrr-close">&times;</span>')
       qrr.closeBtn.appendTo(qrr.container);
 
       qrr.okBtn = $('<a id="qrr-ok">OK</a>');
             
-      qrr.loadingMessage = $('<div id="qrr-loading-message">🎥 Impossible d\'accéder au flux vidéo (veuillez vous assurer que vous avez activé une webcam et/ou que vous avez accordé les droits à votre navigateur)</div>');
+      qrr.loadingMessage = $('<div id="qrr-loading-message">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>');
       qrr.canvas = $('<canvas id="qrr-canvas" class="hidden"></canvas>');
       qrr.audio = $('<audio hidden id="qrr-beep" src="' + $.qrCodeReader.beepPath + '" type="audio/mp3"></audio>');
       
       qrr.outputDiv = $('<div id="qrr-output"></div>');
-      qrr.outputNoData = $('<div id="qrr-nodata">Aucun QRCode détecté</div>');
+      qrr.outputNoData = $('<div id="qrr-nodata">No QR code detected.</div>');
       qrr.outputData = $('<div id="qrr-output-data"></div>');
       
       qrr.outputNoData.appendTo(qrr.outputDiv);
@@ -172,6 +172,7 @@
 
       // prevent multiple opening
       if (qrr.isOpen) return;
+      console.log("Ouverture de l'interface du lecteur de QRCode");
       
       // get options for the current called element
       qrr.getOptions(this);
@@ -216,6 +217,7 @@
 
     // get the camera, show video, start searching qrcode in the stream
     start: function() {
+      console.log("Démarrage de la capture vidéo pour la lecture du QRCode");
       // Use {facingMode: environment} to attempt to get the front camera on phones
       navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
         qrr.video.srcObject = stream;
@@ -265,10 +267,11 @@
       var codeRead = false;
       var canvas = qrr.canvas[0].getContext("2d");
       
-      qrr.loadingMessage.text("⌛ Chargement de la vidéo...");
+      qrr.loadingMessage.text("⌛ Loading video...");
       qrr.canvas.off("click.qrCodeReader", qrr.startReading);
 
       if (qrr.video.readyState === qrr.video.HAVE_ENOUGH_DATA) {
+        console.log("Données vidéo suffisantes pour la lecture");
         qrr.loadingMessage.hide();
         qrr.canvas.removeClass("hidden");
 
@@ -285,6 +288,8 @@
 
         // a QRCode has been found        
         if (code && qrr.settings.qrcodeRegexp.test(code.data)) {
+          console.log("QRCode détecté : ", code.data);
+
           // draw lines around the matched QRCode
           qrr.drawBox(code.location, qrr.settings.lineColor);
           codeRead = true;
@@ -316,7 +321,7 @@
             if (qrr.settings.repeatTimeout > 0) {
               setTimeout(qrr.startReading, qrr.settings.repeatTimeout);
             } else {
-              qrr.loadingMessage.text("Cliquez sur l'image pour lire le prochain QRCode");
+              qrr.loadingMessage.text("Click on the image to read the next QRCode");
               qrr.loadingMessage.show();
             }
 
@@ -324,6 +329,8 @@
           } else {
             qrr.doneReading();
           }
+        } else {
+            console.log("Aucun QRCode détecté lors de cette itération");
         }
       }
 
@@ -334,7 +341,8 @@
     },
 
     close: function() {
-
+      console.log("Fermeture de l'interface du lecteur de QRCode");
+      
       // cancel the refresh function
       if (qrr.requestID) {
         window.cancelAnimationFrame(qrr.requestID);
@@ -380,4 +388,4 @@
       
   };
 
-}( jQuery, window, document ));
+}( jQuery, window, document ));