CMS-CSE/public-events/js/list-events.js

$(document).ready(function() {
    showDate('showDate');
    getEvements();
});

// Show QRCode

function printTuile(data){

    if(data === null){
        return '<div class="card mb-3 text-center fadeIn"><div class="card-header"><i class="bi bi-info-circle" style="font-size:2rem"></i></div><div class="card-body">Aucun évènement n\'est associé à votre profil à ce jour</div></div>';
    } else {
        var explication = null;
        var meta = null;
        var classCard = null;
        var txtFooter = null;
        var classFadeIn = getClassTuile(data["nb"]);
    
        if(data["type_emargement"] == 1){
            explication = '<p class="card-text"><div>[ QRCode à présenter à votre arrivée ]</div><br /><div><i class="bi bi-fullscreen" style="font-size:2rem"></i></div></p>';
            meta = 'data-toggle="modal" data-target="#QRCodeModal" onclick="showQRCode(this)" data-qrr-qrcode-regexp="^https?:\/\/" data-sel="' + data["url_qrcode"] + '" data-titre="' + data["titre"] + '"';
            classCard = "showQRCode";
            txtFooter = "Cliquez ici pour afficher votre QRCode";
        } else {
            explication = '<p class="card-text"><div>[ QRCode à flasher vous même ]</div><br /><div><i class="bi bi-camera-video" style="font-size:2rem"></i></div></p>';
            meta = 'data-event="' + data["md5"] + '" data-qrr-target="#QRCodeRead" ';
            classCard = "qrcodeReader";
            txtFooter = "Cliquez ici pour scanner le QRCode";
        }
    
        if(data["present"]){
            meta = "";
            explication = '<p class="card-text">Votre émargement a bien été pris en compte</p>';
            classCardText = "text-success";
            classCard = "";
            txtFooter = "Emargement réalisé le " + data["present"];
        } else {
            classCardText = "text-dark";
        }

        return '<div ' + meta + ' class="card mb-3 text-center ' + classCard + ' ' + classCardText + ' fadeIn ' + classFadeIn + '"><div class="card-header"><small>Du ' + data["startDate"] + ' au ' + data["endDate"] + '</small></div><div class="card-body"><h5 class="card-title">' + data["titre"] + '</h5>' + explication + '</div><div class="card-footer"><small>' + txtFooter + '</small></div></div>';
    }

}

function getClassTuile(nb){
    switch (nb) {
        case 0:
            return "first";
            break;
        case 1:
            return "second";
            break;
        case 2:
            return "third";
            break;
        case 3:
            return "fourth";
            break;
        default:
            return "fifth";
            break;
    }
}

function getEvements(){

    var formData = {
        jsonData: "list-events"
    }

    if (checkconnection()) {

        $.ajax({
            type: "GET",
            url: "json.php",
            data: formData,
            dataType: "json",
            encode: true,
        }).done(function (json) {
            $("#listEvent").html("");

            if(json[0] === null){
                $("#listEvent").append(printTuile(null));
            } else {
                $.each(json, function () {
                    $("#listEvent").append(printTuile(this));
                });
    
                $(".qrcodeReader").qrCodeReader();
            }
        });
    } else {
        $("#divOffline").empty();
        $("#divOffline").append('<div class="alert alert-warning" role="alert">Vous n\'êtes pas connecté à internet</div>');
        $("#divOffline").show();
    }
}

function showQRCode(element){
    var sel = $(element).data("sel");
    var titre = $(element).data("titre");

    $("#showQRCode").empty();
    $("#showQRCode").replaceWith('<div class="modal-body" id="showQRCode"><img src="qrcode.php?q=' + sel + '" width="100%" ></div>');

    $("#showTitreEvent").empty();
    $("#showTitreEvent").replaceWith('<div class="card-header" id="showTitreEvent">' + titre + '</div>');
}


// Reade QRCode

$(".qrcodeReader").on("click", function () {
    var idEvent = $(this).data("event");
    $("#form-event").val(idEvent);
});

$("#qrr-close").on("click", function () {
    $("#form-event").val("");
});

function checkEmagementSalarie(){
    var formData = {
        form: $("#emargementControlFrom").val(),
        event: $("#form-event").val(),
        qRcode: $("#QRCodeRead").val(),
    };

    if (checkconnection()) {

        $.ajax({
            type: "POST",
            url: "json.php?jsonData=check-control-emargement",
            data: formData,
            dataType: "json",
            encode: true,
        }).done(function (data) {
            $('#ResultQRCode').remove();
            $("#confirmationModal").append(getConfirmModal(data));
            $('#ResultQRCode').modal("show");
            if (data["result"] == true) {
                $('#ResultQRCode').on('hidden.bs.modal', function () {
                    getEvements();
                });
            }
        }).fail(function () {
            retour = Array;
            retour["result"] = false;
            retour["description"] = "Le QR-Code n'est pas valide";
            retour["salarie"] = null;
            retour["evenement"] = null;

            $('#ResultQRCode').remove();
            $("#confirmationModal").append(getConfirmModal(retour));
            $('#ResultQRCode').modal("show");
        });
        $("#QRCodeRead").removeAttr('value');

    } else {
        $("#divOffline").empty();
        $("#divOffline").append('<div class="alert alert-warning" role="alert">Vous n\'êtes pas connecté à internet</div>');
        $("#divOffline").show();
    }
}

$(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.");
});