<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heures</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>
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<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 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="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 w3-responsive">
<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>
<div class="w3-container">
<h2>Heures des Professeurs</h2>
<!-- Table des heures des professeurs -->
<div class="w3-responsive"> <!-- Classe pour la réactivité -->
<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" style="display: none;">
<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" width="200" height="100"></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" style="display: none;">
<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" width="200" height="100"></canvas>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</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>
<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.7)', // Couleur rouge plus foncée
'rgba(54, 162, 235, 0.7)', // Couleur bleue plus foncée
'rgba(255, 206, 86, 0.7)' // Couleur jaune plus foncée
],
borderColor: [
'rgba(255, 99, 132, 1)', // Bordure rouge opaque
'rgba(54, 162, 235, 1)', // Bordure bleue opaque
'rgba(255, 206, 86, 1)' // Bordure jaune opaque
],
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.7)', // Couleur rouge plus foncée
'rgba(54, 162, 235, 0.7)', // Couleur bleue plus foncée
'rgba(255, 206, 86, 0.7)' // Couleur jaune plus foncée
],
borderColor: [
'rgba(255, 99, 132, 1)', // Bordure rouge opaque
'rgba(54, 162, 235, 1)', // Bordure bleue opaque
'rgba(255, 206, 86, 1)' // Bordure jaune opaque
],
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>
<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>