ScoDoc/app/templates/assiduites/liste_assiduites.j2

{% include "assiduites/alert.j2" %}
{% include "assiduites/prompt.j2" %}
{% block app_content %}

<div class="pageContent">

    <h2>Liste de l'assiduité et des justificatifs de <span class="rouge">{{sco.etud.nomprenom}}</span></h2>

    <h3>Assiduités :</h3>
    <table id="assiduiteTable">
        <thead>
            <tr>
                <th>Début</th>
                <th>Fin</th>
                <th>État</th>
                <th>Module</th>
                <th>Justifiée</th>
            </tr>
        </thead>
        <tbody id="tableBodyAssiduites">
        </tbody>
    </table>
    <div id="paginationContainerAssiduites" class="pagination-container">
    </div>
    <h3>Justificatifs :</h3>
    <table id="justificatifTable">
        <thead>
            <tr>
                <th>Début</th>
                <th>Fin</th>
                <th>État</th>
                <th>Raison</th>
            </tr>
        </thead>
        <tbody id="tableBodyJustificatifs">
        </tbody>
    </table>
    <div id="paginationContainerJustificatifs" class="pagination-container">
    </div>
    <ul id="contextMenu" class="context-menu">
        <li id="detailOption">Detail</li>
        <li id="editOption">Editer</li>
        <li id="deleteOption">Supprimer</li>
    </ul>

</div>
{% endblock app_content %}

