388 lines
18 KiB
HTML
388 lines
18 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="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
|
|
<link rel="stylesheet" href="../../css/CHEF/chef_departement2.css">
|
|
</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="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
|
|
<a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
|
|
<a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
|
|
<a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
|
|
<a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
|
|
<a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
|
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
|
|
</div>
|
|
|
|
<!-- Section utilisateur avec déconnexion -->
|
|
<div class="user-section w3-right w3-hide-small w3-hide-medium">
|
|
<div class="user-name">
|
|
Florent MADELAINE
|
|
</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="./chef_departement.html" class="w3-bar-item w3-button">Accueil</a>
|
|
<a href="./gestion-heures-professeur.html" class="w3-bar-item w3-button">Professeurs</a>
|
|
<a href="./vacataire.html" class="w3-bar-item w3-button">Vacation</a>
|
|
<a href="./gestion-heures-formation.html" class="w3-bar-item w3-button">Formations</a>
|
|
<a href="./paiement.html" class="w3-bar-item w3-button">Paiements</a>
|
|
<a href="./budget.html" class="w3-bar-item w3-button">Budget</a>
|
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations</a>
|
|
|
|
<!-- Section utilisateur pour mobile -->
|
|
<div class="w3-bar-item w3-border-top w3-margin-top">
|
|
<div class="user-name">Florent MADELAINE</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="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';">×</span>
|
|
<p><strong>Budget :</strong> La formation 'Master Informatique' à atteint 75% d'utilisation du budget alloué : <a href="budget.html">Budget</a>.</p>
|
|
</div>
|
|
<div class="success">
|
|
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
|
|
<p><strong>Rapport mensuel :</strong> Le rapport mensuel des heures d'enseignement est disponible. <a href="../../media/documents/VACATAIRE/JustificatifDomicile.pdf">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">
|
|
<div class="w3-responsive"> <!-- Added this div for responsiveness -->
|
|
<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é</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>
|
|
</div> <!-- End of responsive div -->
|
|
|
|
<!-- 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.</p>
|
|
<div class="w3-responsive"> <!-- Added this div for responsiveness -->
|
|
<table class="w3-table w3-bordered w3-striped w3-white">
|
|
<thead>
|
|
<tr class="w3-light-grey">
|
|
<th>Formation</th>
|
|
<th>Budget Alloué (€)</th>
|
|
<th>Dépenses Totales (€)</th>
|
|
<th>Budget Restant (€)</th>
|
|
<th>Progression</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="budgetTableBody">
|
|
<tr>
|
|
<td>BUT Informatique</td>
|
|
<td>50 000</td>
|
|
<td>30 000</td>
|
|
<td>20 000</td>
|
|
<td>
|
|
<div class="progress-bar" style="width: 100%; background-color: #f1f1f1;">
|
|
<div class="progress" style="width: 60%; background-color: #4caf50;">60%</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Master Informatique</td>
|
|
<td>80 000</td>
|
|
<td>60 000</td>
|
|
<td>20 000</td>
|
|
<td>
|
|
<div class="progress-bar" style="width: 100%; background-color: #f1f1f1;">
|
|
<div class="progress" style="width: 75%; background-color: orange;">75%</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- End of responsive div -->
|
|
|
|
<div style="text-align: center; margin-top: 20px;">
|
|
<a href="./budget.html" class="w3-button w3-brown">Accéder au Pilotage Budgétaire</a>
|
|
</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>© 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 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> |