374 lines
14 KiB
HTML
374 lines
14 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="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 */
|
||
|
|
}
|
||
|
|
</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>
|
||
|
|
<a href="./gestion-edt.html">EDT</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">
|
||
|
|
|
||
|
|
<input type="text" id="searchBar" class="search-bar" placeholder="Rechercher une formation..." onkeyup="searchFormation()">
|
||
|
|
|
||
|
|
<div class="info-card">
|
||
|
|
<h2>Détails des Formations</h2>
|
||
|
|
<table class="info-table" id="formationTable">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Formation</th>
|
||
|
|
<th>Nombre total d'heures</th>
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>BUT1 Informatique</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">
|
||
|
|
<strong>Détails des heures :</strong>
|
||
|
|
<ul>
|
||
|
|
<li>Maxime MENAULT - Groupe 1 : 30h</li>
|
||
|
|
<li>Denis MONNERAT - Groupe 2 : 45h</li>
|
||
|
|
<li>Période : Semestre 1</li>
|
||
|
|
</ul>
|
||
|
|
<!-- Graphique pour BUT1 Informatique -->
|
||
|
|
<div class="chart-container">
|
||
|
|
<canvas id="but1Chart"></canvas>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>BUT2 Informatique FA</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">
|
||
|
|
<strong>Détails des heures :</strong>
|
||
|
|
<ul>
|
||
|
|
<li>Maxime MENAULT - Groupe FA : 50h</li>
|
||
|
|
<li>Denis MONNERAT - Groupe FA : 90h</li>
|
||
|
|
<li>Période : Semestre 2</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>
|
||
|
|
|
||
|
|
<!-- 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>
|
||
|
|
|
||
|
|
<!-- 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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- Modal de confirmation -->
|
||
|
|
<div id="confirmationModal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close" onclick="closeConfirmationModal()">×</span>
|
||
|
|
<h2>Confirmation</h2>
|
||
|
|
<p>Les heures ont été ajoutées avec succès.</p>
|
||
|
|
<p>Un e-mail a été envoyé au professeur.</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, 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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// 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
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Dessiner le graphique général après le chargement de la page
|
||
|
|
window.onload = function() {
|
||
|
|
drawTotalHoursChart();
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|