2024-10-16 18:19:14 +02:00
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link rel = "stylesheet" href = "../../css/RH/style.css" >
< link rel = "stylesheet" href = "../../css/RH/rh.css" >
< title > Gestion du Personnel< / title >
< style >
/* Ajout de styles pour la barre de recherche et le tri */
.search-container {
margin-bottom: 20px;
}
.sort-container {
margin-bottom: 20px;
}
.sort-button {
margin-right: 5px;
}
2024-10-17 15:45:20 +02:00
.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 */
2024-10-16 18:19:14 +02:00
.modal-content {
2024-10-17 15:45:20 +02:00
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;
2024-10-16 18:19:14 +02:00
}
.supprimerBouton{
background-color: rgb(128, 0, 0);
}
.voirDetailBouton{
background-color: rgb(255, 140, 0);
}
.modifierBouton{
background-color: #28A745;
}
2024-10-17 15:45:20 +02:00
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 */
}
2024-10-16 18:19:14 +02:00
< / 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 >
2024-10-17 15:45:20 +02:00
< a href = "./gestion-heures.html" > Heures< / a >
2024-10-16 18:19:14 +02:00
< 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 >
< main >
< section >
< h2 > Gestion du personnel< / h2 >
<!-- Barre de recherche -->
< div class = "search-container" >
< input type = "text" id = "search-input" placeholder = "Rechercher par nom" oninput = "filterTable()" >
< / div >
<!-- Conteneur de tri -->
< div class = "sort-container" >
< button class = "sort-button" onclick = "sortTable(0)" > Trier par Nom< / button >
< button class = "sort-button" onclick = "sortTable(1)" > Trier par Prénom< / button >
< button class = "sort-button" onclick = "sortTable(2)" > Trier par Statut< / button >
< button class = "sort-button" onclick = "sortTable(3)" > Trier par Dernière Intervention< / button >
< / div >
< table >
< thead >
< tr >
< th > Nom< / th >
< th > Prénom< / th >
< th > Statut< / th >
2024-10-17 15:45:20 +02:00
< th > Statut du paiement< / th >
2024-10-16 18:19:14 +02:00
< th > Dernière Intervention< / th >
< th > Actions< / th >
< / tr >
< / thead >
< tbody id = "personnel-table" >
< tr >
< td > Dupont< / td >
< td > Jean< / td >
< td > Professeur Vacataire< / td >
2024-10-17 15:45:20 +02:00
< td > En attente< / td >
2024-10-16 18:19:14 +02:00
< td > 01/10/2024< / td >
< td >
2024-10-17 22:41:07 +02:00
< button class = "modifierBouton" onclick = "openModal2('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')" > Modifier< / button >
2024-10-16 18:19:14 +02:00
< button class = "supprimerBouton" onclick = "supprimerPersonnel('Dupont', 'Jean')" > Supprimer< / button >
< button class = "voirDetailBouton" onclick = "voirDetails('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')" > Voir Détails< / button >
< / td >
< / tr >
< tr >
< td > Martin< / td >
< td > Sophie< / td >
< td > Professeur Vacataire< / td >
2024-10-17 15:45:20 +02:00
< td > En attente< / td >
2024-10-16 18:19:14 +02:00
< td > 15/09/2024< / td >
< td >
2024-10-17 22:41:07 +02:00
< button class = "modifierBouton" onclick = "openModal2('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')" > Modifier< / button >
2024-10-16 18:19:14 +02:00
< button class = "supprimerBouton" onclick = "supprimerPersonnel('Martin', 'Sophie')" > Supprimer< / button >
< button class = "voirDetailBouton" onclick = "voirDetails('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')" > Voir Détails< / button >
< / td >
< / tr >
<!-- Ajoutez d'autres lignes ici -->
< / tbody >
< / table >
< button onclick = "ajouterPersonnel()" > Ajouter un Personnel< / button >
< / section >
< / main >
<!-- Modal pour modifier le personnel -->
< div id = "myModal" class = "modal" >
< div class = "modal-content" >
< span class = "close" onclick = "closeModal()" > × < / span >
< h2 > Modifier le Personnel< / h2 >
< form id = "edit-form" >
< label for = "nom" > Nom:< / label >
< input type = "text" id = "nom" required > < br >
< label for = "prenom" > Prénom:< / label >
< input type = "text" id = "prenom" required > < br >
< label for = "statut" > Statut:< / label >
< input type = "text" id = "statut" required > < br >
< label for = "intervention" > Dernière Intervention:< / label >
< input type = "date" id = "intervention" required > < br >
< button type = "submit" > Enregistrer< / button >
< / form >
< / div >
< / div >
<!-- Modal pour voir les détails du personnel -->
< div id = "detailModal" class = "modal" >
< div class = "modal-content" >
< span class = "close" onclick = "closeDetailModal()" > × < / span >
< h2 > Détails de Personnel< / h2 >
< p id = "detail-info" > < / p >
2024-10-17 15:45:20 +02:00
< p id = "coordonnees" > < / p >
2024-10-16 18:19:14 +02:00
< h3 > Heures à Payer< / h3 >
< p id = "heures-a-payer" > < / p >
< h3 > Demandes de Corrections d'Heures< / h3 >
< ul id = "corrections-list" > < / ul >
< h3 > Documents< / h3 >
< ul id = "documents-list" > < / ul >
< h3 > Statut< / h3 >
< p id = "statut-detail" > < / p >
< button onclick = "lancerProcedurePaiement()" > Lancer la Procédure de Paiement< / button >
< / div >
< / 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 >
let sortOrder = [true, true, true, true]; // Array to keep track of sort order for each column
function sortTable(columnIndex) {
const table = document.getElementById("personnel-table");
const rows = Array.from(table.rows);
const direction = sortOrder[columnIndex] ? 1 : -1; // Determine sorting direction
sortOrder[columnIndex] = !sortOrder[columnIndex]; // Toggle sort order for the next click
rows.sort((a, b) => {
const aText = a.cells[columnIndex].textContent.trim();
const bText = b.cells[columnIndex].textContent.trim();
if (columnIndex === 3) { // Date column
return direction * (new Date(aText) - new Date(bText));
} else {
return direction * aText.localeCompare(bText);
}
});
// Reattach sorted rows to the table
rows.forEach(row => table.appendChild(row));
}
function filterTable() {
const input = document.getElementById("search-input").value.toLowerCase();
const table = document.getElementById("personnel-table");
const rows = Array.from(table.rows);
rows.forEach(row => {
const cells = Array.from(row.cells);
const match = cells[0].textContent.toLowerCase().includes(input) ||
cells[1].textContent.toLowerCase().includes(input);
row.style.display = match ? "" : "none";
});
}
function openModal(nom, prenom, statut, intervention) {
2024-10-17 15:45:20 +02:00
// 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";
2024-10-16 18:19:14 +02:00
}
2024-10-17 15:45:20 +02:00
2024-10-16 18:19:14 +02:00
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
function supprimerPersonnel(nom, prenom) {
if (confirm(`Êtes-vous sûr de vouloir supprimer ${prenom} ${nom} ?`)) {
const row = event.target.closest("tr");
row.parentNode.removeChild(row);
}
}
2024-10-17 15:45:20 +02:00
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";
}
2024-10-16 18:19:14 +02:00
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
2024-10-17 15:45:20 +02:00
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
2024-10-16 18:19:14 +02:00
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;
2024-10-17 15:45:20 +02:00
document.getElementById("coordonnees").textContent = `E-mail : ${prenom}.${nom}@u-pec.fr`;
2024-10-16 18:19:14 +02:00
document.getElementById("detailModal").style.display = "block";
}
2024-10-17 15:45:20 +02:00
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`;
}
2024-10-16 18:19:14 +02:00
function closeDetailModal() {
document.getElementById("detailModal").style.display = "none";
}
2024-10-17 22:41:07 +02:00
function openModal2(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";
}
2024-10-16 18:19:14 +02:00
function ajouterPersonnel() {
// Logic to add personnel goes here
alert("Fonctionnalité à venir !");
}
function lancerProcedurePaiement() {
alert("Lancement de la procédure de paiement...");
// Logic to launch payment process goes here
}
function modifierHeures() {
alert("Modification des heures...");
// Logic to modify hours goes here
}
< / script >
< / body >
< / html >
