stiti/PreprojetIHMFA2024
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity
Files
023d7d8202b73213e79fa121c39d1def8bbe464b
PreprojetIHMFA2024/MaquetteWEB/html/CHEF/paiement.html
T

285 lines
14 KiB
HTML
Raw Normal View History

Ajouts des dernières modification
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()">
Dernières modifications de Alistair et Louay - Problème du git...
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>
Ajouts des dernières modification
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>
Reference in New Issue Copy Permalink