2024-10-16 18:19:14 +02:00
<!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" >
2024-10-18 19:07:09 +02:00
< link rel = "icon" href = "../../media/img/logoIcon.ico" type = "image/x-icon" / >
2024-10-18 13:43:07 +02:00
< link rel = "stylesheet" href = "../../css/CHEF/chef_departement2.css" >
2024-10-16 18:19:14 +02:00
< / head >
< body >
2024-10-23 20:08:31 +02:00
< 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;" >
2024-10-16 18:19:14 +02:00
< / div >
2024-10-23 20:08:31 +02:00
<!-- 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 >
2024-10-16 18:19:14 +02:00
< / div >
2024-10-23 20:08:31 +02:00
<!-- Section utilisateur avec déconnexion -->
< div class = "user-section w3-right w3-hide-small w3-hide-medium" >
2024-10-16 18:19:14 +02:00
< div class = "user-name" >
Florent MADELAINE
< / div >
2024-10-23 20:08:31 +02:00
< 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 >
2024-10-16 18:19:14 +02:00
< a href = "../../index.html" title = "Se déconnecter" >
2024-10-23 20:08:31 +02:00
< img src = "../../media/img/LogOutWhite.png" alt = "Logo Déconnexion" style = "width:24px; height:24px;" >
2024-10-16 18:19:14 +02:00
< / 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 >
2024-10-23 20:08:31 +02:00
< p > < strong > Budget :< / strong > La formation 'Master Informatique' à atteint 75% d'utilisation du budget alloué : < a href = "budget.html" > Budget< / a > .< / p >
2024-10-16 18:19:14 +02:00
< / div >
< div class = "success" >
< span class = "close" onclick = "this.parentElement.style.display='none';" > × < / span >
2024-10-23 20:08:31 +02:00
< 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 >
2024-10-16 18:19:14 +02:00
< / div >
< / div >
2024-10-23 20:08:31 +02:00
<!-- 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 >
2024-10-16 18:19:14 +02:00
<!-- 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 >
2024-10-23 20:08:31 +02:00
< 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", "");
2024-10-16 18:19:14 +02:00
}
}
< / script >
< / body >
2024-10-23 20:08:31 +02:00
< / html >
