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

374 lines
14 KiB
HTML
Raw Normal View History

<!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">
2024-10-18 19:07:09 +02:00
<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 */
}
</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">
<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()">&times;</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()">&times;</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>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
// 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>