765 lines
31 KiB
HTML
765 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Gestion du Personnel</title>
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
<link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
|
|
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
|
|
<style>
|
|
/* Styles personnalisés pour la page de gestion */
|
|
.header {
|
|
background-color: #0f431f;
|
|
color: white;
|
|
padding: 10px 0;
|
|
text-align: center;
|
|
}
|
|
.footer {
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
margin-top: 20px;
|
|
background-color: #0f431f;
|
|
color: white;
|
|
}
|
|
.btn {
|
|
padding: 10px 15px;
|
|
background-color: #0f431f;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
}
|
|
.btn:hover {
|
|
background-color: #0b3116;
|
|
}
|
|
.employee-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
}
|
|
.employee-table th, .employee-table td {
|
|
border: 1px solid #ccc;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
.employee-table th {
|
|
background-color: #f8f8f8;
|
|
}
|
|
.modal {
|
|
display: none; /* Hidden by default */
|
|
position: fixed; /* Stay in place */
|
|
z-index: 1000; /* Sit on top */
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%; /* Full width */
|
|
height: 100%; /* Full height */
|
|
overflow: auto; /* Enable scroll if needed */
|
|
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 */
|
|
border-radius: 8px; /* Rounded corners */
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Shadow */
|
|
animation: fadeIn 0.5s; /* Animation for modal */
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.close {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.close:hover,
|
|
.close:focus {
|
|
color: black;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
h2 {
|
|
color: #333; /* Couleur du texte du titre */
|
|
}
|
|
|
|
label {
|
|
font-weight: bold; /* Grasset pour les étiquettes */
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="tel"],
|
|
input[type="date"] {
|
|
width: 100%; /* Full width */
|
|
padding: 10px; /* Padding for inputs */
|
|
margin: 8px 0; /* Margin for inputs */
|
|
border: 1px solid #ccc; /* Border color */
|
|
border-radius: 4px; /* Rounded corners */
|
|
box-sizing: border-box; /* Box sizing */
|
|
}
|
|
|
|
button.btn {
|
|
background-color: #4CAF50; /* Green */
|
|
color: white; /* White text */
|
|
padding: 10px 15px; /* Padding for buttons */
|
|
border: none; /* No border */
|
|
border-radius: 4px; /* Rounded corners */
|
|
cursor: pointer; /* Pointer cursor on hover */
|
|
transition: background-color 0.3s; /* Transition effect */
|
|
}
|
|
|
|
button.btn:hover {
|
|
background-color: #45a049; /* Darker green on hover */
|
|
}
|
|
|
|
.view-section {
|
|
display: none;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<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:150px; height:40px;">
|
|
</div>
|
|
|
|
<!-- 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-hide-medium 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-right w3-hide-small w3-hide-medium">
|
|
<div class="user-name">
|
|
Alice BERGER
|
|
</div>
|
|
<div class="logout-container w3-bar-item">
|
|
<a href="./notifications.html" title="Notifications">
|
|
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
|
|
</a>
|
|
<a href="./settings.html" title="Paramètres">
|
|
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
|
|
</a>
|
|
<a href="../../index.html" title="Se déconnecter">
|
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Menu mobile caché au départ -->
|
|
<div id="mobileMenu" class="w3-bar-block w3-hide w3-hide-large w3-dark-blue">
|
|
<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>
|
|
|
|
<!-- Section utilisateur pour mobile -->
|
|
<div class="w3-bar-item w3-border-top w3-margin-top">
|
|
<div class="user-name">Alice BERGER</div>
|
|
<a href="./notifications.html" title="Notifications">
|
|
<img src="../../media/img/notifs.png" alt="Logo notification" style="width:24px; height:24px;">
|
|
</a>
|
|
<a href="./settings.html" title="Paramètres">
|
|
<img src="../../media/img/settings.png" alt="Logo paramètres" style="width:24px; height:24px;">
|
|
</a>
|
|
<a href="../../index.html" title="Se déconnecter">
|
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:24px; height:24px;">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w3-container">
|
|
<h2>Gestion du Personnel</h2>
|
|
|
|
<!-- Section pour importer et exporter des fichiers CSV -->
|
|
<div class="w3-margin-bottom">
|
|
<button class="btn" onclick="importCSV()">Importer données CSV</button>
|
|
<button class="btn" onclick="exportCSV()">Exporter données CSV</button>
|
|
</div>
|
|
|
|
<!-- Barre de recherche -->
|
|
<input type="text" id="searchInput" placeholder="Rechercher un employé..." onkeyup="searchEmployees()" class="w3-input w3-border w3-margin-bottom">
|
|
|
|
<!-- Table des employés -->
|
|
<div class="w3-responsive"> <!-- Classe pour la réactivité -->
|
|
<table class="employee-table" id="employeeTable">
|
|
<thead>
|
|
<tr>
|
|
<th onclick="sortTable(0)">Nom</th>
|
|
<th onclick="sortTable(1)">Prénom</th>
|
|
<th onclick="sortTable(2)">Département</th>
|
|
<th onclick="sortTable(3)">Date de Naissance</th>
|
|
<th onclick="sortTable(4)">Numéro de Sécurité Sociale</th>
|
|
<th onclick="sortTable(5)">Sexe</th>
|
|
<th onclick="sortTable(6)">Adresse</th>
|
|
<th onclick="sortTable(7)">E-mail</th>
|
|
<th onclick="sortTable(8)">Téléphone</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Exemples de données -->
|
|
<tr>
|
|
<td>Dupont</td>
|
|
<td>Jean</td>
|
|
<td>Informatique</td>
|
|
<td>01/01/1980</td>
|
|
<td>123-45-6789</td>
|
|
<td>M</td>
|
|
<td>123 Rue Exemple, Paris</td>
|
|
<td>jean.dupont@example.com</td>
|
|
<td>0123456789</td>
|
|
<td>
|
|
<button class="btn w3-red" onclick="openEditModal(this)">Modifier</button>
|
|
<button class="btn" onclick="removeEmployee(this)">Supprimer</button>
|
|
<button class="btn" onclick="viewPayments('Jean')">Voir Paiements</button>
|
|
<button class="btn" onclick="viewHours('Jean')">Voir Heures</button>
|
|
<button class="btn" onclick="viewAidRequests('Jean')">Voir Demandes d'Aide</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Martin</td>
|
|
<td>Marie</td>
|
|
<td>GEA</td>
|
|
<td>15/05/1985</td>
|
|
<td>987-65-4321</td>
|
|
<td>F</td>
|
|
<td>456 Rue Exemple, Lyon</td>
|
|
<td>marie.martin@example.com</td>
|
|
<td>0987654321</td>
|
|
<td>
|
|
<button class="btn w3-red" onclick="openEditModal(this)">Modifier</button>
|
|
<button class="btn" onclick="removeEmployee(this)">Supprimer</button>
|
|
<button class="btn" onclick="viewPayments('Marie')">Voir Paiements</button>
|
|
<button class="btn" onclick="viewHours('Marie')">Voir Heures</button>
|
|
<button class="btn" onclick="viewAidRequests('Marie')">Voir Demandes d'Aide</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal pour modifier les informations d'un employé -->
|
|
<div id="editModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeModal()">×</span>
|
|
<h2>Modifier l'Employé</h2>
|
|
<label for="editName">Nom :</label>
|
|
<input type="text" id="editName"><br>
|
|
<label for="editFirstName">Prénom :</label>
|
|
<input type="text" id="editFirstName"><br>
|
|
<label for="editDepartment">Département :</label>
|
|
<input type="text" id="editDepartment"><br>
|
|
<label for="editBirthdate">Date de Naissance :</label>
|
|
<input type="date" id="editBirthdate"><br>
|
|
<label for="editSSN">Numéro de Sécurité Sociale :</label>
|
|
<input type="text" id="editSSN"><br>
|
|
<label for="editGender">Sexe :</label>
|
|
<select id="editGender">
|
|
<option value="M">Masculin</option>
|
|
<option value="F">Féminin</option>
|
|
<option value="Autre">Autre</option>
|
|
</select><br>
|
|
<label for="editAddress">Adresse :</label>
|
|
<input type="text" id="editAddress"><br>
|
|
<label for="editEmail">E-mail :</label>
|
|
<input type="email" id="editEmail"><br>
|
|
<label for="editPhone">Téléphone :</label>
|
|
<input type="tel" id="editPhone"><br>
|
|
<button class="btn" onclick="saveEmployee()">Enregistrer</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="paymentModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closePaymentModal()">×</span>
|
|
<h2>Historique des Paiements</h2>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>Montant (Brut)</th>
|
|
<th>Statut</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="paymentHistory">
|
|
<!-- Les paiements seront ajoutés ici dynamiquement -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hoursModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeHoursModal()">×</span>
|
|
<h2>Historique des Heures Travaillées</h2>
|
|
<div class="table-container">
|
|
<table id="hoursTable" class="w3-table w3-bordered w3-striped">
|
|
<thead>
|
|
<tr>
|
|
<th onclick="sortTable(0)">Date ▲</th> <!-- Triable -->
|
|
<th>Matière</th>
|
|
<th>Type d'Intervention</th>
|
|
<th onclick="sortTable(3)">Volume Horaire ▲</th> <!-- Triable -->
|
|
<th onclick="sortTable(4)">Heures Travaillées ▲</th> <!-- Triable -->
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="hoursTableBody">
|
|
<!-- Les lignes seront générées dynamiquement avec JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modal pour afficher l'historique des demandes d'aide -->
|
|
<div id="aidRequestsModal" class="modal">
|
|
<div class="modal-content">
|
|
<span class="close" onclick="closeAidRequestsModal()">×</span>
|
|
<h2>Historique des Demandes d'Aide</h2>
|
|
<div class="table-container">
|
|
<table id="aidRequestsTable" class="w3-table w3-bordered w3-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Date de Demande</th>
|
|
<th>Matière</th>
|
|
<th>Type de Demande</th>
|
|
<th>Statut</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="aidRequestsTableBody">
|
|
<!-- Les lignes seront générées dynamiquement avec JavaScript -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</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>
|
|
// Variables globales pour stocker les informations des employés
|
|
const employees = [
|
|
{
|
|
name: 'Dupont',
|
|
firstName: 'Jean',
|
|
department: 'Informatique',
|
|
birthdate: '1980-01-01',
|
|
ssn: '1 85 04 25 311 114 26',
|
|
gender: 'M',
|
|
address: '123 Rue des exemples, Paris',
|
|
email: 'jean.dupont@u-pec.fr',
|
|
phone: '06.02.54.15.85'
|
|
},
|
|
{
|
|
name: 'Martin',
|
|
firstName: 'Marie',
|
|
department: 'GEA',
|
|
birthdate: '1985-05-15',
|
|
ssn: '2 85 04 25 311 114 26',
|
|
gender: 'F',
|
|
address: '456 Rue des développeurs, Lyon',
|
|
email: 'marie.martin@u-pec.fr',
|
|
phone: '07.68.54.14.85'
|
|
}
|
|
];
|
|
|
|
const allHours = {
|
|
"Jean": [
|
|
{ date: "2024-01-15", subject: "Mathématiques", interventionType: "Cours", volume: "3h", workedHours: "3h" },
|
|
{ date: "2024-01-20", subject: "Physique", interventionType: "TD", volume: "2h", workedHours: "2h" },
|
|
{ date: "2024-02-15", subject: "Informatique", interventionType: "TP", volume: "4h", workedHours: "4h" },
|
|
{ date: "2024-03-05", subject: "Chimie", interventionType: "Cours", volume: "2h", workedHours: "2h" },
|
|
{ date: "2024-03-10", subject: "Mathématiques", interventionType: "Cours", volume: "1h", workedHours: "1h" },
|
|
{ date: "2024-04-01", subject: "Biologie", interventionType: "TD", volume: "2h", workedHours: "2h" },
|
|
],
|
|
"Marie": [
|
|
{ date: "2024-01-12", subject: "Économie", interventionType: "Cours", volume: "3h", workedHours: "3h" },
|
|
{ date: "2024-01-22", subject: "Gestion", interventionType: "TP", volume: "2h", workedHours: "2h" },
|
|
{ date: "2024-02-18", subject: "Droit", interventionType: "TD", volume: "4h", workedHours: "4h" },
|
|
{ date: "2024-03-15", subject: "Informatique", interventionType: "Cours", volume: "2h", workedHours: "2h" },
|
|
],
|
|
};
|
|
|
|
const allAidRequests = {
|
|
"Jean": [
|
|
{ requestDate: "2024-01-10", subject: "Mathématiques", requestType: "Problème d'heures", status: "En attente" },
|
|
{ requestDate: "2024-02-12", subject: "Informatique", requestType: "Problèmes de paiements", status: "Résolue" },
|
|
],
|
|
"Marie": [
|
|
{ requestDate: "2024-01-05", subject: "Économie", requestType: "Problème d'heures", status: "Résolue" },
|
|
{ requestDate: "2024-01-22", subject: "Gestion", requestType: "Problèmes de paiements", status: "En attente" },
|
|
],
|
|
};
|
|
|
|
function editHour(button) {
|
|
const row = button.closest("tr");
|
|
const date = row.cells[0].innerText;
|
|
const subject = row.cells[1].innerText;
|
|
const interventionType = row.cells[2].innerText;
|
|
const volume = row.cells[3].innerText;
|
|
const workedHours = row.cells[4].innerText;
|
|
|
|
// Logique de modification des heures
|
|
const newSubject = prompt("Modifier la matière:", subject);
|
|
if (newSubject) {
|
|
row.cells[1].innerText = newSubject; // Met à jour la matière
|
|
}
|
|
|
|
}
|
|
|
|
function viewAidRequests(firstName) {
|
|
const aidRequestsContent = document.getElementById('aidRequestsTableBody');
|
|
aidRequestsContent.innerHTML = ""; // Réinitialiser le tableau
|
|
const aidRequests = allAidRequests[firstName] || [];
|
|
|
|
// Boucle à travers les demandes d'aide pour remplir le tableau
|
|
aidRequests.forEach((entry) => {
|
|
const row = document.createElement("tr");
|
|
row.innerHTML = `
|
|
<td>${entry.requestDate}</td>
|
|
<td>${entry.subject}</td>
|
|
<td>${entry.requestType}</td>
|
|
<td>${entry.status}</td>
|
|
<td>
|
|
<button class="btn" onclick="editAidRequest(this)">Modifier</button>
|
|
<button class="btn" onclick="removeAidRequest(this)">Supprimer</button>
|
|
</td>
|
|
`;
|
|
aidRequestsContent.appendChild(row);
|
|
});
|
|
|
|
document.getElementById('aidRequestsModal').style.display = "block";
|
|
}
|
|
|
|
function editAidRequest(button) {
|
|
const row = button.closest("tr");
|
|
const requestDate = row.cells[0].innerText;
|
|
const subject = row.cells[1].innerText;
|
|
const requestType = row.cells[2].innerText;
|
|
const status = row.cells[3].innerText;
|
|
|
|
// Logique de modification de la demande
|
|
const newSubject = prompt("Modifier la matière:", subject);
|
|
if (newSubject) {
|
|
row.cells[1].innerText = newSubject; // Met à jour la matière
|
|
}
|
|
|
|
// Vous pouvez ajouter plus de prompts pour les autres colonnes si nécessaire
|
|
}
|
|
|
|
function removeAidRequest(button) {
|
|
const row = button.closest("tr");
|
|
row.parentNode.removeChild(row);
|
|
}
|
|
|
|
function removeHour(button) {
|
|
const row = button.closest("tr");
|
|
row.parentNode.removeChild(row);
|
|
}
|
|
|
|
function viewHours(firstName) {
|
|
const hoursContent = document.getElementById('hoursTableBody');
|
|
hoursContent.innerHTML = ""; // Réinitialiser le tableau
|
|
const hours = allHours[firstName] || [];
|
|
|
|
// Boucle à travers les heures pour remplir le tableau
|
|
hours.forEach((entry) => {
|
|
const row = document.createElement("tr");
|
|
row.innerHTML = `
|
|
<td>${entry.date}</td>
|
|
<td>${entry.subject}</td>
|
|
<td>${entry.interventionType}</td>
|
|
<td>${entry.volume}</td>
|
|
<td>${entry.workedHours}</td>
|
|
<td>
|
|
<button class="btn" onclick="editHour(this)">Modifier</button>
|
|
<button class="btn" onclick="removeHour(this)">Supprimer</button>
|
|
</td>
|
|
`;
|
|
hoursContent.appendChild(row);
|
|
});
|
|
|
|
document.getElementById('hoursModal').style.display = "block";
|
|
}
|
|
|
|
// Fonction pour ouvrir le modal d'édition
|
|
function openEditModal(button) {
|
|
const row = button.closest('tr');
|
|
const index = Array.from(row.parentNode.children).indexOf(row);
|
|
const employee = employees[index];
|
|
|
|
// Remplir le modal avec les données de l'employé
|
|
document.getElementById('editName').value = employee.name;
|
|
document.getElementById('editFirstName').value = employee.firstName;
|
|
document.getElementById('editDepartment').value = employee.department;
|
|
document.getElementById('editBirthdate').value = employee.birthdate;
|
|
document.getElementById('editSSN').value = employee.ssn;
|
|
document.getElementById('editGender').value = employee.gender;
|
|
document.getElementById('editAddress').value = employee.address;
|
|
document.getElementById('editEmail').value = employee.email;
|
|
document.getElementById('editPhone').value = employee.phone;
|
|
|
|
// Afficher le modal
|
|
document.getElementById('editModal').style.display = "block";
|
|
}
|
|
|
|
// Fonction pour fermer le modal
|
|
function closeModal() {
|
|
document.getElementById('editModal').style.display = "none";
|
|
}
|
|
|
|
// Fonction pour enregistrer les modifications
|
|
function saveEmployee() {
|
|
const name = document.getElementById('editName').value;
|
|
const firstName = document.getElementById('editFirstName').value;
|
|
const department = document.getElementById('editDepartment').value;
|
|
const birthdate = document.getElementById('editBirthdate').value;
|
|
const ssn = document.getElementById('editSSN').value;
|
|
const gender = document.getElementById('editGender').value;
|
|
const address = document.getElementById('editAddress').value;
|
|
const email = document.getElementById('editEmail').value;
|
|
const phone = document.getElementById('editPhone').value;
|
|
|
|
// Logique pour mettre à jour les données de l'employé
|
|
const index = Array.from(document.querySelectorAll('#employeeTable tbody tr')).findIndex(row => row.querySelector('td').textContent === name);
|
|
employees[index] = { name, firstName, department, birthdate, ssn, gender, address, email, phone };
|
|
|
|
// Mettre à jour la table
|
|
updateEmployeeTable();
|
|
|
|
// Fermer le modal
|
|
closeModal();
|
|
}
|
|
|
|
// Fonction pour mettre à jour la table des employés
|
|
function updateEmployeeTable() {
|
|
const tbody = document.querySelector('#employeeTable tbody');
|
|
tbody.innerHTML = ''; // Vider le contenu actuel
|
|
|
|
employees.forEach(employee => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td>${employee.name}</td>
|
|
<td>${employee.firstName}</td>
|
|
<td>${employee.department}</td>
|
|
<td>${employee.birthdate}</td>
|
|
<td>${employee.ssn}</td>
|
|
<td>${employee.gender}</td>
|
|
<td>${employee.address}</td>
|
|
<td>${employee.email}</td>
|
|
<td>${employee.phone}</td>
|
|
<td>
|
|
<button class="btn" onclick="openEditModal(this)">Modifier</button>
|
|
<button class="btn" onclick="removeEmployee(this)">Supprimer</button>
|
|
<button class="btn" onclick="viewPayments('${employee.firstName}')">Voir Paiements</button>
|
|
<button class="btn" onclick="viewHours('${employee.firstName}')">Voir Heures</button>
|
|
<button class="btn" onclick="viewAidRequests('${employee.firstName}')">Voir Demandes d'Aide</button>
|
|
</td>
|
|
`;
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// Fonction pour supprimer un employé
|
|
function removeEmployee(button) {
|
|
const row = button.closest('tr');
|
|
const index = Array.from(row.parentNode.children).indexOf(row);
|
|
employees.splice(index, 1); // Supprimer l'employé du tableau
|
|
updateEmployeeTable(); // Mettre à jour la table
|
|
}
|
|
|
|
// Fonction de recherche
|
|
function searchEmployees() {
|
|
const input = document.getElementById('searchInput').value.toLowerCase();
|
|
const table = document.getElementById('employeeTable');
|
|
const rows = table.getElementsByTagName('tr');
|
|
|
|
for (let i = 1; i < rows.length; i++) {
|
|
const cells = rows[i].getElementsByTagName('td');
|
|
let found = false;
|
|
for (let j = 0; j < cells.length; j++) {
|
|
if (cells[j].textContent.toLowerCase().includes(input)) {
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
rows[i].style.display = found ? '' : 'none';
|
|
}
|
|
}
|
|
|
|
// Fonction pour trier la table
|
|
function sortTable(n) {
|
|
const table = document.getElementById("employeeTable");
|
|
let switching = true;
|
|
let shouldSwitch, dir = "asc", switchcount = 0;
|
|
while (switching) {
|
|
switching = false;
|
|
const rows = table.rows;
|
|
for (let i = 1; i < (rows.length - 1); i++) {
|
|
shouldSwitch = false;
|
|
const x = rows[i].getElementsByTagName("TD")[n];
|
|
const y = rows[i + 1].getElementsByTagName("TD")[n];
|
|
if (dir === "asc") {
|
|
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
} else if (dir === "desc") {
|
|
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
|
|
shouldSwitch = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
if (shouldSwitch) {
|
|
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
|
|
switching = true;
|
|
switchcount++;
|
|
} else {
|
|
if (switchcount === 0 && dir === "asc") {
|
|
dir = "desc";
|
|
switching = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Fonctions pour afficher les paiements, les heures et les demandes d'aide
|
|
function viewPayments(firstName) {
|
|
const paymentHistory = document.getElementById("paymentHistory");
|
|
paymentHistory.innerHTML = ""; // Réinitialiser l'historique
|
|
|
|
// Simuler des données de paiements
|
|
const payments = [
|
|
{ date: "2024-01-15", amount: "1500€", status: "Validé" },
|
|
{ date: "2024-02-15", amount: "1500€", status: "Validé" },
|
|
{ date: "2024-03-15", amount: "1500€", status: "En attente" },
|
|
];
|
|
|
|
payments.forEach((payment, index) => {
|
|
const row = document.createElement("tr");
|
|
row.innerHTML = `
|
|
<td>${payment.date}</td>
|
|
<td>${payment.amount}</td>
|
|
<td class="${payment.status === 'Validé' ? 'status-valide' : 'status-attente'}">${payment.status}</td>
|
|
<td>
|
|
<button class="btn" onclick="editPayment(${index})">Modifier</button>
|
|
<button class="btn" onclick="launchPayment(${index})">Lancer le Paiement</button>
|
|
</td>
|
|
`;
|
|
paymentHistory.appendChild(row);
|
|
});
|
|
|
|
document.getElementById("paymentModal").style.display = "block";
|
|
}
|
|
|
|
|
|
function editPayment(index) {
|
|
const paymentHistory = [
|
|
{ date: "2024-01-15", amount: "1500€", status: "Validé" },
|
|
{ date: "2024-02-15", amount: "1500€", status: "Validé" },
|
|
{ date: "2024-03-15", amount: "1500€", status: "En attente" },
|
|
];
|
|
|
|
const payment = paymentHistory[index];
|
|
const newAmount = prompt("Modifier le montant:", payment.amount);
|
|
|
|
if (newAmount) {
|
|
paymentHistory[index].amount = newAmount; // Mettre à jour le montant
|
|
alert(`Montant mis à jour: ${newAmount}`);
|
|
viewPayments(paymentHistory[index].firstName); // Actualiser l'historique
|
|
}
|
|
}
|
|
|
|
function launchPayment(index) {
|
|
const paymentHistory = [
|
|
{ date: "2024-01-15", amount: "1500€", status: "Validé" },
|
|
{ date: "2024-02-15", amount: "1500€", status: "Validé" },
|
|
{ date: "2024-03-15", amount: "1500€", status: "En attente" },
|
|
];
|
|
|
|
const payment = paymentHistory[index];
|
|
|
|
if (payment.status === "En attente") {
|
|
// Logique pour lancer le paiement ici
|
|
alert(`Paiement de ${payment.amount} lancé pour le ${payment.date}`);
|
|
payment.status = "Validé"; // Mettre à jour le statut
|
|
viewPayments(paymentHistory[index].firstName); // Actualiser l'historique
|
|
} else {
|
|
alert("Ce paiement est déjà validé.");
|
|
}
|
|
}
|
|
|
|
function closePaymentModal() {
|
|
document.getElementById("paymentModal").style.display = "none";
|
|
}
|
|
|
|
function closeHoursModal() {
|
|
document.getElementById('hoursModal').style.display = "none";
|
|
}
|
|
|
|
function closeAidRequestsModal() {
|
|
document.getElementById('aidRequestsModal').style.display = "none";
|
|
}
|
|
|
|
// Initialiser la table des employés
|
|
updateEmployeeTable();
|
|
|
|
|
|
function importCSV() {
|
|
alert("On demande à l'utilisateur de choisir un fichier .csv et ensuite on modifiera les tableaux en conséquences !");
|
|
}
|
|
|
|
function exportCSV() {
|
|
alert("On lancera le téléchargement d'un fichier CSV avec les données présentes dans les tableaux !");
|
|
}
|
|
</script>
|
|
<script>
|
|
function toggleMenu() {
|
|
var x = document.getElementById("mobileMenu");
|
|
if (x.className.indexOf("w3-show") == -1) {
|
|
x.className += " w3-show";
|
|
} else {
|
|
x.className = x.className.replace(" w3-show", "");
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|