diff --git a/MaquetteWEB/html/PROF/mes-heures.html b/MaquetteWEB/html/PROF/mes-heures.html index 434f5b6..08586c5 100644 --- a/MaquetteWEB/html/PROF/mes-heures.html +++ b/MaquetteWEB/html/PROF/mes-heures.html @@ -86,15 +86,11 @@ <!-- Popup pour pièces justificatives --> <div id="justificatifForm" class="justificatif-form popup"> - <h3>Téléchargez vos pièces justificatives</h3> - <p>Veuillez télécharger le document suivant :</p> - <ul> - <li>Contrat de travail actuel</li> - </ul> - <input type="file" id="justificatif" name="justificatif" required> - <button id="submitJustificatif" onclick="submitJustificatif()">Soumettre</button> - <button onclick="closeJustificatifPopup()">Annuler</button> + <h3>Confirmation de soumission</h3> + <p>Votre demande a bien été prise en compte !</p> + <button onclick="closeJustificatifPopup()">Fermer</button> </div> + <div class="section-header"> <h2>Prochaines heures</h2> diff --git a/MaquetteWEB/html/RH/candidature.html b/MaquetteWEB/html/RH/candidature.html index 80a3e49..01d9fcb 100644 --- a/MaquetteWEB/html/RH/candidature.html +++ b/MaquetteWEB/html/RH/candidature.html @@ -79,6 +79,7 @@ <div class="categories"> <a href="./rh.html">Accueil</a> <a href="./gestion_personnel.html">Gestion du personnel</a> + <a href="./gestion-heures.html">Heures</a> <a href="./candidature.html">Candidatures</a> <a href="./mes-informations.html">Mes informations et documents</a> </div> diff --git a/MaquetteWEB/html/RH/gestion-heures.html b/MaquetteWEB/html/RH/gestion-heures.html new file mode 100644 index 0000000..3311e04 --- /dev/null +++ b/MaquetteWEB/html/RH/gestion-heures.html @@ -0,0 +1,686 @@ +<!DOCTYPE html> +<html lang="fr"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Pilotage Budgétaire</title> + <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> + <link rel="stylesheet" href="../../css/RH/style.css"> + <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> + <style> + .chart-container { + position: relative; + margin: 20px 0; + width: 100%; + max-width: 1200px; + } + + .sortable { + cursor: pointer; + } + + .arrow { + margin-left: 5px; + font-size: 0.8em; + } + + .up { + display: none; + } + + .status-correct { + color: green; + } + + .status-incorrect { + color: orange; + } + + .status-pending { + color: red; + } + + .popup2 { + display: none; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + border: 2px solid #ccc; + background-color: #fff; + padding: 20px; + z-index: 10; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); + } + + .modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0, 0, 0); /* Fallback color */ + background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ + } + + .modal-content { + background-color: #fefefe; + margin: 15% auto; /* 15% from the top and centered */ + padding: 20px; + border: 1px solid #888; + width: 80%; /* Could be more or less, depending on screen size */ + } + + .close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + } + + .close:hover, + .close:focus { + color: black; + text-decoration: none; + cursor: pointer; + } + </style> +</head> + +<body> + + <div class="header"> + <div class="logo-container"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil"> + </div> + + <div class="categories"> + <a href="./rh.html">Accueil</a> + <a href="./gestion_personnel.html">Gestion du personnel</a> + <a href="./gestion-heures.html">Heures</a> + <a href="./candidature.html">Candidatures</a> + <a href="./mes-informations.html">Mes informations et documents</a> + </div> + + <div class="user-section"> + <div class="user-name">Alice BERGER</div> + <div class="logout-container"> + <a href="../../index.html" title="Se déconnecter"> + <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion"> + </a> + </div> + </div> + </div> + + + + + <div class="container"> + + <input type="text" id="searchBar" class="search-bar" placeholder="Rechercher un professeur..." onkeyup="searchProfessor()"> + + <div class="info-card"> + <div class="section-header"> + <h2>Suivi des demandes de modification d'heures</h2> + </div> + <div class="card"> + <table class="w3-table-all" id="teaching-hours-table"> + <thead> + <tr> + <th class="sortable" onclick="sortTable(0)">Nom de l'enseignant <span class="arrow">▲</span><span class="arrow up">▼</span></th> + <th class="sortable" onclick="sortTable(1)">Période <span class="arrow">▲</span><span class="arrow up">▼</span></th> + <th class="sortable" onclick="sortTable(2)">Contrat <span class="arrow">▲</span><span class="arrow up">▼</span></th> + <th class="sortable" onclick="sortTable(3)">Type d'heure <span class="arrow">▲</span><span class="arrow up">▼</span></th> + <th class="sortable" onclick="sortTable(4)">Heures déclarées <span class="arrow">▲</span><span class="arrow up">▼</span></th> + <th class="sortable" onclick="sortTable(5)">Heures validées <span class="arrow">▲</span><span class="arrow up">▼</span></th> + <th class="sortable" onclick="sortTable(6)">Statut <span class="arrow">▲</span><span class="arrow up">▼</span></th> + <th>Action</th> + </tr> + </thead> + <tbody id="teaching-hours"> + <tr> + <td>Denis MONNERAT</td> + <td>Novembre 2024</td> + <td>CDI</td> + <td>CM</td> + <td>25</td> + <td>23</td> + <td class="status-incorrect">Correction demandée</td> + <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td> + </tr> + <tr> + <td>Maxime MENAULT</td> + <td>Décembre 2024</td> + <td>Vacation</td> + <td>TD</td> + <td>20</td> + <td>20</td> + <td class="status-correct">Validé par le chef de département</td> + <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td> + </tr> + <tr> + <td>Fréderic GERVAIS</td> + <td>Décembre 2024</td> + <td>CDI</td> + <td>TP</td> + <td>15</td> + <td>15</td> + <td class="status-correct">Validé par le chef de département</td> + <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td> + </tr> + </tbody> + </table> + </div> + + + <h2>Heures des Professeurs</h2> + <table class="info-table" id="professorTable"> + <thead> + <tr> + <th>Professeur</th> + <th>Nombre d'heures</th> + <th>Statut</th> + <th>Actions</th> + </tr> + </thead> + <tbody> + <tr> + <td>Denis MONNERAT</td> + <td>120h</td> + <td>Permanents</td> + <td> + <button class="action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button> + <button class="action-btn" onclick="openModal('Denis MONNERAT')">Modifier</button> + </td> + </tr> + <tr class="details" id="denis-details"> + <td colspan="4"> + <strong>Historique des heures :</strong> + <ul> + <li>BUT1 Groupe 1 : 30h</li> + <li>BUT2 Groupe 2 : 40h</li> + <li>BUT3 Groupe 1 : 50h</li> + </ul> + <div class="chart-container"> + <canvas id="denisChart"></canvas> + </div> + </td> + </tr> + <tr> + <td>Maxime MENAULT</td> + <td>90h</td> + <td>Vacataire</td> + <td> + <button class="action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button> + <button class="action-btn" onclick="openModal('Maxime MENAULT')">Modifier</button> + </td> + </tr> + <tr class="details" id="menault-details"> + <td colspan="4"> + <strong>Historique des heures :</strong> + <ul> + <li>BUT1 Groupe 1 : 45h</li> + <li>BUT2 Groupe 3 : 45h</li> + </ul> + <div class="chart-container"> + <canvas id="menaultChart"></canvas> + </div> + </td> + </tr> + </tbody> + </table> + </div> + + + <div id="myModal" class="modal"> + <div class="modal-content"> + <span class="close" onclick="closeModal()">×</span> + <h2>Ajouter des heures</h2> + <p id="professorName"></p> + + <label for="hours">Type de cours :</label> + <input type="text" id="hours" placeholder="Ex: CM"><br><br> + + <label for="startTime">Heure de début :</label> + <input type="time" id="startTime"><br><br> + + <label for="endTime">Heure de fin :</label> + <input type="time" id="endTime"><br><br> + + <label for="subject">Choisissez une formation :</label> + <select id="subject" name="subject"> + <option value="but1fi">BUT1 Informatique FI</option> + <option value="but2fi">BUT2 Informatique FI</option> + <option value="but2fa">BUT2 Informatique FA</option> + </select> + <br><br> + + <label for="matiere">Choisissez une matière :</label> + <select id="matiere" name="matiere"> + <option value="SCR">SCR</option> + <option value="Mathématiques">Mathématiques</option> + <option value="DEV">DEV</option> + <option value="EGOD">EGOD</option> + <option value="EC">EC</option> + <option value="BD">BD</option> + <option value="Anglais">Anglais</option> + </select> + <br><br> + + <button class="action-btn" onclick="addHours()">Ajouter</button> + </div> + </div> + + <div id="vacationModal" class="modal"> + <div class="modal-content"> + <span class="close" onclick="closeVacationModal()">×</span> + <h2 id="modal-title">Ajouter une Offre de Vacation</h2> + + <label for="offerName">Nom de l'Offre :</label> + <input type="text" id="offerName" placeholder="Ex: Cours de Maths"><br><br> + + <label for="offerDescription">Description :</label> + <textarea id="offerDescription" placeholder="Décrivez l'offre ici..." rows="3"></textarea><br><br> + + <label for="offerDate">Date :</label> + <input type="date" id="offerDate"><br><br> + + <label for="offerHours">Heures :</label> + <input type="number" id="offerHours" placeholder="Ex: 3" min="1"><br><br> + + <label>Type :</label><br> + <input type="checkbox" id="cm" name="offerType" value="CM"> + <label for="cm">CM</label><br> + + <input type="checkbox" id="td" name="offerType" value="TD"> + <label for="td">TD</label><br> + + <input type="checkbox" id="tp" name="offerType" value="TP"> + <label for="tp">TP</label><br> + + <input type="checkbox" id="suivi" name="offerType" value="Suivi"> + <label for="suivi">Suivi</label><br><br> + + <button class="action-btn" onclick="addVacationOffer()">Ajouter</button> + <button class="action-btn" id="update-btn" onclick="updateVacationOffer()" style="display:none;">Modifier</button> + </div> + </div> + + + + + <div id="confirmModal" class="modal"> + <div class="modal-content"> + <span class="close" onclick="closeConfirmModal()">×</span> + <h2>Confirmation</h2> + <p>La demande de modification d'heures a été envoyée au service RH avec succès.</p> + </div> + </div> + + <!-- Pop-up pour modifier les heures --> + <!-- Pop-up pour modifier les heures --> +<div class="popup2" id="popup-form"> + <h3>Modifier les heures</h3> + <form id="form-popup"> + <label for="validated-hours">Heures validées :</label> + <input type="number" id="validated-hours" class="w3-input" min="0" max="100" value="0"> + <br> + <label for="status">Statut :</label> + <select id="status" class="w3-select" onchange="updateButtonColor()"> + <option value="Validé" class="status-correct">Validé</option> + <option value="Correction demandée" class="status-incorrect">Correction demandée</option> + <option value="Refusé" class="status-pending">Refusé</option> + </select> + <br><br> + + <!-- Ajout du champ commentaire --> + <label for="comment">Commentaire :</label> + <textarea id="comment" class="w3-input" rows="4" placeholder="Ajouter un commentaire..."></textarea> + <br><br> + + <button type="button" class="w3-button w3-green btn-validate" onclick="validateHours()">Valider</button> + <button type="button" class="w3-button w3-red" onclick="closePopup()">Annuler</button> + </form> +</div> + + + + <div class="footer"> + <p>© 2024 IUT de Fontainebleau. Tous droits réservés | + <a href="../mentions_legales.html">Mentions légales</a> + </p> + </div> + + <script> + // Données pour le graphique principal + const categories = ['Vacataires', 'Permanents', 'Chercheurs']; + const heuresParCategorie = [90, 120, 80]; // Exemple de données + + // Fonction pour initialiser le graphique principal + function initMainChart() { + const ctx = document.getElementById('mainChart').getContext('2d'); + new Chart(ctx, { + type: 'bar', + data: { + labels: categories, + datasets: [{ + label: 'Heures des Professeurs par Catégorie', + data: heuresParCategorie, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + }); + } + + // Fonction pour initialiser le graphique d'un professeur + function initProfessorChart(professor, heures) { + const ctx = document.getElementById(professor + 'Chart').getContext('2d'); + new Chart(ctx, { + type: 'pie', + data: { + labels: ['BUT1', 'BUT2', 'BUT3'], // Exemple de matières + datasets: [{ + label: 'Répartition des heures', + data: heures, + backgroundColor: [ + 'rgba(255, 99, 132, 0.2)', + 'rgba(54, 162, 235, 0.2)', + 'rgba(255, 206, 86, 0.2)' + ], + borderColor: [ + 'rgba(255, 99, 132, 1)', + 'rgba(54, 162, 235, 1)', + 'rgba(255, 206, 86, 1)' + ], + borderWidth: 1 + }] + }, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Heures de ' + professor + } + } + } + }); + } + + function openModal(professor) { + document.getElementById('professorName').textContent = "Ajouter des heures pour " + professor; + document.getElementById('myModal').style.display = 'block'; + } + + function closeModal() { + document.getElementById('myModal').style.display = 'none'; + } + + function addHours() { + const hours = document.getElementById('hours').value; + const formation = document.getElementById('subject').value; + const matiere = document.getElementById('matiere').value; + + if (hours && formation && matiere) { + closeModal(); + openConfirmModal(); + } else { + alert("Veuillez remplir toutes les informations."); + } + } + + function openConfirmModal() { + document.getElementById('confirmModal').style.display = 'block'; + } + + function closeConfirmModal() { + document.getElementById('confirmModal').style.display = 'none'; + } + + // Fonction de recherche des professeurs + function searchProfessor() { + const input = document.getElementById("searchBar").value.toLowerCase(); + const table = document.getElementById("professorTable"); + const rows = table.getElementsByTagName("tr"); + + for (let i = 1; i < rows.length; i++) { + const cells = rows[i].getElementsByTagName("td"); + if (cells.length > 0) { + const professorName = cells[0].innerText.toLowerCase(); + if (professorName.includes(input)) { + rows[i].style.display = ""; + } else { + rows[i].style.display = "none"; + } + } + } + } + + // Toggle details and change button text + function toggleDetails(button, detailId) { + const detailsRow = document.getElementById(detailId); + if (detailsRow.style.display === "none" || detailsRow.style.display === "") { + detailsRow.style.display = "table-row"; + button.textContent = "Fermer"; // Change the button text to "Fermer" + + // Initialiser le graphique du professeur + if (button.parentElement.parentElement.cells[0].innerText === "Denis MONNERAT") { + initProfessorChart('denis', [10, 40, 70]); // Exemples d'heures + } else if (button.parentElement.parentElement.cells[0].innerText === "Maxime MENAULT") { + initProfessorChart('menault', [45, 45, 0]); // Exemples d'heures + } + } else { + detailsRow.style.display = "none"; + button.textContent = "Voir"; // Change the button text back to "Voir" + } + } + + // Initialiser le graphique principal au chargement de la page + window.onload = initMainChart; + </script> + +<script> + let currentRow; // Garde une trace de la ligne à modifier + let lastSortedColumnIndex = -1; + let lastSortDirection = 'asc'; + + // Fonction pour ouvrir la pop-up + function openPopup(button) { + currentRow = button.parentElement.parentElement; + document.getElementById("validated-hours").value = currentRow.cells[4].textContent; + document.getElementById("status").value = currentRow.cells[6].textContent; // Correction ici pour le statut + updateButtonColor(); // Mettre à jour la couleur du bouton + document.getElementById("popup-form").style.display = 'block'; + document.getElementById("overlay").style.display = 'block'; + } + + // Fonction pour fermer la pop-up + function closePopup() { + document.getElementById("popup-form").style.display = 'none'; + document.getElementById("overlay").style.display = 'none'; + } + + // Fonction pour changer la couleur du bouton en fonction du statut + function updateButtonColor() { + const status = document.getElementById("status").value; + const button = document.querySelector('.btn-validate'); + + button.classList.remove('validé', 'correction-demandée', 'refusé'); // Retirer toutes les classes + + if (status === "Validé") { + button.classList.add('validé'); + button.style.backgroundColor = 'green'; // Vert + } else if (status === "Correction demandée") { + button.classList.add('correction-demandée'); + button.style.backgroundColor = 'orange'; // Orange + } else { + button.classList.add('refusé'); + button.style.backgroundColor = 'red'; // Rouge + } + } + + // Fonction pour valider et mettre à jour les heures et le statut + function validateHours() { + let validatedHours = document.getElementById("validated-hours").value; + let status = document.getElementById("status").value; + + // Mettre à jour les valeurs dans le tableau + currentRow.cells[4].textContent = validatedHours; + currentRow.cells[6].textContent = status; // Correction ici pour le statut + + // Appliquer les couleurs du statut + if (status === "Validé") { + currentRow.cells[6].className = "status-correct"; + } else if (status === "Correction demandée") { + currentRow.cells[6].className = "status-incorrect"; + } else { + currentRow.cells[6].className = "status-pending"; + } + + // Afficher un message de confirmation + alert("Heures validées et statut mis à jour!"); + + // Fermer la pop-up + closePopup(); + } + + // Fonction pour trier le tableau + function sortTable(columnIndex) { + const table = document.getElementById("teaching-hours-table"); + const tbody = table.getElementsByTagName("tbody")[0]; + const rows = Array.from(tbody.getElementsByTagName("tr")); + + // Déterminer la direction du tri + let direction = 'asc'; + if (lastSortedColumnIndex === columnIndex) { + direction = lastSortDirection === 'asc' ? 'desc' : 'asc'; + } + lastSortedColumnIndex = columnIndex; + lastSortDirection = direction; + + // Tri des lignes + rows.sort((a, b) => { + const aText = a.cells[columnIndex].textContent.trim(); + const bText = b.cells[columnIndex].textContent.trim(); + + if (direction === 'asc') { + return aText > bText ? 1 : -1; + } else { + return aText < bText ? 1 : -1; + } + }); + + // Ajout des lignes triées au tableau + rows.forEach(row => tbody.appendChild(row)); + + // Mettre à jour les flèches + updateSortArrows(columnIndex, direction); + } + + // Fonction pour mettre à jour les flèches de tri + function updateSortArrows(columnIndex, direction) { + const headers = document.querySelectorAll("th.sortable"); + headers.forEach((header, index) => { + const arrows = header.querySelectorAll('.arrow'); + arrows[0].style.display = (index === columnIndex && direction === 'asc') ? 'inline' : 'none'; // Flèche vers le haut + arrows[1].style.display = (index === columnIndex && direction === 'desc') ? 'inline' : 'none'; // Flèche vers le bas + }); + } + + let currentVacationRow = null; + +// Ouvrir la modal pour ajouter une nouvelle offre de vacation +function openVacationModal() { + document.getElementById('vacationModal').style.display = 'block'; + document.getElementById('modal-title').textContent = "Ajouter une Offre de Vacation"; + document.getElementById('offerName').value = ''; + document.getElementById('offerDate').value = ''; + document.getElementById('offerType').value = ''; + document.getElementById('update-btn').style.display = 'none'; +} + +// Fermer la modal +function closeVacationModal() { + document.getElementById('vacationModal').style.display = 'none'; +} + +// Ajouter une nouvelle offre de vacation +function addVacationOffer() { + const offerName = document.getElementById('offerName').value; + const offerDescription = document.getElementById('offerDescription').value; + const offerDate = document.getElementById('offerDate').value; + const offerHours = document.getElementById('offerHours').value; + + const offerTypes = []; + if (document.getElementById('cm').checked) offerTypes.push('CM'); + if (document.getElementById('td').checked) offerTypes.push('TD'); + if (document.getElementById('tp').checked) offerTypes.push('TP'); + if (document.getElementById('suivi').checked) offerTypes.push('Suivi'); + + // Here you would add the logic to store or process the vacation offer. + console.log('Offer Name:', offerName); + console.log('Description:', offerDescription); + console.log('Date:', offerDate); + console.log('Hours:', offerHours); + console.log('Types:', offerTypes.join(', ')); + + // Close the modal after adding + closeVacationModal(); +} + +// Éditer une offre de vacation +function editVacationOffer(button) { + currentVacationRow = button.parentElement.parentElement; + document.getElementById('offerName').value = currentVacationRow.cells[0].textContent; + document.getElementById('offerDate').value = currentVacationRow.cells[1].textContent; + document.getElementById('offerType').value = currentVacationRow.cells[2].textContent; + + document.getElementById('modal-title').textContent = "Modifier l'Offre de Vacation"; + document.getElementById('update-btn').style.display = 'block'; + document.getElementById('vacationModal').style.display = 'block'; +} + +// Mettre à jour une offre de vacation +function updateVacationOffer() { + if (currentVacationRow) { + currentVacationRow.cells[0].textContent = document.getElementById('offerName').value; + currentVacationRow.cells[1].textContent = document.getElementById('offerDate').value; + currentVacationRow.cells[2].textContent = document.getElementById('offerType').value; + closeVacationModal(); + } +} + +// Supprimer une offre de vacation +function deleteVacationOffer(button) { + const row = button.parentElement.parentElement; + row.parentElement.removeChild(row); +} + +</script> +</body> + +</html> diff --git a/MaquetteWEB/html/RH/gestion_personnel.html b/MaquetteWEB/html/RH/gestion_personnel.html index c63a3c8..3da40b8 100644 --- a/MaquetteWEB/html/RH/gestion_personnel.html +++ b/MaquetteWEB/html/RH/gestion_personnel.html @@ -21,9 +21,27 @@ margin-right: 5px; } + .modal { + display: none; /* Caché par défaut */ + position: fixed; /* Positionnement fixe pour rester visible lors du défilement */ + z-index: 1000; /* Assurez-vous que le modal est au-dessus d'autres éléments */ + left: 0; + top: 0; + width: 100%; /* Pleine largeur */ + height: 100%; /* Pleine hauteur */ + background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */ + } + + /* Contenu du modal */ .modal-content { - max-height: 80vh; - overflow-y: auto; + background-color: white; + margin: 10% auto; /* Centrer verticalement */ + padding: 20px; + border-radius: 8px; + width: 80%; /* Largeur du modal */ + max-width: 600px; /* Largeur maximale */ + box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3); /* Ombre pour un effet flottant */ + font-family: Arial, sans-serif; } .supprimerBouton{ @@ -37,6 +55,17 @@ .modifierBouton{ background-color: #28A745; } + + ul li a { + text-decoration: none; /* Supprime le soulignement des liens */ + color: #007BFF; /* Couleur de lien bleue */ + font-weight: bold; /* Met le lien en gras */ + } + + ul li a:hover { + color: #0056b3; /* Couleur plus foncée au survol */ + text-decoration: underline; /* Ajoute le soulignement au survol */ + } </style> </head> @@ -49,6 +78,7 @@ <div class="categories"> <a href="./rh.html">Accueil</a> <a href="./gestion_personnel.html">Gestion du personnel</a> + <a href="./gestion-heures.html">Heures</a> <a href="./candidature.html">Candidatures</a> <a href="./mes-informations.html">Mes informations et documents</a> </div> @@ -85,6 +115,7 @@ <th>Nom</th> <th>Prénom</th> <th>Statut</th> + <th>Statut du paiement</th> <th>Dernière Intervention</th> <th>Actions</th> </tr> @@ -94,6 +125,7 @@ <td>Dupont</td> <td>Jean</td> <td>Professeur Vacataire</td> + <td>En attente</td> <td>01/10/2024</td> <td> <button class="modifierBouton" onclick="openModal('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Modifier</button> @@ -105,6 +137,7 @@ <td>Martin</td> <td>Sophie</td> <td>Professeur Vacataire</td> + <td>En attente</td> <td>15/09/2024</td> <td> <button class="modifierBouton" onclick="openModal('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Modifier</button> @@ -144,6 +177,7 @@ <span class="close" onclick="closeDetailModal()">×</span> <h2>Détails de Personnel</h2> <p id="detail-info"></p> + <p id="coordonnees"></p> <h3>Heures à Payer</h3> <p id="heures-a-payer"></p> <h3>Demandes de Corrections d'Heures</h3> @@ -152,12 +186,7 @@ <ul id="documents-list"></ul> <h3>Statut</h3> <p id="statut-detail"></p> - <h3>Historique des Heures</h3> - <ul id="historique-list"></ul> - <h3>Coordonnées</h3> - <p id="coordonnees"></p> <button onclick="lancerProcedurePaiement()">Lancer la Procédure de Paiement</button> - <button onclick="modifierHeures()">Modifier les Heures</button> </div> </div> @@ -207,13 +236,20 @@ } function openModal(nom, prenom, statut, intervention) { - document.getElementById("nom").value = nom; - document.getElementById("prenom").value = prenom; - document.getElementById("statut").value = statut; - document.getElementById("intervention").value = intervention; - document.getElementById("myModal").style.display = "block"; + // Mettre à jour le contenu du paragraphe "detail-info" avec des sauts de ligne + const detailInfo = ` + <strong>Nom:</strong> ${nom}<br> + <strong>Prénom:</strong> ${prenom}<br> + <strong>Statut:</strong> ${statut}<br> + <strong>Dernière Intervention:</strong> ${intervention} + `; + document.getElementById("detail-info").innerHTML = detailInfo; + + // Afficher le modal + document.getElementById("detailModal").style.display = "block"; } + function closeModal() { document.getElementById("myModal").style.display = "none"; } @@ -225,18 +261,43 @@ } } + function openModificationModal(nom, prenom, statut, intervention) { + document.getElementById("nom").value = nom; + document.getElementById("prenom").value = prenom; + document.getElementById("statut").value = statut; + document.getElementById("intervention").value = intervention; + document.getElementById("myModal").style.display = "block"; + } + function voirDetails(nom, prenom, statut, intervention) { // Remplir les détails du personnel ici document.getElementById("detail-info").textContent = `Nom: ${nom}, Prénom: ${prenom}, Statut: ${statut}, Dernière Intervention: ${intervention}`; document.getElementById("heures-a-payer").textContent = "10 heures"; // Remplacer par les vraies données - document.getElementById("corrections-list").innerHTML = "<li><a href=\"#\">Pas assez d'heures</a> : 19/10/2024</li>"; // Remplacer par les vraies données + document.getElementById("corrections-list").innerHTML = "<li><a href=\"./gestion-heures.html\">Pas assez d'heures</a> : 19/10/2024</li>"; // Remplacer par les vraies données document.getElementById("documents-list").innerHTML = "<li><a href=\"#\">Contrat de travail</a></li><li><a href=\"#\">CV</a></li><li><a href=\"#\">Diplôme</a></li><li><a href=\"#\">Justificatif d'expérience</a></li>"; // Remplacer par les vraies données document.getElementById("statut-detail").textContent = statut; - document.getElementById("historique-list").innerHTML = "<li>CM - SCR - 19/10/2024 - 12h30</li><li>TP - DEV - 19/10/2024 - 15h30</li>"; // Remplacer par les vraies données - document.getElementById("coordonnees").textContent = `${prenom}.${nom}@u-pec.fr`; + document.getElementById("coordonnees").textContent = `E-mail : ${prenom}.${nom}@u-pec.fr`; document.getElementById("detailModal").style.display = "block"; } + function voirDetails(nom, prenom, statut, intervention) { + const detailInfo = ` + <strong>Nom:</strong> ${nom}<br> + <strong>Prénom:</strong> ${prenom}<br> + <strong>Statut:</strong> ${statut}<br> + <strong>Dernière Intervention:</strong> ${intervention} + `; + document.getElementById("detail-info").innerHTML = detailInfo; + + // Afficher le modal des détails + document.getElementById("detailModal").style.display = "block"; + document.getElementById("heures-a-payer").textContent = "10 heures"; // Remplacer par les vraies données + document.getElementById("corrections-list").innerHTML = "<li><a href=\"./gestion-heures.html\">Pas assez d'heures</a> : 19/10/2024</li>"; // Remplacer par les vraies données + document.getElementById("documents-list").innerHTML = "<li><a href=\"#\">Contrat de travail</a></li><li><a href=\"#\">CV</a></li><li><a href=\"#\">Diplôme</a></li><li><a href=\"#\">Justificatif d'expérience</a></li>"; // Remplacer par les vraies données + document.getElementById("statut-detail").textContent = statut; + document.getElementById("coordonnees").innerHTML = `<strong>E-mail :</strong> : ${prenom}.${nom}@u-pec.fr`; + } + function closeDetailModal() { document.getElementById("detailModal").style.display = "none"; } diff --git a/MaquetteWEB/html/RH/mes-informations.html b/MaquetteWEB/html/RH/mes-informations.html index 6beb171..571f234 100644 --- a/MaquetteWEB/html/RH/mes-informations.html +++ b/MaquetteWEB/html/RH/mes-informations.html @@ -259,6 +259,7 @@ <div class="categories"> <a href="./rh.html">Accueil</a> <a href="./gestion_personnel.html">Gestion du personnel</a> + <a href="./gestion-heures.html">Heures</a> <a href="./candidature.html">Candidatures</a> <a href="./mes-informations.html">Mes informations et documents</a> </div> diff --git a/MaquetteWEB/html/RH/rh.html b/MaquetteWEB/html/RH/rh.html index f468967..54194c0 100644 --- a/MaquetteWEB/html/RH/rh.html +++ b/MaquetteWEB/html/RH/rh.html @@ -54,6 +54,7 @@ <div class="categories"> <a href="./rh.html">Accueil</a> <a href="./gestion_personnel.html">Gestion du personnel</a> + <a href="./gestion-heures.html">Heures</a> <a href="./candidature.html">Candidatures</a> <a href="./mes-informations.html">Mes informations et documents</a> </div>