<style>
    .pageContent {
        width: 100%;
        max-width: 800px;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    table {
        border-collapse: collapse;

        text-align: left;
        margin: 20px 0;
    }

    th,
    td {
        border: 1px solid #dddddd;
        padding: 8px;
    }

    th {
        background-color: #f2f2f2;
    }

    tr:hover {
        filter: brightness(1.2)
    }

    .context-menu {
        display: none;
        position: absolute;
        list-style-type: none;
        padding: 10px 0;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        cursor: pointer;
    }

    .context-menu li {
        padding: 8px 16px;
    }

    .context-menu li:hover {
        background-color: #ddd;
    }

    .present {
        background-color: #9CF1AF;
    }

    .absent,
    .invalid {
        background-color: #F1A69C;
    }

    .valid {
        background-color: #8f7eff;
    }

    .retard {
        background-color: #F1D99C;
    }

    /* Ajoutez des styles pour le conteneur de pagination et les boutons */
    .pagination-container {
        display: flex;
        justify-content: center;
        margin: 20px 0;
    }

    .pagination-button {
        padding: 10px;
        border: 1px solid #ccc;
        cursor: pointer;
        background-color: #f9f9f9;
        margin: 0 5px;
        text-decoration: none;
        color: #000;
    }

    .pagination-button:hover {
        background-color: #ddd;
    }

    .pagination-button.active {
        background-color: #007bff;
        color: #fff;
        border-color: #007bff;
    }
</style>

<script>
    const etudid = {{ sco.etud.id }};
    const paginationContainerAssiduites = document.getElementById("paginationContainerAssiduites");
    const paginationContainerJustificatifs = document.getElementById("paginationContainerJustificatifs");
    const itemsPerPage = 10;
    let currentPageAssiduites = 1;
    let currentPageJustificatifs = 1;

    const tableBodyAssiduites = document.getElementById("tableBodyAssiduites");
    const tableBodyJustificatifs = document.getElementById("tableBodyJustificatifs");

    const contextMenu = document.getElementById("contextMenu");
    const editOption = document.getElementById("editOption");
    const deleteOption = document.getElementById("deleteOption");
    let selectedRow;

    document.addEventListener("click", () => {
        contextMenu.style.display = "none";
    });

    editOption.addEventListener("click", () => {
        if (selectedRow) {
            // Code pour éditer la ligne sélectionnée
            console.debug("Éditer :", selectedRow);
        }
    });

    deleteOption.addEventListener("click", () => {
        if (selectedRow) {
            // Code pour supprimer la ligne sélectionnée
            const type = selectedRow.getAttribute('type');
            const obj_id = selectedRow.getAttribute('obj_id');
            if (type == "assiduite") {
                deleteAssiduite(obj_id);

            } else {
                deleteJustificatif(obj_id);
            }
            loadAll();


        }
    });

    function renderTableAssiduites(page, assiduités) {
        tableBodyAssiduites.innerHTML = "";
        const start = (page - 1) * itemsPerPage;
        const end = start + itemsPerPage;

        assiduités.slice(start, end).forEach((assiduite) => {
            const row = document.createElement("tr");
            row.setAttribute('type', "assiduite");
            row.setAttribute('obj_id', assiduite.assiduite_id);

            const etat = assiduite.etat.toLowerCase();
            row.classList.add(etat);

            row.innerHTML = `
            <td>${new Date(assiduite.date_debut).toLocaleString()}</td>
            <td>${new Date(assiduite.date_fin).toLocaleString()}</td>
            <td>${etat}</td>
            <td>${assiduite.moduleimpl_id}</td>    <td>${assiduite.est_just ? "Oui" : "Non"
                }</td>
            `;

            row.addEventListener("contextmenu", (e) => {
                e.preventDefault();
                selectedRow = e.target.parentElement;
                contextMenu.style.top = `${e.clientY}px`;
                contextMenu.style.left = `${e.clientX}px`;
                contextMenu.style.display = "block";
                console.log(selectedRow);
            });

            tableBodyAssiduites.appendChild(row);
        });
        updateActivePaginationButton();
    }

    function renderTableJustificatifs(page, justificatifs) {
        tableBodyJustificatifs.innerHTML = "";
        const start = (page - 1) * itemsPerPage;
        const end = start + itemsPerPage;

        justificatifs.slice(start, end).forEach((justificatif) => {
            const row = document.createElement("tr");
            row.setAttribute('type', "justificatif");
            row.setAttribute('obj_id', justificatif.justif_id);

            const etat = justificatif.etat.toLowerCase();

            if (etat == "valide") {
                row.classList.add('valid');
            } else {
                row.classList.add('invalid')
            }

            row.innerHTML = `
            <td>${new Date(justificatif.date_debut).toLocaleString()}</td>
            <td>${new Date(justificatif.date_fin).toLocaleString()}</td>
            <td>${etat}</td>
            <td>${justificatif.raison}</td>
            `;

            row.addEventListener("contextmenu", (e) => {
                e.preventDefault();
                selectedRow = e.target.parentElement;
                contextMenu.style.top = `${e.clientY}px`;
                contextMenu.style.left = `${e.clientX}px`;
                contextMenu.style.display = "block";
                console.log(selectedRow);
            });

            tableBodyJustificatifs.appendChild(row);
        });
        updateActivePaginationButton(false);
    }

    function renderPaginationButtons(array, assi = true) {
        const totalPages = Math.ceil(array.length / itemsPerPage);

        if (assi) {
            paginationContainerAssiduites.innerHTML = ""
        } else {
            paginationContainerJustificatifs.innerHTML = ""
        }

        for (let i = 1; i <= totalPages; i++) {
            const paginationButton = document.createElement("a");
            paginationButton.textContent = i;
            paginationButton.classList.add("pagination-button");
            if (assi) {
                paginationButton.addEventListener("click", () => {
                    currentPageAssiduites = i;
                    renderTableAssiduites(currentPageAssiduites, array);
                });
                paginationContainerAssiduites.appendChild(paginationButton);
            } else {
                paginationButton.addEventListener("click", () => {
                    currentPageJustificatifs = i;
                    renderTableAssiduites(currentPageJustificatifs, array);
                });
                paginationContainerJustificatifs.appendChild(paginationButton);
            }
        }
        updateActivePaginationButton(assi);
    }
    function updateActivePaginationButton(assi = true) {
        if (assi) {
            const paginationButtons =
                paginationContainerAssiduites.querySelectorAll("#paginationContainerAssiduites .pagination-button");
            paginationButtons.forEach((button) => {
                if (parseInt(button.textContent) === currentPageAssiduites) {
                    button.classList.add("active");
                } else {
                    button.classList.remove("active");
                }
            });
        } else {
            const paginationButtons =
                paginationContainerJustificatifs.querySelectorAll("#paginationContainerJustificatifs .pagination-button");
            paginationButtons.forEach((button) => {
                if (parseInt(button.textContent) === currentPageJustificatifs) {
                    button.classList.add("active");
                } else {
                    button.classList.remove("active");
                }
            });
        }
    }

    function loadAll() {
        getAllAssiduitesFromEtud(etudid, (assi) => {
            renderTableAssiduites(currentPageAssiduites, assi);
            renderPaginationButtons(assi), true;
        })

        getAllJustificatifsFromEtud(etudid, (assi) => {
            renderTableJustificatifs(currentPageJustificatifs, assi);
            renderPaginationButtons(assi, false);
        })
    }

    window.onload = () => {
        loadAll();
    }

</script>