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 >
< 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';" > × < / 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';" > × < / 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" > ▲ < / 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 >
<!-- 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 > © 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>« Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante »</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>« Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante »</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>« Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante »</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>« Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante »</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 >
