548 lines
24 KiB
HTML
548 lines
24 KiB
HTML
<!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>
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|