Files
PreprojetIHMFA2024/MaquetteWEB/html/CHEF/chef_departement.html
2024-10-18 13:43:07 +02:00

617 lines
33 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Chef de département</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
<link rel="stylesheet" href="../../css/CHEF/chef_departement2.css">
</head>
<body>
<div class="header">
<div class="logo-container">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
</div>
<div class="categories">
<a href="./chef_departement.html">Accueil</a>
<!-- Menu déroulant pour "Gestion des heures" -->
<div class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
<div class="dropdown-content">
<a href="./gestion-heures-professeur.html">Professeur</a>
<a href="./gestion-heures-formation.html">Formation</a>
</div>
</div>
<a href="./paiements.html">Pilotage budgétaire</a>
<a href="./mes-informations.html">Mes informations et documents</a>
</div>
<div class="user-section">
<div class="user-name">
Florent MADELAINE
</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>
<div class="dashboard-container">
<!-- Alertes et Notifications -->
<div class="section-header" id="notifications-section">
<h2>Alertes et Notifications</h2>
</div>
<div id="notifications-container">
<!-- Notifications -->
<div class="alert">
<span class="close" onclick="this.parentElement.style.display='none';">&times;</span>
<p><strong>Correction d'heures en attente :</strong> Vous avez des demandes de correction d'heures à traiter. Merci de le faire au plus vite dans : <a href="mes-heures.html">Gestion des heures</a>.</p>
</div>
<div class="success">
<span class="close" onclick="this.parentElement.style.display='none';">&times;</span>
<p><strong>Rapport mensuel :</strong> Le rapport mensuel des heures d'enseignement est disponible. <a href="#">Cliquez ici pour le télécharger</a>.</p>
</div>
</div>
<!-- Suivi des Heures d'enseignement -->
<div class="section-header">
<h2>Suivi des Heures d'Enseignement</h2>
</div>
<div class="card">
<table class="w3-table-all" id="teaching-hours-table">
<thead>
<tr>
<th class="sortable" onclick="sortTable(0)">Nom de l'enseignant <span class="arrow">&#9650;</span><span class="arrow up">&#9660;</span></th>
<th class="sortable" onclick="sortTable(1)">Période <span class="arrow">&#9650;</span><span class="arrow up">&#9660;</span></th>
<th class="sortable" onclick="sortTable(2)">Contrat <span class="arrow">&#9650;</span><span class="arrow up">&#9660;</span></th>
<th class="sortable" onclick="sortTable(3)">Type d'heure <span class="arrow">&#9650;</span><span class="arrow up">&#9660;</span></th>
<th class="sortable" onclick="sortTable(4)">Heures déclarées <span class="arrow">&#9650;</span><span class="arrow up">&#9660;</span></th>
<th class="sortable" onclick="sortTable(5)">Heures validées <span class="arrow">&#9650;</span><span class="arrow up">&#9660;</span></th>
<th class="sortable" onclick="sortTable(6)">Statut <span class="arrow">&#9650;</span><span class="arrow up">&#9660;</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é</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é</td>
<td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
</tr>
</tbody>
</table>
<!-- Bouton pour voir plus d'informations -->
<div style="text-align: center; margin-top: 20px;">
<a href="./gestion-heures-professeur.html" class="w3-button w3-brown">Voir plus d'heures</a>
</div>
</div>
<!-- Pilotage Budgétaire -->
<div class="section-header">
<h2>Pilotage Budgétaire</h2>
</div>
<div class="card budget-table">
<p>Voici un aperçu du budget disponible et des dépenses. Vous pouvez suivre vos budgets et dépenses ici.</p>
<table class="w3-table-all">
<thead>
<tr>
<th>Catégorie</th>
<th>Budget Prévu (€)</th>
<th>Dépenses Actuelles (€)</th>
<th>Solde (€)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Formation</td>
<td>10,000</td>
<td>2,500</td>
<td>7,500</td>
</tr>
<tr>
<td>Matériel</td>
<td>5,000</td>
<td>3,000</td>
<td>2,000</td>
</tr>
<tr>
<td>Salaires</td>
<td>50,000</td>
<td>45,000</td>
<td>5,000</td>
</tr>
</tbody>
</table>
<div style="text-align: center; margin-top: 20px;">
<a href="./paiements.html" class="w3-button w3-brown">Accéder au Pilotage Budgétaire</a>
</div>
</div>
</div>
<!-- Pop-up pour modifier les heures -->
<div class="popup" 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>
<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>
<!-- Pop-up pour modifier les heures -->
<div class="popup" 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>
<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>
<!-- Overlay -->
<div class="overlay" id="overlay"></div>
<div class="footer">
<p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</div>
<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
});
}
</script>
<script>
function updateSchedule() {
const scheduleType = document.getElementById('schedule-type').value;
const scheduleContainer = document.getElementById('schedule-container');
let scheduleHTML = '';
if (scheduleType === 'professeur1') {
scheduleHTML = `
<div class="card">
<div class="week-navigation">
<button>&laquo; Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante &raquo;</button>
</div>
<div class="schedule-container">
<table class="schedule-table">
<thead>
<tr>
<th>Heures</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
</thead>
<tbody>
<tr>
<td class="time-slot">08:00 - 08:30</td>
<td class="no-class"></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 202</span><br></td>
<td class="class">TD - Mathématiques<br><span>Salle 305</span><br></td>
<td class="no-class"></td>
</tr>
<tr>
<td class="time-slot">08:30 - 09:00</td>
<td class="class">TD - BD<br><span>Salle 101</span><br></td>
<td class="class">CM - Mathématiques<br><span>Salle 202</span><br></td>
<td class="no-class"></td>
<td class="class">TD - DEV<br><span>Salle 305</span><br></td>
<td class="no-class"></td>
</tr>
<tr>
<td class="time-slot">09:00 - 09:30</td>
<td class="no-class"></td>
<td class="class">TP - Informatique<br><span>Salle 101</span><br></td>
<td class="class">CM - Mathématiques<br><span>Salle 202</span><br></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 225</span><br></td>
</tr>
<tr>
<td class="time-slot">09:30 - 10:00</td>
<td class="class">CM - BD<br><span>Salle 305</span><br></td>
<td class="no-class"></td>
<td class="class">TD - Mathématiques<br><span>Salle 101</span><br></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 202</span><br></td>
</tr>
<tr>
<td class="time-slot">10:00 - 10:30</td>
<td class="no-class"></td>
<td class="class">TD - DEV<br><span>Salle 305</span><br></td>
<td class="no-class"></td>
<td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
<td class="no-class"></td>
</tr>
<!-- Add more slots as needed -->
</tbody>
</table>
</div>
</div>`;
} else if (scheduleType === 'professeur2') {
scheduleHTML = `
<div class="card">
<div class="week-navigation">
<button>&laquo; Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante &raquo;</button>
</div>
<div class="schedule-container">
<table class="schedule-table">
<thead>
<tr>
<th>Heures</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
</thead>
<tbody>
<tr>
<td class="time-slot">08:00 - 08:30</td>
<td class="class">TP - Mathématiques<br><span>Salle 101</span><br></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 202</span><br></td>
<td class="no-class"></td>
<td class="class">TD - DEV<br><span>Salle 225</span><br></td>
</tr>
<tr>
<td class="time-slot">08:30 - 09:00</td>
<td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
<td class="class">TD - BD<br><span>Salle 305</span><br></td>
<td class="no-class"></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 202</span><br></td>
</tr>
<tr>
<td class="time-slot">09:00 - 09:30</td>
<td class="no-class"></td>
<td class="class">CM - Informatique<br><span>Salle 305</span><br></td>
<td class="class">TD - DEV<br><span>Salle 225</span><br></td>
<td class="no-class"></td>
<td class="class">TP - Mathématiques<br><span>Salle 101</span><br></td>
</tr>
<tr>
<td class="time-slot">09:30 - 10:00</td>
<td class="class">CM - BD<br><span>Salle 101</span><br></td>
<td class="no-class"></td>
<td class="class">TD - Mathématiques<br><span>Salle 202</span><br></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 305</span><br></td>
</tr>
<tr>
<td class="time-slot">10:00 - 10:30</td>
<td class="no-class"></td>
<td class="class">TD - DEV<br><span>Salle 225</span><br></td>
<td class="no-class"></td>
<td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
<td class="no-class"></td>
</tr>
<!-- Add more slots as needed -->
</tbody>
</table>
</div>
</div>`;
} else if (scheduleType === 'classe1') {
scheduleHTML = `
<div class="card">
<div class="week-navigation">
<button>&laquo; Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante &raquo;</button>
</div>
<div class="schedule-container">
<table class="schedule-table">
<thead>
<tr>
<th>Heures</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
</thead>
<tbody>
<tr>
<td class="time-slot">08:00 - 08:30</td>
<td class="no-class"></td>
<td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Denis MONNERAT</strong></td>
<td class="class">TP - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Maxime MENAULT</strong></td>
</tr>
<tr>
<td class="time-slot">08:30 - 09:00</td>
<td class="class">TD - BD<br><span>Salle 101</span><br><strong>Prof: Alice DURAND</strong></td>
<td class="no-class"></td>
<td class="no-class"></td>
<td class="no-class"></td>
<td class="class">TD - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
</tr>
<tr>
<td class="time-slot">09:00 - 09:30</td>
<td class="no-class"></td>
<td class="class">TP - Informatique<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="class">CM - Mathématiques<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Denis MONNERAT</strong></td>
</tr>
<tr>
<td class="time-slot">09:30 - 10:00</td>
<td class="class">CM - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
<td class="no-class"></td>
<td class="class">TD - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
</tr>
<tr>
<td class="time-slot">10:00 - 10:30</td>
<td class="no-class"></td>
<td class="class">TD - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Denis MONNERAT</strong></td>
<td class="no-class"></td>
</tr>
<!-- Add more slots as needed -->
</tbody>
</table>
</div>
</div>`;
} else if (scheduleType === 'classe2') {
scheduleHTML = `
<div class="card">
<div class="week-navigation">
<button>&laquo; Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante &raquo;</button>
</div>
<div class="schedule-container">
<table class="schedule-table">
<thead>
<tr>
<th>Heures</th>
<th>Lundi</th>
<th>Mardi</th>
<th>Mercredi</th>
<th>Jeudi</th>
<th>Vendredi</th>
</tr>
</thead>
<tbody>
<tr>
<td class="time-slot">08:00 - 08:30</td>
<td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
<td class="class">CM - SCR<br><span>Salle 224</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="class">TD - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Denis MONNERAT</strong></td>
</tr>
<tr>
<td class="time-slot">08:30 - 09:00</td>
<td class="no-class"></td>
<td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">TD - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
<td class="no-class"></td>
</tr>
<tr>
<td class="time-slot">09:00 - 09:30</td>
<td class="class">TD - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">TP - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
</tr>
<tr>
<td class="time-slot">09:30 - 10:00</td>
<td class="no-class"></td>
<td class="class">CM - Informatique<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">TD - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
</tr>
<tr>
<td class="time-slot">10:00 - 10:30</td>
<td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
<td class="no-class"></td>
<td class="class">TD - DEV<br><span>Salle 225</span><br><strong>Prof: Maxime MENAULT</strong></td>
<td class="no-class"></td>
<td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
</tr>
<!-- Add more slots as needed -->
</tbody>
</table>
</div>
</div>`;
}
// Inject the schedule into the container
scheduleContainer.innerHTML = scheduleHTML;
}
// Initial call to display the default schedule
updateSchedule();
</script>
</body>
</html>