diff --git a/MaquetteWEB/css/CHEF/chef_departement2.css b/MaquetteWEB/css/CHEF/chef_departement2.css
index 5ccbc99..a4e692c 100644
--- a/MaquetteWEB/css/CHEF/chef_departement2.css
+++ b/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;
diff --git a/MaquetteWEB/html/CHEF/budget.html b/MaquetteWEB/html/CHEF/budget.html
new file mode 100644
index 0000000..96bab0d
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/budget.html
@@ -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>© 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>
diff --git a/MaquetteWEB/html/CHEF/chef_departement.html b/MaquetteWEB/html/CHEF/chef_departement.html
index 7299e9b..05d048c 100644
--- a/MaquetteWEB/html/CHEF/chef_departement.html
+++ b/MaquetteWEB/html/CHEF/chef_departement.html
@@ -12,34 +12,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>
@@ -57,115 +88,125 @@
<!-- Notifications -->
<div class="alert">
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
- <p><strong>Correction d'heures en attente :</strong> Vous avez des demandes de correction d'heures à traiter. Merci de le faire au plus vite dans : <a href="mes-heures.html">Gestion des heures</a>.</p>
+ <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="success">
<span class="close" onclick="this.parentElement.style.display='none';">×</span>
- <p><strong>Rapport mensuel :</strong> Le rapport mensuel des heures d'enseignement est disponible. <a href="#">Cliquez ici pour le télécharger</a>.</p>
+ <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>
- <!-- Suivi des Heures d'enseignement -->
- <div class="section-header">
- <h2>Suivi des Heures d'Enseignement</h2>
- </div>
- <div class="card">
- <table class="w3-table-all" id="teaching-hours-table">
- <thead>
- <tr>
- <th class="sortable" onclick="sortTable(0)">Nom de l'enseignant <span class="arrow">▲</span><span class="arrow up">▼</span></th>
- <th class="sortable" onclick="sortTable(1)">Période <span class="arrow">▲</span><span class="arrow up">▼</span></th>
- <th class="sortable" onclick="sortTable(2)">Contrat <span class="arrow">▲</span><span class="arrow up">▼</span></th>
- <th class="sortable" onclick="sortTable(3)">Type d'heure <span class="arrow">▲</span><span class="arrow up">▼</span></th>
- <th class="sortable" onclick="sortTable(4)">Heures déclarées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
- <th class="sortable" onclick="sortTable(5)">Heures validées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
- <th class="sortable" onclick="sortTable(6)">Statut <span class="arrow">▲</span><span class="arrow up">▼</span></th>
- <th>Action</th>
- </tr>
- </thead>
- <tbody id="teaching-hours">
- <tr>
- <td>Denis MONNERAT</td>
- <td>Novembre 2024</td>
- <td>CDI</td>
- <td>CM</td>
- <td>25</td>
- <td>23</td>
- <td class="status-incorrect">Correction demandée</td>
- <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
- </tr>
- <tr>
- <td>Maxime MENAULT</td>
- <td>Décembre 2024</td>
- <td>Vacation</td>
- <td>TD</td>
- <td>20</td>
- <td>20</td>
- <td class="status-correct">Validé</td>
- <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
- </tr>
- <tr>
- <td>Fréderic GERVAIS</td>
- <td>Décembre 2024</td>
- <td>CDI</td>
- <td>TP</td>
- <td>15</td>
- <td>15</td>
- <td class="status-correct">Validé</td>
- <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
- </tr>
- </tbody>
- </table>
-
- <!-- Bouton pour voir plus d'informations -->
- <div style="text-align: center; margin-top: 20px;">
- <a href="./gestion-heures-professeur.html" class="w3-button w3-brown">Voir plus d'heures</a>
- </div>
- </div>
+<!-- Suivi des Heures d'enseignement -->
+<div class="section-header">
+ <h2>Suivi des Heures d'Enseignement</h2>
+</div>
+<div class="card">
+ <div class="w3-responsive"> <!-- Added this div for responsiveness -->
+ <table class="w3-table-all" id="teaching-hours-table">
+ <thead>
+ <tr>
+ <th class="sortable" onclick="sortTable(0)">Nom de l'enseignant <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(1)">Période <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(2)">Contrat <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(3)">Type d'heure <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(4)">Heures déclarées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(5)">Heures validées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(6)">Statut <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody id="teaching-hours">
+ <tr>
+ <td>Denis MONNERAT</td>
+ <td>Novembre 2024</td>
+ <td>CDI</td>
+ <td>CM</td>
+ <td>25</td>
+ <td>23</td>
+ <td class="status-incorrect">Correction demandée</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ <tr>
+ <td>Maxime MENAULT</td>
+ <td>Décembre 2024</td>
+ <td>Vacation</td>
+ <td>TD</td>
+ <td>20</td>
+ <td>20</td>
+ <td class="status-correct">Validé</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ <tr>
+ <td>Fréderic GERVAIS</td>
+ <td>Décembre 2024</td>
+ <td>CDI</td>
+ <td>TP</td>
+ <td>15</td>
+ <td>15</td>
+ <td class="status-correct">Validé</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ </tbody>
+ </table>
+ </div> <!-- End of responsive div -->
+
+ <!-- Bouton pour voir plus d'informations -->
+ <div style="text-align: center; margin-top: 20px;">
+ <a href="./gestion-heures-professeur.html" class="w3-button w3-brown">Voir plus d'heures</a>
+ </div>
+</div>
+
+
+<!-- Pilotage Budgétaire -->
+<div class="section-header">
+ <h2>Pilotage Budgétaire</h2>
+</div>
+<div class="card budget-table">
+ <p>Voici un aperçu du budget disponible et des dépenses.</p>
+ <div class="w3-responsive"> <!-- Added this div for responsiveness -->
+ <table class="w3-table w3-bordered w3-striped w3-white">
+ <thead>
+ <tr class="w3-light-grey">
+ <th>Formation</th>
+ <th>Budget Alloué (€)</th>
+ <th>Dépenses Totales (€)</th>
+ <th>Budget Restant (€)</th>
+ <th>Progression</th>
+ </tr>
+ </thead>
+ <tbody id="budgetTableBody">
+ <tr>
+ <td>BUT Informatique</td>
+ <td>50 000</td>
+ <td>30 000</td>
+ <td>20 000</td>
+ <td>
+ <div class="progress-bar" style="width: 100%; background-color: #f1f1f1;">
+ <div class="progress" style="width: 60%; background-color: #4caf50;">60%</div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Master Informatique</td>
+ <td>80 000</td>
+ <td>60 000</td>
+ <td>20 000</td>
+ <td>
+ <div class="progress-bar" style="width: 100%; background-color: #f1f1f1;">
+ <div class="progress" style="width: 75%; background-color: orange;">75%</div>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div> <!-- End of responsive div -->
+
+ <div style="text-align: center; margin-top: 20px;">
+ <a href="./budget.html" class="w3-button w3-brown">Accéder au Pilotage Budgétaire</a>
+ </div>
+</div>
- <!-- Pilotage Budgétaire -->
- <div class="section-header">
- <h2>Pilotage Budgétaire</h2>
- </div>
- <div class="card budget-table">
- <p>Voici un aperçu du budget disponible et des dépenses. Vous pouvez suivre vos budgets et dépenses ici.</p>
- <table class="w3-table-all">
- <thead>
- <tr>
- <th>Catégorie</th>
- <th>Budget Prévu (€)</th>
- <th>Dépenses Actuelles (€)</th>
- <th>Solde (€)</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Formation</td>
- <td>10,000</td>
- <td>2,500</td>
- <td>7,500</td>
- </tr>
- <tr>
- <td>Matériel</td>
- <td>5,000</td>
- <td>3,000</td>
- <td>2,000</td>
- </tr>
- <tr>
- <td>Salaires</td>
- <td>50,000</td>
- <td>45,000</td>
- <td>5,000</td>
- </tr>
- </tbody>
- </table>
-
- <div style="text-align: center; margin-top: 20px;">
- <a href="./paiements.html" class="w3-button w3-brown">Accéder au Pilotage Budgétaire</a>
- </div>
- </div>
- </div>
<!-- Pop-up pour modifier les heures -->
<div class="popup" id="popup-form">
@@ -329,289 +370,19 @@
});
}
</script>
+
<script>
- function updateSchedule() {
- const scheduleType = document.getElementById('schedule-type').value;
- const scheduleContainer = document.getElementById('schedule-container');
-
- let scheduleHTML = '';
-
- if (scheduleType === 'professeur1') {
- scheduleHTML = `
- <div class="card">
- <div class="week-navigation">
- <button>« Semaine précédente</button>
- <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
- <button>Semaine suivante »</button>
- </div>
- <div class="schedule-container">
- <table class="schedule-table">
- <thead>
- <tr>
- <th>Heures</th>
- <th>Lundi</th>
- <th>Mardi</th>
- <th>Mercredi</th>
- <th>Jeudi</th>
- <th>Vendredi</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="time-slot">08:00 - 08:30</td>
- <td class="no-class"></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
- <td class="class">TD - Mathématiques<br><span>Salle 305</span><br></td>
- <td class="no-class"></td>
- </tr>
- <tr>
- <td class="time-slot">08:30 - 09:00</td>
- <td class="class">TD - BD<br><span>Salle 101</span><br></td>
- <td class="class">CM - Mathématiques<br><span>Salle 202</span><br></td>
- <td class="no-class"></td>
- <td class="class">TD - DEV<br><span>Salle 305</span><br></td>
- <td class="no-class"></td>
- </tr>
- <tr>
- <td class="time-slot">09:00 - 09:30</td>
- <td class="no-class"></td>
- <td class="class">TP - Informatique<br><span>Salle 101</span><br></td>
- <td class="class">CM - Mathématiques<br><span>Salle 202</span><br></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 225</span><br></td>
- </tr>
- <tr>
- <td class="time-slot">09:30 - 10:00</td>
- <td class="class">CM - BD<br><span>Salle 305</span><br></td>
- <td class="no-class"></td>
- <td class="class">TD - Mathématiques<br><span>Salle 101</span><br></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
- </tr>
- <tr>
- <td class="time-slot">10:00 - 10:30</td>
- <td class="no-class"></td>
- <td class="class">TD - DEV<br><span>Salle 305</span><br></td>
- <td class="no-class"></td>
- <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
- <td class="no-class"></td>
- </tr>
- <!-- Add more slots as needed -->
- </tbody>
- </table>
- </div>
- </div>`;
- } else if (scheduleType === 'professeur2') {
- scheduleHTML = `
- <div class="card">
- <div class="week-navigation">
- <button>« Semaine précédente</button>
- <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
- <button>Semaine suivante »</button>
- </div>
- <div class="schedule-container">
- <table class="schedule-table">
- <thead>
- <tr>
- <th>Heures</th>
- <th>Lundi</th>
- <th>Mardi</th>
- <th>Mercredi</th>
- <th>Jeudi</th>
- <th>Vendredi</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="time-slot">08:00 - 08:30</td>
- <td class="class">TP - Mathématiques<br><span>Salle 101</span><br></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
- <td class="no-class"></td>
- <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
- </tr>
- <tr>
- <td class="time-slot">08:30 - 09:00</td>
- <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
- <td class="class">TD - BD<br><span>Salle 305</span><br></td>
- <td class="no-class"></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
- </tr>
- <tr>
- <td class="time-slot">09:00 - 09:30</td>
- <td class="no-class"></td>
- <td class="class">CM - Informatique<br><span>Salle 305</span><br></td>
- <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
- <td class="no-class"></td>
- <td class="class">TP - Mathématiques<br><span>Salle 101</span><br></td>
- </tr>
- <tr>
- <td class="time-slot">09:30 - 10:00</td>
- <td class="class">CM - BD<br><span>Salle 101</span><br></td>
- <td class="no-class"></td>
- <td class="class">TD - Mathématiques<br><span>Salle 202</span><br></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 305</span><br></td>
- </tr>
- <tr>
- <td class="time-slot">10:00 - 10:30</td>
- <td class="no-class"></td>
- <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
- <td class="no-class"></td>
- <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
- <td class="no-class"></td>
- </tr>
- <!-- Add more slots as needed -->
- </tbody>
- </table>
- </div>
- </div>`;
- } else if (scheduleType === 'classe1') {
- scheduleHTML = `
- <div class="card">
- <div class="week-navigation">
- <button>« Semaine précédente</button>
- <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
- <button>Semaine suivante »</button>
- </div>
- <div class="schedule-container">
- <table class="schedule-table">
- <thead>
- <tr>
- <th>Heures</th>
- <th>Lundi</th>
- <th>Mardi</th>
- <th>Mercredi</th>
- <th>Jeudi</th>
- <th>Vendredi</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="time-slot">08:00 - 08:30</td>
- <td class="no-class"></td>
- <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Denis MONNERAT</strong></td>
- <td class="class">TP - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Maxime MENAULT</strong></td>
- </tr>
- <tr>
- <td class="time-slot">08:30 - 09:00</td>
- <td class="class">TD - BD<br><span>Salle 101</span><br><strong>Prof: Alice DURAND</strong></td>
- <td class="no-class"></td>
- <td class="no-class"></td>
- <td class="no-class"></td>
- <td class="class">TD - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
- </tr>
- <tr>
- <td class="time-slot">09:00 - 09:30</td>
- <td class="no-class"></td>
- <td class="class">TP - Informatique<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="class">CM - Mathématiques<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Denis MONNERAT</strong></td>
- </tr>
- <tr>
- <td class="time-slot">09:30 - 10:00</td>
- <td class="class">CM - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
- <td class="no-class"></td>
- <td class="class">TD - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
- </tr>
- <tr>
- <td class="time-slot">10:00 - 10:30</td>
- <td class="no-class"></td>
- <td class="class">TD - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Denis MONNERAT</strong></td>
- <td class="no-class"></td>
- </tr>
- <!-- Add more slots as needed -->
- </tbody>
- </table>
- </div>
- </div>`;
- } else if (scheduleType === 'classe2') {
- scheduleHTML = `
- <div class="card">
- <div class="week-navigation">
- <button>« Semaine précédente</button>
- <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
- <button>Semaine suivante »</button>
- </div>
- <div class="schedule-container">
- <table class="schedule-table">
- <thead>
- <tr>
- <th>Heures</th>
- <th>Lundi</th>
- <th>Mardi</th>
- <th>Mercredi</th>
- <th>Jeudi</th>
- <th>Vendredi</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td class="time-slot">08:00 - 08:30</td>
- <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
- <td class="class">CM - SCR<br><span>Salle 224</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="class">TD - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Denis MONNERAT</strong></td>
- </tr>
- <tr>
- <td class="time-slot">08:30 - 09:00</td>
- <td class="no-class"></td>
- <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">TD - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
- <td class="no-class"></td>
- </tr>
- <tr>
- <td class="time-slot">09:00 - 09:30</td>
- <td class="class">TD - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">TP - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
- </tr>
- <tr>
- <td class="time-slot">09:30 - 10:00</td>
- <td class="no-class"></td>
- <td class="class">CM - Informatique<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">TD - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- </tr>
- <tr>
- <td class="time-slot">10:00 - 10:30</td>
- <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
- <td class="no-class"></td>
- <td class="class">TD - DEV<br><span>Salle 225</span><br><strong>Prof: Maxime MENAULT</strong></td>
- <td class="no-class"></td>
- <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
- </tr>
- <!-- Add more slots as needed -->
- </tbody>
- </table>
- </div>
- </div>`;
+ 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", "");
}
-
- // Inject the schedule into the container
- scheduleContainer.innerHTML = scheduleHTML;
}
-
- // Initial call to display the default schedule
- updateSchedule();
</script>
-
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/MaquetteWEB/html/CHEF/gestion-edt.html b/MaquetteWEB/html/CHEF/gestion-edt.html
index 2a1dfaa..d09e38a 100644
--- a/MaquetteWEB/html/CHEF/gestion-edt.html
+++ b/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>
diff --git a/MaquetteWEB/html/CHEF/gestion-heures-formation.html b/MaquetteWEB/html/CHEF/gestion-heures-formation.html
index 7ec3e18..0e4add0 100644
--- a/MaquetteWEB/html/CHEF/gestion-heures-formation.html
+++ b/MaquetteWEB/html/CHEF/gestion-heures-formation.html
@@ -58,38 +58,78 @@
max-width: 1200px; /* Largeur max du graphique */
height: 400px; /* Hauteur du graphique */
}
+
+ #totalHoursChart{
+ position: relative;
+ margin: 20px 0;
+ width: 50%;
+ max-width: 1200px; /* Largeur max du graphique */
+ height: 400px; /* Hauteur du graphique */
+ }
</style>
</head>
<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>
@@ -97,21 +137,23 @@
<div class="container">
- <input type="text" id="searchBar" class="search-bar" placeholder="Rechercher une formation..." onkeyup="searchFormation()">
+ <input type="text" id="searchBar" class="search-bar" placeholder="Rechercher une formation...">
<div class="info-card">
- <h2>Détails des Formations</h2>
+ <h2>Détails des formations</h2>
<table class="info-table" id="formationTable">
<thead>
<tr>
<th>Formation</th>
- <th>Nombre total d'heures</th>
+ <th>Nombre d'heures effectuées</th>
+ <th>Objectifs d'heures</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>BUT1 Informatique</td>
+ <td>75h</td>
<td>400h</td>
<td>
<button class="action-btn" onclick="toggleDetails(this, 'but1-details')">Voir</button>
@@ -120,20 +162,74 @@
</tr>
<tr class="details" id="but1-details">
<td colspan="3">
- <strong>Détails des heures :</strong>
+ <h2><strong>Détails des heures du semestre 1 :</strong></h2>
+
+ <!-- Tableau des heures par enseignant et par groupe -->
+ <h3>Tableau des heures effectués</h3>
+ <table class="info-table">
+ <thead>
+ <tr>
+ <th>Enseignant</th>
+ <th>Matière</th>
+ <th>Nombre d'heures</th>
+ <th>Types d'heures</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Maxime MENAULT</td>
+ <td>SCR</td>
+ <td>30h</td>
+ <td>TP</td>
+ </tr>
+ <tr>
+ <td>Denis MONNERAT</td>
+ <td>Mathématiques</td>
+ <td>45h</td>
+ <td>CM/TD</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- Activités par Semaine -->
+ <h3>Activités par Semaine</h3>
+ <table class="info-table">
+ <thead>
+ <tr>
+ <th>Semaine</th>
+ <th>Activités</th>
+ <th>Heures</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Semaine 1</td>
+ <td>Introduction à la SCR</td>
+ <td>5h</td>
+ </tr>
+ <tr>
+ <td>Semaine 2</td>
+ <td>Mathématiques discrète / Python</td>
+ <td>10h</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- Statistiques Complémentaires -->
+ <h3>Statistiques Complémentaires</h3>
<ul>
- <li>Maxime MENAULT - Groupe 1 : 30h</li>
- <li>Denis MONNERAT - Groupe 2 : 45h</li>
- <li>Période : Semestre 1</li>
+ <li><strong>Pourcentage d'Heures :<br></strong> Maxime MENAULT : 40%<br> Denis MONNERAT : 60%</li>
</ul>
- <!-- Graphique pour BUT1 Informatique -->
+
<div class="chart-container">
<canvas id="but1Chart"></canvas>
</div>
</td>
</tr>
+
<tr>
<td>BUT2 Informatique FA</td>
+ <td>140h</td>
<td>600h</td>
<td>
<button class="action-btn" onclick="toggleDetails(this, 'master-details')">Voir</button>
@@ -142,73 +238,127 @@
</tr>
<tr class="details" id="master-details">
<td colspan="3">
- <strong>Détails des heures :</strong>
+ <h2><strong>Détails des heures du semestre 1 :</strong></h2>
+
+ <!-- Tableau des heures effectués -->
+ <h3>Tableau des heures effectuées</h3>
+ <table class="info-table">
+ <thead>
+ <tr>
+ <th>Enseignant</th>
+ <th>Matière</th>
+ <th>Nombre d'heures</th>
+ <th>Types d'heures</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Maxime MENAULT</td>
+ <td>SCR</td>
+ <td>50h</td>
+ <td>TP</td>
+ </tr>
+ <tr>
+ <td>Denis MONNERAT</td>
+ <td>Mathématiques</td>
+ <td>90h</td>
+ <td>CM/TD</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- Activités par Semaine -->
+ <h3>Activités par Semaine</h3>
+ <table class="info-table">
+ <thead>
+ <tr>
+ <th>Semaine</th>
+ <th>Activités</th>
+ <th>Heures</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Semaine 1</td>
+ <td>Introduction à la communication / SCR</td>
+ <td>5h</td>
+ </tr>
+ <tr>
+ <td>Semaine 2</td>
+ <td>Mathématiques discrètes / Java / BD</td>
+ <td>10h</td>
+ </tr>
+ <!-- Ajoutez d'autres semaines si nécessaire -->
+ </tbody>
+ </table>
+
+ <!-- Statistiques Complémentaires -->
+ <h3>Statistiques Complémentaires</h3>
<ul>
- <li>Maxime MENAULT - Groupe FA : 50h</li>
- <li>Denis MONNERAT - Groupe FA : 90h</li>
- <li>Période : Semestre 2</li>
+ <li><strong>Pourcentage d'Heures :<br></strong> Maxime MENAULT : 35.71%<br> Denis MONNERAT : 64.29%</li>
</ul>
- <!-- Graphique pour BUT2 Informatique FA -->
+
<div class="chart-container">
<canvas id="masterChart"></canvas>
</div>
</td>
</tr>
+
</tbody>
</table>
</div>
- <canvas id="totalHoursChart"></canvas>
+ <div class="totalHoursChart">
+ <canvas id="totalHoursChart"></canvas>
+ </div>
</div>
<!-- Modal pour ajouter des heures -->
-<div id="myModal" class="modal">
- <div class="modal-content">
- <span class="close" onclick="closeModal()">×</span>
- <h2>Ajouter des heures</h2>
- <form id="addHoursForm">
- <label for="professor">Choisissez un professeur :</label>
- <select id="professor" name="professor">
- <option value="Denis MONNERAT">Denis MONNERAT (Permanent)</option>
- <option value="Maxime MENAULT">Maxime MENAULT (Vacataire)</option>
- </select>
- <br><br>
-
- <label for="subject">Choisissez une matière :</label>
- <select id="subject" name="subject">
- <option value="SCR">SCR</option>
- <option value="Mathématiques">Mathématiques</option>
- <option value="DEV">DEV</option>
- <option value="EGOD">EGOD</option>
- <option value="EC">EC</option>
- <option value="BD">BD</option>
- <option value="Anglais">Anglais</option>
- </select>
- <br><br>
-
- <!-- Nouveau champ pour la date -->
- <label for="date">Date :</label>
- <input type="date" id="date" name="date" required>
- <br><br>
-
- <!-- Nouveau champ pour l'heure -->
- <label for="time">Heure de début :</label>
- <input type="time" id="time" name="time" required>
- <br><br>
+<div id="myModal" class="w3-modal" style="display:block;">
+ <div class="w3-modal-content w3-card-4 w3-animate-top" style="max-width:600px">
+ <header class="w3-container">
+ <span class="w3-button w3-display-topright" onclick="closeModal()">×</span>
+ <h2>Ajouter des heures</h2>
+ </header>
+ <div class="w3-container">
+ <form id="addHoursForm" class="w3-padding-16">
+ <label for="professor" class="w3-text-brown"><b>Choisissez un professeur :</b></label>
+ <select id="professor" name="professor" class="w3-select" required>
+ <option value="" disabled selected>Choisir un professeur</option>
+ <option value="Denis MONNERAT">Denis MONNERAT (Permanent)</option>
+ <option value="Maxime MENAULT">Maxime MENAULT (Vacataire)</option>
+ </select>
+ <br><br>
+
+ <label for="subject" class="w3-text-brown"><b>Choisissez une matière :</b></label>
+ <select id="subject" name="subject" class="w3-select" required>
+ <option value="" disabled selected>Choisir une matière</option>
+ <option value="SCR">SCR</option>
+ <option value="Mathématiques">Mathématiques</option>
+ <option value="DEV">DEV</option>
+ <option value="EGOD">EGOD</option>
+ <option value="EC">EC</option>
+ <option value="BD">BD</option>
+ <option value="Anglais">Anglais</option>
+ </select>
+ <br><br>
+
+ <label for="date" class="w3-text-brown"><b>Date :</b></label>
+ <input type="date" id="date" name="date" class="w3-input w3-border" required>
+ <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><br>
+
+ <label for="classroom" class="w3-text-brown"><b>Salle de classe :</b></label>
+ <input type="text" id="classroom" name="classroom" class="w3-input w3-border" placeholder="Ex: 224" required>
+ <br><br>
- <!-- Nouveau champ pour l'heure -->
- <label for="time">Heure de fin :</label>
- <input type="time" id="time" name="time" required>
- <br><br>
-
- <!-- Nouveau champ pour la salle -->
- <label for="classroom">Salle de classe :</label>
- <input type="text" id="classroom" name="classroom" placeholder="Ex: 224" required>
- <br><br>
-
- <button type="button" onclick="submitHours()">Ajouter</button>
- </form>
+ <button type="button" onclick="submitHours()" class="w3-button w3-brown w3-left w3-margin-bottom">Ajouter</button>
+ </form>
+ </div>
</div>
</div>
@@ -217,9 +367,10 @@
<div id="confirmationModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeConfirmationModal()">×</span>
- <h2>Confirmation</h2>
+ <h2 class="w3-text-green"><strong>Confirmation</strong></h2>
<p>Les heures ont été ajoutées avec succès.</p>
<p>Un e-mail a été envoyé au professeur.</p>
+ <p>Cliquez ici pour ajouter les heures au planning : <a href="https://ade.u-pec.fr/direct/">ADE</a></p>
</div>
</div>
@@ -312,8 +463,8 @@
label: label,
data: data,
backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 99, 132, 1.2)',
+ 'rgba(54, 162, 235, 1.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
@@ -327,46 +478,69 @@
y: {
beginAtZero: true
}
- }
- }
+ },
+ plugins: {
+ legend: {
+ display: false
+ }
+ }}
});
}
// Fonction pour dessiner le graphique général
function drawTotalHoursChart() {
- const ctx = document.getElementById('totalHoursChart').getContext('2d');
- const totalHoursChart = new Chart(ctx, {
- type: 'bar',
- data: {
- labels: ['BUT1 Informatique', 'BUT2 Informatique FA'],
- datasets: [{
- label: 'Total d\'heures',
- data: [400, 600], // Remplacez ces valeurs par le total d'heures pour chaque formation
- backgroundColor: [
- 'rgba(255, 99, 132, 0.2)',
- 'rgba(54, 162, 235, 0.2)',
- ],
- borderColor: [
- 'rgba(255, 99, 132, 1)',
- 'rgba(54, 162, 235, 1)',
- ],
- borderWidth: 1
- }]
- },
- options: {
- scales: {
- y: {
- beginAtZero: true
- }
+ const ctx = document.getElementById('totalHoursChart').getContext('2d');
+ const totalHoursChart = new Chart(ctx, {
+ type: 'bar', // Changement du type de graphique à doughnut
+ data: {
+ labels: ['BUT1 Informatique', 'BUT2 Informatique FA'],
+ datasets: [{
+ label: 'Total d\'heures',
+ data: [400, 600], // Remplacez ces valeurs par le total d'heures pour chaque formation
+ backgroundColor: [
+ 'rgba(255, 99, 132, 1.2)',
+ 'rgba(54, 162, 235, 1.2)',
+ 'rgba(255, 206, 86, 1.2)',
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ plugins: {
+ legend: {
+ display: false
+ },
+ title: {
+ display: true,
+ text: 'Total d\'heures par formation'
}
}
- });
- }
+ }
+ });
+ }
- // Dessiner le graphique général après le chargement de la page
- window.onload = function() {
- drawTotalHoursChart();
- };
+ // Dessiner le graphique général après le chargement de la page
+ window.onload = function() {
+ drawTotalHoursChart();
+ closeModal();
+ };
+ </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>
diff --git a/MaquetteWEB/html/CHEF/gestion-heures-professeur.html b/MaquetteWEB/html/CHEF/gestion-heures-professeur.html
index 7fdc43f..feb9762 100644
--- a/MaquetteWEB/html/CHEF/gestion-heures-professeur.html
+++ b/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">▲</span><span class="arrow up">▼</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()">×</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()">×</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()">×</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()">×</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>
diff --git a/MaquetteWEB/html/CHEF/mes-informations.html b/MaquetteWEB/html/CHEF/mes-informations.html
index 9d1c422..bc90bec 100644
--- a/MaquetteWEB/html/CHEF/mes-informations.html
+++ b/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>
diff --git a/MaquetteWEB/html/CHEF/notifications.html b/MaquetteWEB/html/CHEF/notifications.html
new file mode 100644
index 0000000..652165a
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/notifications.html
@@ -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);">×</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);">×</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>© 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>
diff --git a/MaquetteWEB/html/CHEF/paiement.html b/MaquetteWEB/html/CHEF/paiement.html
new file mode 100644
index 0000000..26beabc
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/paiement.html
@@ -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>
diff --git a/MaquetteWEB/html/CHEF/paiements.html b/MaquetteWEB/html/CHEF/paiements.html
deleted file mode 100644
index 77b06d7..0000000
--- a/MaquetteWEB/html/CHEF/paiements.html
+++ /dev/null
@@ -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>
diff --git a/MaquetteWEB/html/CHEF/settings.html b/MaquetteWEB/html/CHEF/settings.html
new file mode 100644
index 0000000..b904e94
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/settings.html
@@ -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>© 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>
diff --git a/MaquetteWEB/html/CHEF/test.html b/MaquetteWEB/html/CHEF/test.html
new file mode 100644
index 0000000..b5e3082
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/test.html
@@ -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>
\ No newline at end of file
diff --git a/MaquetteWEB/html/CHEF/vacataire.html b/MaquetteWEB/html/CHEF/vacataire.html
new file mode 100644
index 0000000..59fbe78
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/vacataire.html
@@ -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()">×</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>© 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>
diff --git a/MaquetteWEB/html/FINANCE/budget.html b/MaquetteWEB/html/FINANCE/budget.html
index bd39255..c8b692e 100644
--- a/MaquetteWEB/html/FINANCE/budget.html
+++ b/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>