2024-10-23 20:08:31 +02:00
<!DOCTYPE html>
< html lang = "fr" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Suivi des Paiements des Professeurs< / title >
< link rel = "stylesheet" href = "https://www.w3schools.com/w3css/4/w3.css" >
< link rel = "stylesheet" href = "../../css/CHEF/chef_departement.css" >
< script src = "https://cdn.jsdelivr.net/npm/chart.js" > < / script >
< style >
.container {
margin: 20px;
}
.filter-input {
width: 300px;
margin-bottom: 20px;
}
.pagination {
margin-top: 20px;
display: flex;
justify-content: center;
}
.pagination button {
margin: 0 5px;
}
.filter-container {
display: flex; /* Utilise flexbox pour aligner les filtres */
gap: 10px; /* Espace entre les filtres */
}
.w3-select {
width: 250px; /* Largeur fixe pour les sélecteurs */
padding: 8px; /* Espacement intérieur pour rendre le texte lisible */
}
/* Optionnel : ajuster le style des bordures et fonds */
.w3-border {
border-color: #ccc; /* Couleur de la bordure */
}
< / style >
< / head >
< body class = "w3-light-grey" >
< 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 = "container w3-card w3-white w3-padding" >
< h2 > Suivi des Paiements des Professeurs< / h2 >
< select id = "contractTypeFilter" class = "w3-select w3-border" onchange = "filterTable()" >
< option value = "" > Tous les contrats< / option >
< option value = "Permanent" > Permanents< / option >
< option value = "Vacataire" > Vacataires< / option >
< / select >
< select id = "paymentStatusFilter" class = "w3-select w3-border" onchange = "filterTable()" >
< option value = "" > Tous les statuts de paiement< / option >
< option value = "En attente" > En attente< / option >
< option value = "Validé" > Validé< / option >
< option value = "Refusé" > Refusé< / option >
< / select >
< input type = "text" id = "searchInput" style = "margin-top: 10px;" class = "filter-input w3-input w3-border" placeholder = "Rechercher par nom de professeur..." oninput = "filterTable()" >
2024-10-26 15:17:51 +02:00
< div class = "w3-responsive" >
< table class = "w3-table w3-bordered w3-striped w3-white" >
< thead >
< tr class = "w3-light-grey" >
< th > Nom Professeur< / th >
< th > Statut< / th >
< th > Période< / th >
< th > Heures Payées< / th >
< th > Type Heure< / th >
< th > Montant Brut (€)< / th >
< th > Montant Net (€)< / th >
< th > Date de Paiement< / th >
< th > Statut de Paiement< / th >
< / tr >
< / thead >
< tbody id = "paymentTableBody" >
<!-- Les paiements seront ajoutés ici dynamiquement -->
< / tbody >
< / table >
< / div >
2024-10-23 20:08:31 +02:00
< div class = "pagination" >
< button class = "w3-button w3-green w3-round" id = "prevBtn" onclick = "changePage(-1)" > Précédent< / button >
< span id = "pageInfo" > < / span >
< button class = "w3-button w3-green w3-round" id = "nextBtn" onclick = "changePage(1)" > Suivant< / button >
< / div >
< h3 > Graphique des Paiements< / h3 >
< canvas id = "paymentsChart" width = "300" height = "150" > < / canvas >
< / div >
< script >
const rowsPerPage = 7;
let currentPage = 1;
const payments = [
{ name: 'Denis MONNERAT', status: 'Permanent', period: 'Janvier 2024', hoursPaid: 40, hourType: 'TD/TP', grossAmount: 3000, netAmount: 2400, paymentDate: '2024-01-31', paymentStatus: 'Validé' },
{ name: 'Denis MONNERAT', status: 'Permanent', period: 'Février 2024', hoursPaid: 35, hourType: 'CM/TD', grossAmount: 2750, netAmount: 2200, paymentDate: '2024-02-29', paymentStatus: 'En attente' },
{ name: 'Denis MONNERAT', status: 'Permanent', period: 'Mars 2024', hoursPaid: 38, hourType: 'CM/TD/TP', grossAmount: 2900, netAmount: 2320, paymentDate: '2024-03-31', paymentStatus: 'Validé' },
{ name: 'Maxime MENAULT', status: 'Vacataire', period: 'Janvier 2024', hoursPaid: 20, hourType: 'TP', grossAmount: 1000, netAmount: 800, paymentDate: '2024-01-31', paymentStatus: 'Validé' },
{ name: 'Maxime MENAULT', status: 'Vacataire', period: 'Février 2024', hoursPaid: 18, hourType: 'TP', grossAmount: 900, netAmount: 720, paymentDate: '2024-02-29', paymentStatus: 'Refusé' },
{ name: 'Maxime MENAULT', status: 'Vacataire', period: 'Mars 2024', hoursPaid: 22, hourType: 'TP', grossAmount: 1100, netAmount: 880, paymentDate: '2024-03-31', paymentStatus: 'Validé' },
{ name: 'Luc Hernandez', status: 'Permanent', period: 'Janvier 2024', hoursPaid: 45, hourType: 'CM/TD/Suivi', grossAmount: 3250, netAmount: 2600, paymentDate: '2024-01-31', paymentStatus: 'En attente' },
{ name: 'Luc Hernandez', status: 'Permanent', period: 'Février 2024', hoursPaid: 40, hourType: 'CM/TP', grossAmount: 3000, netAmount: 2400, paymentDate: '2024-02-29', paymentStatus: 'Validé' },
{ name: 'Luc Hernandez', status: 'Permanent', period: 'Mars 2024', hoursPaid: 42, hourType: 'TD/TP/Suivi', grossAmount: 3100, netAmount: 2480, paymentDate: '2024-03-31', paymentStatus: 'Refusé' },
{ name: 'Chloé Lefebvre', status: 'Vacataire', period: 'Janvier 2024', hoursPaid: 25, hourType: 'CM', grossAmount: 1200, netAmount: 960, paymentDate: '2024-01-31', paymentStatus: 'Validé' },
{ name: 'Chloé Lefebvre', status: 'Vacataire', period: 'Février 2024', hoursPaid: 20, hourType: 'CM', grossAmount: 1000, netAmount: 800, paymentDate: '2024-02-29', paymentStatus: 'En attente' },
{ name: 'Chloé Lefebvre', status: 'Vacataire', period: 'Mars 2024', hoursPaid: 30, hourType: 'CM', grossAmount: 1500, netAmount: 1200, paymentDate: '2024-03-31', paymentStatus: 'Validé' },
];
function renderTable() {
const tableBody = document.getElementById('paymentTableBody');
tableBody.innerHTML = '';
const filteredPayments = filterPayments();
const startIndex = (currentPage - 1) * rowsPerPage;
const endIndex = startIndex + rowsPerPage;
const currentPayments = filteredPayments.slice(startIndex, endIndex);
currentPayments.forEach(payment => {
const row = document.createElement('tr');
row.innerHTML = `
< td > ${payment.name}< / td >
< td > ${payment.status}< / td >
< td > ${payment.period}< / td >
< td > ${payment.hoursPaid}< / td >
< td > ${payment.hourType}< / td >
< td > ${payment.grossAmount}< / td >
< td > ${payment.netAmount}< / td >
< td > ${payment.paymentDate}< / td >
< td > ${payment.paymentStatus}< / td >
`;
tableBody.appendChild(row);
});
updatePagination(filteredPayments.length);
updateChart(filteredPayments);
}
function filterPayments() {
const contractType = document.getElementById('contractTypeFilter').value;
const paymentStatus = document.getElementById('paymentStatusFilter').value;
const searchValue = document.getElementById('searchInput').value.toLowerCase();
return payments.filter(payment => {
const matchesContract = !contractType || payment.status === contractType;
const matchesStatus = !paymentStatus || payment.paymentStatus === paymentStatus;
const matchesSearch = payment.name.toLowerCase().includes(searchValue);
return matchesContract & & matchesStatus & & matchesSearch;
});
}
function updatePagination(totalFiltered) {
const pageInfo = document.getElementById('pageInfo');
const totalPages = Math.ceil(totalFiltered / rowsPerPage);
pageInfo.innerText = `Page ${currentPage} sur ${totalPages}`;
document.getElementById('prevBtn').disabled = currentPage === 1;
document.getElementById('nextBtn').disabled = currentPage === totalPages;
}
function changePage(direction) {
currentPage += direction;
renderTable();
}
function updateChart(filteredPayments) {
const permanentPayments = filteredPayments.filter(p => p.status === 'Permanent');
const temporaryPayments = filteredPayments.filter(p => p.status === 'Vacataire');
const permanentTotal = permanentPayments.reduce((sum, p) => sum + p.netAmount, 0);
const temporaryTotal = temporaryPayments.reduce((sum, p) => sum + p.netAmount, 0);
const ctx = document.getElementById('paymentsChart').getContext('2d');
const chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Permanents', 'Vacataires'],
datasets: [{
label: 'Montant Net (€)',
data: [permanentTotal, temporaryTotal],
backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(255, 99, 132, 0.6)']
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'Montant Net (€)'
}
}
}
}
});
}
function filterTable() {
currentPage = 1; // Reset to the first page on filter change
renderTable();
}
// Initial render
renderTable();
< / 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 >
