262 lines
11 KiB
HTML
262 lines
11 KiB
HTML
|
<!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;
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
max-height: 80vh;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.supprimerBouton{
|
||
|
|
background-color: rgb(128, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.voirDetailBouton{
|
||
|
|
background-color: rgb(255, 140, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.modifierBouton{
|
||
|
|
background-color: #28A745;
|
||
|
|
}
|
||
|
|
</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="./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>
|
||
|
|
<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>
|
||
|
|
<td>01/10/2024</td>
|
||
|
|
<td>
|
||
|
|
<button class="modifierBouton" onclick="openModal('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Modifier</button>
|
||
|
|
<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>
|
||
|
|
<td>15/09/2024</td>
|
||
|
|
<td>
|
||
|
|
<button class="modifierBouton" onclick="openModal('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Modifier</button>
|
||
|
|
<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>
|
||
|
|
<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>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
|
||
|
|
<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) {
|
||
|
|
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 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);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
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("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("detailModal").style.display = "block";
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeDetailModal() {
|
||
|
|
document.getElementById("detailModal").style.display = "none";
|
||
|
|
}
|
||
|
|
|
||
|
|
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>
|