stiti/PreprojetIHMFA2024
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects1 Releases Wiki Activity

Ajouts des dernières modification

Browse Source
This commit is contained in:
stiti 2024-10-23 20:08:31 +02:00
parent d60b08ffcc
commit 075ed392e5
14 changed files with 2227 additions and 1016 deletions

12
MaquetteWEB/css/CHEF/chef_departement2.css

@ -10,6 +10,18 @@
color: red;
}
.progress-bar {
width: 100%;
background-color: #f3f3f3;
border-radius: 5px;
}
.progress {
height: 20px;
border-radius: 5px;
text-align: center;
color: white;
}
.popup {
display: none;
position: fixed;

429
MaquetteWEB/html/CHEF/budget.html Normal file

@ -0,0 +1,429 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gestion du Budget - Département Informatique</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
<style>
.dashboard-container {
margin-top: 20px;
}
.card {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.filter-input {
width: 300px;
}
.footer {
text-align: center;
padding: 10px 0;
background-color: #5e3a19;
color: white;
margin-top: 40px;
}
.progress-bar {
width: 100%;
background-color: #f3f3f3;
border-radius: 5px;
}
.progress {
height: 20px;
border-radius: 5px;
text-align: center;
color: white;
}
.request-buttons {
margin-top: 10px;
}
.details-section {
display: none;
margin-top: 20px;
}
.details-section.active {
display: block;
}
.details-content {
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: #f9f9f9;
}
.chart-container {
width: 40%;
clear: both;
margin-top: 20px;
}
.request-form {
margin-top: 30px;
}
/* Ajout de marges pour éviter les chevauchements */
.details-content {
margin-bottom: 30px;
}
/* Bouton pour fermer la section détails */
.close-btn {
margin-top: 10px;
margin-bottom: 20px;
}
</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="dashboard-container w3-container">
<div class="card w3-card">
<h2>Gestion du Budget - Département Informatique</h2>
<div class="filter-section w3-margin-bottom">
<input type="text" id="nameFilter" class="filter-input w3-input w3-border" placeholder="Rechercher par formation..." oninput="filterTable()"><br>
</div>
<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>
<th>Détails</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">
<div class="progress" style="width: 60%; background-color: #4caf50;">60%</div>
</div>
</td>
<td><button class="w3-button w3-blue" onclick="showDetails('BUT Informatique', 50000, 30000)">Voir Détails</button></td>
</tr>
<tr>
<td>Master Informatique</td>
<td>80 000</td>
<td>60 000</td>
<td>20 000</td>
<td>
<div class="progress-bar">
<div class="progress" style="width: 75%; background-color: orange;">75%</div>
</div>
</td>
<td><button class="w3-button w3-blue" onclick="showDetails('Master Informatique', 80000, 60000)">Voir Détails</button></td>
</tr>
</tbody>
</table>
</div>
<!-- Section pour afficher des détails -->
<div class="details-section" id="detailsSection">
<h2>Détails pour la formation sélectionnée</h2>
<div class="details-content">
<p><strong>Formation :</strong> <span id="formationName"></span></p>
<p><strong>Budget Alloué :</strong> <span id="budgetAllocated"></span> €</p>
<p><strong>Dépenses :</strong> <span id="budgetSpent"></span> €</p>
<p><strong>Budget Restant :</strong> <span id="budgetRemaining"></span> €</p>
<p><strong>Dépenses détaillées :</strong></p>
<ul id="expenseDetails">
<!-- Détails des dépenses ajoutés dynamiquement -->
</ul>
<div class="chart-container" id="chartContainer">
<p><strong>Répartition des dépenses :</strong></p>
<canvas id="expenseChart"></canvas>
<p><strong>Évolution du budget :</strong></p>
<canvas id="progressChart"></canvas>
</div>
<!-- Bouton pour fermer la section de détails -->
<button class="w3-button w3-red close-btn" onclick="closeDetails()">Fermer les détails</button>
</div>
</div>
<div class="card w3-card request-form">
<h2>Faire une demande de budget supplémentaire</h2>
<form id="budgetRequestForm">
<label for="formation">Formation :</label>
<select id="formation" class="w3-select" name="formation">
<option value="BUT Informatique">BUT Informatique</option>
<option value="Master Informatique">Master Informatique</option>
</select><br><br>
<label for="requestedAmount">Montant demandé (€) :</label>
<input type="number" id="requestedAmount" class="w3-input" name="requestedAmount" placeholder="Ex : 5000"><br><br>
<label for="justification">Justification :</label>
<textarea id="justification" class="w3-input" name="justification" placeholder="Expliquer la raison de cette demande..."></textarea><br><br>
<button class="w3-button w3-green" type="button" onclick="submitRequest()">Soumettre la demande</button>
</form>
</div>
<!-- Section pour afficher les demandes soumises -->
<div class="card w3-card request-list" id="requestList" style="display: none;">
<h2>Liste des demandes de budget supplémentaires</h2>
<table class="w3-table w3-bordered w3-striped w3-white" id="requestTable">
<thead>
<tr class="w3-light-grey">
<th>Formation</th>
<th>Montant (€)</th>
<th>Justification</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="requestTableBody">
<!-- Les demandes seront ajoutées ici dynamiquement -->
</tbody>
</table>
</div>
</div>
<div class="footer">
<p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
function showDetails(formation, budgetAllocated, budgetSpent) {
// Mise à jour des détails de la formation
document.getElementById('detailsSection').classList.add('active');
document.getElementById('formationName').innerText = formation;
document.getElementById('budgetAllocated').innerText = budgetAllocated;
document.getElementById('budgetSpent').innerText = budgetSpent;
document.getElementById('budgetRemaining').innerText = budgetAllocated - budgetSpent;
// Simulation des détails de dépenses
const expenses = [
{ category: 'Matériel', amount: 15000 },
{ category: 'Logiciels', amount: 8000 },
{ category: 'Maintenance', amount: 5000 },
{ category: 'Formations', amount: 2000 }
];
const expenseDetails = document.getElementById('expenseDetails');
expenseDetails.innerHTML = ''; // Effacer les anciens détails
expenses.forEach(expense => {
const li = document.createElement('li');
li.textContent = `${expense.category}: ${expense.amount} €`;
expenseDetails.appendChild(li);
});
// Afficher les graphiques
displayCharts(expenses, budgetAllocated, budgetSpent);
// Afficher la section des détails
document.getElementById('detailsSection').classList.add('active');
}
function displayCharts(expenses, budgetAllocated, budgetSpent) {
// Répartition des dépenses
const expenseChartCtx = document.getElementById('expenseChart').getContext('2d');
new Chart(expenseChartCtx, {
type: 'pie',
data: {
labels: expenses.map(exp => exp.category),
datasets: [{
label: 'Dépenses',
data: expenses.map(exp => exp.amount),
backgroundColor: ['#ff6384', '#36a2eb', '#cc65fe', '#ffce56']
}]
}
});
// Évolution du budget
const progressChartCtx = document.getElementById('progressChart').getContext('2d');
new Chart(progressChartCtx, {
type: 'line',
data: {
labels: ['Août 2024','Septembre 2024', 'Octobre 2024', 'Novembre 2024', 'Maintenant'],
datasets: [{
label: 'Évolution des dépenses',
data: [0, budgetSpent * 0.3, budgetSpent * 0.6, budgetSpent * 0.9, budgetSpent],
borderColor: '#4caf50',
fill: false
}]
},
options: {
responsive: true
}
});
}
function closeDetails() {
document.getElementById('detailsSection').classList.remove('active');
}
function filterTable() {
const filterValue = document.getElementById('nameFilter').value.toLowerCase();
const tableRows = document.querySelectorAll('#budgetTableBody tr');
tableRows.forEach(row => {
const formationName = row.cells[0].innerText.toLowerCase();
if (formationName.includes(filterValue)) {
row.style.display = '';
} else {
row.style.display = 'none';
}
});
}
</script>
<script>
let requests = [];
function submitRequest() {
const formation = document.getElementById('formation').value;
const requestedAmount = document.getElementById('requestedAmount').value;
const justification = document.getElementById('justification').value;
if (formation && requestedAmount && justification) {
const request = {
id: Date.now(), // Un identifiant unique pour chaque demande
formation: formation,
amount: requestedAmount,
justification: justification
};
requests.push(request);
displayRequests();
clearForm();
} else {
alert('Veuillez remplir tous les champs.');
}
}
function displayRequests() {
const requestTableBody = document.getElementById('requestTableBody');
const requestListSection = document.getElementById('requestList');
// Vider le tableau avant de le remplir à nouveau
requestTableBody.innerHTML = '';
// Afficher ou masquer la section en fonction des demandes
if (requests.length > 0) {
requests.forEach(request => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${request.formation}</td>
<td>${request.amount}</td>
<td>${request.justification}</td>
<td>
<button class="w3-button w3-red" onclick="deleteRequest(${request.id})">Supprimer</button>
</td>
`;
requestTableBody.appendChild(row);
});
// Afficher la section des demandes
requestListSection.style.display = 'block';
} else {
// Masquer la section des demandes si aucune demande n'existe
requestListSection.style.display = 'none';
}
}
function clearForm() {
document.getElementById('formation').value = '';
document.getElementById('requestedAmount').value = '';
document.getElementById('justification').value = '';
}
function deleteRequest(id) {
requests = requests.filter(request => request.id !== id);
displayRequests(); // Mettre à jour l'affichage après suppression
}
</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>

573
MaquetteWEB/html/CHEF/chef_departement.html

File diff suppressed because it is too large Load Diff

82
MaquetteWEB/html/CHEF/gestion-edt.html

@ -212,33 +212,63 @@ label {
<body>
<div class="header">
<div class="logo-container">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
<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>
<div class="categories">
<a href="./chef_departement.html">Accueil</a>
<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>
<!-- 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="./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>
<div class="user-section">
<!-- 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">
<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">
<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="./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>
@ -836,6 +866,16 @@ label {
// Initialiser l'emploi du temps au chargement
updateSchedule();
</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>

404
MaquetteWEB/html/CHEF/gestion-heures-formation.html

File diff suppressed because it is too large Load Diff

307
MaquetteWEB/html/CHEF/gestion-heures-professeur.html

@ -94,33 +94,65 @@
<body>
<div class="header">
<div class="logo-container">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
<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>
<div class="categories">
<a href="./chef_departement.html">Accueil</a>
<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>
<!-- 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>
<div class="user-section">
<!-- 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">
<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">
<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>
@ -130,14 +162,14 @@
<div class="container">
<input type="text" id="searchBar" class="search-bar" placeholder="Rechercher un professeur..." onkeyup="searchProfessor()">
<input type="text" id="searchBar" class="search-bar" placeholder="Rechercher un professeur...">
<div class="info-card">
<div class="section-header">
<h2>Suivi des demandes de modification d'heures</h2>
</div>
<div class="card">
<table class="w3-table-all" id="teaching-hours-table">
<table class="w3-table-all w3-responsive" id="teaching-hours-table">
<thead>
<tr>
<th class="sortable" onclick="sortTable(0)">Nom de l'enseignant <span class="arrow">&#9650;</span><span class="arrow up">&#9660;</span></th>
@ -187,87 +219,66 @@
<h2>Heures des Professeurs</h2>
<table class="info-table" id="professorTable">
<thead>
<tr>
<th>Professeur</th>
<th>Nombre d'heures prévus</th>
<th>Nombre d'heures</th>
<th>Statut</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Denis MONNERAT</td>
<td>110h</td>
<td>120h</td>
<td>Permanents</td>
<td>
<button class="action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button>
<button class="action-btn" onclick="openModal('Denis MONNERAT')">Modifier</button>
</td>
</tr>
<tr class="details" id="denis-details">
<td colspan="4">
<strong>Historique des heures :</strong>
<ul>
<li>BUT1 Groupe 1 : 30h</li>
<li>BUT2 Groupe 2 : 40h</li>
<li>BUT3 Groupe 1 : 50h</li>
</ul>
<div class="chart-container">
<canvas id="denisChart"></canvas>
</div>
</td>
</tr>
<tr>
<td>Maxime MENAULT</td>
<td>100h</td>
<td>90h</td>
<td>Vacataire</td>
<td>
<button class="action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button>
<button class="action-btn" onclick="openModal('Maxime MENAULT')">Modifier</button>
</td>
</tr>
<tr class="details" id="menault-details">
<td colspan="4">
<strong>Historique des heures :</strong>
<ul>
<li>BUT1 Groupe 1 : 45h</li>
<li>BUT2 Groupe 3 : 45h</li>
</ul>
<div class="chart-container">
<canvas id="menaultChart"></canvas>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="info-card">
<div class="section-header">
<h2>Gestion des Offres de Vacation</h2>
</div>
<div class="card">
<button class="w3-button w3-brown" onclick="openVacationModal()">Ajouter une Offre</button>
<table class="w3-table-all" id="vacation-offers-table">
<div class="w3-responsive"> <!-- Conteneur responsive -->
<table class="w3-table w3-bordered w3-striped info-table" id="professorTable">
<thead>
<tr>
<th>Nom de l'Offre</th>
<th>Date</th>
<th>Type</th>
<th>Action</th>
<th>Professeur</th>
<th>Nombre d'heures prévus</th>
<th>Nombre d'heures</th>
<th>Statut</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="vacation-offers">
<!-- Les lignes d'offres de vacation seront ajoutées ici -->
<tbody>
<tr>
<td>Denis MONNERAT</td>
<td>110h</td>
<td>120h</td>
<td>Permanents</td>
<td>
<button class="w3-button w3-brown action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button>
<button class="w3-button w3-blue action-btn" onclick="openModal('Denis MONNERAT')">Modifier</button>
</td>
</tr>
<tr class="details" id="denis-details">
<td colspan="4">
<strong>Historique des heures :</strong>
<ul>
<li><strong>BUT1 Groupe 1 :</strong> 30h<br> <strong>Matières : </strong>SCR / Mathématiques / DEV<br></li><br>
<li><strong>BUT2 Groupe 2 :</strong> 40h<br> <strong>Matières : </strong>SCR / Mathématiques<br></li><br>
<li><strong>BUT3 Groupe 1 :</strong> 50h<br> <strong>Matières : </strong>SCR / Mathématiques<br></li>
</ul>
<div class="chart-container">
<canvas id="denisChart"></canvas>
</div>
</td>
</tr>
<tr>
<td>Maxime MENAULT</td>
<td>100h</td>
<td>90h</td>
<td>Vacataire</td>
<td>
<button class="w3-button w3-brown action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button>
<button class="w3-button w3-blue action-btn" onclick="openModal('Maxime MENAULT')">Modifier</button>
</td>
</tr>
<tr class="details" id="menault-details">
<td colspan="4">
<strong>Historique des heures :</strong>
<ul>
<li><strong>BUT1 Groupe 1 :</strong> 45h<br> <strong>Matières : </strong>SCR<br></li><br>
<li><strong>BUT2 Groupe 3 :</strong> 45h<br> <strong>Matières : </strong>SCR<br></li>
</ul>
<div class="chart-container">
<canvas id="menaultChart"></canvas>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div></div>
<!-- Graphique Principal -->
@ -276,31 +287,42 @@
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<h2>Ajouter des heures</h2>
<p id="professorName"></p>
<div id="myModal" class="modal w3-modal">
<div class="modal-content w3-card-4">
<span class="close w3-button w3-display-topright" onclick="closeModal()">&times;</span>
<h2 class="w3-text-brown">Ajouter des heures</h2>
<p id="professorName" class="w3-text-grey"></p>
<label for="hours">Type de cours :</label>
<input type="text" id="hours" placeholder="Ex: CM"><br><br>
<label class="w3-text-brown"><b>Type de cours :</b></label>
<div class="w3-margin-bottom">
<input type="checkbox" id="cm" name="courseType" value="CM" class="w3-check">
<label for="cm">CM</label>
<input type="checkbox" id="td" name="courseType" value="TD" class="w3-check">
<label for="td">TD</label>
<input type="checkbox" id="tp" name="courseType" value="TP" class="w3-check">
<label for="tp">TP</label>
<input type="checkbox" id="suivi" name="courseType" value="SUIVI" class="w3-check">
<label for="suivi">SUIVI</label>
</div>
<label for="startTime">Heure de début :</label>
<input type="time" id="startTime"><br><br>
<label for="hours" class="w3-text-brown"><b>Nombre d'heures :</b></label>
<input type="number" id="hours" name="hours" class="w3-input w3-border" placeholder="Ex: 1.5" step="0.5" min="0" required><br>
<label for="endTime">Heure de fin :</label>
<input type="time" id="endTime"><br><br>
<label for="subject">Choisissez une formation :</label>
<select id="subject" name="subject">
<label for="subject" class="w3-text-brown"><b>Choisissez une formation :</b></label>
<select id="subject" name="subject" class="w3-select w3-border" required>
<option value="" disabled selected>Sélectionnez une formation</option>
<option value="but1fi">BUT1 Informatique FI</option>
<option value="but2fi">BUT2 Informatique FI</option>
<option value="but2fa">BUT2 Informatique FA</option>
</select>
<br><br>
<label for="matiere">Choisissez une matière :</label>
<select id="matiere" name="matiere">
<label for="matiere" class="w3-text-brown"><b>Choisissez une matière :</b></label>
<select id="matiere" name="matiere" class="w3-select w3-border" required>
<option value="" disabled selected>Sélectionnez une matière</option>
<option value="SCR">SCR</option>
<option value="Mathématiques">Mathématiques</option>
<option value="DEV">DEV</option>
@ -311,58 +333,22 @@
</select>
<br><br>
<button class="action-btn" onclick="addHours()">Ajouter</button>
<button class="w3-button w3-brown" onclick="addHours()">Ajouter</button>
</div>
</div>
<div id="vacationModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeVacationModal()">&times;</span>
<h2 id="modal-title">Ajouter une Offre de Vacation</h2>
<label for="offerName">Nom de l'Offre :</label>
<input type="text" id="offerName" placeholder="Ex: Cours de Maths"><br><br>
<label for="offerDescription">Description :</label>
<textarea id="offerDescription" placeholder="Décrivez l'offre ici..." rows="3"></textarea><br><br>
<label for="offerDate">Date :</label>
<input type="date" id="offerDate"><br><br>
<label for="offerHours">Heures :</label>
<input type="number" id="offerHours" placeholder="Ex: 3" min="1"><br><br>
<label>Type :</label><br>
<input type="checkbox" id="cm" name="offerType" value="CM">
<label for="cm">CM</label><br>
<input type="checkbox" id="td" name="offerType" value="TD">
<label for="td">TD</label><br>
<input type="checkbox" id="tp" name="offerType" value="TP">
<label for="tp">TP</label><br>
<input type="checkbox" id="suivi" name="offerType" value="Suivi">
<label for="suivi">Suivi</label><br><br>
<button class="action-btn" onclick="addVacationOffer()">Ajouter</button>
<button class="action-btn" id="update-btn" onclick="updateVacationOffer()" style="display:none;">Modifier</button>
</div>
</div>
<div id="confirmModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeConfirmModal()">&times;</span>
<h2>Confirmation</h2>
<h2 class="w3-text-green"><strong>Confirmation</strong></h2>
<p>La demande de modification d'heures a été envoyée au service RH avec succès.</p>
</div>
</div>
<!-- Pop-up pour modifier les heures -->
<!-- Pop-up pour modifier les heures -->
<div class="popup2" id="popup-form">
<h3>Modifier les heures</h3>
<form id="form-popup">
@ -721,6 +707,17 @@ function deleteVacationOffer(button) {
}
</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>

85
MaquetteWEB/html/CHEF/mes-informations.html

@ -305,34 +305,65 @@
</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 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>
<div class="user-section">
<!-- 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">
<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">
<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>
@ -577,6 +608,16 @@
}
</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>

181
MaquetteWEB/html/CHEF/notifications.html Normal file

@ -0,0 +1,181 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notifications</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
<style>
/* Ajout d'un style pour le conteneur des notifications */
#notifications-container {
border: 1px solid #ccc; /* Bordure autour du conteneur */
border-radius: 8px; /* Coins arrondis */
padding: 16px; /* Espacement intérieur */
margin-top: 16px; /* Espacement supérieur */
max-height: 300px; /* Hauteur maximale */
overflow-y: auto; /* Ajout de défilement si le contenu dépasse */
background-color: #f9f9f9; /* Couleur de fond */
}
/* Amélioration de l'apparence des notifications */
.alert, .success {
margin: 8px 0; /* Marge entre les notifications */
}
</style>
</head>
<body class="w3-light-grey">
<!-- Header -->
<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>
<!-- Alertes et Notifications -->
<div class="w3-container w3-white w3-card-4 w3-margin-bottom">
<h2 class="w3-text-dark-gray">Alertes et Notifications</h2>
<div id="notifications-container">
<!-- Notifications -->
<div class="w3-panel w3-red alert">
<span class="w3-closebtn close" onclick="removeNotification(this);">&times;</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="w3-panel w3-green success">
<span class="w3-closebtn close" onclick="removeNotification(this);">&times;</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>
<!-- Bouton pour tout effacer -->
<button id="clear-notifications" class="w3-button w3-dark-grey w3-margin-top w3-margin-bottom" onclick="clearAllNotifications();">Tout effacer</button>
<!-- Message quand aucune notification n'est présente -->
<div id="no-notifications-message" class="w3-hide w3-padding-16 w3-text-gray">
<p>Vous n'avez pas de notifications pour le moment !</p>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="w3-center w3-padding w3-text-white footer" style="background-color: #5e3a19;">
<p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</footer>
<script>
function removeNotification(element) {
// Supprime la notification
const notification = element.parentElement;
notification.style.display = 'none';
// Vérifier s'il reste des notifications
checkNotifications();
}
function clearAllNotifications() {
const notifications = document.getElementById('notifications-container');
let hasNotifications = false;
// Cacher toutes les notifications
Array.from(notifications.children).forEach(notification => {
if (notification.style.display !== 'none') {
notification.style.display = 'none';
hasNotifications = true; // Au moins une notification a été cachée
}
});
// Vérifier s'il reste des notifications
if (hasNotifications) {
checkNotifications(); // Vérifie les notifications restantes
}
}
function checkNotifications() {
const notifications = document.getElementById('notifications-container');
const noNotificationsMessage = document.getElementById('no-notifications-message');
const visibleNotifications = Array.from(notifications.children).some(notification => notification.style.display !== 'none');
if (!visibleNotifications) {
noNotificationsMessage.classList.remove('w3-hide');
document.getElementById('clear-notifications').style.display = 'none'; // Cacher le bouton "Tout effacer"
} else {
noNotificationsMessage.classList.add('w3-hide');
document.getElementById('clear-notifications').style.display = 'block'; // Montrer le bouton "Tout effacer"
}
}
</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>

282
MaquetteWEB/html/CHEF/paiement.html Normal file

@ -0,0 +1,282 @@
<!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()">
<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 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>

296
MaquetteWEB/html/CHEF/paiements.html

@ -1,296 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pilotage Budgétaire</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
<style>
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.section {
flex: 1;
min-width: 300px;
margin: 20px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.section h2 {
text-align: center;
color: #333;
}
canvas {
max-width: 100%;
height: 300px;
}
table {
width: 100%;
border-collapse: collapse;
}
table th, table td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
table th {
background-color: #f2f2f2;
}
.filters {
margin-bottom: 20px;
}
.filters select {
padding: 8px;
font-size: 16px;
margin-right: 10px;
}
.filters input {
padding: 8px;
font-size: 16px;
}
.button-container {
margin: 20px 0;
text-align: center;
}
.button-container button {
padding: 10px 20px;
font-size: 16px;
margin: 0 10px;
cursor: pointer;
}
</style>
</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>
<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="container">
<!-- Résumé des finances globales -->
<div class="section">
<h2>Résumé des Finances</h2>
<canvas id="budgetOverview"></canvas>
</div>
<!-- Répartition des heures -->
<div class="section">
<h2>Répartition des Heures</h2>
<canvas id="hoursDistribution"></canvas>
</div>
<!-- Bilan des formations -->
<div class="section">
<h2>Bilan des dépenses mensuels</h2>
<canvas id="formationBalance"></canvas>
</div>
<!-- Bilan comptable détaillé -->
<div class="section">
<h2>Bilan Comptable</h2>
<table>
<thead>
<tr>
<th>Formation</th>
<th>Budget Alloué</th>
<th>Budget Utilisé</th>
<th>Bénéfices</th>
</tr>
</thead>
<tbody>
<tr>
<td>BUT Informatique</td>
<td>500 000 €</td>
<td>420 000 €</td>
<td>80 000 €</td>
</tr>
<tr>
<td>BUT Génie Mécanique</td>
<td>600 000 €</td>
<td>580 000 €</td>
<td>20 000 €</td>
</tr>
<tr>
<td>Licence Mathématiques</td>
<td>300 000 €</td>
<td>250 000 €</td>
<td>50 000 €</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Button Container -->
<div class="button-container">
<button id="downloadCharts">Télécharger les Graphiques</button>
<button id="downloadCSV">Télécharger en CSV</button>
<button id="importCSV">Importer des données CSV</button>
</div>
<!-- Script Chart.js pour les graphiques -->
<script>
// Résumé des finances globales
const ctx1 = document.getElementById('budgetOverview').getContext('2d');
const budgetOverview = new Chart(ctx1, {
type: 'bar',
data: {
labels: ['Informatique', 'Génie Mécanique', 'Mathématiques', 'Chimie'],
datasets: [{
label: 'Budget Alloué (€)',
data: [500000, 600000, 300000, 450000],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}, {
label: 'Budget Utilisé (€)',
data: [420000, 580000, 250000, 430000],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Répartition des heures
const ctx2 = document.getElementById('hoursDistribution').getContext('2d');
const hoursDistribution = new Chart(ctx2, {
type: 'pie',
data: {
labels: ['Permanents', 'Heures Complémentaires', 'Vacataires'],
datasets: [{
label: 'Heures de travail',
data: [60, 25, 15],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)'
],
borderColor: [
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true
}
});
// Bilan des formations
const ctx3 = document.getElementById('formationBalance').getContext('2d');
const formationBalance = new Chart(ctx3, {
type: 'line',
data: {
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
datasets: [{
label: 'BUT Informatique',
data: [70000, 90000, 80000, 85000, 90000, 95000],
borderColor: 'rgba(75, 192, 192, 1)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
fill: true
}, {
label: 'BUT Génie Mécanique',
data: [80000, 82000, 81000, 78000, 84000, 86000],
borderColor: 'rgba(153, 102, 255, 1)',
backgroundColor: 'rgba(153, 102, 255, 0.2)',
fill: true
}]
},
options: {
responsive: true,
scales: {
y: {
beginAtZero: true
}
}
}
});
// Function to download charts as images
document.getElementById('downloadCharts').addEventListener('click', function () {
const chartIds = ['budgetOverview', 'hoursDistribution', 'formationBalance'];
chartIds.forEach(id => {
const chart = document.getElementById(id);
const link = document.createElement('a');
link.href = chart.toDataURL('image/png');
link.download = `${id}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
});
// Function to download table data as CSV
document.getElementById('downloadCSV').addEventListener('click', function () {
const table = document.querySelector('table');
const rows = Array.from(table.rows);
const csvContent = rows.map(row => Array.from(row.cells).map(cell => cell.textContent).join(",")).join("\n");
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'bilan_comptable.csv';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
</script>
</body>
</html>

276
MaquetteWEB/html/CHEF/settings.html Normal file

@ -0,0 +1,276 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paramètres Utilisateur</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
<style>
.header {
background-color: #5e3a19; /* Couleur par défaut */
color: white;
}
footer {
background-color: #5e3a19; /* Couleur par défaut */
color: white;
}
.logo-container img {
width: 200px;
height: 50px;
}
.categories a {
font-weight: bold;
}
.btn {
background-color: #5e3a19;
}
.btn:hover {
background-color: #412811;
}
/* Style par défaut */
body {
font-family: Arial, sans-serif;
}
/* Mode Daltonien et autres troubles visuels */
body.daltonien {
background-color: #e8f4ff; /* Meilleure visibilité pour le texte */
color: #2c2c2c;
}
.header {
background-color: #5e3a19; /* Couleur par défaut */
}
body.daltonien .header {
background-color: #3b3a3a; /* Couleur plus neutre */
}
/* Couleur du footer en mode daltonien */
body.daltonien #footer {
background-color: #3b3a3a; /* Couleur plus neutre */
}
.daltonien .btn {
background-color: #31302d; /* Couleur facilement visible */
}
.daltonien .btn:hover {
background-color: #242321;
}
/* Grossissement des textes */
body.large-text {
font-size: 1.2em;
}
body.xlarge-text {
font-size: 1.5em;
}
</style>
</head>
<body class="w3-light-grey" id="main-body">
<!-- Header -->
<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>
<!-- Paramètres de l'utilisateur -->
<div class="w3-content w3-padding-16">
<div class="w3-container w3-white w3-card-4 w3-padding-large">
<h2 class="w3-text-dark-gray">Paramètres de communication et d'accessibilité</h2>
<form class="w3-container w3-padding-16">
<!-- Notifications par Email -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Notifications par Email</b></label>
<p>Recevez des notifications par e-mail concernant les heures, paiements, et plus.</p>
<input class="w3-check" type="checkbox" id="email-notifications" checked>
<label for="email-notifications">Activer les notifications par email</label>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Notifications par SMS -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Notifications par SMS</b></label>
<p>Recevez des notifications par SMS sur votre téléphone mobile.</p>
<input class="w3-check" type="checkbox" id="sms-notifications">
<label for="sms-notifications">Activer les notifications par SMS</label>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Préférences de Langue -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Langue de Communication</b></label>
<select class="w3-select" name="language" id="language">
<option value="fr" selected>Français</option>
<option value="en">Anglais</option>
</select>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Fréquence de réception des emails -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Fréquence des emails de notification</b></label>
<select class="w3-select" name="email-frequency" id="email-frequency">
<option value="instant">Immédiatement</option>
<option value="daily">Quotidiennement</option>
<option value="weekly" selected>Hebdomadairement</option>
</select>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Mode Daltonien -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Mode Daltonien</b></label>
<p>Améliore les contrastes et les couleurs pour mieux correspondre aux besoins des personnes atteintes de troubles visuels.</p>
<input class="w3-check" type="checkbox" id="daltonien-mode" onchange="toggleDaltonienMode()">
<label for="daltonien-mode">Activer le mode Daltonien</label>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Changer la police -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Changer la police</b></label>
<select class="w3-select" name="font" id="font" onchange="changeFont()">
<option value="Arial" selected>Arial</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Tahoma">Tahoma</option>
</select>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Grossir le texte -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Agrandir le texte</b></label>
<select class="w3-select" name="text-size" id="text-size" onchange="changeTextSize()">
<option value="normal" selected>Normal</option>
<option value="large">Grand</option>
<option value="xlarge">Très Grand</option>
</select>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Sauvegarder les modifications -->
<button type="submit" class="w3-button w3-round w3-margin-top btn w3-text-white" style="background-color: #5e3a19;">Sauvegarder les modifications</button>
</form>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="w3-center w3-padding w3-text-white footer">
<p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</footer>
<!-- Script pour changer la police et la taille du texte -->
<script>
function toggleDaltonienMode() {
const body = document.getElementById('main-body');
const daltonienMode = document.getElementById('daltonien-mode').checked;
if (daltonienMode) {
body.classList.add('daltonien');
} else {
body.classList.remove('daltonien');
}
}
function changeFont() {
const selectedFont = document.getElementById('font').value;
document.body.style.fontFamily = selectedFont;
}
function changeTextSize() {
const textSize = document.getElementById('text-size').value;
document.body.classList.remove('large-text', 'xlarge-text');
if (textSize === 'large') {
document.body.classList.add('large-text');
} else if (textSize === 'xlarge') {
document.body.classList.add('xlarge-text');
}
}
</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>

63
MaquetteWEB/html/CHEF/test.html Normal file

@ -0,0 +1,63 @@
<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>

241
MaquetteWEB/html/CHEF/vacataire.html Normal file

@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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" />
<title>Gestion des offres de vacation</title>
</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="w3-container">
<div class="w3-row">
<div class="w3-col l10 m12 s12"> <!-- Pour large, medium et small devices -->
<h2>Gestion des offres de vacation</h2>
</div>
</div>
<!-- Barre de recherche -->
<div class="w3-margin-bottom">
<input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()" class="w3-input w3-border">
</div>
<!-- Conteneur de tri -->
<div class="w3-margin-bottom w3-row">
<!-- Boutons empilés sur les petits écrans -->
<div class="w3-col l2 m6 s12 w3-margin-bottom" style="padding-right: 8px;">
<button class="w3-button w3-green w3-block w3-small" style="padding: 5px;" onclick="sortTable(0)">Trier par date de publication</button>
</div>
<div class="w3-col l2 m6 s12 w3-margin-bottom">
<button class="w3-button w3-blue w3-block w3-small" style="padding: 5px;" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
</div>
</div>
<!-- Tableau responsive -->
<div class="w3-responsive w3-margin-bottom">
<table class="w3-table w3-bordered w3-white">
<thead>
<tr>
<th>Formation</th>
<th>Durée</th>
<th>Date de publication</th>
<th>Action</th>
</tr>
</thead>
<tbody id="candidatures-table">
<tr>
<td>Informatique - BUT1</td>
<td>1 semestre (120h)</td>
<td>23/02/2023</td>
<td>
<button class="w3-button w3-green" onclick="editOffer(this)">Modifier</button>
<button class="w3-button w3-red" onclick="deleteOffer(this)">Supprimer</button>
</td>
</tr>
<tr>
<td>Mathématiques - BUT GEA</td>
<td>2 semestre (180h)</td>
<td>12/02/2023</td>
<td>
<button class="w3-button w3-green" onclick="editOffer(this)">Modifier</button>
<button class="w3-button w3-red" onclick="deleteOffer(this)">Supprimer</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal pour ajouter une offre de vacation -->
<div id="vacationModal" class="w3-modal">
<div class="w3-modal-content">
<span class="w3-button w3-display-topright" onclick="closeVacationModal()">&times;</span>
<div class="w3-container">
<h2>Ajouter une Offre de Vacation</h2>
<form id="vacation-form">
<label for="diplome">Formation :</label>
<input type="text" id="diplome" name="diplome" required class="w3-input w3-border">
<label for="diplomee">Diplôme requis :</label>
<input type="text" id="diplomee" name="diplomee" required class="w3-input w3-border">
<label for="description">Description :</label>
<textarea id="description" name="description" rows="4" required class="w3-input w3-border"></textarea>
<label for="duree">Durée (en jours) :</label>
<input type="number" id="duree" name="duree" min="1" required class="w3-input w3-border">
<button type="submit" class="w3-button w3-green w3-margin-top w3-margin-bottom">Soumettre l'Offre</button>
</form>
</div>
</div>
</div>
<div class="w3-container w3-center w3-padding-16 w3-text-white" style="background-color: #5e3a19;">
<p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html" class="w3-text-white">Mentions légales</a>
</p>
</div>
<script>
// Fonction pour modifier une offre
function editOffer(button) {
// Récupérer la ligne de l'offre
var row = button.closest("tr");
// Récupérer les informations de l'offre
var formation = row.cells[0].innerText;
var duree = row.cells[1].innerText;
var datePublication = row.cells[2].innerText;
// Vous pourriez ici remplir le formulaire du modal avec ces données
document.getElementById("diplome").value = formation; // Remplacer par le bon champ
// Vous devriez aussi gérer la durée et la description
// Ouvrir le modal
openVacationModal();
}
// Fonction pour supprimer une offre
function deleteOffer(button) {
var row = button.closest("tr");
row.parentNode.removeChild(row); // Supprimer la ligne du tableau
}
// Fonction pour ouvrir le modal d'ajout
function openVacationModal() {
document.getElementById("vacationModal").style.display = "block";
}
// Fonction pour fermer le modal d'ajout
function closeVacationModal() {
document.getElementById("vacationModal").style.display = "none";
}
// Événement pour le formulaire d'ajout
document.getElementById("vacation-form").onsubmit = function(event) {
event.preventDefault(); // Empêcher le rechargement de la page
// Récupérer les valeurs du formulaire
var diplome = document.getElementById("diplome").value;
var description = document.getElementById("description").value;
var duree = document.getElementById("duree").value;
// Ajouter la nouvelle ligne au tableau
var table = document.getElementById("candidatures-table");
var newRow = table.insertRow();
newRow.innerHTML = `<td>${diplome}</td>
<td>${duree} jours</td>
<td>${new Date().toLocaleDateString()}</td>
<td>
<button class="w3-button w3-green" onclick="editOffer(this)">Modifier</button>
<button class="w3-button w3-red" onclick="deleteOffer(this)">Supprimer</button>
</td>`;
// Fermer le modal après l'ajout
closeVacationModal();
};
</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>

12
MaquetteWEB/html/FINANCE/budget.html

@ -133,7 +133,7 @@
<tbody id="budgetTableBody">
<tr>
<td>Informatique</td>
<td>Licence Informatique</td>
<td>BUT Informatique</td>
<td>50 000</td>
<td>30 000</td>
<td>20 000</td>
@ -142,7 +142,7 @@
<div class="progress" style="width: 60%; background-color: #4caf50;">60%</div>
</div>
</td>
<td><button class="w3-button w3-blue" onclick="showDetails('Licence Informatique')">Voir Détails</button></td>
<td><button class="w3-button w3-blue" onclick="showDetails('BUT Informatique')">Voir Détails</button></td>
</tr>
<tr>
<td>GEA</td>
@ -205,13 +205,13 @@
<tbody id="budgetRequestTableBody">
<tr>
<td>Informatique</td>
<td>Licence Informatique</td>
<td>BUT Informatique</td>
<td>10 000</td>
<td>En attente</td>
<td class="request-buttons">
<button class="w3-button w3-green" onclick="handleRequest('Licence Informatique', 'accept')">Accepter</button>
<button class="w3-button w3-red" onclick="handleRequest('Licence Informatique', 'reject')">Refuser</button>
<button class="w3-button w3-orange" onclick="handleRequest('Licence Informatique', 'counter')">Contre-proposition</button>
<button class="w3-button w3-green" onclick="handleRequest('BUT Informatique', 'accept')">Accepter</button>
<button class="w3-button w3-red" onclick="handleRequest('BUT Informatique', 'reject')">Refuser</button>
<button class="w3-button w3-orange" onclick="handleRequest('BUT Informatique', 'counter')">Contre-proposition</button>
</td>
</tr>
<tr>