<!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>
<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/gestion-heures-formation.css">
<style>
/* Styles pour le modal */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.action-btn {
margin: 5px;
}
.chart-container {
position: relative;
margin: 20px 0;
width: 100%;
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 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">
<input type="text" id="searchBar" class="search-bar" placeholder="Rechercher une formation...">
<div class="info-card">
<h2>Détails des formations</h2>
<div class="w3-responsive">
<table class="info-table" id="formationTable">
<thead>
<tr>
<th>Formation</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>
<button class="action-btn" onclick="openModal('BUT1 Informatique')">Ajouter des heures</button>
</td>
</tr>
<tr class="details" id="but1-details">
<td colspan="3">
<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><strong>Pourcentage d'Heures :<br></strong> Maxime MENAULT : 40%<br> Denis MONNERAT : 60%</li>
</ul>
<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>
<button class="action-btn" onclick="openModal('BUT2 Informatique FA')">Ajouter des heures</button>
</td>
</tr>
<tr class="details" id="master-details">
<td colspan="3">
<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>
</div>
<!-- Statistiques Complémentaires -->
<h3>Statistiques Complémentaires</h3>
<ul>
<li><strong>Pourcentage d'Heures :<br></strong> Maxime MENAULT : 35.71%<br> Denis MONNERAT : 64.29%</li>
</ul>
<div class="chart-container">
<canvas id="masterChart"></canvas>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="totalHoursChart">
<canvas id="totalHoursChart"></canvas>
</div>
</div>
</div>
<!-- Modal pour ajouter des heures -->
<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>
<button type="button" onclick="submitHours()" class="w3-button w3-brown w3-left w3-margin-bottom">Ajouter</button>
</form>
</div>
</div>
</div>
<!-- Modal de confirmation -->
<div id="confirmationModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeConfirmationModal()">×</span>
<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>
<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>
// Fonction pour afficher ou masquer les détails d'une formation et changer le texte du bouton
function toggleDetails(button, detailId) {
const detailsRow = document.getElementById(detailId);
if (detailsRow.style.display === "none" || detailsRow.style.display === "") {
detailsRow.style.display = "table-row";
button.textContent = "Fermer"; // Change le texte du bouton en "Fermer"
// Dessiner le graphique lorsque les détails sont affichés
if (detailId === 'but1-details') {
drawChart('but1Chart', 'BUT1 Informatique', [30, 45], ['Maxime MENAULT', 'Denis MONNERAT']);
} else if (detailId === 'master-details') {
drawChart('masterChart', 'BUT2 Informatique FA', [50, 90], ['Maxime MENAULT', 'Denis MONNERAT']);
}
} else {
detailsRow.style.display = "none";
button.textContent = "Voir"; // Remet le texte du bouton à "Voir"
}
}
// Fonction de recherche des formations
function searchFormation() {
const input = document.getElementById("searchBar").value.toLowerCase();
const table = document.getElementById("formationTable");
const rows = table.getElementsByTagName("tr");
for (let i = 1; i < rows.length; i++) {
const cells = rows[i].getElementsByTagName("td");
if (cells.length > 0) {
const formationName = cells[0].innerText.toLowerCase();
if (formationName.includes(input)) {
rows[i].style.display = "";
} else {
rows[i].style.display = "none";
}
}
}
}
// Fonction pour ouvrir le modal pour ajouter des heures
function openModal(formationName) {
document.getElementById("myModal").style.display = "block";
}
// Fonction pour fermer le modal
function closeModal() {
document.getElementById("myModal").style.display = "none";
document.getElementById("addHoursForm").reset(); // Réinitialiser le formulaire
}
// Fonction pour soumettre les heures ajoutées
function submitHours() {
const professor = document.getElementById("professor").value;
const subject = document.getElementById("subject").value;
const hours = document.getElementById("hours").value;
// Ici, vous pouvez ajouter la logique pour mettre à jour la table des formations
// Exemple : ajouter les heures à la table
// Ouvrir le modal de confirmation
document.getElementById("confirmationModal").style.display = "block";
// Fermer le modal d'ajout d'heures
closeModal();
}
// Fonction pour fermer le modal de confirmation
function closeConfirmationModal() {
document.getElementById("confirmationModal").style.display = "none";
}
// Fonction pour dessiner le graphique
function drawChart(chartId, label, data, labels) {
const ctx = document.getElementById(chartId).getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: label,
data: data,
backgroundColor: [
'rgba(255, 99, 132, 1.2)',
'rgba(54, 162, 235, 1.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
],
borderWidth: 1
}]
},
options: {
scales: {
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', // 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();
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>
</html>