W3 CSS
This commit is contained in:
@@ -6,112 +6,60 @@
|
||||
<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">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <!-- Include W3.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 {
|
||||
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 {
|
||||
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{
|
||||
background-color: rgb(128, 0, 0);
|
||||
}
|
||||
|
||||
.voirDetailBouton{
|
||||
background-color: rgb(255, 140, 0);
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
<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 class="header w3-bar w3-card-4 w3-dark-blue">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container w3-bar-item">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<!-- Bouton burger pour petit écran -->
|
||||
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()">☰</a>
|
||||
|
||||
<!-- Catégories dans le header -->
|
||||
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||
<a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
|
||||
<a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
|
||||
<a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
|
||||
<a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
|
||||
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
|
||||
</div>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section w3-bar-item w3-right">
|
||||
<div class="user-name w3-padding-16">
|
||||
Alice BERGER
|
||||
</div>
|
||||
<div class="logout-container w3-bar-item">
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:25px; height:25px;">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<main class="w3-container">
|
||||
<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 class="w3-margin-bottom">
|
||||
<input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()" class="w3-input w3-border">
|
||||
</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 class="w3-margin-bottom">
|
||||
<button class="w3-button w3-green" onclick="sortTable(0)">Trier par Nom</button>
|
||||
<button class="w3-button w3-green" onclick="sortTable(1)">Trier par Prénom</button>
|
||||
<button class="w3-button w3-green" onclick="sortTable(2)">Trier par Statut</button>
|
||||
<button class="w3-button w3-green" onclick="sortTable(3)">Trier par Dernière Intervention</button>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<table class="w3-table w3-bordered w3-white">
|
||||
<thead>
|
||||
<tr>
|
||||
<tr class="w3-green">
|
||||
<th>Nom</th>
|
||||
<th>Prénom</th>
|
||||
<th>Statut</th>
|
||||
@@ -128,9 +76,9 @@
|
||||
<td>En attente</td>
|
||||
<td>01/10/2024</td>
|
||||
<td>
|
||||
<button class="modifierBouton" onclick="openModal2('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>
|
||||
<button class="w3-button w3-green" onclick="openModal2('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Modifier</button>
|
||||
<button class="w3-button w3-red" onclick="supprimerPersonnel('Dupont', 'Jean')">Supprimer</button>
|
||||
<button class="w3-button w3-orange" onclick="voirDetails('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Voir Détails</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@@ -140,42 +88,41 @@
|
||||
<td>En attente</td>
|
||||
<td>15/09/2024</td>
|
||||
<td>
|
||||
<button class="modifierBouton" onclick="openModal2('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>
|
||||
<button class="w3-button w3-green" onclick="openModal2('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Modifier</button>
|
||||
<button class="w3-button w3-red" onclick="supprimerPersonnel('Martin', 'Sophie')">Supprimer</button>
|
||||
<button class="w3-button w3-orange" 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>
|
||||
<button class="w3-button w3-green" style="margin-bottom: 10px;" 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">
|
||||
<div id="myModal" class="modal w3-modal">
|
||||
<div class="w3-modal-content w3-card-4">
|
||||
<span class="w3-button w3-display-topright" onclick="closeModal()">×</span>
|
||||
<h2 class="w3-green">Modifier le Personnel</h2>
|
||||
<form id="edit-form" class="w3-container">
|
||||
<label for="nom">Nom:</label>
|
||||
<input type="text" id="nom" required><br>
|
||||
<input type="text" id="nom" required class="w3-input w3-border"><br>
|
||||
<label for="prenom">Prénom:</label>
|
||||
<input type="text" id="prenom" required><br>
|
||||
<input type="text" id="prenom" required class="w3-input w3-border"><br>
|
||||
<label for="statut">Statut:</label>
|
||||
<input type="text" id="statut" required><br>
|
||||
<input type="text" id="statut" required class="w3-input w3-border"><br>
|
||||
<label for="intervention">Dernière Intervention:</label>
|
||||
<input type="date" id="intervention" required><br>
|
||||
<button type="submit">Enregistrer</button>
|
||||
<input type="date" id="intervention" required class="w3-input w3-border"><br>
|
||||
<button type="submit" class="w3-button w3-green">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>
|
||||
<div id="detailModal" class="modal w3-modal">
|
||||
<div class="w3-modal-content w3-card-4">
|
||||
<span class="w3-button w3-display-topright" onclick="closeDetailModal()">×</span>
|
||||
<h2 class="w3-green">Détails de Personnel</h2>
|
||||
<p id="detail-info"></p>
|
||||
<p id="coordonnees"></p>
|
||||
<h3>Heures à Payer</h3>
|
||||
@@ -186,17 +133,16 @@
|
||||
<ul id="documents-list"></ul>
|
||||
<h3>Statut</h3>
|
||||
<p id="statut-detail"></p>
|
||||
<button onclick="lancerProcedurePaiement()">Lancer la Procédure de Paiement</button>
|
||||
|
||||
<button class="w3-button w3-green" 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>
|
||||
<div class="w3-container w3-center w3-padding-16 w3-text-white" style="background-color: #0f431f;">
|
||||
<p>© 2024 IUT de Fontainebleau. Tous droits réservés |
|
||||
<a href="../mentions_legales.html" class="w3-text-white">Mentions légales</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let sortOrder = [true, true, true, true]; // Array to keep track of sort order for each column
|
||||
@@ -211,118 +157,84 @@
|
||||
const aText = a.cells[columnIndex].textContent.trim();
|
||||
const bText = b.cells[columnIndex].textContent.trim();
|
||||
|
||||
if (columnIndex === 3) { // Date column
|
||||
if (columnIndex === 3) { // Date column (Dernière Intervention)
|
||||
return direction * (new Date(aText) - new Date(bText));
|
||||
} else {
|
||||
return direction * aText.localeCompare(bText);
|
||||
}
|
||||
return direction * aText.localeCompare(bText);
|
||||
});
|
||||
|
||||
// Reattach sorted rows to the table
|
||||
rows.forEach(row => table.appendChild(row));
|
||||
rows.forEach(row => table.appendChild(row)); // Re-append sorted rows
|
||||
}
|
||||
|
||||
function filterTable() {
|
||||
const input = document.getElementById("search-input").value.toLowerCase();
|
||||
const input = document.getElementById("search-input");
|
||||
const filter = input.value.toLowerCase();
|
||||
const table = document.getElementById("personnel-table");
|
||||
const rows = Array.from(table.rows);
|
||||
const rows = table.getElementsByTagName("tr");
|
||||
|
||||
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";
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < rows.length; i++) {
|
||||
const cells = rows[i].getElementsByTagName("td");
|
||||
let rowVisible = false;
|
||||
|
||||
function openModal(nom, prenom, statut, intervention) {
|
||||
// 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";
|
||||
}
|
||||
|
||||
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);
|
||||
for (let j = 0; j < cells.length; j++) {
|
||||
if (cells[j].textContent.toLowerCase().includes(filter)) {
|
||||
rowVisible = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
rows[i].style.display = rowVisible ? "" : "none"; // Show or hide row
|
||||
}
|
||||
}
|
||||
|
||||
function openModificationModal(nom, prenom, statut, intervention) {
|
||||
function openModal2(nom, prenom, statut, intervention) {
|
||||
// Populate the modal with the data
|
||||
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";
|
||||
document.getElementById("myModal").style.display = "block"; // Show modal
|
||||
}
|
||||
|
||||
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=\"./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").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 closeModal() {
|
||||
document.getElementById("myModal").style.display = "none"; // Hide modal
|
||||
}
|
||||
|
||||
function closeDetailModal() {
|
||||
document.getElementById("detailModal").style.display = "none";
|
||||
}
|
||||
|
||||
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";
|
||||
document.getElementById("detailModal").style.display = "none"; // Hide detail modal
|
||||
}
|
||||
|
||||
function ajouterPersonnel() {
|
||||
// Logic to add personnel goes here
|
||||
alert("Fonctionnalité à venir !");
|
||||
// Logic to add personnel
|
||||
alert("Ajouter personnel n'est pas encore implémentée.");
|
||||
}
|
||||
|
||||
function supprimerPersonnel(nom, prenom) {
|
||||
// Logic to delete personnel
|
||||
alert(`Suppression de ${prenom} ${nom} n'est pas encore implémentée.`);
|
||||
}
|
||||
|
||||
function voirDetails(nom, prenom, statut, intervention) {
|
||||
// Populate the detail modal with personnel details
|
||||
const detailInfo = `Nom: ${nom}, Prénom: ${prenom}, Statut: ${statut}, Dernière Intervention: ${intervention}`;
|
||||
document.getElementById("detail-info").textContent = detailInfo;
|
||||
document.getElementById("heures-a-payer").textContent = "Heures à payer : 10h"; // Example data
|
||||
document.getElementById("statut-detail").textContent = "Statut: En attente"; // Example data
|
||||
document.getElementById("detailModal").style.display = "block"; // Show detail modal
|
||||
}
|
||||
|
||||
function lancerProcedurePaiement() {
|
||||
alert("Lancement de la procédure de paiement...");
|
||||
// Logic to launch payment process goes here
|
||||
alert("Procédure de paiement lancée."); // Example action
|
||||
}
|
||||
|
||||
function modifierHeures() {
|
||||
alert("Modification des heures...");
|
||||
// Logic to modify hours goes here
|
||||
function toggleMenu() {
|
||||
var menu = document.getElementById('menu');
|
||||
var nom = document.getElementById('user-section');
|
||||
if (menu.classList.contains('w3-hide-small')) {
|
||||
menu.classList.remove('w3-hide-small');
|
||||
menu.classList.remove('user-section');
|
||||
} else {
|
||||
menu.classList.add('w3-hide-small');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user