687 lines
27 KiB
HTML
687 lines
27 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/RH/style.css">
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
|
|
<style>
|
||
|
|
.chart-container {
|
||
|
|
position: relative;
|
||
|
|
margin: 20px 0;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 1200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sortable {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.arrow {
|
||
|
|
margin-left: 5px;
|
||
|
|
font-size: 0.8em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.up {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-correct {
|
||
|
|
color: green;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-incorrect {
|
||
|
|
color: orange;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-pending {
|
||
|
|
color: red;
|
||
|
|
}
|
||
|
|
|
||
|
|
.popup2 {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
left: 50%;
|
||
|
|
top: 50%;
|
||
|
|
transform: translate(-50%, -50%);
|
||
|
|
border: 2px solid #ccc;
|
||
|
|
background-color: #fff;
|
||
|
|
padding: 20px;
|
||
|
|
z-index: 10;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||
|
|
}
|
||
|
|
|
||
|
|
.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 */
|
||
|
|
}
|
||
|
|
|
||
|
|
.modal-content {
|
||
|
|
background-color: #fefefe;
|
||
|
|
margin: 15% 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;
|
||
|
|
}
|
||
|
|
</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="./rh.html">Accueil</a>
|
||
|
|
<a href="./gestion_personnel.html">Gestion du personnel</a>
|
||
|
|
<a href="./gestion-heures.html">Heures</a>
|
||
|
|
<a href="./candidature.html">Candidatures</a>
|
||
|
|
<a href="./mes-informations.html">Mes informations et documents</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="user-section">
|
||
|
|
<div class="user-name">Alice BERGER</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 un professeur..." onkeyup="searchProfessor()">
|
||
|
|
|
||
|
|
<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">
|
||
|
|
<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é par le chef de département</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é par le chef de département</td>
|
||
|
|
<td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2>Heures des Professeurs</h2>
|
||
|
|
<table class="info-table" id="professorTable">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Professeur</th>
|
||
|
|
<th>Nombre d'heures</th>
|
||
|
|
<th>Statut</th>
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
<tr>
|
||
|
|
<td>Denis MONNERAT</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>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 id="myModal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<span class="close" onclick="closeModal()">×</span>
|
||
|
|
<h2>Ajouter des heures</h2>
|
||
|
|
<p id="professorName"></p>
|
||
|
|
|
||
|
|
<label for="hours">Type de cours :</label>
|
||
|
|
<input type="text" id="hours" placeholder="Ex: CM"><br><br>
|
||
|
|
|
||
|
|
<label for="startTime">Heure de début :</label>
|
||
|
|
<input type="time" id="startTime"><br><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">
|
||
|
|
<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">
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<button class="action-btn" 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>
|
||
|
|
<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">
|
||
|
|
<label for="validated-hours">Heures validées :</label>
|
||
|
|
<input type="number" id="validated-hours" class="w3-input" min="0" max="100" value="0">
|
||
|
|
<br>
|
||
|
|
<label for="status">Statut :</label>
|
||
|
|
<select id="status" class="w3-select" onchange="updateButtonColor()">
|
||
|
|
<option value="Validé" class="status-correct">Validé</option>
|
||
|
|
<option value="Correction demandée" class="status-incorrect">Correction demandée</option>
|
||
|
|
<option value="Refusé" class="status-pending">Refusé</option>
|
||
|
|
</select>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<!-- Ajout du champ commentaire -->
|
||
|
|
<label for="comment">Commentaire :</label>
|
||
|
|
<textarea id="comment" class="w3-input" rows="4" placeholder="Ajouter un commentaire..."></textarea>
|
||
|
|
<br><br>
|
||
|
|
|
||
|
|
<button type="button" class="w3-button w3-green btn-validate" onclick="validateHours()">Valider</button>
|
||
|
|
<button type="button" class="w3-button w3-red" onclick="closePopup()">Annuler</button>
|
||
|
|
</form>
|
||
|
|
</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>
|
||
|
|
// Données pour le graphique principal
|
||
|
|
const categories = ['Vacataires', 'Permanents', 'Chercheurs'];
|
||
|
|
const heuresParCategorie = [90, 120, 80]; // Exemple de données
|
||
|
|
|
||
|
|
// Fonction pour initialiser le graphique principal
|
||
|
|
function initMainChart() {
|
||
|
|
const ctx = document.getElementById('mainChart').getContext('2d');
|
||
|
|
new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: categories,
|
||
|
|
datasets: [{
|
||
|
|
label: 'Heures des Professeurs par Catégorie',
|
||
|
|
data: heuresParCategorie,
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(255, 99, 132, 0.2)',
|
||
|
|
'rgba(54, 162, 235, 0.2)',
|
||
|
|
'rgba(255, 206, 86, 0.2)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(255, 99, 132, 1)',
|
||
|
|
'rgba(54, 162, 235, 1)',
|
||
|
|
'rgba(255, 206, 86, 1)'
|
||
|
|
],
|
||
|
|
borderWidth: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
scales: {
|
||
|
|
y: {
|
||
|
|
beginAtZero: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour initialiser le graphique d'un professeur
|
||
|
|
function initProfessorChart(professor, heures) {
|
||
|
|
const ctx = document.getElementById(professor + 'Chart').getContext('2d');
|
||
|
|
new Chart(ctx, {
|
||
|
|
type: 'pie',
|
||
|
|
data: {
|
||
|
|
labels: ['BUT1', 'BUT2', 'BUT3'], // Exemple de matières
|
||
|
|
datasets: [{
|
||
|
|
label: 'Répartition des heures',
|
||
|
|
data: heures,
|
||
|
|
backgroundColor: [
|
||
|
|
'rgba(255, 99, 132, 0.2)',
|
||
|
|
'rgba(54, 162, 235, 0.2)',
|
||
|
|
'rgba(255, 206, 86, 0.2)'
|
||
|
|
],
|
||
|
|
borderColor: [
|
||
|
|
'rgba(255, 99, 132, 1)',
|
||
|
|
'rgba(54, 162, 235, 1)',
|
||
|
|
'rgba(255, 206, 86, 1)'
|
||
|
|
],
|
||
|
|
borderWidth: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
responsive: true,
|
||
|
|
plugins: {
|
||
|
|
legend: {
|
||
|
|
position: 'top',
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
display: true,
|
||
|
|
text: 'Heures de ' + professor
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function openModal(professor) {
|
||
|
|
document.getElementById('professorName').textContent = "Ajouter des heures pour " + professor;
|
||
|
|
document.getElementById('myModal').style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeModal() {
|
||
|
|
document.getElementById('myModal').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
function addHours() {
|
||
|
|
const hours = document.getElementById('hours').value;
|
||
|
|
const formation = document.getElementById('subject').value;
|
||
|
|
const matiere = document.getElementById('matiere').value;
|
||
|
|
|
||
|
|
if (hours && formation && matiere) {
|
||
|
|
closeModal();
|
||
|
|
openConfirmModal();
|
||
|
|
} else {
|
||
|
|
alert("Veuillez remplir toutes les informations.");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function openConfirmModal() {
|
||
|
|
document.getElementById('confirmModal').style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
function closeConfirmModal() {
|
||
|
|
document.getElementById('confirmModal').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction de recherche des professeurs
|
||
|
|
function searchProfessor() {
|
||
|
|
const input = document.getElementById("searchBar").value.toLowerCase();
|
||
|
|
const table = document.getElementById("professorTable");
|
||
|
|
const rows = table.getElementsByTagName("tr");
|
||
|
|
|
||
|
|
for (let i = 1; i < rows.length; i++) {
|
||
|
|
const cells = rows[i].getElementsByTagName("td");
|
||
|
|
if (cells.length > 0) {
|
||
|
|
const professorName = cells[0].innerText.toLowerCase();
|
||
|
|
if (professorName.includes(input)) {
|
||
|
|
rows[i].style.display = "";
|
||
|
|
} else {
|
||
|
|
rows[i].style.display = "none";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Toggle details and change button text
|
||
|
|
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 the button text to "Fermer"
|
||
|
|
|
||
|
|
// Initialiser le graphique du professeur
|
||
|
|
if (button.parentElement.parentElement.cells[0].innerText === "Denis MONNERAT") {
|
||
|
|
initProfessorChart('denis', [10, 40, 70]); // Exemples d'heures
|
||
|
|
} else if (button.parentElement.parentElement.cells[0].innerText === "Maxime MENAULT") {
|
||
|
|
initProfessorChart('menault', [45, 45, 0]); // Exemples d'heures
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
detailsRow.style.display = "none";
|
||
|
|
button.textContent = "Voir"; // Change the button text back to "Voir"
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialiser le graphique principal au chargement de la page
|
||
|
|
window.onload = initMainChart;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let currentRow; // Garde une trace de la ligne à modifier
|
||
|
|
let lastSortedColumnIndex = -1;
|
||
|
|
let lastSortDirection = 'asc';
|
||
|
|
|
||
|
|
// Fonction pour ouvrir la pop-up
|
||
|
|
function openPopup(button) {
|
||
|
|
currentRow = button.parentElement.parentElement;
|
||
|
|
document.getElementById("validated-hours").value = currentRow.cells[4].textContent;
|
||
|
|
document.getElementById("status").value = currentRow.cells[6].textContent; // Correction ici pour le statut
|
||
|
|
updateButtonColor(); // Mettre à jour la couleur du bouton
|
||
|
|
document.getElementById("popup-form").style.display = 'block';
|
||
|
|
document.getElementById("overlay").style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour fermer la pop-up
|
||
|
|
function closePopup() {
|
||
|
|
document.getElementById("popup-form").style.display = 'none';
|
||
|
|
document.getElementById("overlay").style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour changer la couleur du bouton en fonction du statut
|
||
|
|
function updateButtonColor() {
|
||
|
|
const status = document.getElementById("status").value;
|
||
|
|
const button = document.querySelector('.btn-validate');
|
||
|
|
|
||
|
|
button.classList.remove('validé', 'correction-demandée', 'refusé'); // Retirer toutes les classes
|
||
|
|
|
||
|
|
if (status === "Validé") {
|
||
|
|
button.classList.add('validé');
|
||
|
|
button.style.backgroundColor = 'green'; // Vert
|
||
|
|
} else if (status === "Correction demandée") {
|
||
|
|
button.classList.add('correction-demandée');
|
||
|
|
button.style.backgroundColor = 'orange'; // Orange
|
||
|
|
} else {
|
||
|
|
button.classList.add('refusé');
|
||
|
|
button.style.backgroundColor = 'red'; // Rouge
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour valider et mettre à jour les heures et le statut
|
||
|
|
function validateHours() {
|
||
|
|
let validatedHours = document.getElementById("validated-hours").value;
|
||
|
|
let status = document.getElementById("status").value;
|
||
|
|
|
||
|
|
// Mettre à jour les valeurs dans le tableau
|
||
|
|
currentRow.cells[4].textContent = validatedHours;
|
||
|
|
currentRow.cells[6].textContent = status; // Correction ici pour le statut
|
||
|
|
|
||
|
|
// Appliquer les couleurs du statut
|
||
|
|
if (status === "Validé") {
|
||
|
|
currentRow.cells[6].className = "status-correct";
|
||
|
|
} else if (status === "Correction demandée") {
|
||
|
|
currentRow.cells[6].className = "status-incorrect";
|
||
|
|
} else {
|
||
|
|
currentRow.cells[6].className = "status-pending";
|
||
|
|
}
|
||
|
|
|
||
|
|
// Afficher un message de confirmation
|
||
|
|
alert("Heures validées et statut mis à jour!");
|
||
|
|
|
||
|
|
// Fermer la pop-up
|
||
|
|
closePopup();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour trier le tableau
|
||
|
|
function sortTable(columnIndex) {
|
||
|
|
const table = document.getElementById("teaching-hours-table");
|
||
|
|
const tbody = table.getElementsByTagName("tbody")[0];
|
||
|
|
const rows = Array.from(tbody.getElementsByTagName("tr"));
|
||
|
|
|
||
|
|
// Déterminer la direction du tri
|
||
|
|
let direction = 'asc';
|
||
|
|
if (lastSortedColumnIndex === columnIndex) {
|
||
|
|
direction = lastSortDirection === 'asc' ? 'desc' : 'asc';
|
||
|
|
}
|
||
|
|
lastSortedColumnIndex = columnIndex;
|
||
|
|
lastSortDirection = direction;
|
||
|
|
|
||
|
|
// Tri des lignes
|
||
|
|
rows.sort((a, b) => {
|
||
|
|
const aText = a.cells[columnIndex].textContent.trim();
|
||
|
|
const bText = b.cells[columnIndex].textContent.trim();
|
||
|
|
|
||
|
|
if (direction === 'asc') {
|
||
|
|
return aText > bText ? 1 : -1;
|
||
|
|
} else {
|
||
|
|
return aText < bText ? 1 : -1;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Ajout des lignes triées au tableau
|
||
|
|
rows.forEach(row => tbody.appendChild(row));
|
||
|
|
|
||
|
|
// Mettre à jour les flèches
|
||
|
|
updateSortArrows(columnIndex, direction);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fonction pour mettre à jour les flèches de tri
|
||
|
|
function updateSortArrows(columnIndex, direction) {
|
||
|
|
const headers = document.querySelectorAll("th.sortable");
|
||
|
|
headers.forEach((header, index) => {
|
||
|
|
const arrows = header.querySelectorAll('.arrow');
|
||
|
|
arrows[0].style.display = (index === columnIndex && direction === 'asc') ? 'inline' : 'none'; // Flèche vers le haut
|
||
|
|
arrows[1].style.display = (index === columnIndex && direction === 'desc') ? 'inline' : 'none'; // Flèche vers le bas
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
let currentVacationRow = null;
|
||
|
|
|
||
|
|
// Ouvrir la modal pour ajouter une nouvelle offre de vacation
|
||
|
|
function openVacationModal() {
|
||
|
|
document.getElementById('vacationModal').style.display = 'block';
|
||
|
|
document.getElementById('modal-title').textContent = "Ajouter une Offre de Vacation";
|
||
|
|
document.getElementById('offerName').value = '';
|
||
|
|
document.getElementById('offerDate').value = '';
|
||
|
|
document.getElementById('offerType').value = '';
|
||
|
|
document.getElementById('update-btn').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fermer la modal
|
||
|
|
function closeVacationModal() {
|
||
|
|
document.getElementById('vacationModal').style.display = 'none';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Ajouter une nouvelle offre de vacation
|
||
|
|
function addVacationOffer() {
|
||
|
|
const offerName = document.getElementById('offerName').value;
|
||
|
|
const offerDescription = document.getElementById('offerDescription').value;
|
||
|
|
const offerDate = document.getElementById('offerDate').value;
|
||
|
|
const offerHours = document.getElementById('offerHours').value;
|
||
|
|
|
||
|
|
const offerTypes = [];
|
||
|
|
if (document.getElementById('cm').checked) offerTypes.push('CM');
|
||
|
|
if (document.getElementById('td').checked) offerTypes.push('TD');
|
||
|
|
if (document.getElementById('tp').checked) offerTypes.push('TP');
|
||
|
|
if (document.getElementById('suivi').checked) offerTypes.push('Suivi');
|
||
|
|
|
||
|
|
// Here you would add the logic to store or process the vacation offer.
|
||
|
|
console.log('Offer Name:', offerName);
|
||
|
|
console.log('Description:', offerDescription);
|
||
|
|
console.log('Date:', offerDate);
|
||
|
|
console.log('Hours:', offerHours);
|
||
|
|
console.log('Types:', offerTypes.join(', '));
|
||
|
|
|
||
|
|
// Close the modal after adding
|
||
|
|
closeVacationModal();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Éditer une offre de vacation
|
||
|
|
function editVacationOffer(button) {
|
||
|
|
currentVacationRow = button.parentElement.parentElement;
|
||
|
|
document.getElementById('offerName').value = currentVacationRow.cells[0].textContent;
|
||
|
|
document.getElementById('offerDate').value = currentVacationRow.cells[1].textContent;
|
||
|
|
document.getElementById('offerType').value = currentVacationRow.cells[2].textContent;
|
||
|
|
|
||
|
|
document.getElementById('modal-title').textContent = "Modifier l'Offre de Vacation";
|
||
|
|
document.getElementById('update-btn').style.display = 'block';
|
||
|
|
document.getElementById('vacationModal').style.display = 'block';
|
||
|
|
}
|
||
|
|
|
||
|
|
// Mettre à jour une offre de vacation
|
||
|
|
function updateVacationOffer() {
|
||
|
|
if (currentVacationRow) {
|
||
|
|
currentVacationRow.cells[0].textContent = document.getElementById('offerName').value;
|
||
|
|
currentVacationRow.cells[1].textContent = document.getElementById('offerDate').value;
|
||
|
|
currentVacationRow.cells[2].textContent = document.getElementById('offerType').value;
|
||
|
|
closeVacationModal();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Supprimer une offre de vacation
|
||
|
|
function deleteVacationOffer(button) {
|
||
|
|
const row = button.parentElement.parentElement;
|
||
|
|
row.parentElement.removeChild(row);
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|